Properly type form values in CompanySemesterGUI form

webkom · Oct 21, 2023 · 26047cc · 26047cc
1 parent 97863d0
commit 26047cc
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 12 deletions.
diff --git a/app/actions/CompanyActions.ts b/app/actions/CompanyActions.ts
@@ -404,7 +404,7 @@ export function addSemester({
         },
         meta: {
           errorMessage: 'Legge til semester feilet',
-          successMessage: 'Semest lagt til!',
+          successMessage: 'Semester lagt til!',
         },
       })
     );

diff --git a/app/components/CommentForm/CommentForm.css b/app/components/CommentForm/CommentForm.css
@@ -6,7 +6,7 @@
   margin: 0;
 }
 
-.submittable {
+.submitButton:disabled {
   opacity: 0;
   transition: opacity var(--easing-medium);
 }
diff --git a/app/components/CommentForm/index.tsx b/app/components/CommentForm/index.tsx
@@ -76,7 +76,9 @@ const CommentForm = ({
                   />
                 </div>
 
-                <SubmitButton>{submitText}</SubmitButton>
+                <SubmitButton className={styles.submitButton}>
+                  {submitText}
+                </SubmitButton>
               </Flex>
 
               <SubmissionError />

diff --git a/app/components/Form/SubmitButton.tsx b/app/components/Form/SubmitButton.tsx
@@ -5,11 +5,17 @@ import type { MouseEventHandler, ReactNode } from 'react';
 type Props = {
   children: ReactNode;
   onClick?: MouseEventHandler<HTMLButtonElement>;
+  className?: string;
 };
 
-export const SubmitButton = ({ children, onClick }: Props) =>
+export const SubmitButton = ({ children, onClick, className }: Props) =>
   spySubmittable((submittable) => (
-    <Button submit disabled={!submittable} onClick={onClick}>
+    <Button
+      submit
+      disabled={!submittable}
+      onClick={onClick}
+      className={className}
+    >
       {children}
     </Button>
   ));
diff --git a/app/routes/companyInterest/components/CompanySemesterGUI.tsx b/app/routes/companyInterest/components/CompanySemesterGUI.tsx
@@ -11,6 +11,7 @@ import SubmissionError from 'app/components/Form/SubmissionError';
 import { SubmitButton } from 'app/components/Form/SubmitButton';
 import Icon from 'app/components/Icon';
 import Flex from 'app/components/Layout/Flex';
+import { Semester } from 'app/store/models';
 import type CompanySemester from 'app/store/models/CompanySemester';
 import { createValidator, required } from 'app/utils/validation';
 import { semesterToText, SemesterNavigation } from '../utils';
@@ -22,9 +23,16 @@ type Props = {
   editSemester: (semester: CompanySemester) => Promise<void>;
   addSemester: (semester: Omit<CompanySemester, 'id'>) => Promise<void>;
   activeSemesters: Array<CompanySemester>;
-  initialValues: Record<string, any>;
+  initialValues: Partial<FormValues>;
 };
 
+type FormValues = {
+  year: string;
+  semester: Semester;
+};
+
+const TypedLegoForm = LegoFinalForm<FormValues>;
+
 const validate = createValidator({
   year: [required()],
   semester: [required()],
@@ -68,7 +76,10 @@ const AddSemesterForm = ({
   editSemester,
   initialValues,
 }: AddSemesterProps) => {
-  const onSubmit = async ({ year, semester }, form: FormApi) => {
+  const onSubmit = async (
+    { year, semester }: FormValues,
+    form: FormApi<FormValues>
+  ) => {
     const existingCompanySemester = semesters.find((companySemester) => {
       return (
         Number(companySemester.year) === Number(year) &&
@@ -82,15 +93,15 @@ const AddSemesterForm = ({
       });
     else
       await addSemester({
-        year,
+        year: Number(year),
         semester,
       }); // Default is activeInterestForm: true
 
     form.restart();
   };
 
   return (
-    <LegoFinalForm
+    <TypedLegoForm
       onSubmit={onSubmit}
       validate={validate}
       initialValues={initialValues}
@@ -113,21 +124,21 @@ const AddSemesterForm = ({
               name="Spring"
               label="Vår"
               component={RadioButton.Field}
-              inputValue="spring"
+              inputValue={Semester.Spring}
             />
             <Field
               name="Autumn"
               label="Høst"
               component={RadioButton.Field}
-              inputValue="autumn"
+              inputValue={Semester.Autumn}
             />
           </MultiSelectGroup>
 
           <SubmissionError />
           <SubmitButton>Legg til semester</SubmitButton>
         </Form>
       )}
-    </LegoFinalForm>
+    </TypedLegoForm>
   );
 };