refactor: create dedicated collection form component

inertia/components/form/form_collection.tsx

@@ -0,0 +1,78 @@
+import { ChangeEvent, FormEvent } from 'react';
+import FormField from '~/components/common/form/_form_field';
+import TextBox from '~/components/common/form/textbox';
+import BackToDashboard from '~/components/common/navigation/back_to_dashboard';
+import FormLayout from '~/components/layouts/form_layout';
+import { Visibility } from '../../../app/enums/visibility';
+
+export type FormCollectionData = {
+  name: string;
+  description: string | null;
+  visibility: Visibility;
+};
+
+export default function FormCollection({
+  title,
+  canSubmit,
+  disableHomeLink,
+  data,
+
+  setData,
+  handleSubmit,
+}: {
+  title: string;
+  canSubmit: boolean;
+  disableHomeLink?: boolean;
+  data: FormCollectionData;
+
+  setData: (name: string, value: string) => void;
+  handleSubmit: () => void;
+}) {
+  const handleOnCheck = ({ target }: ChangeEvent<HTMLInputElement>) =>
+    setData(
+      'visibility',
+      target.checked ? Visibility.PUBLIC : Visibility.PRIVATE
+    );
+
+  const onSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    handleSubmit();
+  };
+
+  return (
+    <FormLayout
+      title={title}
+      handleSubmit={onSubmit}
+      canSubmit={canSubmit}
+      disableHomeLink={disableHomeLink}
+    >
+      <BackToDashboard>
+        <TextBox
+          label="Collection name"
+          placeholder="Collection name"
+          name="name"
+          onChange={setData}
+          value={data.name}
+          required
+          autoFocus
+        />
+        <TextBox
+          label="Collection description"
+          placeholder="Collection description"
+          name="description"
+          onChange={setData}
+          value={data.description ?? undefined}
+        />
+        <FormField>
+          <label htmlFor="visibility">Public</label>
+          <input
+            type="checkbox"
+            onChange={handleOnCheck}
+            value={data.visibility}
+            id="visibility"
+          />
+        </FormField>
+      </BackToDashboard>
+    </FormLayout>
+  );
+}

inertia/hooks/use_auto_focus.tsx

@@ -1,9 +0,0 @@
-import { useCallback } from 'react';
-
-export default function useAutoFocus() {
-  return useCallback((inputElement: any) => {
-    if (inputElement) {
-      inputElement.focus();
-    }
-  }, []);
-}

inertia/pages/collections/create.tsx

@@ -1,9 +1,8 @@
 import { useForm } from '@inertiajs/react';
-import { ChangeEvent, FormEvent, useMemo } from 'react';
+import { useMemo } from 'react';
-import FormField from '~/components/common/form/_form_field';
+import FormCollection, {
-import TextBox from '~/components/common/form/textbox';
+  FormCollectionData,
-import BackToDashboard from '~/components/common/navigation/back_to_dashboard';
+} from '~/components/form/form_collection';
-import FormLayout from '~/components/layouts/form_layout';
 import { Visibility } from '../../../app/enums/visibility';
 
 export default function CreateCollectionPage({
@@ -11,7 +10,7 @@ export default function CreateCollectionPage({
 }: {
   disableHomeLink: boolean;
 }) {
-  const { data, setData, post, processing } = useForm({
+  const { data, setData, post, processing } = useForm<FormCollectionData>({
     name: '',
     description: '',
     visibility: Visibility.PRIVATE,
@@ -21,52 +20,16 @@ export default function CreateCollectionPage({
     [processing, data]
   );
 
-  function handleOnCheck({ target }: ChangeEvent<HTMLInputElement>) {
+  const handleSubmit = () => post('/collections');
-    setData(
-      'visibility',
-      target.checked ? Visibility.PUBLIC : Visibility.PRIVATE
-    );
-  }
-
-  function handleSubmit(e: FormEvent<HTMLFormElement>) {
-    e.preventDefault();
-    post('/collections');
-  }
 
   return (
-    <FormLayout
+    <FormCollection
       title="Create a collection"
-      handleSubmit={handleSubmit}
       canSubmit={!isFormDisabled}
       disableHomeLink={disableHomeLink}
-    >
+      data={data}
-      <BackToDashboard>
+      setData={setData}
-        <TextBox
+      handleSubmit={handleSubmit}
-          label="Collection name"
+    />
-          placeholder="Collection name"
-          name="name"
-          onChange={setData}
-          value={data.name}
-          required
-          autoFocus
-        />
-        <TextBox
-          label="Collection description"
-          placeholder="Collection description"
-          name="description"
-          onChange={setData}
-          value={data.name}
-        />
-        <FormField>
-          <label htmlFor="visibility">Public</label>
-          <input
-            type="checkbox"
-            onChange={handleOnCheck}
-            value={data.visibility}
-            id="visibility"
-          />
-        </FormField>
-      </BackToDashboard>
-    </FormLayout>
   );
 }