From 5820ec7e2d803a8c8669fc9a05ec39af532a1e2d Mon Sep 17 00:00:00 2001
From: Roland Osborne <roland.osborne@gmail.com>
Date: Fri, 2 Sep 2022 10:37:01 -0700
Subject: [PATCH] render placeholder for profile details

---
 net/web/src/session/contact/Contact.jsx       | 21 ++++++++++++++++---
 net/web/src/session/contact/Contact.styled.js |  5 +++++
 net/web/src/session/profile/Profile.jsx       | 21 ++++++++++++++++---
 net/web/src/session/profile/Profile.styled.js |  5 +++++
 4 files changed, 46 insertions(+), 6 deletions(-)

diff --git a/net/web/src/session/contact/Contact.jsx b/net/web/src/session/contact/Contact.jsx
index c1ab0631..69d5e505 100644
--- a/net/web/src/session/contact/Contact.jsx
+++ b/net/web/src/session/contact/Contact.jsx
@@ -30,7 +30,12 @@ export function Contact({ close, guid, listing }) {
   const Details = (
     <div class="details">
       <div class="name">
-        <div class="data">{ state.name }</div>
+        { state.name && (
+          <div class="data">{ state.name }</div>
+        )}
+        { !state.name && (
+          <div class="data notset">name</div>
+        )}
       </div>
       { state.node && (
         <div class="location">
@@ -40,11 +45,21 @@ export function Contact({ close, guid, listing }) {
       )}
       <div class="location">
         <EnvironmentOutlined />
-        <div class="data">{ state.location }</div>
+        { state.location && (
+          <div class="data">{ state.location }</div>
+        )}
+        { !state.location && (
+          <div class="data notset">location</div>
+        )}
       </div>
       <div class="description">
         <BookOutlined />
-        <div class="data">{ state.description }</div>
+        { state.description && (
+          <div class="data">{ state.description }</div>
+        )}
+        { !state.description && (
+          <div class="data notset">description</div>
+        )}
       </div>
 
       { state.status === 'connected' && (
diff --git a/net/web/src/session/contact/Contact.styled.js b/net/web/src/session/contact/Contact.styled.js
index 39c8d7fc..c70fc17f 100644
--- a/net/web/src/session/contact/Contact.styled.js
+++ b/net/web/src/session/contact/Contact.styled.js
@@ -53,6 +53,11 @@ export const ContactWrapper = styled.div`
       display: flex;
       flex-direction: column;
 
+      .notset {
+        font-style: italic;
+        color: ${Colors.grey};
+      }
+
       .name {
         display: flex;
         flex-direction: row;
diff --git a/net/web/src/session/profile/Profile.jsx b/net/web/src/session/profile/Profile.jsx
index b506d994..6510a7d9 100644
--- a/net/web/src/session/profile/Profile.jsx
+++ b/net/web/src/session/profile/Profile.jsx
@@ -72,18 +72,33 @@ export function Profile({ closeProfile }) {
   const Details = (
     <div class="details">
       <div class="name" onClick={actions.setEditProfileDetails}>
-        <div class="data">{ state.name }</div>
+        { state.name && (
+          <div class="data">{ state.name }</div>
+        )}
+        { !state.name && (
+          <div class="data notset">name</div>
+        )}
         <div class="icon">
           <EditOutlined />
         </div>
       </div>
       <div class="location">
         <EnvironmentOutlined />
-        <div class="data">{ state.location }</div>
+          { state.location && (
+            <div class="data">{ state.location }</div>
+          )}
+          { !state.location && (
+            <div class="data notset">location</div>
+          )}
       </div>
       <div class="description">
         <BookOutlined />
-        <div class="data">{ state.description }</div>
+        { state.description && (
+          <div class="data">{ state.description }</div>
+        )}
+        { !state.description && (
+          <div class="data notset">description</div>
+        )}
       </div>
     </div>
   );
diff --git a/net/web/src/session/profile/Profile.styled.js b/net/web/src/session/profile/Profile.styled.js
index d5fa6454..918e6241 100644
--- a/net/web/src/session/profile/Profile.styled.js
+++ b/net/web/src/session/profile/Profile.styled.js
@@ -73,6 +73,11 @@ export const ProfileWrapper = styled.div`
       display: flex;
       flex-direction: column;
 
+      .notset {
+        font-style: italic;
+        color: ${Colors.grey};
+      }
+
       .name {
         display: flex;
         flex-direction: row;