From 6b327a5b1e56cba1c20ba358a088f6c7d10e39e0 Mon Sep 17 00:00:00 2001
From: Sonny <sonnyasdev@gmail.com>
Date: Tue, 14 May 2024 23:06:14 +0200
Subject: [PATCH] refactor: create dedicated collection form component

---
 inertia/components/form/form_collection.tsx | 78 +++++++++++++++++++++
 inertia/hooks/use_auto_focus.tsx            |  9 ---
 inertia/pages/collections/create.tsx        | 59 +++-------------
 3 files changed, 89 insertions(+), 57 deletions(-)
 create mode 100644 inertia/components/form/form_collection.tsx
 delete mode 100644 inertia/hooks/use_auto_focus.tsx

diff --git a/inertia/components/form/form_collection.tsx b/inertia/components/form/form_collection.tsx
new file mode 100644
index 0000000..c47f43a
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/inertia/hooks/use_auto_focus.tsx b/inertia/hooks/use_auto_focus.tsx
deleted file mode 100644
index 97462c3..0000000
--- a/inertia/hooks/use_auto_focus.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { useCallback } from 'react';
-
-export default function useAutoFocus() {
-  return useCallback((inputElement: any) => {
-    if (inputElement) {
-      inputElement.focus();
-    }
-  }, []);
-}
diff --git a/inertia/pages/collections/create.tsx b/inertia/pages/collections/create.tsx
index e77c024..6d9341f 100644
--- a/inertia/pages/collections/create.tsx
+++ b/inertia/pages/collections/create.tsx
@@ -1,9 +1,8 @@
 import { useForm } from '@inertiajs/react';
-import { ChangeEvent, FormEvent, useMemo } 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 { useMemo } from 'react';
+import FormCollection, {
+  FormCollectionData,
+} from '~/components/form/form_collection';
 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>) {
-    setData(
-      'visibility',
-      target.checked ? Visibility.PUBLIC : Visibility.PRIVATE
-    );
-  }
-
-  function handleSubmit(e: FormEvent<HTMLFormElement>) {
-    e.preventDefault();
-    post('/collections');
-  }
+  const handleSubmit = () => post('/collections');
 
   return (
-    <FormLayout
+    <FormCollection
       title="Create a collection"
-      handleSubmit={handleSubmit}
       canSubmit={!isFormDisabled}
       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.name}
-        />
-        <FormField>
-          <label htmlFor="visibility">Public</label>
-          <input
-            type="checkbox"
-            onChange={handleOnCheck}
-            value={data.visibility}
-            id="visibility"
-          />
-        </FormField>
-      </BackToDashboard>
-    </FormLayout>
+      data={data}
+      setData={setData}
+      handleSubmit={handleSubmit}
+    />
   );
 }