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}
+    />
   );
 }

inertia/pages/links/edit.tsx

@@ -0,0 +1,57 @@
+import type Collection from '#models/collection';
+import type Link from '#models/link';
+import { useForm } from '@inertiajs/react';
+import { route } from '@izzyjs/route/client';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import FormLink from '~/components/form/form_link';
+import { isValidHttpUrl } from '~/lib/navigation';
+
+export default function EditLinkPage({
+  collections,
+  link,
+}: {
+  collections: Collection[];
+  link: Link;
+}) {
+  const { t } = useTranslation('common');
+  const { data, setData, submit, processing } = useForm({
+    name: link.name,
+    description: link.description,
+    url: link.url,
+    favorite: link.favorite,
+    collectionId: link.collectionId,
+  });
+  const canSubmit = useMemo<boolean>(() => {
+    const isFormEdited =
+      data.name !== link.name ||
+      data.url !== link.url ||
+      data.description !== link.description ||
+      data.favorite !== link.favorite ||
+      data.collectionId !== link.collectionId;
+
+    const isFormValid =
+      data.name !== '' &&
+      isValidHttpUrl(data.url) &&
+      data.favorite !== null &&
+      data.collectionId !== null;
+
+    return isFormEdited && isFormValid && !processing;
+  }, [data, processing]);
+
+  const handleSubmit = () => {
+    const { method, url } = route('link.edit', { params: { id: link.id } });
+    submit(method, url);
+  };
+
+  return (
+    <FormLink
+      title={t('link.create')}
+      canSubmit={canSubmit}
+      data={data}
+      setData={setData}
+      handleSubmit={handleSubmit}
+      collections={collections}
+    />
+  );
+}