diff --git a/app/controllers/links_controller.ts b/app/controllers/links_controller.ts index 944244f..7dca271 100644 --- a/app/controllers/links_controller.ts +++ b/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) { diff --git a/inertia/pages/mantine/links/edit.tsx b/inertia/pages/mantine/links/edit.tsx new file mode 100644 index 0000000..3598117 --- /dev/null +++ b/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(() => { + 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 ( + + ); +}