fix: improve date parsing for collection items

apps/studio/.storybook/preview.tsx

@@ -162,6 +162,7 @@ export const MockDateDecorator: Decorator<Args> = (story, { parameters }) => {
  // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
  mockdate.set(parameters.mockdate)
 
+ // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
  const mockedDate = format(parameters.mockdate, "dd-mm-yyyy HH:mma")
 
  return (

apps/studio/package.json

@@ -106,7 +106,7 @@
  "@trpc/react-query": "10.45.0",
  "@trpc/server": "10.45.0",
  "ajv": "^8.16.0",
- "date-fns": "^3.6.0",
+ "date-fns": "^4.1.0",
  "date-fns-tz": "^3.1.3",
  "flat": "^6.0.1",
  "fuzzysort": "^2.0.4",

packages/components/package.json

@@ -96,7 +96,7 @@
  "@govtechsg/sgds-react": "^2.5.1",
  "@headlessui/react": "^2.1.2",
  "@sinclair/typebox": "^0.33.12",
- "dayjs": "^1.11.13",
+ "date-fns": "^4.1.0",
  "interweave": "^13.1.0",
  "interweave-ssr": "^2.0.0",
  "isomorphic-dompurify": "^2.12.0",

packages/components/src/templates/next/layouts/Collection/Collection.tsx

@@ -1,8 +1,4 @@
-import type {
- CollectionPageSchemaType,
- IsomerSitemap,
- IsomerSiteProps,
-} from "~/engine"
+import type { CollectionPageSchemaType, IsomerSiteProps } from "~/engine"
 import type { CollectionCardProps } from "~/interfaces"
 import { getBreadcrumbFromSiteMap, getSitemapAsArray } from "~/utils"
 import { Skeleton } from "../Skeleton"
@@ -49,13 +45,8 @@ const getCollectionItems = (
  item.layout === "article",
  )
  .map((item) => {
- const date = new Date(item.date || item.lastModified)
- const lastUpdated =
- date.getDate().toString().padStart(2, "0") +
- " " +
- date.toLocaleString("default", { month: "long" }) +
- " " +
- date.getFullYear()
+ const lastUpdated = item.date || item.lastModified
+ const date = new Date(lastUpdated)
 
  const baseItem = {
  type: "collectionCard" as const,

packages/components/src/templates/next/layouts/Collection/utils.ts

@@ -1,5 +1,6 @@
 import type { AppliedFilter, Filter as FilterType } from "../../types/Filter"
 import type { CollectionCardProps } from "~/interfaces"
+import { getParsedDate } from "~/utils"
 
 export const getAvailableFilters = (
  items: CollectionCardProps[],
@@ -25,7 +26,7 @@ export const getAvailableFilters = (
 
  // Step 3: Get all available years
  if (lastUpdated) {
- const year = new Date(lastUpdated).getFullYear().toString()
+ const year = getParsedDate(lastUpdated).getFullYear().toString()
  if (year in years && years[year]) {
  years[year] += 1
  } else {

packages/components/src/types/utils.ts

@@ -1,5 +1,10 @@
+import type { Tagged } from "type-fest"
+
 export type ValueOf<T> = T[keyof T]
 
+// This is a branded type for a formatted date string using getFormattedDate
+export type FormattedDate = Tagged<string, "FormattedDate">
+
 // This is the Next.js Link component that resembles the HTML anchor tag
 export type LinkComponentType = any
 

packages/components/src/utils/getFormattedDate.ts

@@ -1,13 +1,15 @@
-import dayjs from "dayjs"
-import customParseFormat from "dayjs/plugin/customParseFormat"
+import { format } from "date-fns"
 
-dayjs.extend(customParseFormat)
+import type { FormattedDate } from "~/types"
+import { getParsedDate } from "./getParsedDate"
 
 // Standardise the format of dates displayed on the site
-export const getFormattedDate = (date: string) =>
- dayjs(date, [
- "DD/MM/YYYY",
- "D MMM YYYY",
- "DD MMM YYYY",
- "YYYY-MM-DDTHH:mm:ss.SSSZ",
- ]).format("D MMMM YYYY")
+export const getFormattedDate = (dateString?: string): FormattedDate => {
+ if (dateString === undefined) {
+ return format(new Date(), "d MMMM yyyy") as FormattedDate
+ }
+
+ const date = getParsedDate(dateString)
+
+ return format(date, "d MMMM yyyy") as FormattedDate
+}

packages/components/src/utils/getParsedDate.ts

@@ -0,0 +1,39 @@
+import { isMatch, parse } from "date-fns"
+
+const SUPPORTED_DATE_FORMATS = [
+ "dd/MM/yyyy",
+ "d MMM yyyy",
+ "d MMMM yyyy",
+ "dd MMM yyyy",
+ "dd MMMM yyyy",
+ "yyyy-MM-dd",
+ "yyyy-MM-dd'T'HH:mm:ss.SSS'Z'",
+]
+
+export const getParsedDate = (dateString: string) => {
+ try {
+ const parsedDate = SUPPORTED_DATE_FORMATS.reduce<Date | undefined>(
+ (acc, format) => {
+ if (acc) {
+ // Date has already been parsed by an earlier format
+ return acc
+ }
+
+ if (isMatch(dateString, format)) {
+ return parse(dateString, format, new Date())
+ }
+
+ return acc
+ },
+ undefined,
+ )
+
+ if (parsedDate) {
+ return parsedDate
+ }
+
+ return new Date()
+ } catch (e) {
+ return new Date()
+ }
+}

packages/components/src/utils/index.ts

@@ -1,6 +1,7 @@
 export { getBreadcrumbFromSiteMap } from "./getBreadcrumbFromSiteMap"
 export { getDigestFromText } from "./getDigestFromText"
 export { getFormattedDate } from "./getFormattedDate"
+export { getParsedDate } from "./getParsedDate"
 export { getRandomNumberBetIntervals } from "./getRandomNumber"
 export { getReferenceLinkHref } from "./getReferenceLinkHref"
 export { getSanitizedIframeWithTitle } from "./getSanitizedIframeWithTitle"