refactor forms

plugin-hrm-form/src/___tests__/components/CSAMReport/CSAMReport.test.tsx

@@ -157,7 +157,7 @@ test("Form renders but can't be submitted on invalid url", async () => {
   expect(screen.queryByTestId('CSAMReport-Loading')).not.toBeInTheDocument();
   expect(screen.queryByTestId('CSAMReport-StatusScreen')).not.toBeInTheDocument();
 
-  const webAddressInput = screen.getByTestId('webAddress');
+  const webAddressInput = screen.getByTestId('webAddress-input');
   expect(webAddressInput).toBeInTheDocument();
 
   fireEvent.change(webAddressInput, {
@@ -185,7 +185,7 @@ test("Form can't be submitted if anonymous value is undefined", async () => {
   const submitButton = screen.getByTestId('CSAMReport-SubmitButton');
   expect(submitButton).toBeInTheDocument();
 
-  const webAddressInput = screen.getByTestId('webAddress');
+  const webAddressInput = screen.getByTestId('webAddress-input');
   expect(webAddressInput).toBeInTheDocument();
 
   fireEvent.change(webAddressInput, {
@@ -224,7 +224,7 @@ test('Form can be submitted if valid (anonymous)', async () => {
   const submitButton = screen.getByTestId('CSAMReport-SubmitButton');
   expect(submitButton).toBeInTheDocument();
 
-  const webAddressInput = screen.getByTestId('webAddress');
+  const webAddressInput = screen.getByTestId('webAddress-input');
   expect(webAddressInput).toBeInTheDocument();
 
   fireEvent.change(webAddressInput, {
@@ -280,7 +280,7 @@ test('Form can be submitted if valid (non-anonymous)', async () => {
   const submitButton = screen.getByTestId('CSAMReport-SubmitButton');
   expect(submitButton).toBeInTheDocument();
 
-  const webAddressInput = screen.getByTestId('webAddress');
+  const webAddressInput = screen.getByTestId('webAddress-input');
   expect(webAddressInput).toBeInTheDocument();
 
   fireEvent.change(webAddressInput, {
@@ -292,11 +292,11 @@ test('Form can be submitted if valid (non-anonymous)', async () => {
   expect(anonymousInput).toBeInTheDocument();
   const nonanonymousInput = screen.getByTestId('anonymous-non-anonymous');
   expect(nonanonymousInput).toBeInTheDocument();
-  const firstNameInput = screen.getByTestId('firstName');
+  const firstNameInput = screen.getByTestId('firstName-input');
   expect(firstNameInput).toBeInTheDocument();
-  const lastNameInput = screen.getByTestId('lastName');
+  const lastNameInput = screen.getByTestId('lastName-input');
   expect(lastNameInput).toBeInTheDocument();
-  const emailInput = screen.getByTestId('email');
+  const emailInput = screen.getByTestId('email-input');
   expect(emailInput).toBeInTheDocument();
 
   fireEvent.change(emailInput, {

plugin-hrm-form/src/components/CSAMReport/CSAMReport.tsx

@@ -115,12 +115,13 @@ export const CSAMReportScreen: React.FC<Props> = ({
     return (
       <FormProvider {...methods}>
         <CSAMReportTypePickerForm
-          methods={methods}
           renderContactDetails={false}
           counselor={currentCounselor}
           onClickClose={exit}
           onSubmit={onConfirmReportTypeSelection}
-          pickReportType={pickReportType}
+          onPickReportType={() => {
+            pickReportType(methods.getValues(['reportType']).reportType);
+          }}
           reportType={csamReportState.reportType}
         />
       </FormProvider>
@@ -137,17 +138,15 @@ export const CSAMReportScreen: React.FC<Props> = ({
               counselor={currentCounselor}
               onClickClose={exit}
               onSendReport={onSendReport}
-              update={updateChildForm}
-              methods={methods}
+              onUpdateInput={() => updateChildForm(methods.getValues() as any)}
             />
           ) : (
             <CSAMReportCounsellorForm
               formValues={csamReportState.form}
               counselor={currentCounselor}
               onClickClose={exit}
               onSendReport={onSendReport}
-              update={updateCounsellorForm}
-              methods={methods}
+              onUpdateInput={() => updateCounsellorForm(methods.getValues() as any)}
             />
           )}
         </FormProvider>

plugin-hrm-form/src/components/CSAMReport/CSAMReportChildForm.tsx

@@ -34,20 +34,12 @@ type Props = {
   counselor: string;
   onClickClose: () => void;
   onSendReport: () => void;
-  update: (formValues: ChildCSAMReportForm) => void;
+  onUpdateInput: () => void;
   formValues: ChildCSAMReportForm;
-  methods: ReturnType<typeof useForm>;
 };
 
-const CSAMReportChildForm: React.FC<Props> = ({
-  counselor,
-  onClickClose,
-  onSendReport,
-  update,
-  formValues,
-  methods,
-}) => {
-  const generateChildFormElement = generateCSAMFormElement(childInitialValues, formValues, update, methods);
+const CSAMReportChildForm: React.FC<Props> = ({ counselor, onClickClose, onSendReport, onUpdateInput, formValues }) => {
+  const generateChildFormElement = generateCSAMFormElement(childInitialValues, formValues, onUpdateInput);
 
   const focusElementRef = useFocus();
 

plugin-hrm-form/src/components/CSAMReport/CSAMReportCounsellorForm.tsx

@@ -33,20 +33,18 @@ type Props = {
   counselor: string;
   onClickClose: () => void;
   onSendReport: () => void;
-  update: (formValues: CounselorCSAMReportForm) => void;
+  onUpdateInput: () => void;
   formValues: CounselorCSAMReportForm;
-  methods: ReturnType<typeof useForm>;
 };
 
 const CSAMReportCounsellorForm: React.FC<Props> = ({
   counselor,
   onClickClose,
   onSendReport,
-  update,
+  onUpdateInput,
   formValues,
-  methods,
 }) => {
-  const generateCounselorFormElement = generateCSAMFormElement(initialValues, formValues, update, methods);
+  const generateCounselorFormElement = generateCSAMFormElement(initialValues, formValues, onUpdateInput);
 
   const focusElementRef = useFocus();
 

plugin-hrm-form/src/components/CSAMReport/CSAMReportFormDefinition.ts

@@ -14,10 +14,15 @@
  * along with this program.  If not, see https://www.gnu.org/licenses/.
  */
 
-import { FormItemDefinition, FormInputType, FormDefinition } from 'hrm-form-definitions';
-import { useForm } from 'react-hook-form';
+import {
+  FormItemDefinition,
+  FormInputType,
+  FormDefinition,
+  FormItemDefinitionSpecification,
+} from 'hrm-form-definitions';
 
-import { addMargin, getInitialValue, getInputType } from '../common/forms/formGenerators';
+import { createInput } from '../forms/inputGenerator';
+import { addMargin, getInitialValue } from '../common/forms/formGenerators';
 
 type CounselorCSAMFormDefinitionObject = {
   webAddress: FormItemDefinition;
@@ -121,31 +126,30 @@ export const childInitialValues = {
   ageVerified: getInitialValue(childDefinitionObject.ageVerified),
 } as const;
 
-export const externalReportDefinition: FormDefinition = [
-  {
-    name: 'reportType',
-    label: '',
-    type: FormInputType.RadioInput,
-    required: true,
-    options: [
-      { value: 'child', label: 'Create link for child' },
-      { value: 'counsellor', label: 'Report as counselor' },
-    ],
-  },
-];
+export const externalReportDefinition: FormItemDefinition = {
+  name: 'reportType',
+  label: '',
+  type: FormInputType.RadioInput,
+  required: true,
+  options: [
+    { value: 'child', label: 'Create link for child' },
+    { value: 'counsellor', label: 'Report as counselor' },
+  ],
+};
 
-export const generateCSAMFormElement = <T>(
-  initialValues: T,
-  formValues: T,
-  update: (values: Record<string, any>) => void,
-  methods: ReturnType<typeof useForm>,
-) => (formItem: FormItemDefinition): JSX.Element => {
-  const onUpdateInput = () => {
-    update(methods.getValues());
-  };
-  const generatedInput = getInputType([], onUpdateInput)(formItem);
+export const generateCSAMFormElement = <T>(initialValues: T, formValues: T, onUpdateInput: () => void) => (
+  formItem: FormItemDefinition,
+): JSX.Element => {
   const initialValue =
     formValues[formItem.name] === undefined ? initialValues[formItem.name] : formValues[formItem.name];
 
-  return addMargin(5)(generatedInput(initialValue));
+  const generatedInput = createInput({
+    formItemDefinition: formItem,
+    htmlElRef: undefined,
+    initialValue,
+    parentsPath: '',
+    updateCallback: onUpdateInput,
+  });
+
+  return addMargin(5)(generatedInput);
 };

plugin-hrm-form/src/components/CSAMReport/CSAMReportTypePicker.tsx

@@ -24,39 +24,33 @@ import ActionHeader from '../case/ActionHeader';
 import { BottomButtonBar, Box, HiddenText, Row } from '../../styles';
 import { StyledNextStepButton, HeaderCloseButton } from '../../styles/buttons';
 import { BoldDescriptionText, CSAMReportContainer, CSAMReportLayout } from './styles';
-import { addMargin, getInputType } from '../common/forms/formGenerators';
+import { addMargin } from '../common/forms/formGenerators';
 import { CSAMReportType } from '../../states/csam-report/types';
 import { externalReportDefinition } from './CSAMReportFormDefinition';
 import { CaseActionTitle } from '../case/styles';
 import useFocus from '../../utils/useFocus';
+import { createInput } from '../forms/inputGenerator';
 
 type Props = {
   renderContactDetails?: boolean;
   counselor: string;
   onClickClose: () => void;
   onSubmit: () => void;
   isEmpty?: boolean;
-  methods: ReturnType<typeof useForm>;
   reportType: CSAMReportType;
-  pickReportType: (reportTypeFormValue: string) => void;
+  onPickReportType: () => void;
 };
 
-const CSAMReportTypePicker: React.FC<Props> = ({
-  counselor,
-  onClickClose,
-  onSubmit,
-  methods,
-  reportType,
-  pickReportType,
-}) => {
-  const { getValues } = methods;
-  const formElement = React.useMemo(() => {
-    return addMargin(5)(
-      getInputType([], () => pickReportType(getValues(['reportType']).reportType))(externalReportDefinition[0])(
-        reportType,
-      ),
-    );
-  }, [getValues, pickReportType, reportType]);
+const CSAMReportTypePicker: React.FC<Props> = ({ counselor, onClickClose, onSubmit, reportType, onPickReportType }) => {
+  const formElement = addMargin(5)(
+    createInput({
+      formItemDefinition: externalReportDefinition,
+      htmlElRef: undefined,
+      initialValue: reportType,
+      parentsPath: '',
+      updateCallback: onPickReportType,
+    }),
+  );
 
   const focusElementRef = useFocus();
   return (

plugin-hrm-form/src/components/caseList/filters/DateRangeFilter.tsx

@@ -20,13 +20,13 @@ import { endOfDay, format, parse } from 'date-fns';
 import ArrowDropUp from '@material-ui/icons/ArrowDropUp';
 import ArrowDropDown from '@material-ui/icons/ArrowDropDown';
 
+import { FormRadioInput } from '../../forms/components/RadioInput/styles';
 import { DateFilterOption, DateFilterOptions, isDivider, isExistsDateFilter, isFixedDateRange } from './dateFilters';
 import {
   Box,
   Flex,
   FormDateInput,
   FormLabel,
-  FormRadioInput,
   DialogArrow,
   FiltersDialog,
   FiltersApplyButton,