refactor: use usePageState in forms

brainchild-projects · Mar 3, 2022 · 75a392f · 75a392f
1 parent 14dbe85
commit 75a392f
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 27 deletions.
diff --git a/src/pages/additionFillTheBlanks/AdditionFillTheBlanksPage.tsx b/src/pages/additionFillTheBlanks/AdditionFillTheBlanksPage.tsx
@@ -32,7 +32,7 @@ function AdditionFillTheBlanksPage(): JSX.Element {
       customizeForm={(
         <CustomizeAftbForm
           onChange={onChange}
-          initialData={data}
+          data={data}
         />
       )}
     >

diff --git a/src/pages/additionFillTheBlanks/CustomizeAftbForm.spec.tsx b/src/pages/additionFillTheBlanks/CustomizeAftbForm.spec.tsx
@@ -1,12 +1,29 @@
 /* eslint-disable testing-library/no-render-in-setup */
-import React from 'react';
+import React, { useState } from 'react';
 import ReactTestUtils from 'react-dom/test-utils';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import CustomizeAftbForm from './CustomizeAftbForm';
+import CustomizeAftbForm, { CustomizeAftbFormProps } from './CustomizeAftbForm';
 import AftbData from './AftbData';
 import stubPrint from '../../testing/stubPrint';
 
+type FormWrapperProps = CustomizeAftbFormProps;
+
+// This is for making sure that data changes are "persisted"
+function FormWrapper({ data: initialData, onChange }: FormWrapperProps): JSX.Element {
+  const [data, setData] = useState<AftbData>(initialData);
+
+  return (
+    <CustomizeAftbForm
+      onChange={(updated) => {
+        setData(updated);
+        onChange(updated);
+      }}
+      data={data}
+    />
+  );
+}
+
 describe('CustomizeAftbForm', () => {
   stubPrint();
 
@@ -26,9 +43,9 @@ describe('CustomizeAftbForm', () => {
   beforeEach(() => {
     onChange = jest.fn();
     return render(
-      <CustomizeAftbForm
+      <FormWrapper
         onChange={onChange}
-        initialData={initialData}
+        data={initialData}
       />,
     );
   });

diff --git a/src/pages/additionFillTheBlanks/CustomizeAftbForm.tsx b/src/pages/additionFillTheBlanks/CustomizeAftbForm.tsx
@@ -13,7 +13,7 @@ import stringMapToOptions from '../../components/forms/stringMapToOptions';
 
 export interface CustomizeAftbFormProps {
   onChange: (data: AftbData) => void,
-  initialData: AftbData,
+  data: AftbData,
 }
 
 const blankTypesStrategies = new Map<BlankPositionStrategy, string>([
@@ -24,10 +24,8 @@ const blankTypesStrategies = new Map<BlankPositionStrategy, string>([
 
 function CustomizeAftbForm({
   onChange,
-  initialData,
+  data,
 }: CustomizeAftbFormProps): JSX.Element {
-  const [data, setData] = useState<AftbData>(initialData);
-
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
 
   const validate = ({ rangeFrom, rangeTo }: AftbData): string | null => {
@@ -46,7 +44,6 @@ function CustomizeAftbForm({
     if (!error) {
       onChange(updated);
     }
-    setData(updated);
   };
 
   const changeBlankStrategy = (value: unknown) => {

diff --git a/src/pages/placeValues/CustomizePlaceValuesForm.tsx b/src/pages/placeValues/CustomizePlaceValuesForm.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import CustomizeForm from '../../components/forms/CustomizeForm';
 import NumberField from '../../components/forms/NumberField';
 import SelectField from '../../components/forms/SelectField';
@@ -12,19 +12,12 @@ const magnitudes: Map<string, string> = new Map([
 
 interface CustomizePlaceValuesFormProps {
   onChange: (data: PlaceValuesData) => void;
-  initialData: PlaceValuesData;
+  data: PlaceValuesData;
 }
 
 function CustomizePlaceValuesForm({
-  initialData, onChange,
+  data, onChange,
 }: CustomizePlaceValuesFormProps): JSX.Element {
-  const [data, setData] = useState<PlaceValuesData>(initialData);
-
-  const updateData = (updated: PlaceValuesData): void => {
-    setData(updated);
-    onChange(updated);
-  };
-
   return (
     <CustomizeForm
       onBeforePrint={() => true}
@@ -34,16 +27,12 @@ function CustomizePlaceValuesForm({
         name="count"
         label="Number of Problems"
         value={numberOrEmpty(data.count)}
-        onChange={(count) => {
-          updateData({ ...data, count });
-        }}
+        onChange={(count) => onChange({ ...data, count })}
       />
       <SelectField
         name="magnitude"
         value={data.magnitude}
-        onChange={(value) => {
-          updateData({ ...data, magnitude: value });
-        }}
+        onChange={(value) => onChange({ ...data, magnitude: value })}
       >
         {stringMapToOptions(magnitudes)}
       </SelectField>

diff --git a/src/pages/placeValues/PlaceValuesPage.tsx b/src/pages/placeValues/PlaceValuesPage.tsx
@@ -22,7 +22,7 @@ function PlaceValuesPage(): JSX.Element {
       customizeForm={(
         <CustomizePlaceValuesForm
           onChange={onChange}
-          initialData={data}
+          data={data}
         />
       )}
     >