From 9a5bb0dc47fb9e775adee1f697c074a01f49076e Mon Sep 17 00:00:00 2001
From: Ng Zhao Loong <ngzhaoloong@gmail.com>
Date: Wed, 5 Jan 2022 09:16:16 +0800
Subject: [PATCH] Fix/demo form state (#515)

* fix: preserve state while navigating

* fix: sneaky date-fns bug

* fix: update stories
---
 .../DemoCreateFormItem.stories.tsx            |  5 +++
 .../DemoCreateFormItem/index.tsx              | 36 +++++++++++--------
 .../Demo/DemoCreate/DemoCreateForm/data.tsx   |  2 +-
 .../Demo/DemoCreate/DemoCreateForm/index.tsx  |  1 +
 .../contexts/DemoFormContext/index.tsx        |  1 -
 src/components/Demo/DemoCreate/index.tsx      |  3 +-
 src/pages/demoCreate.tsx                      |  9 +++--
 7 files changed, 35 insertions(+), 22 deletions(-)

diff --git a/src/components/Demo/DemoCreate/DemoCreateForm/DemoCreateFormItem/DemoCreateFormItem.stories.tsx b/src/components/Demo/DemoCreate/DemoCreateForm/DemoCreateFormItem/DemoCreateFormItem.stories.tsx
index 187290b14..976d4f833 100644
--- a/src/components/Demo/DemoCreate/DemoCreateForm/DemoCreateFormItem/DemoCreateFormItem.stories.tsx
+++ b/src/components/Demo/DemoCreate/DemoCreateForm/DemoCreateFormItem/DemoCreateFormItem.stories.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 
 import { DemoCreateFormItem } from ".";
+import { data } from "../data";
 
 export default {
   title: "Demo/FormItem",
@@ -21,6 +22,7 @@ export const FormItemAccordion = () => {
       formItemName=""
       onChange={() => {}}
       formItemIndex={1}
+      data={data}
     />
   );
 };
@@ -36,6 +38,7 @@ export const FormItemWithLabel = () => {
       formItemName=""
       onChange={() => {}}
       formItemIndex={1}
+      data={data}
     />
   );
 };
@@ -51,6 +54,7 @@ export const FormItemWithoutLabel = () => {
       formItemName=""
       onChange={() => {}}
       formItemIndex={1}
+      data={data}
     />
   );
 };
@@ -66,6 +70,7 @@ export const FormItemUpload = () => {
       formItemName=""
       onChange={() => {}}
       formItemIndex={1}
+      data={data}
     />
   );
 };
diff --git a/src/components/Demo/DemoCreate/DemoCreateForm/DemoCreateFormItem/index.tsx b/src/components/Demo/DemoCreate/DemoCreateForm/DemoCreateFormItem/index.tsx
index 63e2f4bdd..8a4e82021 100644
--- a/src/components/Demo/DemoCreate/DemoCreateForm/DemoCreateFormItem/index.tsx
+++ b/src/components/Demo/DemoCreate/DemoCreateForm/DemoCreateFormItem/index.tsx
@@ -4,7 +4,6 @@ import { FunctionComponent } from "react";
 import Dropzone from "react-dropzone";
 import { AccordionItem } from "../../../../UI/Accordion";
 import { getFormValue } from "../../utils";
-import { data } from "../data";
 import { FormItemSchema } from "../types";
 
 interface DemoCreateFormItemProps {
@@ -12,6 +11,7 @@ interface DemoCreateFormItemProps {
   formItem: FormItemSchema;
   formItemName: string;
   formItemIndex: number;
+  data: Record<string, any>;
 }
 
 export const DemoCreateFormItem: FunctionComponent<DemoCreateFormItemProps> = ({
@@ -19,6 +19,7 @@ export const DemoCreateFormItem: FunctionComponent<DemoCreateFormItemProps> = ({
   formItemName,
   onChange,
   formItemIndex,
+  data,
 }) => {
   const renderProperties = () => {
     if (formItem.type === "object" && formItem.properties) {
@@ -33,6 +34,7 @@ export const DemoCreateFormItem: FunctionComponent<DemoCreateFormItemProps> = ({
             formItemName={itemName}
             formItem={item}
             formItemIndex={index}
+            data={data}
           />
         );
       });
@@ -68,18 +70,20 @@ export const DemoCreateFormItem: FunctionComponent<DemoCreateFormItemProps> = ({
     );
   };
 
-  const renderTextArea = () => {
+  const RenderTextArea = () => {
+    const [value, setValue] = useState(getFormValue(data, formItemName));
     if (formItem.type === "string") {
-      const defaultValue = getFormValue(data, formItemName);
-
       return (
         <textarea
           disabled={formItem.options?.readonly}
           data-testid="form-item-textarea"
           rows={4}
           className="w-full border rounded-md px-2 py-1 mb-0 focus:border-cloud-900 focus:outline-none placeholder-cloud-200 border-cloud-200"
-          defaultValue={defaultValue}
-          onChange={(e) => onChange(e.target.name, e.target.value)}
+          value={value}
+          onChange={(e) => {
+            setValue(e.target.value);
+            onChange(e.target.name, e.target.value);
+          }}
           name={formItemName}
           placeholder={formItem.uiType === "withoutLabel" ? formItem.title : undefined}
         />
@@ -87,17 +91,19 @@ export const DemoCreateFormItem: FunctionComponent<DemoCreateFormItemProps> = ({
     }
   };
 
-  const renderInput = () => {
+  const RenderInput = () => {
+    const [value, setValue] = useState(getFormValue(data, formItemName));
     if (formItem.type === "string") {
-      const defaultValue = getFormValue(data, formItemName);
-
       return (
         <Input
           disabled={formItem.options?.readonly}
           data-testid="form-item-input"
           className="w-full"
-          defaultValue={defaultValue}
-          onChange={(e) => onChange(e.target.name, e.target.value)}
+          value={value}
+          onChange={(e) => {
+            setValue(e.target.value);
+            onChange(e.target.name, e.target.value);
+          }}
           name={formItemName}
           placeholder={formItem.uiType === "withoutLabel" ? formItem.title : undefined}
         />
@@ -119,7 +125,7 @@ export const DemoCreateFormItem: FunctionComponent<DemoCreateFormItemProps> = ({
           accordionIndex={formItemIndex}
           setOpenIndex={setOpenIndex}
         >
-          {renderInput()}
+          {RenderInput()}
           {renderProperties()}
         </AccordionItem>
       );
@@ -129,21 +135,21 @@ export const DemoCreateFormItem: FunctionComponent<DemoCreateFormItemProps> = ({
           <h4 data-testid="form-item-label" className="mb-1">
             {formItem.title}
           </h4>
-          {renderInput()}
+          {RenderInput()}
           {renderProperties()}
         </div>
       );
     case "withoutLabel":
       return (
         <div className="mb-5">
-          {renderInput()}
+          {RenderInput()}
           {renderProperties()}
         </div>
       );
     case "textarea":
       return (
         <div className="mb-5">
-          {renderTextArea()}
+          {RenderTextArea()}
           {renderProperties()}
         </div>
       );
diff --git a/src/components/Demo/DemoCreate/DemoCreateForm/data.tsx b/src/components/Demo/DemoCreate/DemoCreateForm/data.tsx
index ef04f5f41..15498b25c 100644
--- a/src/components/Demo/DemoCreate/DemoCreateForm/data.tsx
+++ b/src/components/Demo/DemoCreate/DemoCreateForm/data.tsx
@@ -1,5 +1,5 @@
 import { format } from "date-fns";
-const issueDateTime = format(new Date(), "dd MMMM yyyy, K:mmaaa");
+const issueDateTime = format(new Date(), "dd MMMM yyyy, h:mmaaa");
 const actualDate = format(new Date(), "dd MMMM yyyy");
 export const data = {
   documentName: "Form for Free Trade Agreement",
diff --git a/src/components/Demo/DemoCreate/DemoCreateForm/index.tsx b/src/components/Demo/DemoCreate/DemoCreateForm/index.tsx
index ec51b9aa6..a15e7db03 100644
--- a/src/components/Demo/DemoCreate/DemoCreateForm/index.tsx
+++ b/src/components/Demo/DemoCreate/DemoCreateForm/index.tsx
@@ -51,6 +51,7 @@ export const DemoCreateForm: FunctionComponent = () => {
               formItemName={formItemName}
               formItem={formItem as FormItemSchema}
               formItemIndex={index}
+              data={formValues}
             />
           );
         })}
diff --git a/src/components/Demo/DemoCreate/contexts/DemoFormContext/index.tsx b/src/components/Demo/DemoCreate/contexts/DemoFormContext/index.tsx
index 99044dccd..8d71104eb 100644
--- a/src/components/Demo/DemoCreate/contexts/DemoFormContext/index.tsx
+++ b/src/components/Demo/DemoCreate/contexts/DemoFormContext/index.tsx
@@ -1,6 +1,5 @@
 import React, { createContext, ReactChildren, useState } from "react";
 import { data } from "../../DemoCreateForm/data";
-
 interface DemoFormContextProps {
   formValues: Record<string, any>;
   setFormValues: React.Dispatch<React.SetStateAction<any>>;
diff --git a/src/components/Demo/DemoCreate/index.tsx b/src/components/Demo/DemoCreate/index.tsx
index 5886fa07c..404b724a6 100644
--- a/src/components/Demo/DemoCreate/index.tsx
+++ b/src/components/Demo/DemoCreate/index.tsx
@@ -1,7 +1,6 @@
 import React, { FunctionComponent, useContext, useState } from "react";
 import { ReactNode } from "react-markdown";
 import { DemoCreateContext } from "./contexts/DemoCreateContext";
-import { DemoFormProvider } from "./contexts/DemoFormContext";
 import { Prompt } from "react-router";
 import { useHistory } from "react-router-dom";
 import { Location } from "history";
@@ -59,7 +58,7 @@ export const DemoCreate: FunctionComponent = () => {
     <>
       <Prompt when={when} message={handlePrompt} />
       <DemoCreateHeader />
-      <DemoFormProvider>{components[activeStep]}</DemoFormProvider>
+      {components[activeStep]}
     </>
   );
 };
diff --git a/src/pages/demoCreate.tsx b/src/pages/demoCreate.tsx
index 3f0f8abde..45efe9596 100644
--- a/src/pages/demoCreate.tsx
+++ b/src/pages/demoCreate.tsx
@@ -2,6 +2,7 @@ import React, { FunctionComponent } from "react";
 import { Helmet } from "react-helmet";
 import { DemoCreate } from "../components/Demo/DemoCreate";
 import { DemoCreateProvider } from "../components/Demo/DemoCreate/contexts/DemoCreateContext";
+import { DemoFormProvider } from "../components/Demo/DemoCreate/contexts/DemoFormContext";
 import { Page } from "../components/Layout/Page";
 import { DemoLayout } from "./demo";
 
@@ -22,9 +23,11 @@ export const DemoCreatePage: FunctionComponent = () => (
     </Helmet>
     <Page title="Demo">
       <DemoLayout>
-        <DemoCreateProvider>
-          <DemoCreate />
-        </DemoCreateProvider>
+        <DemoFormProvider>
+          <DemoCreateProvider>
+            <DemoCreate />
+          </DemoCreateProvider>
+        </DemoFormProvider>
       </DemoLayout>
     </Page>
   </>