wrap forms in form components

nerdgeschoss · Jan 16, 2025 · c8823af · c8823af
1 parent 1eb4ec7
commit c8823af
Show file tree

Hide file tree

Showing 8 changed files with 104 additions and 67 deletions.
diff --git a/app/frontend/components/form/form.tsx b/app/frontend/components/form/form.tsx
@@ -0,0 +1,19 @@
+import React, { ReactNode } from 'react';
+
+interface Props {
+  children: ReactNode;
+  onSubmit?: () => void;
+}
+
+export function Form({ children, onSubmit }: Props): JSX.Element {
+  return (
+    <form
+      onSubmit={(event) => {
+        event.preventDefault();
+        onSubmit?.();
+      }}
+    >
+      {children}
+    </form>
+  );
+}
diff --git a/app/views/inventories/edit.tsx b/app/views/inventories/edit.tsx
@@ -8,6 +8,7 @@ import { useReaction } from '../../frontend/sprinkles/reaction';
 import { Container } from '../../frontend/components/container/container';
 import { useFormatter, useTranslate } from '../../frontend/util/dependencies';
 import { DateField } from '../../frontend/components/date_field/date_field';
+import { Form } from '../../frontend/components/form/form';
 
 interface Form {
   name: string;
@@ -46,32 +47,34 @@ export default function ({
   });
   return (
     <Container>
-      <TextField {...fields.name} label={t('inventories.edit.name')} />
-      <TextField {...fields.details} label={t('inventories.edit.details')} />
-      <DateField
-        {...fields.receivedAt}
-        label={t('inventories.edit.received_at')}
-      />
-      <DateField
-        {...fields.returnedAt}
-        label={t('inventories.edit.returned_at')}
-      />
-      <Button
-        title={t('inventories.edit.save')}
-        disabled={!valid}
-        onClick={onSubmit}
-      />
-      <Button
-        title={t('inventories.edit.delete')}
-        onClick={async () => {
-          await reaction.call({
-            path: `/inventories/${inventory.id}`,
-            method: 'DELETE',
-            refresh: true,
-          });
-          modal.close();
-        }}
-      />
+      <Form onSubmit={onSubmit}>
+        <TextField {...fields.name} label={t('inventories.edit.name')} />
+        <TextField {...fields.details} label={t('inventories.edit.details')} />
+        <DateField
+          {...fields.receivedAt}
+          label={t('inventories.edit.received_at')}
+        />
+        <DateField
+          {...fields.returnedAt}
+          label={t('inventories.edit.returned_at')}
+        />
+        <Button
+          title={t('inventories.edit.save')}
+          disabled={!valid}
+          onClick={onSubmit}
+        />
+        <Button
+          title={t('inventories.edit.delete')}
+          onClick={async () => {
+            await reaction.call({
+              path: `/inventories/${inventory.id}`,
+              method: 'DELETE',
+              refresh: true,
+            });
+            modal.close();
+          }}
+        />
+      </Form>
     </Container>
   );
 }
diff --git a/app/views/inventories/new.tsx b/app/views/inventories/new.tsx
@@ -7,6 +7,7 @@ import { DateField } from '../../frontend/components/date_field/date_field';
 import { useModalInfo } from '../../frontend/components/modal/modal';
 import { useReaction } from '../../frontend/sprinkles/reaction';
 import { useTranslate } from '../../frontend/util/dependencies';
+import { Form } from '../../frontend/components/form/form';
 
 interface Form {
   userId: string;
@@ -38,7 +39,7 @@ export default function ({
     },
   });
   return (
-    <>
+    <Form onSubmit={onSubmit}>
       <TextField {...fields.name} label={t('inventories.new.name')} />
       <TextField {...fields.details} label={t('inventories.new.details')} />
       <DateField
@@ -50,6 +51,6 @@ export default function ({
         disabled={!valid}
         onClick={onSubmit}
       />
-    </>
+    </Form>
   );
 }
diff --git a/app/views/leaves/new.tsx b/app/views/leaves/new.tsx
@@ -10,6 +10,7 @@ import { useForm } from '@nerdgeschoss/react-use-form-library';
 import { useModalInfo } from '../../frontend/components/modal/modal';
 import { SelectOption } from '../../frontend/components/form_field/form_field';
 import { Text } from '../../frontend/components/text/text';
+import { Form } from '../../frontend/components/form/form';
 
 interface Form {
   userId: string;
@@ -58,7 +59,7 @@ export default function ({
   const someDaysInPast = fields.days.value.some((date) => date < today);
 
   return (
-    <>
+    <Form onSubmit={onSubmit}>
       <CalendarField {...fields.days} label={t('leaves.new.days')} />
       {someDaysInPast && <Text>{t('leaves.new.days_in_past_warning')}</Text>}
       {permitUserSelect && (
@@ -82,6 +83,6 @@ export default function ({
         disabled={!valid}
         onClick={onSubmit}
       />
-    </>
+    </Form>
   );
 }
diff --git a/app/views/payslips/new.tsx b/app/views/payslips/new.tsx
@@ -8,6 +8,7 @@ import { SelectField } from '../../frontend/components/select_field/select_field
 import { FileField } from '../../frontend/components/file_field/file_field';
 import { useReaction } from '../../frontend/sprinkles/reaction';
 import { useFormatter } from '../../frontend/util/dependencies';
+import { Form } from '../../frontend/components/form/form';
 
 interface Form {
   userId: string;
@@ -42,7 +43,7 @@ export default function ({
     },
   });
   return (
-    <>
+    <Form onSubmit={onSubmit}>
       <SelectField
         {...fields.userId}
         label="User"
@@ -54,6 +55,6 @@ export default function ({
       <DateField {...fields.month} label="Received at" />
       <FileField {...fields.pdf} label="File" />
       <Button title="create" disabled={!valid} onClick={onSubmit} />
-    </>
+    </Form>
   );
 }
diff --git a/app/views/sessions/edit.tsx b/app/views/sessions/edit.tsx
@@ -7,6 +7,7 @@ import { TextField } from '../../frontend/components/text_field/text_field';
 import { Container } from '../../frontend/components/container/container';
 import { useForm } from '@nerdgeschoss/react-use-form-library';
 import { useReaction } from '../../frontend/sprinkles/reaction';
+import { Form } from '../../frontend/components/form/form';
 
 export default function EditSession({
   data: { email },
@@ -30,19 +31,21 @@ export default function EditSession({
   });
   return (
     <Container>
-      <Stack>
-        <Text type="headline">Login</Text>
-        <TextField {...fields.email} label="Email" disabled />
-        <TextField
-          {...fields.code}
-          label="Code"
-          errors={[
-            ...fields.code.errors,
-            ...(invalidCode ? ['invalid-code'] : []),
-          ]}
-        />
-        <Button title="Login" disabled={!valid} onClick={onSubmit} />
-      </Stack>
+      <Form onSubmit={onSubmit}>
+        <Stack>
+          <Text type="headline">Login</Text>
+          <TextField {...fields.email} label="Email" disabled />
+          <TextField
+            {...fields.code}
+            label="Code"
+            errors={[
+              ...fields.code.errors,
+              ...(invalidCode ? ['invalid-code'] : []),
+            ]}
+          />
+          <Button title="Login" disabled={!valid} onClick={onSubmit} />
+        </Stack>
+      </Form>
     </Container>
   );
 }
diff --git a/app/views/sessions/new.tsx b/app/views/sessions/new.tsx
@@ -6,6 +6,7 @@ import { TextField } from '../../frontend/components/text_field/text_field';
 import { Container } from '../../frontend/components/container/container';
 import { useForm } from '@nerdgeschoss/react-use-form-library';
 import { useReaction } from '../../frontend/sprinkles/reaction';
+import { Form } from '../../frontend/components/form/form';
 
 export default function NewSession(): JSX.Element {
   const reaction = useReaction();
@@ -23,11 +24,13 @@ export default function NewSession(): JSX.Element {
   });
   return (
     <Container>
-      <Stack>
-        <Text type="headline">Login</Text>
-        <TextField {...fields.email} label="Email" />
-        <Button title="Login" disabled={!valid} onClick={onSubmit} />
-      </Stack>
+      <Form onSubmit={onSubmit}>
+        <Stack>
+          <Text type="headline">Login</Text>
+          <TextField {...fields.email} label="Email" />
+          <Button title="Login" disabled={!valid} onClick={onSubmit} />
+        </Stack>
+      </Form>
     </Container>
   );
 }
diff --git a/app/views/sprints/new.tsx b/app/views/sprints/new.tsx
@@ -9,6 +9,7 @@ import { DateField } from '../../frontend/components/date_field/date_field';
 import { useReaction } from '../../frontend/sprinkles/reaction';
 import { useModalInfo } from '../../frontend/components/modal/modal';
 import { NumberField } from '../../frontend/components/number_field/number_field';
+import { Form } from '../../frontend/components/form/form';
 
 export default function ({
   data: { sprint },
@@ -42,22 +43,27 @@ export default function ({
   });
 
   return (
-    <Stack>
-      <TextField {...fields.title} label={t('sprints.new.title')} />
-      <DateField {...fields.sprintFrom} label={t('sprints.new.sprint_from')} />
-      <DateField
-        {...fields.sprintUntil}
-        label={t('sprints.new.sprint_until')}
-      />
-      <NumberField
-        {...fields.workingDays}
-        label={t('sprints.new.working_days')}
-      />
-      <Button
-        title={t('sprints.new.save')}
-        disabled={!valid}
-        onClick={onSubmit}
-      />
-    </Stack>
+    <Form onSubmit={onSubmit}>
+      <Stack>
+        <TextField {...fields.title} label={t('sprints.new.title')} />
+        <DateField
+          {...fields.sprintFrom}
+          label={t('sprints.new.sprint_from')}
+        />
+        <DateField
+          {...fields.sprintUntil}
+          label={t('sprints.new.sprint_until')}
+        />
+        <NumberField
+          {...fields.workingDays}
+          label={t('sprints.new.working_days')}
+        />
+        <Button
+          title={t('sprints.new.save')}
+          disabled={!valid}
+          onClick={onSubmit}
+        />
+      </Stack>
+    </Form>
   );
 }