From 7ac77ae7f1d883c553e7410161d2950f97548c3c Mon Sep 17 00:00:00 2001 From: Nell Hardcastle Date: Thu, 4 Jan 2024 10:43:56 -0800 Subject: [PATCH 1/4] feat(app): Add DateDistance component that renders how long ago a date was relative to the current time --- .../__snapshots__/date-distance.spec.tsx.snap | 7 +++++++ .../__tests__/date-distance.spec.tsx | 19 +++++++++++++++++++ .../src/scripts/components/date-distance.tsx | 10 ++++++++++ 3 files changed, 36 insertions(+) create mode 100644 packages/openneuro-app/src/scripts/components/__tests__/__snapshots__/date-distance.spec.tsx.snap create mode 100644 packages/openneuro-app/src/scripts/components/__tests__/date-distance.spec.tsx create mode 100644 packages/openneuro-app/src/scripts/components/date-distance.tsx 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`] = ` + + 2022-02-04 - about 2 years ago + +`; 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() + 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 +} From 3146617d59d42aeef0401b1fb0b35fef701f4c9c Mon Sep 17 00:00:00 2001 From: Nell Hardcastle Date: Thu, 4 Jan 2024 10:44:37 -0800 Subject: [PATCH 2/4] tests(app): Run snapshot-container tests at a specific time Avoid test instability with date changes --- .../scripts/dataset/__tests__/snapshot-container.spec.tsx | 7 +++++++ 1 file changed, 7 insertions(+) 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(, { wrapper: MockAppWrapper, From 9b88c8accf6e3485fae13a2545be2c2e8321c4f4 Mon Sep 17 00:00:00 2001 From: Nell Hardcastle Date: Thu, 4 Jan 2024 10:45:12 -0800 Subject: [PATCH 3/4] fix(app): Consolidate formatDate to one function and use DateDistance component --- .../dataset/components/VersionList.tsx | 9 ++++---- .../scripts/dataset/snapshot-container.tsx | 23 ++++--------------- 2 files changed, 9 insertions(+), 23 deletions(-) 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 = ({ <>
{selected === "draft" ? "Draft" : selected}
- {selected === "draft" ? "Updated" : "Created"}: {dateModified} + {selected === "draft" ? "Updated" : "Created"}:{" "} + {formatDate(dateModified)}
{items.length ? ( @@ -68,7 +67,7 @@ export const VersionList = ({ {selected === "draft" ? "*" : ""} - {dateModified} + {formatDate(dateModified)} {items.map((item, index) => ( 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 = ({ ? 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 = ({ 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 = ({ heading="Uploaded by" item={ <> - on {dateAdded} -{" "} - {dateAddedDifference} ago + on{" "} + } /> @@ -284,11 +275,7 @@ export const SnapshotContainer: React.FC = ({ {dataset.snapshots.length && ( - {dateModified} - {dateUpdatedDifference} ago - - } + item={} /> )} From ac76341d025d950560ae7ac70f75a61001d80f65 Mon Sep 17 00:00:00 2001 From: Nell Hardcastle Date: Thu, 4 Jan 2024 10:56:44 -0800 Subject: [PATCH 4/4] fix(app): Migrate draft-container to DateDistance component. --- .../src/scripts/dataset/draft-container.tsx | 21 +++++-------------- 1 file changed, 5 insertions(+), 16 deletions(-) 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 = ({ 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 = ({ 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 = ({ dataset }) => { heading="Uploaded by" item={ <> - on {dateAdded} -{" "} - {dateAddedDifference} ago + on{" "} + } /> @@ -289,7 +278,7 @@ const DraftContainer: React.FC = ({ dataset }) => { heading="Last Updated" item={ <> - {dateModified} - {dateUpdatedDifference} ago + } />