diff --git a/packages/openneuro-app/src/scripts/components/__tests__/__snapshots__/date-distance.spec.tsx.snap b/packages/openneuro-app/src/scripts/components/__tests__/__snapshots__/date-distance.spec.tsx.snap new file mode 100644 index 000000000..d74d063a6 --- /dev/null +++ b/packages/openneuro-app/src/scripts/components/__tests__/__snapshots__/date-distance.spec.tsx.snap @@ -0,0 +1,7 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`DataTable component > renders date distance components 1`] = ` +<DocumentFragment> + 2022-02-04 - about 2 years ago +</DocumentFragment> +`; diff --git a/packages/openneuro-app/src/scripts/components/__tests__/date-distance.spec.tsx b/packages/openneuro-app/src/scripts/components/__tests__/date-distance.spec.tsx new file mode 100644 index 000000000..e1a1a4415 --- /dev/null +++ b/packages/openneuro-app/src/scripts/components/__tests__/date-distance.spec.tsx @@ -0,0 +1,19 @@ +import React from "react" +import { vi } from "vitest" +import { render } from "@testing-library/react" +import { DateDistance } from "../date-distance" + +describe("DataTable component", () => { + beforeEach(() => { + vi.useFakeTimers() + vi.setSystemTime(new Date(2024, 1, 4)) + }) + afterEach(() => { + vi.useRealTimers() + }) + it("renders date distance components", () => { + const date = new Date(2022, 1, 4).toISOString() + const { asFragment } = render(<DateDistance date={date} />) + expect(asFragment()).toMatchSnapshot() + }) +}) diff --git a/packages/openneuro-app/src/scripts/components/date-distance.tsx b/packages/openneuro-app/src/scripts/components/date-distance.tsx new file mode 100644 index 000000000..432426f6b --- /dev/null +++ b/packages/openneuro-app/src/scripts/components/date-distance.tsx @@ -0,0 +1,10 @@ +import React from "react" +import formatDistanceToNow from "date-fns/formatDistanceToNow" +import parseISO from "date-fns/parseISO" +import { formatDate } from "../utils/date" + +export function DateDistance({ date }) { + const formattedDate = formatDate(date) + const distance = formatDistanceToNow(parseISO(date)) + return <>{formattedDate} - {distance} ago</> +} diff --git a/packages/openneuro-app/src/scripts/dataset/__tests__/snapshot-container.spec.tsx b/packages/openneuro-app/src/scripts/dataset/__tests__/snapshot-container.spec.tsx index ee1e0fe91..358d4cc95 100644 --- a/packages/openneuro-app/src/scripts/dataset/__tests__/snapshot-container.spec.tsx +++ b/packages/openneuro-app/src/scripts/dataset/__tests__/snapshot-container.spec.tsx @@ -15,6 +15,13 @@ const defProps = { } describe("SnapshotContainer component", () => { + beforeEach(() => { + vi.useFakeTimers() + vi.setSystemTime(new Date("2023-12-01")) + }) + afterEach(() => { + vi.useRealTimers() + }) it("renders successfully", () => { const { asFragment } = render(<SnapshotContainer {...defProps} />, { wrapper: MockAppWrapper, diff --git a/packages/openneuro-app/src/scripts/dataset/components/VersionList.tsx b/packages/openneuro-app/src/scripts/dataset/components/VersionList.tsx index 5bd0179bd..c71aaf8d9 100644 --- a/packages/openneuro-app/src/scripts/dataset/components/VersionList.tsx +++ b/packages/openneuro-app/src/scripts/dataset/components/VersionList.tsx @@ -1,6 +1,7 @@ import React from "react" import { Link } from "react-router-dom" import { Dropdown } from "@openneuro/components/dropdown" +import { formatDate } from "../../utils/date" export interface VersionListProps { items: { @@ -19,9 +20,6 @@ export interface VersionListProps { dateModified: string datasetId?: string } -const formatDate = (dateObject) => - new Date(dateObject).toISOString().split("T")[0] - export const VersionList = ({ items, selected, @@ -41,7 +39,8 @@ export const VersionList = ({ <> <div className="active-version"> <div>{selected === "draft" ? "Draft" : selected}</div> - {selected === "draft" ? "Updated" : "Created"}: {dateModified} + {selected === "draft" ? "Updated" : "Created"}:{" "} + {formatDate(dateModified)} </div> {items.length ? ( @@ -68,7 +67,7 @@ export const VersionList = ({ {selected === "draft" ? "*" : ""} </span> </span> - {dateModified} + {formatDate(dateModified)} </Link> </li> {items.map((item, index) => ( diff --git a/packages/openneuro-app/src/scripts/dataset/draft-container.tsx b/packages/openneuro-app/src/scripts/dataset/draft-container.tsx index 3dddec4ce..88183b540 100644 --- a/packages/openneuro-app/src/scripts/dataset/draft-container.tsx +++ b/packages/openneuro-app/src/scripts/dataset/draft-container.tsx @@ -3,8 +3,6 @@ import Markdown from "markdown-to-jsx" import Helmet from "react-helmet" import { Navigate, useLocation } from "react-router-dom" import pluralize from "pluralize" -import formatDistanceToNow from "date-fns/formatDistanceToNow" -import parseISO from "date-fns/parseISO" import { pageTitle } from "../resources/strings.js" import { DatasetPageTabContainer } from "./routes/styles/dataset-page-tab-container" @@ -37,15 +35,13 @@ import { DOILink } from "./fragments/doi-link" import { TabRoutesDraft } from "./routes/tab-routes-draft" import { FollowToggles } from "./common/follow-toggles" +import { DateDistance } from "../components/date-distance" export interface DraftContainerProps { dataset tag?: string } -const formatDate = (dateObject) => - new Date(dateObject).toISOString().split("T")[0] - // Helper function for getting version from URL const snapshotVersion = (location) => { const matches = location.pathname.match(/versions\/(.*?)(\/|$)/) @@ -65,13 +61,6 @@ const DraftContainer: React.FC<DraftContainerProps> = ({ dataset }) => { ? summary.sessions.length : 1 - const dateAdded = formatDate(dataset.created) - const dateAddedDifference = formatDistanceToNow(parseISO(dataset.created)) - const dateModified = formatDate(dataset.draft.modified) - const dateUpdatedDifference = formatDistanceToNow( - parseISO(dataset.draft.modified), - ) - const [cookies] = useCookies() const profile = getUnexpiredProfile(cookies) const isAdmin = profile?.admin @@ -213,7 +202,7 @@ const DraftContainer: React.FC<DraftContainerProps> = ({ dataset }) => { items={dataset.snapshots} className="version-dropdown" activeDataset={activeDataset} - dateModified={dateModified} + dateModified={dataset.draft.modified} selected={selectedVersion} setSelected={setSelectedVersion} /> @@ -278,8 +267,8 @@ const DraftContainer: React.FC<DraftContainerProps> = ({ dataset }) => { heading="Uploaded by" item={ <> - <Username user={dataset.uploader} /> on {dateAdded} -{" "} - {dateAddedDifference} ago + <Username user={dataset.uploader} /> on{" "} + <DateDistance date={dataset.created} /> </> } /> @@ -289,7 +278,7 @@ const DraftContainer: React.FC<DraftContainerProps> = ({ dataset }) => { heading="Last Updated" item={ <> - {dateModified} - {dateUpdatedDifference} ago + <DateDistance date={dataset.draft.modified} /> </> } /> diff --git a/packages/openneuro-app/src/scripts/dataset/snapshot-container.tsx b/packages/openneuro-app/src/scripts/dataset/snapshot-container.tsx index 19ebe410a..14a8ae7c8 100644 --- a/packages/openneuro-app/src/scripts/dataset/snapshot-container.tsx +++ b/packages/openneuro-app/src/scripts/dataset/snapshot-container.tsx @@ -5,8 +5,6 @@ import { DatasetPageTabContainer } from "./routes/styles/dataset-page-tab-contai import DatasetQueryContext from "../datalad/dataset/dataset-query-context.js" import { Link, useLocation, useParams } from "react-router-dom" import pluralize from "pluralize" -import formatDistanceToNow from "date-fns/formatDistanceToNow" -import parseISO from "date-fns/parseISO" import { pageTitle } from "../resources/strings.js" import Validation from "../validation/validation.jsx" import { config } from "../config" @@ -41,9 +39,7 @@ import { DOILink } from "./fragments/doi-link" import { TabRoutesSnapshot } from "./routes/tab-routes-snapshot" import schemaGenerator from "../utils/json-ld.js" import { FollowToggles } from "./common/follow-toggles" - -const formatDate = (dateObject) => - new Date(dateObject).toISOString().split("T")[0] +import { DateDistance } from "../components/date-distance" // Helper function for getting version from URL const snapshotVersion = (location) => { @@ -75,11 +71,6 @@ export const SnapshotContainer: React.FC<SnapshotContainerProps> = ({ ? summary.sessions.length : 1 - const dateAdded = formatDate(dataset.created) - const dateAddedDifference = formatDistanceToNow(parseISO(dataset.created)) - const dateModified = formatDate(snapshot.created) - const dateUpdatedDifference = formatDistanceToNow(parseISO(snapshot.created)) - const [cookies] = useCookies() const profile = getUnexpiredProfile(cookies) const isAdmin = profile?.admin @@ -209,7 +200,7 @@ export const SnapshotContainer: React.FC<SnapshotContainerProps> = ({ items={dataset.snapshots} className="version-dropdown" activeDataset={activeDataset} - dateModified={dateModified} + dateModified={snapshot.created} selected={selectedVersion} setSelected={setSelectedVersion} /> @@ -275,8 +266,8 @@ export const SnapshotContainer: React.FC<SnapshotContainerProps> = ({ heading="Uploaded by" item={ <> - <Username user={dataset.uploader} /> on {dateAdded} -{" "} - {dateAddedDifference} ago + <Username user={dataset.uploader} /> on{" "} + <DateDistance date={dataset.created} /> </> } /> @@ -284,11 +275,7 @@ export const SnapshotContainer: React.FC<SnapshotContainerProps> = ({ {dataset.snapshots.length && ( <MetaDataBlock heading="Last Updated" - item={ - <> - {dateModified} - {dateUpdatedDifference} ago - </> - } + item={<DateDistance date={snapshot.created} />} /> )} <MetaDataBlock heading="Sessions" item={numSessions} />