adding conversation and details to session

net/web/src/session/Session.jsx

@@ -54,6 +54,19 @@ export function Session() {
     actions.closeAccount();
   }
 
+  const openConversation = () => {
+    actions.openConversation();
+    actions.closeCards();
+    actions.closeContact();
+    actions.closeAccount();
+    actions.closeProfile();
+  }
+
+  const closeConversation = () => {
+    actions.closeConversation();
+    actions.closeDetails();
+  }
+
   return (
     <SessionWrapper>
       { (state.display === 'xlarge') && (
@@ -61,13 +74,13 @@ export function Session() {
           <div class="left">
             <Identity openAccount={openAccount} openCards={openCards} cardUpdated={state.cardUpdated} />
             <div class="bottom">
-              <Channels />
+              <Channels open={openConversation} />
             </div>
           </div>
           <div class="center">
             { state.conversation && (
               <div class="reframe">
-                <Conversation cardId={state.cardId} conversationId={state.conversationId} />
+                <Conversation openDetails={actions.openDetails} cardId={state.cardId} conversationId={state.conversationId} />
               </div>
             )}
             { state.contact && (
@@ -83,9 +96,10 @@ export function Session() {
           </div>
           <div class="right">
             <Welcome />
-            { state.conversation && (
+            { (state.conversation || state.details) && (
               <div class="reframe">
-                <Details cardId={state.cardId} conversationId={state.conversationId} />
+                <Details closeDetails={actions.closeDetails} closeConversation={closeConversation} openContact={actions.openContact}
+                    cardId={state.cardId} conversationId={state.conversationId} />
               </div>
             )}
             { state.cards && (
@@ -111,19 +125,20 @@ export function Session() {
           <div class="left">
             <Identity openAccount={actions.openProfile} openCards={actions.openCards} cardUpdated={state.cardUpdated} />
             <div class="bottom">
-              <Channels />
+              <Channels open={actions.openConversation} />
             </div>
           </div>
           <div class="right">
             <Welcome />
             { state.conversation && (
               <div class="reframe">
-                <Conversation cardId={state.cardId} conversationId={state.conversationId} />
+                <Conversation openDetails={actions.openDetails} cardId={state.cardId} conversationId={state.conversationId} />
               </div>
             )}
             <Drawer bodyStyle={{ padding: 0 }} width={'33%'} closable={false} onClose={actions.closeDetails} visible={state.details} zIndex={10}>
               { state.details && (
-                <Details cardId={state.cardId} conversationId={state.conversationId} />
+                <Details closeDetails={actions.closeDetails} closeConversation={closeConversation} openContact={actions.openContact}
+                    cardId={state.cardId} conversationId={state.conversationId} />
               )}
             </Drawer>
             <Drawer bodyStyle={{ padding: 0 }} width={'33%'} closable={false} onClose={closeCards} visible={state.cards} zIndex={20} push={state.contact}>
@@ -153,16 +168,17 @@ export function Session() {
         <div class="mobile-layout noselect">
           <div class="top">
             <div class="reframe">
-              <Channels />
+              <Channels open={actions.openConversation} />
             </div>
             { state.conversation && (
               <div class="reframe">
-                <Conversation cardId={state.cardId} conversationId={state.conversationId} />
+                <Conversation openDetails={actions.openDetails} cardId={state.cardId} conversationId={state.conversationId} />
               </div>
             )}
             { state.details && (
               <div class="reframe">
-                <Details cardId={state.cardId} conversation={state.conversationId} />
+                <Details closeDetails={actions.closeDetails} closeConversation={closeConversation} openContact={actions.openContact} 
+                    cardId={state.cardId} conversation={state.conversationId} />
               </div>
             )}
             { state.cards && (

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

@@ -4,12 +4,12 @@ import { CommentOutlined, SearchOutlined } from '@ant-design/icons';
 import { useChannels } from './useChannels.hook';
 import { ChannelItem } from './channelItem/ChannelItem';
 
-export function Channels() {
+export function Channels({ open }) {
 
   const { state, actions } = useChannels();
 
   return (
-    <ChannelsWrapper>
+    <ChannelsWrapper onClick={open} >
       <div class="search">
         <div class="filter">
           <Input bordered={false} allowClear={true} placeholder="Channels" prefix={<SearchOutlined />}

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

@@ -1,4 +1,6 @@
-export function Conversation() {
-  return <></>
+import { ConversationWrapper } from './Conversation.styled';
+
+export function Conversation({ openDetails }) {
+  return <ConversationWrapper onClick={openDetails}>CONVERSATION</ConversationWrapper>
 }
 

net/web/src/session/conversation/Conversation.styled.js

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+import Colors from 'constants/Colors';
+
+export const ConversationWrapper = styled.div`
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: ${Colors.statsForm};
+`

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

@@ -1,4 +1,18 @@
-export function Details() {
-  return <></>
+import { DetailsWrapper } from './Details.styled';
+import { DoubleRightOutlined } from '@ant-design/icons';
+
+export function Details({ closeDetails, closeConversation, openContact }) {
+  return (
+    <DetailsWrapper>
+      <div class="header">
+        <div class="label">Conversation</div>
+        <div class="dismiss" onClick={closeConversation}>
+          <DoubleRightOutlined />
+        </div>
+      </div>
+      <div class="content" onClick={closeDetails}>
+      </div>
+    </DetailsWrapper>
+  );
 }
 

net/web/src/session/details/Details.styled.js

@@ -0,0 +1,46 @@
+import styled from 'styled-components';
+import Colors from 'constants/Colors';
+
+export const DetailsWrapper = styled.div`
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: ${Colors.statsForm};
+
+  .header {
+    width: 100%;
+    height: 48px;
+    border-bottom: 1px solid ${Colors.statsDivider};
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+    padding: 16px;
+
+    .label {
+      flex-grow: 1;
+      display: flex;
+      justify-content: center;
+    }
+
+    .dismiss {
+      font-size: 18px;
+      color: ${Colors.text};
+      cursor: pointer;
+    }
+  }
+
+  .content {
+    min-height: 0;
+    width: 100%;
+    overflow: scroll;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding-top: 32px;
+    align-items: center;
+    flex-grow: 1;
+  }
+`

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

@@ -91,9 +91,18 @@ export function useSession() {
     closeAccount: () => {
       updateState({ account: false });
     },
+    openConversation: () => {
+      updateState({ conversation: true });
+    },
     closeConversation: () => {
       updateState({ conversation: false });
     },
+    openDetails: () => {
+      updateState({ details: true });
+    },
+    closeDetails: () => {
+      updateState({ details: false });
+    },
   };
 
   return { state, actions };