mirror of
https://github.com/filecoin-project/slate.git
synced 2024-09-11 22:07:08 +03:00
feat(Activity): change how we format date in ProfileInfo
This commit is contained in:
parent
99e4d43bd3
commit
a974a6218f
@ -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);
|
||||
};
|
||||
|
@ -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}
|
||||
|
@ -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}
|
||||
|
@ -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}
|
||||
|
@ -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 }) {
|
||||
•
|
||||
</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}>
|
||||
|
Loading…
Reference in New Issue
Block a user