preparing session screen

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() {
                           <Router>
                             <Routes>
                               <Route path="/" element={ <Root /> } />
+                              <Route path="/admin" element={ <Admin /> } />
                               <Route path="/login" element={ <Access mode="login" /> } />
                               <Route path="/create" element={ <Access mode="create" /> } />
-                              <Route path="/session" element={ <Session /> } />
+                              <Route path="/session" element={
-                              <Route path="/admin" element={ <Admin /> } />
+                                <ConversationContextProvider>
+                                  <Session />
+                                </ConversationContextProvider>
+                              }>
+                              </Route>
                             </Routes>
                           </Router>
                         </AppWrapper>

net/web/src/access/Access.jsx

@@ -37,7 +37,7 @@ export function Access({ mode }) {
       { (viewport.state.display === 'large' || viewport.state.display === 'xlarge') && (
         <div class="split-layout">
           <div class="left">
-            <img class="splash" src={login} alt={login} />
+            <img class="splash" src={login} alt="Databag Splash" />
           </div>
           <div class="right">
             <Prompt />

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 (
+    <AdminWrapper>
+      <div class="app-title">
+        <span>Databag</span>
+        <div class="user" onClick={() => actions.onUser()}>
+          <UserOutlined />
+        </div>
+      </div>
+    </AdminWrapper>
+  );
 }
 

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;
+    }
+  }
+`;
+
+

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 };
+}
+

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 {

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 (
+    <SessionWrapper>
+      { (viewport.state.display === 'xlarge') && (
+        <div class="desktop-layout">
+          <Button type="primary" onClick={app.actions.logout}>Logout</Button>
+        </div>
+      )}
+      { (viewport.state.display === 'large' || viewport.state.display === 'medium') && (
+        <div class="tablet-layout">
+          <Button type="primary" onClick={app.actions.logout}>Logout</Button>
+        </div>
+      )}
+      { (viewport.state.display === 'small') && (
+        <div class="mobile-layout">
+          <Button type="primary" onClick={app.actions.logout}>Logout</Button>
+        </div>
+      )}
+    </SessionWrapper>
+  );
 }
 

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 {
+  }
+`;