feat: add create/edit link form + controller methods

inertia/pages/links/create.tsx

@@ -1,11 +1,9 @@
 import type Collection from '#models/collection';
 import { useForm } from '@inertiajs/react';
-import { ChangeEvent, FormEvent, useMemo } from 'react';
+import { route } from '@izzyjs/route/client';
+import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-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 FormLink from '~/components/form/form_link';
 import useSearchParam from '~/hooks/use_search_param';
 import { isValidHttpUrl } from '~/lib/navigation';
 
@@ -16,14 +14,13 @@ export default function CreateLinkPage({
 }) {
   const { t } = useTranslation('common');
   const collectionId = useSearchParam('collectionId') ?? collections[0].id;
-  const { data, setData, post, processing } = useForm({
+  const { data, setData, submit, processing } = useForm({
     name: '',
     description: '',
     url: '',
     favorite: false,
-    collectionId: collectionId,
+    collectionId,
   });
-
   const canSubmit = useMemo<boolean>(
     () =>
       data.name !== '' &&
@@ -34,67 +31,19 @@ export default function CreateLinkPage({
     [data, processing]
   );
 
-  const handleOnCheck = ({ target }: ChangeEvent<HTMLInputElement>) => {
-    setData('favorite', !!target.checked);
-  };
-
-  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    post('/links');
+  const handleSubmit = () => {
+    const { method, url } = route('link.create');
+    submit(method, url);
   };
 
   return (
-    <FormLayout
-      title="Create a link"
-      handleSubmit={handleSubmit}
+    <FormLink
+      title={t('link.create')}
       canSubmit={canSubmit}
-      collectionId={collectionId}
-    >
-      <BackToDashboard>
-        <TextBox
-          label={t('link.name')}
-          placeholder={t('link.name')}
-          name="name"
-          onChange={setData}
-          value={data.name}
-          required
-          autoFocus
-        />
-        <TextBox
-          label="Link url"
-          placeholder="Link url"
-          name="url"
-          onChange={setData}
-          value={data.url}
-          required
-        />
-        <TextBox
-          label={t('link.description')}
-          placeholder={t('link.description')}
-          name="description"
-          onChange={setData}
-          value={data.description}
-        />
-        <select
-          onChange={({ target }) => setData('collectionId', target.value)}
-          defaultValue={data.collectionId}
-        >
-          {collections.map((collection) => (
-            <option key={collection.id} value={collection.id}>
-              {collection.name}
-            </option>
-          ))}
-        </select>
-        <FormField required>
-          <label htmlFor="favorite">{t('favorite')}</label>
-          <input
-            type="checkbox"
-            onChange={handleOnCheck}
-            checked={data.favorite}
-            id="favorite"
-          />
-        </FormField>
-      </BackToDashboard>
-    </FormLayout>
+      data={data}
+      setData={setData}
+      handleSubmit={handleSubmit}
+      collections={collections}
+    />
   );
 }