feat(Activity): change how we format date in ProfileInfo

common/utilities.js

@@ -86,39 +86,50 @@ export const coerceToArray = (input) => {
 
 export const getFileExtension = (filename) => filename?.split(".").pop();
 
-export const getTimeDifferenceFromNow = (date) => {
+export const getTimeDifferenceFromNow = (date, format = {}) => {
+  const defaultFormats = {
+    seconds: (time) => time + "s",
+    minutes: (time) => time + "m",
+    hours: (time) => time + "h",
+    days: (time) => time + "d",
+    currentYear: (month, day) => `${month} ${day}`,
+    default: (month, day, year) => `${month} ${day}, ${year}`,
+  };
+
+  const formatDate = { ...defaultFormats, ...format };
+
   const pastDate = new Date(date);
   const now = new Date();
 
   const differenceInSeconds = Math.floor((now - pastDate) / 1000);
   if (differenceInSeconds < 60) {
-    return differenceInSeconds + "s";
+    return formatDate.seconds(differenceInSeconds);
   }
 
   const differenceInMinutes = Math.floor(differenceInSeconds / 60);
   if (differenceInMinutes < 60) {
-    return differenceInMinutes + "m";
+    return formatDate.minutes(differenceInMinutes);
   }
 
   const differenceInHours = Math.floor(differenceInMinutes / 60);
   if (differenceInHours < 24) {
-    return differenceInHours + "h";
+    return formatDate.hours(differenceInHours);
   }
 
   const differenceInDays = Math.floor(differenceInHours / 24);
   if (differenceInDays < 24) {
-    return differenceInDays + "d";
+    return formatDate.days(differenceInDays);
   }
 
   const currentYear = now.getFullYear();
 
   const day = pastDate.getDay();
-  const month = pastDate.toLocaleString("default", { month: "long" });
+  const month = pastDate.toLocaleString("default", { month: "short" });
   const year = pastDate.getFullYear();
 
   if (year === currentYear) {
-    return `${day} ${month}`;
+    return formatDate.currentYear(month, day);
   }
 
-  return `${day} ${month} ${year}`;
+  return formatDate.default(month, day, year);
 };

components/core/ActivityGroup/components/ActivityCollectionGroup.js

@@ -1,7 +1,6 @@
 import * as React from "react";
 import * as Styles from "~/common/styles";
 import * as Strings from "~/common/strings";
-import * as Utilities from "~/common/utilities";
 
 import { css } from "@emotion/react";
 import { Link } from "~/components/core/Link";
@@ -50,7 +49,6 @@ export default function ActivityCollectionGroup({
   const [showMore, setShowMore] = React.useState(false);
   const viewMoreFiles = () => setShowMore(true);
 
-  const timeSinceUploaded = Utilities.getTimeDifferenceFromNow(createdAt);
   // const timeSinceUploaded = Utilities.getTimeDifferenceFromNow(elements[0].createdAt);
   const nbrOfFilesUploaded = elements.length + (restElements?.length || 0);
   const action = React.useMemo(() => {
@@ -63,7 +61,7 @@ export default function ActivityCollectionGroup({
   return (
     <div css={STYLES_GROUP_GRID} {...props}>
       <ProfileInfo
-        time={timeSinceUploaded}
+        time={createdAt}
         owner={owner}
         viewer={viewer}
         action={action}

components/core/ActivityGroup/components/ActivityFileGroup.js

@@ -1,6 +1,5 @@
 import * as React from "react";
 import * as Strings from "~/common/strings";
-import * as Utilities from "~/common/utilities";
 import * as Styles from "~/common/styles";
 
 import { css } from "@emotion/react";
@@ -44,7 +43,6 @@ export default function ActivityFileGroup({ viewer, group, onAction, nbrOfObject
   const [showMore, setShowMore] = React.useState(false);
   const viewMoreFiles = () => setShowMore(true);
 
-  const timeSinceAction = Utilities.getTimeDifferenceFromNow(createdAt);
   const nbrOfFiles = elements.length + (restElements?.length || 0);
   const action = React.useMemo(() => {
     if (type === "CREATE_FILE")
@@ -64,7 +62,7 @@ export default function ActivityFileGroup({ viewer, group, onAction, nbrOfObject
   return (
     <div css={STYLES_GROUP_GRID}>
       <ProfileInfo
-        time={timeSinceAction}
+        time={createdAt}
         owner={owner}
         action={action}
         viewer={viewer}

components/core/ActivityGroup/components/ActivityProfileGroup.js

@@ -1,7 +1,6 @@
 import * as React from "react";
 import * as Styles from "~/common/styles";
 import * as Strings from "~/common/strings";
-import * as Utilities from "~/common/utilities";
 
 import { css } from "@emotion/react";
 import { ProfileInfo } from "~/components/core/ActivityGroup/components";
@@ -52,12 +51,10 @@ export default function ActivityProfileGroup({
   const [showMore, setShowMore] = React.useState(false);
   const viewMoreFiles = () => setShowMore(true);
 
-  const timeSinceUploaded = Utilities.getTimeDifferenceFromNow(createdAt);
-
   return (
     <div css={STYLES_GROUP_GRID}>
       <ProfileInfo
-        time={timeSinceUploaded}
+        time={createdAt}
         owner={owner}
         action={"started following"}
         viewer={viewer}

components/core/ActivityGroup/components/ProfileInfo.js

@@ -1,5 +1,7 @@
 import * as React from "react";
 import * as Styles from "~/common/styles";
+import * as Utilities from "~/common/utilities";
+import * as Strings from "~/common/strings";
 
 import { Link } from "~/components/core/Link";
 import { css } from "@emotion/react";
@@ -44,6 +46,14 @@ export default function ProfileInfo({ owner, viewer, time, action, onAction }) {
   const { username, data = {} } = owner;
   const { photo } = data;
 
+  const formattedDate = Utilities.getTimeDifferenceFromNow(time);
+  const mobileFormattedDate = Utilities.getTimeDifferenceFromNow(time, {
+    seconds: (time) => `${time} ${Strings.pluralize("second", time)} ago`,
+    minutes: (time) => `${time} ${Strings.pluralize("minute", time)} ago`,
+    hours: (time) => `${time} ${Strings.pluralize("hour", time)} ago`,
+    days: (time) => `${time} ${Strings.pluralize("day", time)} ago`,
+  });
+
   const isOwner = viewer?.id === owner.id;
   return (
     <Link href={`/$/user/${owner.id}`} onAction={onAction}>
@@ -61,7 +71,8 @@ export default function ProfileInfo({ owner, viewer, time, action, onAction }) {
               &nbsp;•&nbsp;
             </H4>
             <P2 color="textGrayDark" style={{ display: "inline" }}>
-              {time}
+              <span css={Styles.MOBILE_HIDDEN}>{formattedDate}</span>
+              <span css={Styles.MOBILE_ONLY}>{mobileFormattedDate}</span>
             </P2>
           </span>
           <P2 color="textGrayDark" nbrOflines={2}>