feat: use new form layout for link/edit

app/controllers/links_controller.ts

@@ -50,7 +50,7 @@ export default class LinksController {
 			await this.collectionsController.getCollectionsByAuthorId(userId);
 		const link = await this.getLinkById(linkId, userId);
 
-		return inertia.render('links/edit', { collections, link });
+		return inertia.render('mantine/links/edit', { collections, link });
 	}
 
 	async update({ request, auth, response }: HttpContext) {

inertia/pages/mantine/links/edit.tsx

@@ -0,0 +1,59 @@
+import { useForm } from '@inertiajs/react';
+import { route } from '@izzyjs/route/client';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { isValidHttpUrl } from '~/lib/navigation';
+import MantineFormLink from '~/mantine/components/form/mantine_form_link';
+import { Collection, Link } from '~/types/app';
+
+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.toString() },
+		});
+		submit(method, url);
+	};
+
+	return (
+		<MantineFormLink
+			title={t('link.create')}
+			textSubmitButton={t('form.create')}
+			canSubmit={canSubmit}
+			data={data}
+			setData={setData}
+			handleSubmit={handleSubmit}
+			collections={collections}
+		/>
+	);
+}