refactor of webapp contact component

net/web/src/session/account/profile/useProfile.hook.js

@@ -33,7 +33,7 @@ export function useProfile() {
   }
 
   useEffect(() => {
-    const { node, name, handle, location, description, image, imageUrl } = profile.state.identity;
+    const { node, name, handle, location, description, image } = profile.state.identity;
     let url = !image ? null : profile.state.imageUrl;
     let editImage = !image ? avatar : url;
     updateState({ name, location, description, node, handle, url, 

net/web/src/session/contact/Contact.jsx

@@ -6,152 +6,138 @@ import { DatabaseOutlined, CloseOutlined, RightOutlined, BookOutlined, Environme
 
 export function Contact({ close, guid, listing }) {
 
+  const [ modal, modalContext ] = Modal.useModal();
   const { state, actions } = useContact(guid, listing, close);
 
-  const Image = (
-    <div class="logo">
-      <Logo url={state.logo} width={'100%'} radius={8} />
-    </div>
-  );
-
   const updateContact = async (action) => {
     try {
       await action();
     }
     catch (err) {
       console.log(err);
-      Modal.error({
+      modal.error({
         title: 'Failed to Update Contact',
         content: 'Please try again.',
       });
     }
   }
 
-  const Details = (
-    <div class="details">
-      <div class="name">
-        { state.name && (
-          <div class="data">{ state.name }</div>
-        )}
-        { !state.name && (
-          <div class="data notset">name</div>
-        )}
-      </div>
-      { state.node && (
-        <div class="location">
-          <DatabaseOutlined />
-          <div class="data">{ state.node }</div>
-        </div>
-      )}
-      <div class="location">
-        <EnvironmentOutlined />
-        { state.location && (
-          <div class="data">{ state.location }</div>
-        )}
-        { !state.location && (
-          <div class="data notset">location</div>
-        )}
-      </div>
-      <div class="description">
-        <BookOutlined />
-        { state.description && (
-          <div class="data">{ state.description }</div>
-        )}
-        { !state.description && (
-          <div class="data notset">description</div>
-        )}
-      </div>
-
-      { state.status === 'connected' && (
-        <div class="controls">
-          <div class={ state.buttonStatus } onClick={() => updateContact(actions.disconnect)}>Disconnect</div>
-          <div class={ state.buttonStatus } onClick={() => updateContact(actions.disconnectRemove)}>Delete Contact</div>
-        </div>
-      )}
-
-      { state.status === 'pending' && (
-        <div class="controls">
-          <div class={ state.buttonStatus } onClick={() => updateContact(actions.confirmContact)}>Save Contact</div>
-          <div class={ state.buttonStatus } onClick={() => updateContact(actions.connect)}>Save and Accept</div>
-          <div class={ state.buttonStatus } onClick={() => updateContact(actions.remove)}>Ignore Request</div>
-        </div>
-      )}
-
-      { state.status === 'request received' && (
-        <div class="controls">
-          <div class={ state.buttonStatus } onClick={() => updateContact(actions.saveConnect)}>Accept Connection</div>
-          <div class={ state.buttonStatus } onClick={() => updateContact(actions.disconnect)}>Ignore Request</div>
-        </div>
-      )}
-
-      { state.status === 'request sent' && (
-        <div class="controls">
-          <div class={ state.buttonStatus } onClick={() => updateContact(actions.disconnect)}>Cancel Request</div>
-          <div class={ state.buttonStatus } onClick={() => updateContact(actions.disconnectRemove)}>Delete Contact</div>
-        </div>
-      )}
-
-      { state.status === 'saved' && (
-        <div class="controls">
-          <div class={ state.buttonStatus } onClick={() => updateContact(actions.connect)}>Request Connection</div>
-          <div class={ state.buttonStatus } onClick={() => updateContact(actions.remove)}>Delete Contact</div>
-        </div>
-      )}
-
-      { state.status === 'unsaved' && (
-        <div class="controls">
-          <div class={ state.buttonStatus } onClick={() => updateContact(actions.saveContact)}>Save Contact</div>
-          <div class={ state.buttonStatus } onClick={() => updateContact(actions.saveConnect)}>Save and Request</div>
-        </div>
-      )}
-    </div>
-  );
-
-
   return (
     <ContactWrapper>
-      { state.init && state.display === 'xlarge' && (
+      { modalContext }
-        <>
+      { state.display === 'xlarge' && (
-          <div class="header">
+        <div className="header">
-            <div class="handle">{ state.handle }</div>
+          <div className="handle">{ state.handle }</div>
-            <div class="close" onClick={close}>
+          <div className="close" onClick={close}>
-              <RightOutlined />
+            <RightOutlined />
-            </div>
           </div>
-
+        </div>
-          <div class="content">
-            { Image }
-            { Details }
-          </div>
-
-          <div class="footer">
-            <div class="status">Status: { state.status }</div>
-          </div>
-        </>
       )}
-      { state.init && state.display !== 'xlarge' && (
+      { state.display !== 'xlarge' && (
-        <div class="view">
+        <div className="view">
-          <div class="title">
+          <div className="title">
-            <div class="close" />
+            <div className="close" />
-            <div class="handle">{ state.handle }</div>
+            <div className="handle">{ state.handle }</div>
             { state.display === 'small' && (
-              <div class="close" onClick={close}>
+              <div className="close" onClick={close}>
                 <CloseOutlined />
               </div>
             )}
             { state.display !== 'small' && (
-              <div class="close" onClick={close}>
+              <div className="close" onClick={close}>
                 <RightOutlined />
               </div>
             )}
           </div>
-          { Image }
-          { Details }
-          <div class="footer">
-            <div>contact { state.status }</div>
-          </div>
         </div>
       )}
+
+      <div className={ state.display === 'xlarge' ? 'midContent' : 'rightContent' }>
+        <div className="logo">
+          <Logo url={state.logo} width={'100%'} radius={8} />
+        </div>
+        <div className="details">
+          <div className="name">
+            { state.name && (
+              <div className="data">{ state.name }</div>
+            )}
+            { !state.name && (
+              <div className="data notset">name</div>
+            )}
+          </div>
+          { state.node && (
+            <div className="location">
+              <DatabaseOutlined />
+              <div className="data">{ state.node }</div>
+            </div>
+          )}
+          <div className="location">
+            <EnvironmentOutlined />
+            { state.location && (
+              <div className="data">{ state.location }</div>
+            )}
+            { !state.location && (
+              <div className="data notset">location</div>
+            )}
+          </div>
+          <div className="description">
+            <BookOutlined />
+            { state.description && (
+              <div className="data">{ state.description }</div>
+            )}
+            { !state.description && (
+              <div className="data notset">description</div>
+            )}
+          </div>
+
+          { state.status === 'connected' && (
+            <div className="controls">
+              <div className={ state.buttonStatus } onClick={() => updateContact(actions.disconnect)}>Disconnect</div>
+              <div className={ state.buttonStatus } onClick={() => updateContact(actions.disconnectRemove)}>Delete Contact</div>
+            </div>
+          )}
+
+          { state.status === 'pending' && (
+            <div className="controls">
+              <div className={ state.buttonStatus } onClick={() => updateContact(actions.confirmContact)}>Save Contact</div>
+              <div className={ state.buttonStatus } onClick={() => updateContact(actions.connect)}>Save and Accept</div>
+              <div className={ state.buttonStatus } onClick={() => updateContact(actions.remove)}>Ignore Request</div>
+            </div>
+          )}
+
+          { state.status === 'request received' && (
+            <div className="controls">
+              <div className={ state.buttonStatus } onClick={() => updateContact(actions.saveConnect)}>Accept Connection</div>
+              <div className={ state.buttonStatus } onClick={() => updateContact(actions.disconnect)}>Ignore Request</div>
+            </div>
+          )}
+
+          { state.status === 'request sent' && (
+            <div className="controls">
+              <div className={ state.buttonStatus } onClick={() => updateContact(actions.disconnect)}>Cancel Request</div>
+              <div className={ state.buttonStatus } onClick={() => updateContact(actions.disconnectRemove)}>Delete Contact</div>
+            </div>
+          )}
+
+          { state.status === 'saved' && (
+            <div className="controls">
+              <div className={ state.buttonStatus } onClick={() => updateContact(actions.connect)}>Request Connection</div>
+              <div className={ state.buttonStatus } onClick={() => updateContact(actions.remove)}>Delete Contact</div>
+            </div>
+          )}
+
+          { state.status === 'unsaved' && (
+            <div className="controls">
+              <div className={ state.buttonStatus } onClick={() => updateContact(actions.saveContact)}>Save Contact</div>
+              <div className={ state.buttonStatus } onClick={() => updateContact(actions.saveConnect)}>Save and Request</div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div className="footer">
+        <div className="status">Status: { state.status }</div>
+      </div>
     </ContactWrapper>
   );
 }

net/web/src/session/contact/Contact.styled.js

@@ -34,7 +34,7 @@ export const ContactWrapper = styled.div`
     }
   }
 
-  .content {
+  .midContent {
     min-height: 0;
     width: 100%;
     overflow: auto;
@@ -42,61 +42,70 @@ export const ContactWrapper = styled.div`
     flex-direction: row;
     justify-content: center;
     padding-top: 32px;
+  }
 
-    .logo {
+  .rightContent {
-      position: relative;
+    min-height: 0;
-      width: 20vw;
+    width: 100%;
-      margin-right: 32px;
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .logo {
+    position: relative;
+    width: 20vw;
+    margin-right: 32px;
+    margin-left: 32px;
+  }
+
+  .details {
+    display: flex;
+    flex-direction: column;
+
+    .notset {
+      font-style: italic;
+      color: ${Colors.grey};
     }
 
-    .details {
+    .name {
       display: flex;
-      flex-direction: column;
+      flex-direction: row;
-
+      align-items: center;
-      .notset {
+ 
-        font-style: italic;
+      .data {
-        color: ${Colors.grey};
+        padding-right: 8px;
+        font-size: 24px;
+        font-weight: bold;
       }
+    }
 
-      .name {
+    .location {
-        display: flex;
+      display: flex;
-        flex-direction: row;
+      flex-direction: row;
-        align-items: center;
+      align-items: center;
-   
+      padding-bottom: 8px;
-        .data {
+  
-          padding-right: 8px;
+      .data {
-          font-size: 24px;
+        padding-left: 8px;
-          font-weight: bold;
-        }
       }
+    }
 
-      .location {
+    .description {
-        display: flex;
+      display: flex;
-        flex-direction: row;
+      flex-direction: row;
-        align-items: center;
+      align-items: center;
-        padding-bottom: 8px;
+      padding-bottom: 8px;
-    
-        .data {
-          padding-left: 8px;
-        }
-      }
 
-      .description {
+      .data {
-        display: flex;
+        padding-left: 8px;
-        flex-direction: row;
-        align-items: center;
-        padding-bottom: 8px;
-
-        .data {
-          padding-left: 8px;
-        }
       }
     }
   }
 
   .view {
     width: 100%;
-    height: 100%;
     overflow: auto;
     display: flex;
     flex-direction: column;
@@ -126,52 +135,6 @@ export const ContactWrapper = styled.div`
         align-items: center;
       }
     }
-
-    .logo {
-      position: relative;
-      width: 50%;
-      margin-bottom: 16px;
-    }
-
-    .details {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-
-      .name {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-   
-        .data {
-          padding-right: 8px;
-          font-size: 24px;
-          font-weight: bold;
-        }
-      }
-
-      .location {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        padding-bottom: 8px;
-    
-        .data {
-          padding-left: 8px;
-        }
-      }
-
-      .description {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        padding-bottom: 8px;
-
-        .data {
-          padding-left: 8px;
-        }
-      } 
-    }
   }
 
   .controls {

net/web/src/session/contact/useContact.hook.js

@@ -16,7 +16,6 @@ export function useContact(guid, listing, close) {
     handle: null,
     node: null,
     removed: false,
-    init: false,
     status: null,
     busy: false,
     buttonStatus: 'button idle',
@@ -43,39 +42,30 @@ export function useContact(guid, listing, close) {
   }
 
   useEffect(() => {
-    let logo, name, location, description, handle, node, status, cardId;
+    const contact = getCardByGuid(card.state.cards, guid);
-    let contact = getCardByGuid(card.state.cards, guid);
     if (contact) {
-      let cardProfile = contact?.data?.cardProfile;
+      const profile = contact?.data?.cardProfile;
-      let cardDetail = contact?.data?.cardDetail;
+      const detail = contact?.data?.cardDetail;
-      cardId = contact.id;
+      const { imageSet, name, location, description, handle, node } = profile;      
-      handle = cardProfile.handle;
+      const status = statusMap(detail.status);
-      node = cardProfile.node;
+      const cardId = contact.id;
-      logo = card.actions.getCardImageUrl(contact.id);
+      const logo = imageSet ? card.actions.getCardImageUrl(cardId) : null;
-      name = cardProfile.name;
+      updateState({ logo, name, location, description, handle, node, status, cardId });
-      location = cardProfile.location;
-      description = cardProfile.description;
-      status = statusMap(cardDetail.status);
     }
     else if (listing) {
-      handle = listing.handle;
+      const { imageSet, name, location, description, handle, node } = listing;
-      cardId = null;
+      const logo = imageSet ? getListingImageUrl(node, guid) : null;
-      node = listing.node;
+      updateState({ logo, name, location, description, handle, node, status: 'unsaved', cardId: null });
-      logo = listing.imageSet ? getListingImageUrl(listing.node, listing.guid) : null;
-      name = listing.name;
-      location = listing.location;
-      description = listing.description;
-      status = 'unsaved';
     }
     else {
       updateState({ removed: true });
     }
-    updateState({ init: true, logo, name, location, description, handle, node, status, cardId });
+    // eslint-disable-next-line
-  }, [card, guid, listing]); 
+  }, [card.state, guid, listing]); 
 
   useEffect(() => {
     updateState({ display: viewport.state.display });
-  }, [viewport]);
+  }, [viewport.state]);
 
   const applyAction = async (action) => {
     if (!state.busy) {