WIP: Display starred messages in dedicated component (which will display at the top of Composer articles)

Co-Authored-By: Tom Richards <19289579+twrichards@users.noreply.github.com>

Author: frederickobrien

bootstrapping-lambda/local/index.html

@@ -38,7 +38,7 @@ <h4>
         Remove pinboard pre-selection
       </button>
 
-      <h5>Starred messages</h5>
+      <h5>Starred messages (requires pinboard pre-selection)</h5>
       <pinboard-starred-messages></pinboard-starred-messages>
 
       <h4>via hidden element (for invalid/untracked composer ID)</h4>

client/src/formattedDateTime.tsx

@@ -4,7 +4,7 @@ import { formatDateTime } from "./util";
 export const TickContext = React.createContext<number>(Date.now());
 
 interface FormattedDateTimeProps {
-  timestamp: number;
+  timestamp: number | string;
   isPartOfSentence?: true;
   withAgo?: true;
 }

client/src/itemDisplay.tsx

@@ -78,8 +78,6 @@ export const ItemDisplay = ({
     [item.id, item.message]
   );
 
-  const dateInMillisecs = new Date(item.timestamp).valueOf();
-
   const isDifferentUserFromPreviousItem =
     maybePreviousItem?.userEmail !== item.userEmail;
 
@@ -150,15 +148,17 @@ export const ItemDisplay = ({
           </React.Fragment>
         )}
       </div>
-      <div
-        css={css`
-          position: absolute;
-          margin-top: 5px;
-          margin-left: 2px;
-        `}
-      >
-        <StarredControl itemId={item.id} isStarred={item.isStarred} />
-      </div>
+      {!isDeleted && (
+        <div
+          css={css`
+            position: absolute;
+            margin-top: 5px;
+            margin-left: 2px;
+          `}
+        >
+          <StarredControl itemId={item.id} isStarred={item.isStarred} />
+        </div>
+      )}
       <div
         css={css`
           margin-left: ${space[9] - 4}px;
@@ -172,7 +172,7 @@ export const ItemDisplay = ({
             margin-bottom: 2px;
           `}
         >
-          <FormattedDateTime timestamp={dateInMillisecs} />
+          <FormattedDateTime timestamp={item.timestamp} />
           {isEdited && <span>&nbsp;-&nbsp;Edited</span>}
           {maybeRelatedItem && item.type !== "claim" && (
             <span>&nbsp;-&nbsp;Reply</span>

client/src/nestedItemDisplay.tsx

@@ -103,7 +103,7 @@ export const NestedItemDisplay = ({
             margin-left: ${payloadAndType ? 0 : 10}px;
           `}
         >
-          <FormattedDateTime timestamp={new Date(item.timestamp).valueOf()} />
+          <FormattedDateTime timestamp={item.timestamp} />
           {item.editHistory && item.editHistory.length > 0 && (
             <span> - Edited</span>
           )}

client/src/pinboard.tsx

@@ -400,7 +400,11 @@ export const Pinboard: React.FC<PinboardProps> = ({
       {isPinboardData(preselectedPinboard) &&
         preselectedPinboard.id === pinboardId &&
         maybeStarredMessagesArea && (
-          <StarredMessagesPortal node={maybeStarredMessagesArea} />
+          <StarredMessagesPortal
+            node={maybeStarredMessagesArea}
+            items={items}
+            userLookup={userLookup}
+          />
         )}
     </React.Fragment>
   );

client/src/starred/starredMessages.tsx

@@ -1,19 +1,76 @@
 import React from "react";
 import ReactDOM from "react-dom";
+import { Item } from "shared/graphql/graphql";
+import root from "react-shadow/emotion";
+import { UserLookup } from "../types/UserLookup";
+import { FormattedDateTime } from "../formattedDateTime";
+import { css } from "@emotion/react";
+import { agateSans } from "../../fontNormaliser";
+import { neutral, space } from "@guardian/source-foundations";
 
 export const STARRED_MESSAGES_HTML_TAG = "pinboard-starred-messages";
 
-// interface StarredMessagesProps {}
+const StarredItemDisplay = ({
+  item,
+  userLookup,
+}: {
+  item: Item;
+  userLookup: UserLookup;
+}) => {
+  const user = userLookup?.[item.userEmail];
+  const userDisplayName = user
+    ? `${user.firstName} ${user.lastName}`
+    : item.userEmail;
+  return (
+    <div
+      css={css`
+        ${agateSans.xsmall()};
+        display: flex;
+        align-items: flex-end;
+        gap: ${space[1]}px;
+        color: ${neutral[20]};
+      `}
+    >
+      <span
+        css={css`
+          color: ${neutral[0]};
+          ${agateSans.medium()};
+        `}
+      >
+        {item.message}
+      </span>
+      <span title={item.userEmail}>{userDisplayName}</span>
+      <span>
+        <FormattedDateTime timestamp={item.timestamp} withAgo />
+      </span>
+    </div>
+  );
+};
 
-const StarredMessages = (/* props: StarredMessagesProps */) => (
-  <div>
-    <p>Starred Messages</p>
-  </div>
-);
+interface StarredMessagesProps {
+  items: Item[];
+  userLookup: UserLookup;
+}
+
+const StarredMessages = ({ items, userLookup }: StarredMessagesProps) => {
+  const starredMessages = items.filter(
+    (item) => item.isStarred && !item.deletedAt
+  );
+  return (
+    <root.div>
+      {starredMessages.map((item) => (
+        <StarredItemDisplay key={item.id} item={item} userLookup={userLookup} />
+      ))}
+    </root.div>
+  );
+};
 
-interface StarredMessagesPortalProps {
+interface StarredMessagesPortalProps extends StarredMessagesProps {
   node: Element;
 }
 
-export const StarredMessagesPortal = ({ node }: StarredMessagesPortalProps) =>
-  ReactDOM.createPortal(<StarredMessages />, node);
+export const StarredMessagesPortal = ({
+  node,
+  ...props
+}: StarredMessagesPortalProps) =>
+  ReactDOM.createPortal(<StarredMessages {...props} />, node);

client/src/util.ts

@@ -13,11 +13,15 @@ export const getTooltipText = (
 ) => `WT: ${workingTitle}` + (headline ? `\nHL: ${headline}` : "");
 
 export const formatDateTime = (
-  timestamp: number,
-  isPartOfSentence?: true,
-  withAgo?: true
+  timestampStringOrEpochMillis: number | string,
+  isPartOfSentence?: boolean,
+  withAgo?: boolean
 ): string => {
   const now = Date.now();
+  const timestamp =
+    typeof timestampStringOrEpochMillis === "string"
+      ? new Date(timestampStringOrEpochMillis).valueOf()
+      : timestampStringOrEpochMillis;
   if (isThisYear(timestamp)) {
     if (isToday(timestamp)) {
       if (differenceInMinutes(now, timestamp) < 1) {
@@ -32,7 +36,7 @@ export const formatDateTime = (
         return (
           formatDistanceStrict(timestamp, now, {
             roundingMethod: "floor",
-          }).slice(0, -4) + (withAgo ? " ago" : "")
+          }).slice(0, -4) + (withAgo ? "s ago" : "")
         );
       }
       return format(timestamp, "HH:mm");

client/test/formattedDateTime.test.ts

@@ -28,6 +28,13 @@ test("display is correct if timestamp is between 2 min and 1 hr ago", () => {
   expect(formatDateTime(twoMinsAgo)).toBe("2 min");
   const lessThanHr = subMinutes(Date.now(), 59).valueOf();
   expect(formatDateTime(lessThanHr)).toBe("59 min");
+  const pluralMinsWithAgo = subMinutes(Date.now(), 3).valueOf();
+  expect(formatDateTime(pluralMinsWithAgo, false, true)).toBe("3 mins ago");
+});
+
+test("display is correct if passed a string", () => {
+  const twoMinsAgoString = subMinutes(Date.now(), 2).toISOString();
+  expect(formatDateTime(twoMinsAgoString)).toBe("2 min");
 });
 
 test("display is correct if timestamp is 1 hr ago exactly", () => {