@openneuro/app 4.21.1 → 4.21.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openneuro/app",
-  "version": "4.21.1",
+  "version": "4.21.3",
   "description": "React JS web frontend for the OpenNeuro platform.",
   "license": "MIT",
   "main": "public/client.js",
@@ -20,8 +20,8 @@
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
     "@niivue/niivue": "0.34.0",
-    "@openneuro/client": "^4.21.1",
-    "@openneuro/components": "^4.21.1",
+    "@openneuro/client": "^4.21.3",
+    "@openneuro/components": "^4.21.3",
     "@tanstack/react-table": "^8.9.3",
     "bids-validator": "1.13.0",
     "bytes": "^3.0.0",
@@ -70,5 +70,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "17fab5325ea133c2a19779472a289ec2b30fa333"
+  "gitHead": "a1bc17ea73966bc27be4a4bed41729cbdee20beb"
 }

package/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>
+`;

package/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()
+  })
+})

package/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</>
+}

package/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,

package/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) => (

package/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} />
                       </>
                     }
                   />

package/src/scripts/dataset/mutations/create-anonymous-reviewer.tsx

@@ -30,7 +30,7 @@ export const CreateReviewLink: FC<CreateReviewLinkProps> = ({ datasetId }) => {
       <div className="share-form-controls">
         {error
           ? (
-            "An Error Occured"
+            "An Error Occurred"
           )
           : data
           ? (

package/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} />