From 8401a2295ac8930f490c9037423a376834f1ab75 Mon Sep 17 00:00:00 2001
From: Roland Osborne <roland.osborne@gmail.com>
Date: Tue, 16 Aug 2022 14:22:07 -0700
Subject: [PATCH] added listing page for adding contacts

---
 net/web/src/session/Session.jsx               | 37 +++++++++++++++----
 net/web/src/session/cards/Cards.jsx           | 12 +++---
 .../src/session/cards/cardItem/CardItem.jsx   |  4 +-
 net/web/src/session/cards/useCards.hook.js    |  6 +--
 .../src/session/channels/Channels.styled.js   |  4 +-
 net/web/src/session/contact/Contact.jsx       |  6 ++-
 net/web/src/session/contact/Contact.styled.js | 11 ++++++
 net/web/src/session/listing/Listing.jsx       |  4 ++
 net/web/src/session/profile/Profile.jsx       |  5 +--
 net/web/src/session/useSession.hook.js        | 13 +++++++
 10 files changed, 75 insertions(+), 27 deletions(-)
 create mode 100644 net/web/src/session/contact/Contact.styled.js
 create mode 100644 net/web/src/session/listing/Listing.jsx

diff --git a/net/web/src/session/Session.jsx b/net/web/src/session/Session.jsx
index fbe12aa0..291ae7b9 100644
--- a/net/web/src/session/Session.jsx
+++ b/net/web/src/session/Session.jsx
@@ -12,6 +12,7 @@ import { Channels } from './channels/Channels';
 import { Cards } from './cards/Cards';
 import { Contact } from './contact/Contact';
 import { Profile } from './profile/Profile';
+import { Listing } from './listing/Listing';
 import { Account } from './account/Account';
 import { Welcome } from './welcome/Welcome';
 import { BottomNav } from './bottomNav/BottomNav';
@@ -40,6 +41,13 @@ export function Session() {
     actions.openAccount();
     actions.closeCards();
     actions.closeContact();
+    actions.closeListing();
+  }
+
+  const closeCards = () => {
+    actions.closeCards();
+    actions.closeContact();
+    actions.closeListing();
   }
 
   const openCards = () => {
@@ -48,7 +56,7 @@ export function Session() {
     actions.closeAccount();
   }
 
-console.log("STATE", state);
+console.log(state);
 
   return (
     <SessionWrapper>
@@ -68,7 +76,7 @@ console.log("STATE", state);
             )}
             { state.contact && (
               <div class="reframe">
-                <Contact guid={state.contactGuid} />
+                <Contact close={actions.closeContact} guid={state.contactGuid} node={state.contactNode} />
               </div>
             )}
             { state.profile && (
@@ -86,7 +94,11 @@ console.log("STATE", state);
             )}
             { state.cards && (
               <div class="reframe">
-                <Cards close={actions.closeCards} />
+                <Cards closeCards={closeCards} openContact={actions.openContact} openListing={actions.openListing} />
+                <Drawer title="Basic Drawer" placement="bottom" closable={false} visible={state.listing}
+                    onClose={actions.closeListing} getContainer={false} height={'80%'} style={{ position: 'absolute', overflow: 'hidden' }}>
+                  <Listing openContact={actions.openContact} />
+                </Drawer>
               </div>
             )}
             { (state.profile || state.account) && (
@@ -117,13 +129,17 @@ console.log("STATE", state);
                 <Details cardId={state.cardId} conversationId={state.conversationId} />
               )}
             </Drawer>
-            <Drawer bodyStyle={{ padding: 0 }} width={'33%'} closable={false} onClose={actions.closeCards} visible={state.cards} zIndex={20}>
+            <Drawer bodyStyle={{ padding: 0 }} width={'33%'} closable={false} onClose={actions.closeCards} visible={state.cards} zIndex={20} push={state.contact}>
               { state.cards && (
-                <Cards close={actions.closeCards} />
+                <Cards closeCards={closeCards} openContact={actions.openContact} openListing={actions.openListing} />
               )}
+              <Drawer title="Basic Drawer" placement="bottom" closable={false} visible={state.listing}
+                  onClose={actions.closeListing} getContainer={false} height={'80%'} style={{ overflow: 'hidden', position: 'absolute' }}>
+                <Listing openContact={actions.openContact} />
+              </Drawer>
               <Drawer bodyStyle={{ padding: 0 }} width={'33%'} closable={false} onClose={actions.closeContact} visible={state.contact} zIndex={30}>
                 { state.contact && (
-                  <Contact guid={state.contactGuid} />
+                  <Contact close={actions.closeContact} guid={state.contactGuid} node={state.contactNode} />
                 )}
               </Drawer>
             </Drawer>
@@ -153,12 +169,17 @@ console.log("STATE", state);
             )}
             { state.cards && (
               <div class="reframe">
-                <Cards close={actions.closeCards} />
+                <Cards openContact={actions.openContact} openListing={actions.openListing} />
+              </div>
+            )}
+            { state.listing && (
+              <div class="reframe">
+                <Listing openContact={actions.openContact} />
               </div>
             )}
             { state.contact && (
               <div class="reframe">
-                <Contact guid={state.contactGuid} />
+                <Contact close={actions.closeContact} guid={state.contactGuid} node={state.contactNode} />
               </div>
             )}
             { (state.profile || state.account) && (
diff --git a/net/web/src/session/cards/Cards.jsx b/net/web/src/session/cards/Cards.jsx
index 6d247f0c..8280a0b1 100644
--- a/net/web/src/session/cards/Cards.jsx
+++ b/net/web/src/session/cards/Cards.jsx
@@ -1,10 +1,10 @@
-import { Input, List } from 'antd';
+import { Drawer, Input, List } from 'antd';
 import { CardsWrapper } from './Cards.styled';
 import { SortAscendingOutlined, DoubleRightOutlined, UserOutlined, SearchOutlined } from '@ant-design/icons';
 import { useCards } from './useCards.hook';
 import { CardItem } from './cardItem/CardItem';
 
-export function Cards({ close }) {
+export function Cards({ closeCards, openContact, openListing }) {
 
   const { state, actions } = useCards();
 
@@ -35,7 +35,7 @@ export function Cards({ close }) {
         )}
         { state.display !== 'small' && (
           <div class="inline">
-            <div class="dismiss" onClick={close} >
+            <div class="dismiss" onClick={closeCards} >
               <DoubleRightOutlined />
             </div>
           </div>
@@ -44,18 +44,18 @@ export function Cards({ close }) {
       <div class="view">
         <List local={{ emptyText: '' }} itemLayout="horizontal" dataSource={state.cards} gutter="0"
           renderItem={item => (
-            <CardItem item={item} />
+            <CardItem item={item} open={openContact} />
           )} />
       </div>
       { state.display !== 'small' && (
         <div class="bar">
-          <div class="add">
+          <div class="add" onClick={openListing}>
             <UserOutlined />
             <div class="label">New Contact</div>
           </div>
         </div>
       )}
-    </CardsWrapper>
+      </CardsWrapper>
   );
 }
 
diff --git a/net/web/src/session/cards/cardItem/CardItem.jsx b/net/web/src/session/cards/cardItem/CardItem.jsx
index f610f3b4..e2a2cc1e 100644
--- a/net/web/src/session/cards/cardItem/CardItem.jsx
+++ b/net/web/src/session/cards/cardItem/CardItem.jsx
@@ -7,7 +7,7 @@ import { Logo } from 'logo/Logo';
 import { Tooltip } from 'antd';
 import { ExclamationCircleOutlined } from '@ant-design/icons';
 
-export function CardItem({ item }) {
+export function CardItem({ item, open }) {
 
   const { state, actions } = useCardItem(item);  
   const profile = item?.data?.cardProfile;
@@ -21,7 +21,7 @@ export function CardItem({ item }) {
   }
 
   return (
-    <CardItemWrapper>
+    <CardItemWrapper onClick={() => open(profile.guid, profile.node)}>
       <Logo url={state.logo} width={32} height={32} radius={8} />
       <div class="details">
         <div class="name">{ profile?.name }</div>
diff --git a/net/web/src/session/cards/useCards.hook.js b/net/web/src/session/cards/useCards.hook.js
index d50ad60e..5671f7b2 100644
--- a/net/web/src/session/cards/useCards.hook.js
+++ b/net/web/src/session/cards/useCards.hook.js
@@ -10,8 +10,8 @@ export function useCards() {
     sorted: false,
     display: null,
     cards: [],
-    busy: false }
-  );
+    busy: false 
+  });
 
   const card = useContext(CardContext);
   const viewport = useContext(ViewportContext);
@@ -55,7 +55,7 @@ export function useCards() {
         const aUpdated = a?.data?.cardDetail?.statusUpdated;
         const bUpdated = b?.data?.cardDetail?.statusUpdated;
 
-        if ((aUpdated && !bUpdated) || aUpdated && bUpdated && aUpdated > bUpdated) {
+        if ((aUpdated && !bUpdated) || (aUpdated && bUpdated && aUpdated > bUpdated)) {
           return -1;
         }
         return 1;
diff --git a/net/web/src/session/channels/Channels.styled.js b/net/web/src/session/channels/Channels.styled.js
index 27e51de7..40c15ac1 100644
--- a/net/web/src/session/channels/Channels.styled.js
+++ b/net/web/src/session/channels/Channels.styled.js
@@ -49,8 +49,8 @@ export const ChannelsWrapper = styled.div`
     justify-content: center;
     background-color: ${Colors.formBackground};
     border-top: 1px solid ${Colors.divider};
-    padding-bottom: 12px;
-    padding-top: 12px;
+    padding-bottom: 10px;
+    padding-top: 10px;
     position: relative;
   }
 
diff --git a/net/web/src/session/contact/Contact.jsx b/net/web/src/session/contact/Contact.jsx
index abb5080d..fd9d9ca1 100644
--- a/net/web/src/session/contact/Contact.jsx
+++ b/net/web/src/session/contact/Contact.jsx
@@ -1,4 +1,6 @@
-export function Contact() {
-  return <div>CONTACT</div>
+import { ContactWrapper } from './Contact.styled';
+
+export function Contact({ close, guid, node }) {
+  return <ContactWrapper />;
 }
 
diff --git a/net/web/src/session/contact/Contact.styled.js b/net/web/src/session/contact/Contact.styled.js
new file mode 100644
index 00000000..7a590c44
--- /dev/null
+++ b/net/web/src/session/contact/Contact.styled.js
@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+import Colors from 'constants/Colors';
+
+export const ContactWrapper = styled.div`
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: ${Colors.profileForm};
+`
+
diff --git a/net/web/src/session/listing/Listing.jsx b/net/web/src/session/listing/Listing.jsx
new file mode 100644
index 00000000..cc5e3590
--- /dev/null
+++ b/net/web/src/session/listing/Listing.jsx
@@ -0,0 +1,4 @@
+export function Listing({ openContact }) {
+  return <div onClick={() => openContact('asdf', 'qwer')}>LISTING</div>
+}
+
diff --git a/net/web/src/session/profile/Profile.jsx b/net/web/src/session/profile/Profile.jsx
index fe64bd8e..7b02e56a 100644
--- a/net/web/src/session/profile/Profile.jsx
+++ b/net/web/src/session/profile/Profile.jsx
@@ -1,7 +1,4 @@
-import { useContext } from 'react';
-import { Button, Checkbox } from 'antd';
-import { AppContext } from 'context/AppContext'; 
-import { ViewportContext } from 'context/ViewportContext';
+import { Checkbox } from 'antd';
 import { ProfileWrapper } from './Profile.styled';
 import { useProfile } from './useProfile.hook';
 import { Logo } from 'logo/Logo';
diff --git a/net/web/src/session/useSession.hook.js b/net/web/src/session/useSession.hook.js
index e455ce92..f940e70b 100644
--- a/net/web/src/session/useSession.hook.js
+++ b/net/web/src/session/useSession.hook.js
@@ -6,9 +6,13 @@ export function useSession() {
 
   const [state, setState] = useState({
     cardUpdated: false,
+    contactGuid: null,
+    contactNode: null,
+    listingNode: null,
     conversation: false,
     details: false,
     cards: false,
+    listing: false,
     contact: false,
     profile: false,
     account: false,
@@ -58,6 +62,15 @@ export function useSession() {
     closeCards: () => {
       updateState({ cards: false });
     },
+    openListing: (listingNode) => {
+      updateState({ listing: true, listingNode });
+    },
+    closeListing: () => {
+      updateState({ listing: false });
+    },
+    openContact: (contactGuid, contactNode) => {
+      updateState({ contact: true, contactGuid, contactNode });
+    },
     closeContact: () => {
       updateState({ contact: false });
     },