added route for contact screen

net/web/src/App.js

@@ -5,6 +5,7 @@ import { Login } from './Login/Login';
 import { Create } from './Create/Create';
 import { User } from './User/User';
 import { Profile } from './User/Profile/Profile';
+import { Contact } from './User/Contact/Contact';
 import { HashRouter as Router, Routes, Route } from "react-router-dom";
 import 'antd/dist/antd.min.css'; 
 
@@ -19,10 +20,11 @@ function App() {
         <Router>
           <Routes>
             <Route path="/" element={ <Home /> } />
-            <Route path="/Login" element={ <Login /> } />
-            <Route path="/Create" element={ <Create /> } />
-            <Route path="/User" element={ <User /> }>
+            <Route path="/login" element={ <Login /> } />
+            <Route path="/create" element={ <Create /> } />
+            <Route path="/user" element={ <User /> }>
               <Route path="profile" element={<Profile />} />
+              <Route path="contact/:guid" element={<Contact />} />
             </Route>
           </Routes>
         </Router>   

net/web/src/User/Contact/Contact.jsx

@@ -0,0 +1,21 @@
+import React, { useState, useEffect, useRef } from 'react'
+import { CloseOutlined } from '@ant-design/icons';
+import { useContact } from './useContact.hook';
+import { Button, Checkbox, Modal } from 'antd'
+import { ContactWrapper, CloseButton } from './Contact.styled';
+
+export function Contact({ match }) {
+
+  const { state, actions } = useContact();
+
+  return (
+    <ContactWrapper>
+      <div class="header">
+        <div class="title">{ state.handle }</div>
+        <CloseButton type="text" class="close" size={'large'} onClick={() => actions.close()} icon={<CloseOutlined />} />
+      </div>
+      <div class="container"></div>
+    </ContactWrapper>
+  )
+}
+

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

@@ -0,0 +1,52 @@
+import styled from 'styled-components';
+import { Button } from 'antd';
+
+export const ContactWrapper = styled.div`
+  display: flex;
+  width: 100%;
+  height: 100%;
+  background-color: #f6f5ed;
+  flex-direction: column;
+  align-items: center;
+  overflow: hidden;
+
+  .header {
+    display: flex;
+    width: 100%;
+    flex-direction: row;
+    align-items: center;
+    background-color: #dddddd;
+    height: 64px;
+    padding-right: 16px;
+    padding-left: 16px;
+  }
+
+  .title {
+    height: 64px;
+    flex-grow: 1;
+    text-align: center;
+    font-size: 2em;
+    font-weight: bold;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .close {
+    font-size: 24px;
+    color: #aaaaaa;
+  }
+
+  .container {
+    display: flex;
+    flex-direction: row;
+    padding: 32px;
+    width: 100%;
+    overflow: auto; 
+  }
+`;
+
+export const CloseButton = styled(Button)`
+  font-size: 24px;
+  color: #aaaaaa;
+`;

net/web/src/User/Contact/useContact.hook.js

@@ -0,0 +1,31 @@
+import { useContext, useState, useEffect } from 'react';
+import { AppContext } from '../../AppContext/AppContext';
+import { useNavigate, useLocation, useParams } from "react-router-dom";
+
+export function useContact() {
+  
+  const [state, setState] = useState({});
+
+  const data = useLocation();
+  const { guid } = useParams();
+  const navigate = useNavigate();
+  const app = useContext(AppContext);
+
+  console.log(data.state);
+  console.log(guid);
+
+  const updateState = (value) => {
+    setState((s) => ({ ...s, ...value }));
+  }
+
+  const actions = {
+    close: () => {
+      navigate('/user')
+    },
+  };
+
+  useEffect(() => {
+  }, [app])
+
+  return { state, actions };
+}

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

@@ -6,7 +6,6 @@ import { Registry } from './Registry/Registry';
 export function Cards({ showRegistry }) {
 
   useEffect(() => {
-    console.log("HERE", showRegistry);
   }, [showRegistry]);
 
   return (
@@ -18,7 +17,7 @@ export function Cards({ showRegistry }) {
           visible={showRegistry}
           getContainer={false}
           contentWrapperStyle={{ width: '100%' }}
-          bodyStyle={{ backgroundColor: '#f6f5ed', padding: 16 }}
+          bodyStyle={{ backgroundColor: '#f6f5ed', paddingLeft: 16, paddingRight: 16, paddingTop: 16, paddingBottom: 0 }}
           style={{ position: 'absolute' }}
         >
           <Registry />

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { RegistryWrapper } from './Registry.styled';
+import { RegistryWrapper, RegistryItem } from './Registry.styled';
 import { useRegistry } from './useRegistry.hook';
 import { Button, Input, List } from 'antd';
 import { Logo } from '../../../../../Logo/Logo';
@@ -9,6 +9,10 @@ export function Registry() {
 
   const { state, actions } = useRegistry();
 
+  const onSelect = (item) => {
+    actions.select(item);
+  };
+
   return (
     <RegistryWrapper>
       <Input.Search placeholder="Server" value={state.server} onChange={(e) => actions.setServer(e.target.Value)} 
@@ -18,19 +22,20 @@ export function Registry() {
           locale={{ emptyText: '' }}
           itemLayout="horizontal"
           dataSource={state.profiles}
+          gutter="0"
           renderItem={item => (
-            <List.Item>
+            <RegistryItem onClick={() => onSelect(item)}>
               <div class="item">
                 <div class="logo">
                   <Logo imageUrl={actions.getRegistryImageUrl(item.guid, item.revision)}
                     imageSet={item.imageSet} />
                 </div>
                 <div class="username">
-                  <span class="name">{ item.name }</span>
                   <span class="handle">{ item.handle }</span>
+                  <span class="name">{ item.name }</span>
                 </div>
               </div>
-            </List.Item>
+            </RegistryItem>
           )}
         />
       </div>

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

@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import { List } from 'antd';
 
 export const RegistryWrapper = styled.div`
   position: relative;
@@ -15,14 +16,13 @@ export const RegistryWrapper = styled.div`
     background-color: #fefefe;
     border-radius-bottom-right: 8px;
     border-radius-bottom-left: 8px;
-    height: calc(100vh - 174px);
+    height: calc(100vh - 175px);
     overflow: auto;
   }
 
   .item {
     width: 100%;
     display: flex;
-    padding-left: 16px;
     flex-direction: row;
     align-items: center;
   }
@@ -36,7 +36,7 @@ export const RegistryWrapper = styled.div`
     display: flex;
     flex-direction: column;
     padding-left: 16px;
-    text-align: left;
+    text-align: right;
     flex-grow: 1;
   }
 
@@ -51,3 +51,14 @@ export const RegistryWrapper = styled.div`
 
 `;
 
+export const RegistryItem = styled(List.Item)`
+  padding-left: 16px;
+  padding-right: 16px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  cursor: pointer;
+  &:hover {
+    background-color: #eeeeee;
+  }
+`;
+

net/web/src/User/SideBar/Contacts/Cards/Registry/useRegistry.hook.js

@@ -10,6 +10,7 @@ export function useRegistry() {
     profiles: [],
   });
 
+  const navigate = useNavigate();
   const app = useContext(AppContext);
   
   const updateState = (value) => {
@@ -33,7 +34,6 @@ export function useRegistry() {
         try {
           let profiles = await app.actions.getRegistry(state.server)
           updateState({ profiles: profiles });
-console.log(profiles);
         }
         catch (err) {
           window.alert(err)
@@ -42,6 +42,9 @@ console.log(profiles);
       }
     },
     getRegistryImageUrl: (guid, revision) => app.actions.getRegistryImageUrl(state.server, guid, revision),
+    select: (contact) => {
+      navigate(`/user/contact/${contact.guid}`, { state: contact });
+    }
   }
 
   return { state, actions };

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

@@ -5,7 +5,7 @@ import { useContacts } from './useContacts.hook';
 import { Tabs, Button, Tooltip } from 'antd';
 import { Cards } from './Cards/Cards';
 import { Channels } from './Channels/Channels';
-import { UserAddOutlined, CommentOutlined } from '@ant-design/icons';
+import { TeamOutlined, CommentOutlined } from '@ant-design/icons';
 
 const { TabPane } = Tabs;
 
@@ -23,7 +23,7 @@ export function Contacts() {
 
   const addUser = (
     <Tooltip placement="right" title="Add Contact">
-      <AddButton type="primary" onClick={() => onShowRegistry()} icon={<UserAddOutlined />} />
+      <AddButton type="primary" onClick={() => onShowRegistry()} icon={<TeamOutlined />} />
     </Tooltip>
   )