group-feed: tons of post item touch-ups

2024-12-13 11:45:45 +03:00 · 2021-03-30 21:29:37 -05:00 · 2021-03-30 21:29:37 -05:00 · 113b99f475
commit 113b99f475
parent 23bce83ef9
9 changed files with 154 additions and 61 deletions
--- 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();
--- 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>
  );
--- 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}
--- 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">
--- 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"
--- 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>
  );
 }
--- 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"
--- 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 ? (
--- 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 & {