Merge pull request #6755 from opencrvs/ocrvs-6719-v1.3.4

fix: format event dates as localDates (v1.3.4)
opencrvs · Apr 16, 2024 · a2ac50b · a2ac50b
2 parents d81a8c7 + 9eecf4d
commit a2ac50b
Show file tree

Hide file tree

Showing 30 changed files with 574 additions and 238 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,7 @@
 - #### Fix multiple records not being downloaded simultaneously [#6492](https://github.com/opencrvs/opencrvs-core/issues/6492#issuecomment-1961098936)
 - #### Fix showing unassigned toast for reinstated declarations [#6492](https://github.com/opencrvs/opencrvs-core/issues/6492#issuecomment-1961098936)
 - #### Fix system crash when opening the started action modal [#6551](https://github.com/opencrvs/opencrvs-core/issues/6551)
+- #### Convert eventDates to LocalDate before formatting [#6719](https://github.com/opencrvs/opencrvs-core/issues/6719)
 
 ## [1.3.3](https://github.com/opencrvs/opencrvs-core/compare/v1.3.2...v1.3.3)
 

diff --git a/packages/client/codegen.ts b/packages/client/codegen.ts
@@ -0,0 +1,61 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * OpenCRVS is also distributed under the terms of the Civil Registration
+ * & Healthcare Disclaimer located at http://opencrvs.org/license.
+ *
+ * Copyright (C) The OpenCRVS Authors located at https://github.com/opencrvs/opencrvs-core/blob/master/AUTHORS.
+ */
+import type { CodegenConfig } from '@graphql-codegen/cli'
+
+const config: CodegenConfig = {
+  schema: [
+    {
+      'http://localhost:7070/graphql': {
+        headers: { Authorization: `Bearer ${process.env.TOKEN}` }
+      }
+    }
+  ],
+  documents: ['src/**/*.ts*', '!src/utils/gateway.ts', '!src/**/*.test.ts*'],
+  generates: {
+    './src/utils/gateway.ts': {
+      config: {
+        scalars: {
+          PlainDate: 'PlainDate'
+        }
+      },
+      plugins: [
+        'typescript',
+        'typescript-operations',
+        {
+          add: {
+            content: `/*
+             * This Source Code Form is subject to the terms of the Mozilla Public
+             * License, v. 2.0. If a copy of the MPL was not distributed with this
+             * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+             *
+             * OpenCRVS is also distributed under the terms of the Civil Registration
+             * & Healthcare Disclaimer located at http://opencrvs.org/license.
+             *
+             * Copyright (C) The OpenCRVS Authors located at https://github.com/opencrvs/opencrvs-core/blob/master/AUTHORS.
+             */
+
+            /*
+             * DO NOT EDIT! This file is auto-generated by yarn generate-gateway-types - see 'codegen.yml'
+             */
+            import { PlainDate } from '@client/utils/date-formatting'
+
+            `
+          }
+        }
+      ]
+    },
+    './graphql.schema.json': {
+      plugins: ['introspection']
+    }
+  },
+  overwrite: true
+}
+export default config
diff --git a/packages/client/codegen.yml b/packages/client/codegen.yml
diff --git a/packages/client/graphql.schema.json b/packages/client/graphql.schema.json
@@ -3028,7 +3028,7 @@
             "args": [],
             "type": {
               "kind": "SCALAR",
-              "name": "Date",
+              "name": "PlainDate",
               "ofType": null
             },
             "isDeprecated": false,
@@ -5338,7 +5338,7 @@
             "args": [],
             "type": {
               "kind": "SCALAR",
-              "name": "Date",
+              "name": "PlainDate",
               "ofType": null
             },
             "isDeprecated": false,
@@ -6092,7 +6092,7 @@
             "args": [],
             "type": {
               "kind": "SCALAR",
-              "name": "String",
+              "name": "PlainDate",
               "ofType": null
             },
             "isDeprecated": false,
@@ -6127,7 +6127,7 @@
             "description": null,
             "type": {
               "kind": "SCALAR",
-              "name": "String",
+              "name": "PlainDate",
               "ofType": null
             },
             "defaultValue": null,
@@ -6917,7 +6917,7 @@
             "args": [],
             "type": {
               "kind": "SCALAR",
-              "name": "Date",
+              "name": "PlainDate",
               "ofType": null
             },
             "isDeprecated": false,
@@ -8880,7 +8880,7 @@
             "args": [],
             "type": {
               "kind": "SCALAR",
-              "name": "Date",
+              "name": "PlainDate",
               "ofType": null
             },
             "isDeprecated": false,
@@ -12958,7 +12958,7 @@
             "args": [],
             "type": {
               "kind": "SCALAR",
-              "name": "String",
+              "name": "PlainDate",
               "ofType": null
             },
             "isDeprecated": false,
@@ -12970,7 +12970,7 @@
             "args": [],
             "type": {
               "kind": "SCALAR",
-              "name": "Date",
+              "name": "PlainDate",
               "ofType": null
             },
             "isDeprecated": false,
@@ -13245,7 +13245,7 @@
             "description": null,
             "type": {
               "kind": "SCALAR",
-              "name": "String",
+              "name": "PlainDate",
               "ofType": null
             },
             "defaultValue": null,
@@ -13257,7 +13257,7 @@
             "description": null,
             "type": {
               "kind": "SCALAR",
-              "name": "Date",
+              "name": "PlainDate",
               "ofType": null
             },
             "defaultValue": null,
@@ -13449,6 +13449,16 @@
         "enumValues": null,
         "possibleTypes": null
       },
+      {
+        "kind": "SCALAR",
+        "name": "PlainDate",
+        "description": "A date string such as 2024-04-15",
+        "fields": null,
+        "inputFields": null,
+        "interfaces": null,
+        "enumValues": null,
+        "possibleTypes": null
+      },
       {
         "kind": "OBJECT",
         "name": "Query",

diff --git a/packages/client/package.json b/packages/client/package.json
@@ -21,7 +21,7 @@
     "start:prod": "yarn serve -s -l 3000 build",
     "test:compilation": "tsc --noEmit",
     "extract:translations": "bash extract-translations.sh",
-    "generate-gateway-types": "graphql-codegen --config codegen.yml && prettier --write src/utils/gateway.ts",
+    "generate-gateway-types": "graphql-codegen --config codegen.ts && prettier --write src/utils/gateway.ts",
     "build:clean": "rm -rf build",
     "serve": "node serve-static.js"
   },

diff --git a/...client/src/forms/register/mappings/event-specific-fields/death/query/deceased-mappings.ts b/...client/src/forms/register/mappings/event-specific-fields/death/query/deceased-mappings.ts
@@ -9,7 +9,7 @@
  * Copyright (C) The OpenCRVS Authors located at https://github.com/opencrvs/opencrvs-core/blob/master/AUTHORS.
  */
 import { IFormField, IFormData } from '@client/forms'
-import format from '@client/utils/date-formatting'
+import { formatPlainDate } from '@client/utils/date-formatting'
 
 export const deceasedDateToFieldTransformation =
   (alternativeSectionId?: string) =>
@@ -54,7 +54,10 @@ export const deceasedDateFormatTransformation =
       if (!transformedData[sectionId]) {
         transformedData[sectionId] = {}
       }
-      transformedData[sectionId][field.name] = format(date, dateFormat)
+      transformedData[sectionId][field.name] = formatPlainDate(
+        queryValue,
+        dateFormat
+      )
       window.__localeId__ = prevLocale
     }
     return transformedData

diff --git a/...client/src/forms/register/mappings/event-specific-fields/marriage/query/event-mappings.ts b/...client/src/forms/register/mappings/event-specific-fields/marriage/query/event-mappings.ts
@@ -9,7 +9,7 @@
  * Copyright (C) The OpenCRVS Authors located at https://github.com/opencrvs/opencrvs-core/blob/master/AUTHORS.
  */
 import { IFormField, IFormData } from '@client/forms'
-import format from '@client/utils/date-formatting'
+import { formatPlainDate } from '@client/utils/date-formatting'
 
 export const marriageDateToFieldTransformation =
   (alternativeSectionIds?: string[]) =>
@@ -75,7 +75,10 @@ export const marriageDateFormatTransformation =
       if (!transformedData[sectionId]) {
         transformedData[sectionId] = {}
       }
-      transformedData[sectionId][field.name] = format(date, dateFormat)
+      transformedData[sectionId][field.name] = formatPlainDate(
+        queryValue,
+        dateFormat
+      )
       window.__localeId__ = prevLocale
     }
     return transformedData

diff --git a/packages/client/src/forms/register/mappings/query/field-mappings.ts b/packages/client/src/forms/register/mappings/query/field-mappings.ts
@@ -37,7 +37,10 @@ import {
 } from '@client/forms'
 import { EMPTY_STRING } from '@client/utils/constants'
 import { camelCase, cloneDeep, get, isArray } from 'lodash'
-import format from '@client/utils/date-formatting'
+import {
+  formatPlainDate,
+  isValidPlainDate
+} from '@client/utils/date-formatting'
 import {
   IOfflineData,
   OFFLINE_FACILITIES_KEY,
@@ -797,15 +800,17 @@ export const dateFormatTransformer =
     const queryValue =
       (queryData[sectionId]?.[transformedFieldName] as string) || ''
 
-    const date = new Date(queryValue)
-    if (!Number.isNaN(date.getTime())) {
+    if (isValidPlainDate(queryValue)) {
       const prevLocale = window.__localeId__
       window.__localeId__ = locale
 
       if (!transformedData[sectionId]) {
         transformedData[sectionId] = {}
       }
-      transformedData[sectionId][field.name] = format(date, dateFormat)
+      transformedData[sectionId][field.name] = formatPlainDate(
+        queryValue,
+        dateFormat
+      )
       window.__localeId__ = prevLocale
     }
   }

diff --git a/packages/client/src/utils/date-formatting.ts b/packages/client/src/utils/date-formatting.ts
@@ -16,8 +16,55 @@ import fr from 'date-fns/locale/fr'
 import subYears from 'date-fns/subYears'
 import isValid from 'date-fns/isValid'
 
+/*
+ *  The actual type is `${number}-${number}-${number}`
+ *  but as Date constructor is way too permissive so
+ *  using a custom type to restrict PlainDate's direct usage
+ *  with Date
+ *  It's of format YYYY-MM-DD
+ */
+export type PlainDate = { __type: 'PlainDate' }
+
 export const locales: Record<string, Locale> = { en: enGB, bn, fr }
 
+/*
+ * useful when dealing with draft data
+ */
+export function isValidPlainDate(rawDate: unknown): rawDate is PlainDate {
+  if (typeof rawDate !== 'string') {
+    return false
+  }
+  const [yyyy, mm, dd] = rawDate.split('-')
+  if (
+    !dd ||
+    !mm ||
+    !yyyy ||
+    dd.length === 0 ||
+    mm.length === 0 ||
+    yyyy.length < 4 ||
+    !isValid(new Date(rawDate))
+  ) {
+    return false
+  }
+  return true
+}
+
+export function plainDateToLocalDate(plainDate: PlainDate) {
+  const rawDate = plainDate as unknown as `${number}-${number}-${number}`
+  const [yyyy, mm, dd] = rawDate.split('-')
+  return new Date(Number(yyyy), Number(mm) - 1, Number(dd))
+}
+
+export function formatPlainDate(
+  plainDate: PlainDate,
+  formatString = 'dd MMMM yyyy'
+) {
+  const localDate = plainDateToLocalDate(plainDate)
+  return format(localDate, formatString, {
+    locale: locales[window.__localeId__]
+  })
+}
+
 export const formatLongDate = (
   date: string,
   locale = 'en',