rendering contact sidebar

doc/api.oa3

@@ -3016,6 +3016,9 @@ components:
         - channel
         - card
       properties:
+        account:
+          type: integer
+          format: int64
         profile:
           type: integer
           format: int64

net/web/src/App.js

@@ -12,10 +12,10 @@ function App() {
 
   return (
     <AppContextProvider>
-      <div style={{ width: '100%', height: '100vh', backgroundColor: '#8fbea7' }}>
+      <div style={{ position: 'absolute', width: '100vw', height: '100vh', backgroundColor: '#8fbea7' }}>
         <img src={login} alt="" style={{ position: 'absolute', width: '33%', bottom: 0, right: 0 }}/>
       </div>
-      <div style={{ position: 'absolute', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', top: 0, left: 0, width: '100%', height: '100%' }}>  
+      <div style={{ position: 'absolute', width: '100vw', height: '100vh' }}>
         <Router>
           <Routes>
             <Route path="/" element={ <Home /> } />

net/web/src/AppContext/useAppContext.hook.js

@@ -51,6 +51,7 @@ export function useAppContext() {
   const profileRevision = useRef(null);
 
   const groups = useRef(new Map());
+  const delay = useRef(2);
 
   const ws = useRef(null);
   const revision = useRef(null);
@@ -69,7 +70,7 @@ export function useAppContext() {
     profileRevision.current = null;
     groupRevision.current = null;
     groups.current = new Map();
-    setState(null);
+    setState({});
   }
 
   const userActions = {
@@ -156,8 +157,9 @@ export function useAppContext() {
           ws.current.onopen = () => {}
           ws.current.onerror = () => {}
           setWebsocket(token);
+          delay.current += 1;
         }
-      }, 2000)
+      }, delay.current * 1000)
     }
     ws.current.onopen = () => {
       ws.current.send(JSON.stringify({ AppToken: token }))

net/web/src/User/Profile/Profile.styled.js

@@ -28,6 +28,9 @@ export const ProfileWrapper = styled.div`
     text-align: center;
     font-size: 2em;
     font-weight: bold;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 
   .close {
@@ -38,9 +41,9 @@ export const ProfileWrapper = styled.div`
   .container {
     display: flex;
     flex-direction: row;
-    padding: 1em;
-    margin-top: 32px;
+    padding: 32px;
     width: 100%;
+    overflow: scroll
   }
 
   .profile {
@@ -64,7 +67,7 @@ export const ProfileWrapper = styled.div`
   }
 
   .search {
-    padding-right: 16px;
+    padding-right: 6px;
   }
 
   .logo {

net/web/src/User/SideBar/Contacts/Cards/Cards.jsx

@@ -1,6 +1,30 @@
-import React from 'react'
+import React, { useEffect } from 'react'
+import { CardsWrapper } from './Cards.styled';
+import { Drawer } from 'antd';
+import { Registry } from './Registry/Registry';
 
-export function Cards() {
-  return <div>CARDS</div>
+export function Cards({ showRegistry }) {
+
+  useEffect(() => {
+    console.log("HERE", showRegistry);
+  }, [showRegistry]);
+
+  return (
+    <CardsWrapper>
+
+        <Drawer
+          placement="right"
+          closable={false}
+          visible={showRegistry}
+          getContainer={false}
+          contentWrapperStyle={{ width: '100%' }}
+          bodyStyle={{ padding: 0, backgroundColor: '#f6f5ed' }}
+          style={{ position: 'absolute' }}
+        >
+          <Registry />
+        </Drawer>
+
+    </CardsWrapper>
+  )
 }
 

net/web/src/User/SideBar/Contacts/Cards/Cards.styled.js

@@ -0,0 +1,12 @@
+import { Button } from 'antd';
+import styled from 'styled-components';
+
+export const CardsWrapper = styled.div`
+  position: relative;
+  height: calc(100vh - 143px);
+  width: 100%;
+  overflow: hidden;
+  text-align: center;
+  border-radius: 2px;
+`;
+

net/web/src/User/SideBar/Contacts/Cards/Registry/Registry.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { RegistryWrapper } from './Registry.styled';
+import { Input } from 'antd';
+
+export function Registry() {
+  return (
+    <RegistryWrapper>
+      <Input.Search placeholder="Server" allowClear style={{ width: '100%' }} />
+    
+    </RegistryWrapper>
+  );
+}
+

net/web/src/User/SideBar/Contacts/Cards/Registry/Registry.styled.js

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+export const RegistryWrapper = styled.div`
+  position: relative;
+  width: 100%;
+  padding-left: 8px;
+  padding-right: 8px;
+  text-align: center;
+`;
+
+

net/web/src/User/SideBar/Contacts/Channels/Channels.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
+import { ChannelsWrapper } from './Channels.styled';
 
 export function Channels() {
 
-  return <div>CHANNELS</div>
+  return <ChannelsWrapper />
 }

net/web/src/User/SideBar/Contacts/Channels/Channels.styled.js

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+export const ChannelsWrapper = styled.div`
+  position: relative;
+  height: calc(100vh - 143px);
+  width: 100%;
+  overflow: hidden;
+  text-align: center;
+  border-radius: 2px;
+`;
+

net/web/src/User/SideBar/Contacts/Contacts.jsx

@@ -1,25 +1,61 @@
 import { Avatar, Image } from 'antd';
-import React from 'react'
-import { ContactsWrapper } from './Contacts.styled';
+import React, { useState, useEffect, useRef } from 'react'
+import { ContactsWrapper, AddButton } from './Contacts.styled';
 import { useContacts } from './useContacts.hook';
-import { Tabs } from 'antd';
+import { Tabs, Button, Tooltip } from 'antd';
 import { Cards } from './Cards/Cards';
 import { Channels } from './Channels/Channels';
+import { UserAddOutlined, CommentOutlined } from '@ant-design/icons';
 
 const { TabPane } = Tabs;
 
 export function Contacts() {
 
   const { state, actions } = useContacts()
+  const [addButton, setAddButton] = useState(<></>);
+  const [showRegistry, setShowRegistry] = useState(false);
+  let registry = useRef(false);
+
+  const onShowRegistry = () => {
+    registry.current = !registry.current;
+    setShowRegistry(registry.current);
+  }
+
+  const addUser = (
+    <Tooltip placement="bottomRight" title="Add Contact">
+      <AddButton type="primary" onClick={() => onShowRegistry()} icon={<UserAddOutlined />} />
+    </Tooltip>
+  )
+
+  const addConversation = (
+    <Tooltip placement="bottomRight" title="Add Conversation">
+      <AddButton type="primary" icon={<CommentOutlined />} />
+    </Tooltip>
+  ) 
+
+  const onTab = (key) => {
+    registry.current = false;
+    setShowRegistry(false);
+    if (key === "contact") {
+      setAddButton(addUser);
+    }
+    else {
+      setAddButton(addConversation);
+    }
+  }
+
+  useEffect(() => {
+    setAddButton(addUser);
+  }, []);
 
   return (
     <ContactsWrapper>
-      <Tabs defaultActiveKey="1">
-        <TabPane tab="Contacts" key="1">
-          <Cards />
+      <Tabs onChange={onTab} tabBarStyle={{ paddingLeft: 16, paddingRight: 16 }} tabBarExtraContent={addButton}>>
+        <TabPane tab="Contacts" key="contact">
+          <Cards showRegistry={showRegistry} />
         </TabPane>
-        <TabPane tab="Conversations" key="2">
-          <Channels />
+        <TabPane tab="Conversations" key="conversation">
+          <Channels style={{ backgroundColor: 'red' }} />
         </TabPane>
       </Tabs>
     </ContactsWrapper>

net/web/src/User/SideBar/Contacts/Contacts.styled.jsx

@@ -2,8 +2,11 @@ import { Button } from 'antd';
 import styled from 'styled-components';
 
 export const ContactsWrapper = styled.div`
-  padding: 16px;
   width: 100%;
-  flex-grow: 1;
   background-color: #f6f5ed;
+  padding-top: 16px;
+`;
+
+export const AddButton = styled(Button)`
+  border-radius: 8px;
 `;

net/web/src/User/SideBar/SideBar.styled.js

@@ -7,6 +7,4 @@ export const SideBarWrapper = styled.div`
   min-width: 200px;
   border-right: 1px solid #8fbea7;
   background-color: #8fbea7;
-  display: flex;
-  flex-direction: column;
 `;