preparing session layout

net/web/src/session/Session.jsx

@@ -1,12 +1,22 @@
 import { useEffect, useContext } from 'react';
+import { Drawer } from 'antd';
 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';
+import { useSession } from './useSession.hook';
+import { Conversation } from './conversation/Conversation';
+import { Details } from './details/Details';
+import { Identity } from './identity/Identity';
+import { Channels } from './channels/Channels';
+import { Cards } from './cards/Cards';
+import { Contact } from './contact/Contact';
+import { Profile } from './profile/Profile';
+import { Welcome } from './welcome/Welcome';
 
 export function Session() {
 
+  const { state, actions } = useSession();
   const app = useContext(AppContext);
   const viewport = useContext(ViewportContext);
   const navigate = useNavigate();
@@ -23,17 +33,108 @@ export function Session() {
     <SessionWrapper>
       { (viewport.state.display === 'xlarge') && (
         <div class="desktop-layout">
-          <Button type="primary" onClick={app.actions.logout}>Logout</Button>
+          <div class="left">
+            <Identity />
+            <Channels />
+          </div>
+          <div class="center">
+            { state.conversation && (
+              <div class="reframe">
+                <Conversation cardId={state.cardId} conversationId={state.conversationId} />
+              </div>
+            )}
+            { state.contact && (
+              <div class="reframe">
+                <Contact guid={state.contactGuid} />
+              </div>
+            )}
+            { state.profile && (
+              <div class="reframe">
+                <Profile />
+              </div>
+            )}
+          </div>
+          <div class="right">
+            <Welcome />
+            { state.conversation && (
+              <div class="reframe">
+                <Details cardId={state.cardId} conversationId={state.conversationId} />
+              </div>
+            )}
+            { state.cards && (
+              <div class="reframe">
+                <Cards />
+              </div>
+            )}
+          </div>
         </div>
       )}
       { (viewport.state.display === 'large' || viewport.state.display === 'medium') && (
         <div class="tablet-layout">
-          <Button type="primary" onClick={app.actions.logout}>Logout</Button>
+          <div class="left">
+            <Identity />
+            <Channels />
+          </div>
+          <div class="right">
+            <Welcome />
+            { state.conversation && (
+              <div class="reframe">
+                <Conversation cardId={state.cardId} conversationId={state.conversationId} />
+              </div>
+            )}
+            <Drawer width={'33%'} closable={false} onClose={actions.closeDetails} visible={state.details} zIndex={10}>
+              { state.details && (
+                <Details cardId={state.cardId} conversationId={state.conversationId} />
+              )}
+            </Drawer>
+            <Drawer width={'33%'} closable={false} onClose={actions.closeCards} visible={state.cards} zIndex={20}>
+              { state.cards && (
+                <Cards />
+              )}
+              <Drawer width={'33%'} closable={false} onClose={actions.closeContact} visible={state.contact} zIndex={30}>
+                { state.contact && (
+                  <Contact guid={state.contactGuid} />
+                )}
+              </Drawer>
+            </Drawer>
+            <Drawer width={'33%'} closable={false} onClose={actions.closeProfile} visible={state.profile} zIndex={40}>
+              { state.profile && (
+                <Profile />
+              )}
+            </Drawer>
+          </div>
         </div>
       )}
       { (viewport.state.display === 'small') && (
         <div class="mobile-layout">
-          <Button type="primary" onClick={app.actions.logout}>Logout</Button>
+          <div class="center">
+            <Channels />
+            { state.conversation && (
+              <div class="reframe">
+                <Conversation cardId={state.cardId} conversationId={state.conversationId} />
+              </div>
+            )}
+            { state.details && (
+              <div class="reframe">
+                <Details cardId={state.cardId} conversation={state.conversationId} />
+              </div>
+            )}
+            { state.cards && (
+              <div class="reframe">
+                <Cards />
+              </div>
+            )}
+            { state.contact && (
+              <div class="reframe">
+                <Contact guid={state.contactGuid} />
+              </div>
+            )}
+            { state.profile && (
+              <div class="reframe">
+                <Profile />
+              </div>
+            )}
+          </div>
         </div>
       )}
     </SessionWrapper>

net/web/src/session/Session.styled.js

@@ -4,12 +4,30 @@ export const SessionWrapper = styled.div`
   height: 100%;
   width: 100%;
 
+  .reframe {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+
   .desktop-layout {
+    .left {
+    }
+    .center {
+    }
+    .right {
+    }
   }
 
   .tablet-layout {
+    .left {
+    }
+    .right {
+    }
   }
 
   .mobile-layout {
+    .center {
+    }
   }
 `;

net/web/src/session/cards/Cards.jsx

@@ -0,0 +1,4 @@
+export function Cards() {
+  return <div>CARDS</div>
+}
+

net/web/src/session/channels/Channels.jsx

@@ -0,0 +1,4 @@
+export function Channels() {
+  return <></>
+}
+

net/web/src/session/contact/Contact.jsx

@@ -0,0 +1,4 @@
+export function Contact() {
+  return <div>CONTACT</div>
+}
+

net/web/src/session/conversation/Conversation.jsx

@@ -0,0 +1,4 @@
+export function Conversation() {
+  return <></>
+}
+

net/web/src/session/details/Details.jsx

@@ -0,0 +1,4 @@
+export function Details() {
+  return <></>
+}
+

net/web/src/session/identity/Identity.jsx

@@ -0,0 +1,11 @@
+import { useContext } from 'react';
+import { AppContext } from 'context/AppContext';
+import { Button } from 'antd';
+
+export function Identity() {
+
+  const app = useContext(AppContext);
+
+  return <Button type="primary" onClick={() => app.actions.logout()}>Logout</Button>
+}
+

net/web/src/session/profile/Profile.jsx

@@ -0,0 +1,4 @@
+export function Profile() {
+  return <></>
+}
+

net/web/src/session/useSession.hook.js

@@ -0,0 +1,46 @@
+import { useState, useEffect } from 'react';
+
+export function useSession() {
+
+  const [state, setState] = useState({
+    conversation: false,
+    details: false,
+    cards: false,
+    contact: false,
+    profile: false,
+  });
+
+  const updateState = (value) => {
+    setState((s) => ({ ...s, ...value }));
+  }
+
+  useEffect(() => {
+    setTimeout(() => {
+      updateState({ cards: true });
+    }, 1000);
+    setTimeout(() => {
+      updateState({ contact: true });
+    }, 2000);
+  }, []);
+
+  const actions = {
+    closeDetails: () => {
+      updateState({ details: false });
+    },
+    closeCards: () => {
+      updateState({ cards: false });
+    },
+    closeContact: () => {
+      updateState({ contact: false });
+    },
+    closeProfile: () => {
+      updateState({ profile: false });
+    },
+    closeConversation: () => {
+      updateState({ conversation: false });
+    },
+  };
+
+  return { state, actions };
+}
+

net/web/src/session/welcome/Welcome.jsx

@@ -0,0 +1,4 @@
+export function Welcome() {
+  return <></>;
+}
+