Merge pull request #47 from vtex-apps/chore/bump-react-hook-jsonschema

Fix the value of date-time input field
vtex-apps · Aug 10, 2021 · bef95ff · bef95ff
2 parents 9656157 + ff8d9fd
commit bef95ff
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 7 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Fixed
+- the value of date-time input field to UTC.
 
 ## [0.7.0] - 2021-07-13
 

diff --git a/react/components/FormHandler.tsx b/react/components/FormHandler.tsx
@@ -14,6 +14,7 @@ import createDocumentV2 from '../graphql/createDocument.graphql'
 import { FormProps } from '../typings/FormProps'
 import { parseMasterDataError } from '../logic/masterDataError'
 import { useSubmitReducer, SubmitContext } from '../logic/formState'
+import { parseDateTimeFieldsData } from '../logic/parseDateTimeFields'
 
 export const FormHandler: FC<{
   schema: JSONSchemaType
@@ -35,18 +36,23 @@ export const FormHandler: FC<{
       }
       dispatchSubmitAction({ type: 'SET_LOADING' })
 
+      const parsedData = parseDateTimeFieldsData({
+        data,
+        properties: props.schema.properties,
+      })
+
       await createDocumentMutation({
         variables: {
           dataEntity: props.formProps.entity,
-          document: { document: data },
+          document: { document: parsedData },
           schema: props.formProps.schema,
         },
       })
         .then(() => {
           dispatchSubmitAction({ type: 'SET_SUCCESS' })
         })
         .catch(e => {
-          setLastErrorFieldValues(data)
+          setLastErrorFieldValues(parsedData)
 
           if (e.graphQLErrors) {
             for (const graphqlError of e.graphQLErrors as GraphQLError[]) {
@@ -72,6 +78,7 @@ export const FormHandler: FC<{
       dispatchSubmitAction,
       props.formProps.entity,
       props.formProps.schema,
+      props.schema.properties,
     ]
   )
 

diff --git a/react/logic/parseDateTimeFields.ts b/react/logic/parseDateTimeFields.ts
@@ -0,0 +1,18 @@
+interface ParseDateTimeParams {
+  data: Record<string, any>
+  properties: Record<string, unknown>
+}
+
+export const parseDateTimeFieldsData = ({
+  data,
+  properties,
+}: ParseDateTimeParams) => {
+  const parsedData = { ...data }
+  Object.entries(properties).forEach(([propertyKey, property]) => {
+    if ((property as any)?.format === 'date-time' && parsedData[propertyKey]) {
+      parsedData[propertyKey] = new Date(parsedData[propertyKey]).toISOString()
+    }
+  })
+
+  return parsedData
+}
diff --git a/react/package.json b/react/package.json
@@ -10,7 +10,7 @@
     "react": "^16.8.6",
     "react-apollo": "^3.1.3",
     "react-dom": "^16.8.6",
-    "react-hook-form-jsonschema": "0.2.0-beta.11",
+    "react-hook-form-jsonschema": "0.2.0",
     "react-intl": "^4.5.3"
   },
   "devDependencies": {

diff --git a/react/yarn.lock b/react/yarn.lock
@@ -4484,10 +4484,10 @@ react-dropzone@^10.2.1:
     file-selector "^0.1.12"
     prop-types "^15.7.2"
 
-react-hook-form-jsonschema@0.2.0-beta.11:
-  version "0.2.0-beta.11"
-  resolved "https://registry.yarnpkg.com/react-hook-form-jsonschema/-/react-hook-form-jsonschema-0.2.0-beta.11.tgz#a1f3f1e25899140f9c2924e4ac0a90dceb288546"
-  integrity sha512-bEz1Pe1DoQKhCqhp39siU4igs1H9y3f2iY9M6z6L3zvYQSxwZ7+HC16RSH/hiGrDWEN7GmH6J6QK4WRuJgWY5g==
+react-hook-form-jsonschema@0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/react-hook-form-jsonschema/-/react-hook-form-jsonschema-0.2.0.tgz#22fcae920751410083b0f6e25bfb7d9a84111067"
+  integrity sha512-jgKUbVC4ggK9nAmKQvnluVQJhmQM14PQudFMNKzorpBztiKWU4BzElP4c6cdM7zNKgk+B2NyQbub06+WiDgouA==
   dependencies:
     react-hook-form "^4.4.4"