From bdd7ecee5a9784440b9e6508dde082909efe8db4 Mon Sep 17 00:00:00 2001 From: Roland Osborne Date: Fri, 5 Aug 2022 12:36:07 -0700 Subject: [PATCH] preparing session screen --- net/web/src/App.js | 10 ++++- net/web/src/access/Access.jsx | 2 +- net/web/src/admin/Admin.jsx | 17 +++++++- net/web/src/admin/Admin.styled.js | 31 +++++++++++++++ net/web/src/admin/useAdmin.hook.js | 25 ++++++++++++ .../context/useConversationContext.hook.js | 24 ++++++------ net/web/src/session/Session.jsx | 39 ++++++++++++++++++- net/web/src/session/Session.styled.js | 15 +++++++ 8 files changed, 146 insertions(+), 17 deletions(-) create mode 100644 net/web/src/admin/Admin.styled.js create mode 100644 net/web/src/admin/useAdmin.hook.js create mode 100644 net/web/src/session/Session.styled.js diff --git a/net/web/src/App.js b/net/web/src/App.js index 55febc39..99f6c52b 100644 --- a/net/web/src/App.js +++ b/net/web/src/App.js @@ -12,6 +12,7 @@ import { ChannelContextProvider } from 'context/ChannelContext'; import { StoreContextProvider } from 'context/StoreContext'; import { UploadContextProvider } from 'context/UploadContext'; import { ViewportContextProvider } from 'context/ViewportContext'; +import { ConversationContextProvider } from 'context/ConversationContext'; import { AppWrapper } from 'App.styled'; import { Root } from './root/Root'; @@ -36,10 +37,15 @@ function App() { } /> + } /> } /> } /> - } /> - } /> + + + + }> + diff --git a/net/web/src/access/Access.jsx b/net/web/src/access/Access.jsx index e1b2a825..d6411816 100644 --- a/net/web/src/access/Access.jsx +++ b/net/web/src/access/Access.jsx @@ -37,7 +37,7 @@ export function Access({ mode }) { { (viewport.state.display === 'large' || viewport.state.display === 'xlarge') && (
- {login} + Databag Splash
diff --git a/net/web/src/admin/Admin.jsx b/net/web/src/admin/Admin.jsx index f9cf6a89..d940e001 100644 --- a/net/web/src/admin/Admin.jsx +++ b/net/web/src/admin/Admin.jsx @@ -1,5 +1,20 @@ +import { UserOutlined } from '@ant-design/icons'; +import { AdminWrapper } from './Admin.styled'; +import { useAdmin } from './useAdmin.hook'; export function Admin() { - return <> + + const { state, actions } = useAdmin(); + + return ( + +
+ Databag +
actions.onUser()}> + +
+
+ + ); } diff --git a/net/web/src/admin/Admin.styled.js b/net/web/src/admin/Admin.styled.js new file mode 100644 index 00000000..71613309 --- /dev/null +++ b/net/web/src/admin/Admin.styled.js @@ -0,0 +1,31 @@ +import styled from 'styled-components'; +import Colors from 'constants/Colors'; + +export const AdminWrapper = styled.div` + max-width: 400px; + width: 90%; + height: 90%; + display: flex; + flex-direction: column; + + .app-title { + font-size: 24px; + display: flex; + align-items: flex-start; + justify-content: center; + flex: 1; + color: ${Colors.grey}; + + .user { + color: ${Colors.grey}; + position: absolute; + top: 0px; + right: 0px; + font-size: 20px; + cursor: pointer; + margin: 16px; + } + } +`; + + diff --git a/net/web/src/admin/useAdmin.hook.js b/net/web/src/admin/useAdmin.hook.js new file mode 100644 index 00000000..65939be9 --- /dev/null +++ b/net/web/src/admin/useAdmin.hook.js @@ -0,0 +1,25 @@ +import { useContext, useState } from 'react'; +import { AppContext } from 'context/AppContext'; +import { useNavigate } from "react-router-dom"; + +export function useAdmin() { + + const [state, setState] = useState({ + }); + + const navigate = useNavigate(); + const app = useContext(AppContext); + + const updateState = (value) => { + setState((s) => ({ ...s, ...value })); + } + + const actions = { + onUser: () => { + navigate('/login'); + }, + }; + + return { state, actions }; +} + diff --git a/net/web/src/context/useConversationContext.hook.js b/net/web/src/context/useConversationContext.hook.js index a4270318..3a0a8f43 100644 --- a/net/web/src/context/useConversationContext.hook.js +++ b/net/web/src/context/useConversationContext.hook.js @@ -89,7 +89,7 @@ export function useConversationContext() { members.add(conversation.guid); } for (let member of conversation.data.channelDetail.members) { - if (profile.state.profile.guid != member) { + if (profile.state.profile.guid !== member) { members.add(member); } } @@ -132,7 +132,7 @@ export function useConversationContext() { const setTopicDelta = async (delta, curView) => { for (let topic of delta) { if (topic.data == null) { - if (curView == view.current) { + if (curView === view.current) { topics.current.delete(topic.id); } } @@ -141,7 +141,7 @@ export function useConversationContext() { if (cur == null) { cur = { id: topic.id, data: {} }; } - if (topic.data.detailRevision != cur.data.detailRevision) { + if (topic.data.detailRevision !== cur.data.detailRevision) { if(topic.data.topicDetail) { cur.data.topicDetail = topic.data.topicDetail; cur.data.detailRevision = topic.data.detailRevision; @@ -153,7 +153,7 @@ export function useConversationContext() { } } cur.revision = topic.revision; - if (curView == view.current) { + if (curView === view.current) { topics.current.set(topic.id, cur); } } @@ -163,7 +163,7 @@ export function useConversationContext() { const setTopics = async (ev) => { const curView = view.current; try { - if (ev.type == EVENT_OPEN) { + if (ev.type === EVENT_OPEN) { const { cardId, channelId } = ev.data; channelView.current.cardId = cardId; channelView.current.channelId = channelId; @@ -175,7 +175,7 @@ export function useConversationContext() { channelView.current.revision = delta.revision; channelView.current.begin = delta.marker; } - else if (ev.type == EVENT_MORE) { + else if (ev.type === EVENT_MORE) { if (channelView.current.init) { channelView.current.batch += 1; let delta = await getTopicDelta(null, channelView.current.batch * TOPIC_BATCH, null, channelView.current.begin); @@ -183,16 +183,16 @@ export function useConversationContext() { channelView.current.begin = delta.marker; } } - else if (ev.type == EVENT_UPDATE || ev.type == EVENT_RESYNC) { + else if (ev.type === EVENT_UPDATE || ev.type === EVENT_RESYNC) { let deltaRevision = getChannelRevision(); - if (channelView.current.init && deltaRevision != channelView.current.revision) { + if (channelView.current.init && deltaRevision !== channelView.current.revision) { let delta = await getTopicDelta(channelView.current.revision, null, channelView.current.begin, null); await setTopicDelta(delta.topics, curView); channelView.current.revision = delta.revision; } } - if (curView == view.current) { + if (curView === view.current) { let chan = getChannel(); let subject = getSubject(chan); let contacts = getContacts(chan); @@ -211,7 +211,7 @@ export function useConversationContext() { catch (err) { console.log(err); updateState({ error: true }); - if (ev.type == EVENT_RESYNC) { + if (ev.type === EVENT_RESYNC) { window.alert("failed to syncrhonize conversation"); } } @@ -222,14 +222,14 @@ export function useConversationContext() { return; } - if (serialize.current == 0) { + if (serialize.current === 0) { serialize.current++; while (events.current.length > 0) { // collapse updates while (events.current.length > 1) { - if(events.current[0].type == EVENT_UPDATE && events.current[1].type == EVENT_UPDATE) { + if(events.current[0].type === EVENT_UPDATE && events.current[1].type === EVENT_UPDATE) { events.current.shift(); } else { diff --git a/net/web/src/session/Session.jsx b/net/web/src/session/Session.jsx index 9451c342..daf90673 100644 --- a/net/web/src/session/Session.jsx +++ b/net/web/src/session/Session.jsx @@ -1,5 +1,42 @@ +import { useEffect, useContext } from 'react'; +import { useNavigate } from 'react-router-dom'; +import { SessionWrapper } from './Session.styled'; +import { Button } from 'antd'; +import { AppContext } from 'context/AppContext'; +import { ViewportContext } from 'context/ViewportContext'; export function Session() { - return <> + + const app = useContext(AppContext); + const viewport = useContext(ViewportContext); + const navigate = useNavigate(); + + useEffect(() => { + if (app.state) { + if (!app.state.access) { + navigate('/'); + } + } + }, [app, navigate]); + + return ( + + { (viewport.state.display === 'xlarge') && ( +
+ +
+ )} + { (viewport.state.display === 'large' || viewport.state.display === 'medium') && ( +
+ +
+ )} + { (viewport.state.display === 'small') && ( +
+ +
+ )} + + ); } diff --git a/net/web/src/session/Session.styled.js b/net/web/src/session/Session.styled.js new file mode 100644 index 00000000..775e438a --- /dev/null +++ b/net/web/src/session/Session.styled.js @@ -0,0 +1,15 @@ +import styled from 'styled-components'; + +export const SessionWrapper = styled.div` + height: 100%; + width: 100%; + + .desktop-layout { + } + + .tablet-layout { + } + + .mobile-layout { + } +`;