rendering profile actions

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

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef } from 'react'
 import { CloseOutlined, UserOutlined } from '@ant-design/icons';
 import { useContact } from './useContact.hook';
 import { Button, Checkbox, Modal } from 'antd'
-import { ContactWrapper, CloseButton } from './Contact.styled';
+import { ContactWrapper, ProfileButton, CloseButton } from './Contact.styled';
 
 export function Contact() {
 
@@ -39,10 +39,84 @@ export function Contact() {
     return <span>{ state.description }</span>
   }
 
+  const Disconnect = () => {
+    if (state.showButtons.disconnect) {
+      return <ProfileButton ghost>Disconnect</ProfileButton>
+    }
+    return <></>
+  }
+
+  const Remove = () => {
+    if (state.showButtons.remove) {
+      return <ProfileButton ghost>Remove Contact</ProfileButton>
+    }
+    return <></>
+  }
+
+  const Cancel = () => {
+    if (state.showButtons.cancel) {
+      return <ProfileButton ghost>Cancel Request</ProfileButton>
+    }
+    return <></>
+  }
+
+  const Ignore = () => {
+    if (state.showButtons.ignore) {
+      return <ProfileButton ghost>Ignore Request</ProfileButton>
+    }
+    return <></>
+  }
+
+  const Save = () => {
+    if (state.showButtons.save) {
+      return <ProfileButton ghost>Save Contact</ProfileButton>
+    }
+    return <></>
+  }
+
+  const SaveRequest = () => {
+    if (state.showButtons.saveRequest) {
+      return <ProfileButton ghost>Save & Request</ProfileButton>
+    }
+    return <></>
+  }
+
+  const Connect = () => {
+    if (state.showButtons.connect) {
+      return <ProfileButton ghost>Connect</ProfileButton>
+    }
+    return <></>
+  }
+
+  const SaveAccept = () => {
+    if (state.showButtons.saveAccept) {
+      return <ProfileButton ghost>Save & Accept</ProfileButton>
+    }
+    return <></>
+  }
+
+  const Accept = () => {
+    if (state.showButtons.accept) {
+      return <ProfileButton ghost>Accept Connection</ProfileButton>
+    }
+    return <></>
+  }
+
   return (
     <ContactWrapper>
       <div class="header">
         <div class="title">{ state.handle }</div>
+        <div class="buttons">
+          <Disconnect />
+          <Remove />
+          <Cancel />
+          <Ignore />
+          <Save />
+          <SaveRequest />
+          <Connect />
+          <SaveAccept />
+          <Accept />
+        </div>
         <CloseButton type="text" class="close" size={'large'} onClick={() => actions.close()} icon={<CloseOutlined />} />
       </div>
       <div class="container">

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

@@ -15,7 +15,7 @@ export const ContactWrapper = styled.div`
     width: 100%;
     flex-direction: row;
     align-items: center;
-    background-color: #dddddd;
+    background-color: #888888;
     height: 64px;
     padding-right: 16px;
     padding-left: 16px;
@@ -29,12 +29,14 @@ export const ContactWrapper = styled.div`
     font-weight: bold;
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-begin;
+    color: white;
+    padding-left: 32px;
   }
 
   .close {
     font-size: 24px;
-    color: #aaaaaa;
+    color: white;
   }
 
   .contact {
@@ -44,6 +46,28 @@ export const ContactWrapper = styled.div`
     flex: 3
   }
 
+  .control {
+    position: absolute;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    margin-bottom: 8px;
+  }
+
+  .status {
+    color: white;
+    font-weight: bold;
+    line-height: 1;
+  }
+   
+  .buttons {
+    display: flex;
+    flex-direction: row;
+    margin-right: 32px;
+  } 
+
   .profile {
     display: flex;
     flex-direction: column;
@@ -84,7 +108,6 @@ export const ContactWrapper = styled.div`
     color: #dddddd;
   }
 
-
   .label {
     padding-right: 8px;
     font-size: 1em;
@@ -131,5 +154,12 @@ export const ContactWrapper = styled.div`
 
 export const CloseButton = styled(Button)`
   font-size: 24px;
-  color: #aaaaaa;
+  color: white;
 `;
+
+export const ProfileButton = styled(Button)`
+  text-align: center;
+  margin-left: 8px;
+  margin-right: 8px;
+`;
+

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

@@ -11,6 +11,7 @@ export function useContact() {
     location: '',
     description: '',
     imageUrl: null,
+    showButtons: {},
   });
 
   const data = useLocation();
@@ -42,6 +43,27 @@ export function useContact() {
         else {
           updateState({ imageUrl: '' });
         }
+        let status = card.data.cardDetail.status;
+        if (status === 'connected') {
+          updateState({ status: 'connected' });
+          updateState({ showButtons: { disconnect: true, remove: true }});
+        }
+        if (status === 'connecting') {
+          updateState({ status: 'connecting' });
+          updateState({ showButtons: { cancel: true, remove: true }});
+        }
+        if (status === 'pending') {
+          updateState({ status: 'requested' });
+          updateState({ showButtons: { ignore: true, save: true, saveAccept: true }});
+        }
+        if (status === 'confirmed') {
+          updateState({ status: 'saved' });
+          updateState({ showButtons: { remove: true, connect: true }});
+        }
+        if (status === 'requested') {
+          updateState({ status: 'requested' });
+          updateState({ showButtons: { ignore: true, accept: true }});
+        }
       }
       else if (data.state) {
         updateState({ handle: data.state.handle });
@@ -54,6 +76,8 @@ export function useContact() {
         else {
           updateState({ imageUrl: '' });
         }
+        updateState({ status: null });
+        updateState({ showButtons: { save: true, saveRequest: true }});
       }
     }
   }, [app, guid])

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

@@ -16,7 +16,7 @@ export const ProfileWrapper = styled.div`
     width: 100%;
     flex-direction: row;
     align-items: center;
-    background-color: #dddddd;
+    background-color: #888888;
     height: 64px;
     padding-right: 16px;
     padding-left: 16px;
@@ -27,6 +27,7 @@ export const ProfileWrapper = styled.div`
     flex-grow: 1;
     text-align: center;
     font-size: 2em;
+    color: white;
     font-weight: bold;
     display: flex;
     align-items: center;
@@ -171,7 +172,7 @@ export const ModalFooter = styled.div`
 
 export const CloseButton = styled(Button)`
   font-size: 24px;
-  color: #aaaaaa;
+  color: white;
 `;
 
 export const EditIcon = styled(EditOutlined)`