From 113b99f475e35a2378f289067536f33ac87ef49b Mon Sep 17 00:00:00 2001
From: Logan Allen <loganallc@gmail.com>
Date: Tue, 30 Mar 2021 21:29:37 -0500
Subject: [PATCH] group-feed: tons of post item touch-ups

---
 .../src/logic/subscription/global.ts          |  2 +-
 pkg/interface/src/views/components/Author.tsx | 53 +++++++---------
 .../src/views/components/Timestamp.tsx        | 38 +++++++++---
 .../components/Home/Post/PostFeed.js          | 10 +++-
 .../Home/Post/PostItem/PostContent.js         |  2 +
 .../Home/Post/PostItem/PostFooter.js          | 60 +++++++++++++++----
 .../Home/Post/PostItem/PostHeader.js          | 19 ++++--
 .../components/Home/Post/PostItem/PostItem.js |  8 ++-
 pkg/interface/src/views/landscape/index.tsx   | 23 +++++++
 9 files changed, 154 insertions(+), 61 deletions(-)

diff --git a/pkg/interface/src/logic/subscription/global.ts b/pkg/interface/src/logic/subscription/global.ts
index bbf1c41f6..a773549cf 100644
--- a/pkg/interface/src/logic/subscription/global.ts
+++ b/pkg/interface/src/logic/subscription/global.ts
@@ -52,7 +52,7 @@ export default class GlobalSubscription extends BaseSubscription<StoreState> {
     for (let key in Object.keys(this.openSubscriptions)) {
       let val = this.openSubscriptions[key];
 
-      unsubscribe(val.id);
+      this.unsubscribe(val.id);
     }
 
     this.start();
diff --git a/pkg/interface/src/views/components/Author.tsx b/pkg/interface/src/views/components/Author.tsx
index b3264d195..ff235e25e 100644
--- a/pkg/interface/src/views/components/Author.tsx
+++ b/pkg/interface/src/views/components/Author.tsx
@@ -36,10 +36,11 @@ export default function Author(props: AuthorProps & PropFunc<typeof Box>): React
     children,
     unread,
     group,
+    isRelativeTime,
+    dontShowTime,
     ...rest
   } = props;
 
-  const showAsCol = props.showAsCol || false;
   const time = props.time || false;
   const size = props.size || 16;
   const sigilPadding = props.sigilPadding || 2;
@@ -73,36 +74,6 @@ export default function Author(props: AuthorProps & PropFunc<typeof Box>): React
     <Sigil ship={ship} size={size} color={color} icon padding={sigilPadding} />
   );
 
-  const rowOrCol = showAsCol ? (
-    <Col>
-      <Box
-        ml={showImage ? 2 : 0}
-        color='black'
-        fontSize='1'
-        lineHeight='tall'
-        fontFamily={showNickname ? 'sans' : 'mono'}
-        fontWeight={showNickname ? '500' : '400'}
-      >
-        {name}
-      </Box>
-      <Timestamp stamp={stamp} fontSize={1} time={time} ml={2} color={unread ? 'blue' : 'gray'} />
-    </Col>
-  ) : (
-    <> 
-      <Box
-        ml={showImage ? 2 : 0}
-        color='black'
-        fontSize='1'
-        lineHeight='tall'
-        fontFamily={showNickname ? 'sans' : 'mono'}
-        fontWeight={showNickname ? '500' : '400'}
-      >
-        {name}
-      </Box>
-      <Timestamp stamp={stamp} fontSize={1} time={time} ml={2} color={unread ? 'blue' : 'gray'} />
-    </>
-  );
-
   const img =
     contact?.avatar && !hideAvatars ? (
       <BaseImage
@@ -133,7 +104,25 @@ export default function Author(props: AuthorProps & PropFunc<typeof Box>): React
           </ProfileOverlay>
         )}
       </Box>
-      {rowOrCol}
+      <Box
+        ml={showImage ? 2 : 0}
+        color='black'
+        fontSize='1'
+        lineHeight='tall'
+        fontFamily={showNickname ? 'sans' : 'mono'}
+        fontWeight={showNickname ? '500' : '400'}
+      >
+        {name}
+      </Box>
+      { !dontShowTime && (
+        <Timestamp
+          relative={isRelativeTime}
+          stamp={stamp}
+          fontSize={1}
+          time={time}
+          ml={2}
+          color={unread ? 'blue' : 'gray'} />
+      )}
       {children}
     </Row>
   );
diff --git a/pkg/interface/src/views/components/Timestamp.tsx b/pkg/interface/src/views/components/Timestamp.tsx
index a73ce72eb..ec526b885 100644
--- a/pkg/interface/src/views/components/Timestamp.tsx
+++ b/pkg/interface/src/views/components/Timestamp.tsx
@@ -11,10 +11,20 @@ export type TimestampProps = BoxProps & {
   stamp: MomentType;
   date?: boolean;
   time?: boolean;
+  relative?: boolean;
 };
 
 const Timestamp = (props: TimestampProps): ReactElement | null => {
-  const { stamp, date, time, color, fontSize, ...rest } = {
+  const {
+    stamp,
+    date,
+    time,
+    color,
+    relative,
+    dateNotRelative,
+    fontSize,
+    ...rest
+  } = {
     time: true,
     color: 'gray',
     fontSize: 0,
@@ -24,14 +34,24 @@ const Timestamp = (props: TimestampProps): ReactElement | null => {
   const { hovering, bind } =
     date === true ? { hovering: true, bind: {} } : useHovering();
   let datestamp = stamp.format(DateFormat);
-  if (stamp.format(DateFormat) === moment().format(DateFormat)) {
-    datestamp = 'Today';
-  } else if (
-    stamp.format(DateFormat) === moment().subtract(1, 'day').format(DateFormat)
-  ) {
-    datestamp = 'Yesterday';
+  if (!dateNotRelative) {
+    if (stamp.format(DateFormat) === moment().format(DateFormat)) {
+      datestamp = 'Today';
+    } else if (
+      stamp.format(DateFormat) === moment().subtract(1, 'day').format(DateFormat)
+    ) {
+      datestamp = 'Yesterday';
+    }
+  } else {
+    datestamp = `~${datestamp}`;
+  }
+
+  let timestamp;
+  if (relative) {
+    timestamp = stamp.fromNow();
+  } else {
+    timestamp = stamp.format(TimeFormat);
   }
-  const timestamp = stamp.format(TimeFormat);
   return (
     <Box
       {...bind}
@@ -46,7 +66,7 @@ const Timestamp = (props: TimestampProps): ReactElement | null => {
           {timestamp}
         </Text>
       )}
-      {date !== false && (
+      {date !== false && relative !== true && (
         <Text
           flexShrink={0}
           color={color}
diff --git a/pkg/interface/src/views/landscape/components/Home/Post/PostFeed.js b/pkg/interface/src/views/landscape/components/Home/Post/PostFeed.js
index 9aedd73c1..b063c3cac 100644
--- a/pkg/interface/src/views/landscape/components/Home/Post/PostFeed.js
+++ b/pkg/interface/src/views/landscape/components/Home/Post/PostFeed.js
@@ -58,6 +58,7 @@ export class PostFeed extends React.Component {
                 baseUrl={baseUrl}
                 history={history}
                 isParent={true}
+                isRelativeTime={false}
               />
             </Col>
             <PostItem
@@ -71,6 +72,7 @@ export class PostFeed extends React.Component {
               history={history}
               isReply={true}
               parentPost={parentNode.post}
+              isRelativeTime={true}
             />
           </React.Fragment>
         );
@@ -89,6 +91,7 @@ export class PostFeed extends React.Component {
           history={history}
           parentPost={parentNode?.post}
           isReply={!!parentNode}
+          isRelativeTime={true}
         />
       );
     });
@@ -131,7 +134,12 @@ export class PostFeed extends React.Component {
   }
 
   render() {
-    const { graph, pendingSize, parentNode, history } = this.props;
+    const {
+      graph,
+      pendingSize,
+      parentNode,
+      history
+    } = this.props;
 
     return (
       <Col width="100%" height="100%" position="relative">
diff --git a/pkg/interface/src/views/landscape/components/Home/Post/PostItem/PostContent.js b/pkg/interface/src/views/landscape/components/Home/Post/PostItem/PostContent.js
index 6644029a3..97552367c 100644
--- a/pkg/interface/src/views/landscape/components/Home/Post/PostItem/PostContent.js
+++ b/pkg/interface/src/views/landscape/components/Home/Post/PostItem/PostContent.js
@@ -11,6 +11,8 @@ export function PostContent(props) {
   return (
     <Col
       width="100%"
+      pl="2"
+      pr="2"
       maxHeight={ isParent ? "none" : "300px" }
       textOverflow="ellipsis"
       overflow="hidden"
diff --git a/pkg/interface/src/views/landscape/components/Home/Post/PostItem/PostFooter.js b/pkg/interface/src/views/landscape/components/Home/Post/PostItem/PostFooter.js
index 2303cbb53..9a94a26cb 100644
--- a/pkg/interface/src/views/landscape/components/Home/Post/PostItem/PostFooter.js
+++ b/pkg/interface/src/views/landscape/components/Home/Post/PostItem/PostFooter.js
@@ -1,21 +1,59 @@
+import moment from 'moment';
 import React from 'react';
 import { Box, Col, Row, Text, Icon } from '@tlon/indigo-react';
+import Timestamp from '~/views/components/Timestamp';
 
 
 export function PostFooter(props) {
-  const { replyCount, toggleReplyMode } = props;
+  const {
+    replyCount,
+    toggleReplyMode,
+    showTimestamp,
+    timeSent
+  } = props;
+  const stamp = moment(timeSent);
+  const mt = showTimestamp ? "2" : "0";
+
+  const replyText = replyCount === 1 ? ' reply' : ' replies';
 
   return (
-    <Row mt={2} justify-content="flex-start">
-      <Row cursor="pointer" onClick={(e) => {
-        e.stopPropagation();
-        toggleReplyMode();
-      }}>
-        <Icon icon="Chat" />
-        { replyCount > 0 ? (
-          <Text pl="1" gray>{replyCount}</Text>
-        ) : null }
-      </Row>
+    <Row mt={mt} justify-content="flex-start" width="100%">
+      <Col width="100%">
+        { showTimestamp && (
+          <Row
+            width="100%"
+            borderBottom={1}
+            borderBottomColor="lightGray" pb="2">
+            { showTimestamp ? (
+              <Text ml="2">{replyCount}{replyText}</Text>
+            ) : null }
+            <Timestamp
+              stamp={stamp}
+              fontSize={1}
+              time={true}
+              date={true}
+              ml="2"
+              dateNotRelative={true}
+              color='gray'
+            />
+          </Row>
+        )}
+        <Row height={showTimestamp ? "32px" : ""}
+          alignItems="center"
+          cursor="pointer"
+          pl="2"
+          pr="2"
+          mb={showTimestamp ? "" : "2"}
+          onClick={(e) => {
+            e.stopPropagation();
+            toggleReplyMode();
+          }}>
+          <Icon icon="Chat" />
+          { replyCount > 0 && !showTimestamp ? (
+            <Text pl="1" gray>{replyCount}</Text>
+          ) : null }
+        </Row>
+      </Col>
     </Row>
   );
 }
diff --git a/pkg/interface/src/views/landscape/components/Home/Post/PostItem/PostHeader.js b/pkg/interface/src/views/landscape/components/Home/Post/PostItem/PostHeader.js
index 8a5db9fa5..fdf80d171 100644
--- a/pkg/interface/src/views/landscape/components/Home/Post/PostItem/PostHeader.js
+++ b/pkg/interface/src/views/landscape/components/Home/Post/PostItem/PostHeader.js
@@ -8,7 +8,13 @@ import useContactState from '~/logic/state/contact';
 
 
 export function PostHeader(props) {
-  const { post, api, association, isReply } = props;
+  const {
+    post,
+    api,
+    association,
+    isReply,
+    showTimestamp
+  } = props;
   const contacts = useContactState(state => state.contacts);
   const mb = isReply ? "2" : "3";
 
@@ -22,8 +28,9 @@ export function PostHeader(props) {
   return (
     <Row
       width="100%"
-      height="36px"
       mb={mb}
+      pl="2"
+      pr="2"
       justifyContent="space-between"
       onClick={(e) => { e.stopPropagation(); }}>
       <Author
@@ -33,10 +40,12 @@ export function PostHeader(props) {
         date={post['time-sent']}
         unread={false}
         api={api}
-        size={36}
-        sigilPadding={8}
+        size={24}
+        sigilPadding={6}
+        dontShowTime={!showTimestamp}
+        isRelativeTime={true}
+        showTime={false}
         time={true}
-        showAsCol={true}
       />
       <Dropdown
         dropWidth="200px"
diff --git a/pkg/interface/src/views/landscape/components/Home/Post/PostItem/PostItem.js b/pkg/interface/src/views/landscape/components/Home/Post/PostItem/PostItem.js
index 418b6a3de..22139abca 100644
--- a/pkg/interface/src/views/landscape/components/Home/Post/PostItem/PostItem.js
+++ b/pkg/interface/src/views/landscape/components/Home/Post/PostItem/PostItem.js
@@ -51,6 +51,7 @@ class PostItem extends React.Component {
       innerRef,
       isParent,
       isReply,
+      isRelativeTime,
       parentPost,
       hovering,
       bind
@@ -74,7 +75,7 @@ class PostItem extends React.Component {
         width="100%"
         alignItems="center">
         <Col
-          p="2"
+          pt="2"
           border={1}
           borderColor={ isParent ? "gray" : "lightGray" }
           borderRadius="2"
@@ -88,9 +89,10 @@ class PostItem extends React.Component {
             post={node.post}
             api={api}
             association={association}
+            showTimestamp={isRelativeTime}
             isReply={isReply} />
           { isReply ? (
-            <Row width="100%" alignItems="center" mb="3">
+            <Row width="100%" alignItems="center" mb="2" pl="2" pr="2">
               <Text color="gray" pr="1">Replying to</Text>
               <Mention ship={parentPost.author} />
             </Row>
@@ -100,7 +102,9 @@ class PostItem extends React.Component {
             isParent={isParent}
             api={api} />
           <PostFooter
+            timeSent={node.post['time-sent']}
             replyCount={node.children.size}
+            showTimestamp={!isRelativeTime}
             toggleReplyMode={this.toggleReplyMode} /> 
         </Col>
         { inReplyMode ? (
diff --git a/pkg/interface/src/views/landscape/index.tsx b/pkg/interface/src/views/landscape/index.tsx
index f545a13c1..2dfd830f2 100644
--- a/pkg/interface/src/views/landscape/index.tsx
+++ b/pkg/interface/src/views/landscape/index.tsx
@@ -20,6 +20,29 @@ import GlobalSubscription from '~/logic/subscription/global';
 import useGraphState from '~/logic/state/graph';
 import useHarkState, { withHarkState } from '~/logic/state/hark';
 import withState from '~/logic/lib/withState';
+import moment from 'moment';
+
+
+moment.updateLocale('en', {
+  relativeTime : {
+    future: "%s",
+    past:   "%s",
+    s  : "1s",
+    ss : "%ds",
+    m:  "1m",
+    mm: "%dm",
+    h:  "1h",
+    hh: "%dh",
+    d:  "1d",
+    dd: "%dd",
+    w:  "1w",
+    ww: "%dw",
+    M:  "1mo",
+    MM: "%dmo",
+    y:  "1y",
+    yy: "%dy"
+  }
+});
 
 
 type LandscapeProps = StoreState & {