Merge pull request #1347 from webkom/form-cleanup

Refactoring of application form components

frontend/src/containers/GroupApplication/Application.tsx

@@ -11,9 +11,9 @@ import useDebouncedState from "src/utils/useDebouncedState";
 import { saveApplicationTextDraft } from "src/utils/draftHelper";
 import { Group } from "src/types";
 import { FieldInputProps, FormikProps } from "formik";
+import { FormValues } from "src/routes/ApplicationForm";
 
 type FieldValue = string;
-export type FormValues = Record<string, string>;
 
 export interface ApplicationProps {
   responseLabel: string;
@@ -36,7 +36,10 @@ const Application: React.FC<ApplicationProps> = ({
     saveApplicationTextDraft([group.name, value]);
   }, [debouncedValue]);
 
-  const error = touched[name] ? errors[name] : undefined;
+  const error =
+    touched.groups && touched.groups[name]
+      ? errors.groups && errors.groups[name]
+      : undefined;
 
   return (
     <Container>
@@ -51,7 +54,7 @@ const Application: React.FC<ApplicationProps> = ({
         <FieldLabel htmlFor={group.name.toLowerCase()}>Søknadstekst</FieldLabel>
         <InputArea
           className="textarea"
-          name={name}
+          name={"groups." + name}
           id={name}
           onChange={onChange}
           onBlur={handleBlur}

frontend/src/routes/ApplicationForm/FormContainer.tsx

@@ -0,0 +1,72 @@
+import React from "react";
+import { FormikTouched, FormikErrors, Field } from "formik";
+import GroupApplication from "src/containers/GroupApplication";
+import { Group } from "src/types";
+import { FormValues, SharedApplicationProps } from ".";
+import FormStructure from "./FormStructure";
+
+type FormContainerProps = SharedApplicationProps & {
+  handleSubmit: () => void;
+  touched: FormikTouched<FormValues>;
+  errors: FormikErrors<FormValues>;
+  isSubmitting: boolean;
+  isValid: boolean;
+};
+
+const FormContainer: React.FC<FormContainerProps> = ({
+  admission,
+  touched,
+  errors,
+  isSubmitting,
+  groups,
+  selectedGroups,
+  handleSubmit,
+  isValid,
+  toggleGroup,
+  toggleIsEditing,
+  myApplication,
+}) => {
+  const onCancelEdit = () => {
+    toggleIsEditing();
+  };
+
+  const hasSelected =
+    groups.filter((group: Group) => selectedGroups[group.name.toLowerCase()])
+      .length >= 1;
+  const SelectedGroupItems = groups
+    .filter((group: Group) => selectedGroups[group.name.toLowerCase()])
+    .map((group: Group, index: number) => (
+      <Field
+        component={GroupApplication}
+        group={group}
+        name={group.name.toLowerCase()}
+        responseLabel={group.response_label}
+        error={
+          touched.groups &&
+          touched.groups[group.name.toLowerCase()] &&
+          errors.groups &&
+          errors.groups[group.name.toLowerCase()]
+        }
+        key={`${group.name.toLowerCase()} ${index}`}
+      />
+    ));
+
+  return (
+    <FormStructure
+      admission={admission}
+      isSubmitting={isSubmitting}
+      isValid={isValid}
+      handleSubmit={handleSubmit}
+      groups={groups}
+      selectedGroups={selectedGroups}
+      toggleGroup={toggleGroup}
+      toggleIsEditing={toggleIsEditing}
+      myApplication={myApplication}
+      hasSelected={hasSelected}
+      SelectedGroupItems={SelectedGroupItems}
+      onCancel={onCancelEdit}
+    />
+  );
+};
+
+export default FormContainer;

frontend/src/routes/ApplicationForm/FormStructure.tsx

@@ -28,11 +28,12 @@ import {
   Title,
 } from "./FormStructureStyle";
 import { Admission, Group } from "src/types";
+import { SelectedGroups } from ".";
 
 interface FormStructureProps extends FormikValues {
-  admission: Admission;
+  admission?: Admission;
   groups: Group[];
-  selectedGroups: Record<string, string>;
+  selectedGroups: SelectedGroups;
   toggleGroup: (groupName: string) => void;
   SelectedGroupItems: ReactNode;
 }
@@ -49,8 +50,8 @@ const FormStructure: React.FC<FormStructureProps> = ({
   isValid,
   onCancel,
 }) => {
-  const { data: myApplication } = useMyApplication(String(admission.slug));
-  const isRevy = admission.slug === "revy";
+  const { data: myApplication } = useMyApplication(String(admission?.slug));
+  const isRevy = admission?.slug === "revy";
 
   return (
     <PageWrapper>
@@ -120,7 +121,7 @@ const FormStructure: React.FC<FormStructureProps> = ({
               <LegoButton
                 icon="arrow-forward"
                 iconPrefix="ios"
-                to={`/${admission.slug}/velg-grupper`}
+                to={`/${admission?.slug}/velg-grupper`}
               >
                 Velg {isRevy ? "grupper" : "komiteer"}
               </LegoButton>

frontend/src/routes/ApplicationForm/ToggleGroups.tsx

@@ -11,10 +11,11 @@ import { Link, useParams } from "react-router-dom";
 import MiniToggleGroup from "./MiniToggleGroup";
 import { media } from "src/styles/mediaQueries";
 import { Group } from "src/types";
+import { SelectedGroups } from ".";
 
 interface ToggleGroupsProps {
   groups: Group[];
-  selectedGroups: any;
+  selectedGroups: SelectedGroups;
   toggleGroup: (name: string) => void;
 }