rendering contact profile

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

@@ -125,6 +125,16 @@ export function useAppContext() {
     })
   }
 
+  const getCard = (guid) => {
+    let card = null;
+    cards.current.forEach((value, key, map) => {
+      if(value?.data?.cardProfile?.guid == guid) {
+        card = value
+      }
+    });
+    return card;
+  }
+
   const resetData = () => {
     revision.current = null;
     profileRevision.current = null;
@@ -153,6 +163,7 @@ export function useAppContext() {
     getRegistry: async (node) => getListing(node),
     getRegistryImageUrl: (server, guid, revision) => getListingImageUrl(server, guid, revision),
     getCardImageUrl: (cardId, revision) => getCardImageUrl(state.token, cardId, revision),
+    getCard: getCard,
   }
 
   const adminActions = {

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

@@ -1,20 +1,66 @@
 import React, { useState, useEffect, useRef } from 'react'
-import { CloseOutlined } from '@ant-design/icons';
+import { CloseOutlined, UserOutlined } 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 }) {
+export function Contact() {
 
   const { state, actions } = useContact();
 
+  const Logo = () => {
+    if (state.imageUrl != null) {
+      if (state.imageUrl === '') {
+        return <div class="logo"><UserOutlined /></div>
+      }
+      return <img class="logo" src={ state.imageUrl } alt="" />
+    }
+    return <></>
+  }
+
+  const Name = () => {
+    if (state.name == '' || state.name == null) {
+      return <span class="unset">Name</span>
+    }
+    return <span>{ state.name }</span>
+  }
+
+  const Location = () => {
+    if (state.location == '' || state.location == null) {
+      return <span class="unset">Location</span>
+    }
+    return <span>{ state.location }</span>
+  }
+
+  const Description = () => {
+    if (state.description == '' || state.description == null) {
+      return <span class="unset">Description</span>
+    }
+    return <span>{ state.description }</span>
+  }
+
   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>
+      <div class="container">
+        <div class="profile">
+          <div class="avatar">
+            <Logo />
+          </div>
+          <div class="block">
+            <span class="label">details:</span>
+          </div>
+          <div class="details">
+            <div class="name"><Name /></div>
+            <div class="location"><Location /></div>
+            <div class="description"><Description /></div>
+          </div>
+        </div>
+        <div class="contact"></div>
+      </div>
     </ContactWrapper>
   )
 }

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

@@ -37,6 +37,20 @@ export const ContactWrapper = styled.div`
     color: #aaaaaa;
   }
 
+  .contact {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-begin;
+    flex: 3
+  }
+
+  .profile {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    flex: 2
+  }
+
   .container {
     display: flex;
     flex-direction: row;
@@ -44,6 +58,67 @@ export const ContactWrapper = styled.div`
     width: 100%;
     overflow: auto; 
   }
+
+  .avatar {
+    color: #888888;
+    height: 192px;
+    min-height: 192px;
+    width: 192px;
+    min-width: 192px;
+    font-size: 8em;
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .unset {
+    font-style: italic;
+    color: #dddddd;
+  }
+
+
+  .label {
+    padding-right: 8px;
+    font-size: 1em;
+    font-weight: bold;
+    color: #888888;
+  }
+
+  .details {
+    padding: 16px;
+    border-right: 0.5px solid #aaaaaa;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+  }
+
+  .name {
+    font-size: 1.5em;
+    padding-bottom: 16px;
+    text-align: right;
+  }
+
+  .location {
+    font-size: 1.2em;
+    padding-bottom: 16px;
+    text-align: right;
+  }
+
+  .description {
+    font-size: 1em;
+    padding-bottom: 16px;
+    text-align: right;
+  }
+
+  .block {
+    border-bottom: 0.5px solid #aaaaaa;
+    display: flex;
+    flex-direction: row;
+    margin-top: 32px;
+    align-items: center;
+    justify-content: flex-end;
+    width: 50%;
+    cursor: pointer;
+  }
 `;
 
 export const CloseButton = styled(Button)`

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

@@ -4,16 +4,20 @@ import { useNavigate, useLocation, useParams } from "react-router-dom";
 
 export function useContact() {
   
-  const [state, setState] = useState({});
+  const [state, setState] = useState({
+    status: null,
+    handle: '',
+    name: '',
+    location: '',
+    description: '',
+    imageUrl: null,
+  });
 
   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 }));
   }
@@ -25,7 +29,34 @@ export function useContact() {
   };
 
   useEffect(() => {
-  }, [app])
+    if (app?.state?.access === 'user') {
+      let card = app.actions.getCard(guid);
+      if (card) {
+        updateState({ handle: card.data.cardProfile.handle });
+        updateState({ name: card.data.cardProfile.name });
+        updateState({ description: card.data.cardProfile.description });
+        updateState({ location: card.data.cardProfile.location });
+        if (card.data.cardProfile.imageSet) {
+          updateState({ imageUrl: app.actions.getCardImageUrl(card.id, card.revision) });
+        }
+        else {
+          updateState({ imageUrl: '' });
+        }
+      }
+      else if (data.state) {
+        updateState({ handle: data.state.handle });
+        updateState({ name: data.state.name });
+        updateState({ description: data.state.description });
+        updateState({ location: data.state.location });
+        if (data.state.imageSet) {
+          updateState({ imageUrl: app.actions.getRegistryImageUrl(data.state.node, guid, data.state.revision) });
+        }
+        else {
+          updateState({ imageUrl: '' });
+        }
+      }
+    }
+  }, [app, guid])
 
   return { state, actions };
 }

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

@@ -3,8 +3,6 @@ import { List } from 'antd';
 
 export const RegistryWrapper = styled.div`
   position: relative;
-  padding-left: 8px;
-  padding-right: 8px;
   text-align: center;
   display: flex;
   overflow-y: auto;
@@ -52,8 +50,6 @@ 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;