updating thread timestamp and listing results

net/web/src/session/conversation/topicItem/TopicItem.jsx

@@ -16,9 +16,6 @@ export function TopicItem({ host, topic }) {
 
   let name = state.name ? state.name : state.handle;
   let nameClass = state.name ? 'set' : 'unset';
-  let d = new Date();
-  let offset = d.getTime() / 1000 - state.created;
-  
   if (name == null) {
     name = "unknown contact"
     nameClass = "unknown"
@@ -104,7 +101,7 @@ export function TopicItem({ host, topic }) {
         </div>
         <div class="info">
           <div class={nameClass}>{ name }</div>
-          <div>{ getTime(offset) }</div>
+          <div>{ state.created }</div>
         </div>
       </div>
       { !state.confirmed && (
@@ -136,25 +133,3 @@ export function TopicItem({ host, topic }) {
   )
 }
 
-function getTime(offset) {
-  if (offset < 1) {
-    return ''
-  }
-  if (offset < 60) {
-    return Math.floor(offset) + "s";
-  }
-  offset /= 60;
-  if (offset < 60) {
-    return Math.floor(offset) + "m";
-  }
-  offset /= 60;
-  if (offset < 24) {
-    return Math.floor(offset) + "h";
-  }
-  offset /= 24;
-  if (offset < 366) {
-    return Math.floor(offset) + "d";
-  }
-  offset /= 365.25;
-  return Math.floor(offset) + "y";
-}

net/web/src/session/conversation/topicItem/useTopicItem.hook.js

@@ -81,13 +81,24 @@ export function useTopicItem(topic) {
 
     if (profile.state.init && card.state.init && conversation.state.init) {
       const { guid, created } = topic.data.topicDetail;
+
+      let createdStr;
+      const date = new Date(created * 1000);
+      const now = new Date();
+      if(now.getTime() - date.getTime() < 86400000) {
+        createdStr = date.toLocaleTimeString([], {hour: 'numeric', minute:'2-digit'});
+      }
+      else {
+        createdStr = date.toLocaleDateString("en-US");
+      }
+
       if (profile.state.profile.guid == guid) {
         const { name, handle, imageUrl } = profile.actions.getProfile();
-        updateState({ name, handle, imageUrl, status, message, transform, assets, confirmed, error, ready, created, owner, textColor, textSize });
+        updateState({ name, handle, imageUrl, status, message, transform, assets, confirmed, error, ready, created: createdStr, owner, textColor, textSize });
       }
       else {
         const { name, handle, imageUrl } = card.actions.getCardProfileByGuid(guid);
-        updateState({ name, handle, imageUrl, status, message, transform, assets, confirmed, error, ready, created, owner, textColor, textSize });
+        updateState({ name, handle, imageUrl, status, message, transform, assets, confirmed, error, ready, created: createdStr, owner, textColor, textSize });
       }
     }
   }, [profile, card, conversation, topic]);

net/web/src/session/listing/listingItem/useListingItem.hook.js

@@ -4,15 +4,20 @@ import { getListingImageUrl } from 'api/getListingImageUrl';
 export function useListingItem(server, item) {
 
   const [state, setState] = useState({
-    logo: item.imageSet ? getListingImageUrl(server, item.guid) : null,
-    name: item.name,
-    handle: item.handle,
   });
 
   const updateState = (value) => {
     setState((s) => ({ ...s, ...value }));
   }
 
+  useEffect(() => {
+    updateState({
+      logo: item.imageSet ? getListingImageUrl(server, item.guid) : null,
+      name: item.name,
+      handle: item.handle,
+    });
+  }, [server, item]);
+
   const actions = {
   };
 

net/web/src/session/listing/useListing.hook.js

@@ -20,6 +20,10 @@ export function useListing() {
     setState((s) => ({ ...s, ...value }));
   }
 
+  useEffect(() => {
+    updateState({ contacts: [] });
+  }, [state.node]);
+
   const actions = {
     onNode: (value) => {
       updateState({ node: value });

net/web/src/session/welcome/Welcome.styled.js

@@ -20,6 +20,7 @@ export const WelcomeWrapper = styled.div`
 
     .header {
       font-weight: bold;
+      font-size: 20px;
     }
   }