feat: add delete link form and controller

app/controllers/links_controller.ts

@@ -2,6 +2,7 @@ import CollectionsController from '#controllers/collections_controller';
 import Link from '#models/link';
 import {
   createLinkValidator,
+  deleteLinkValidator,
   updateLinkFavoriteStatusValidator,
   updateLinkValidator,
 } from '#validators/link';
@@ -88,6 +89,28 @@ export default class LinksController {
     return response.json({ status: 'ok' });
   }
 
+  async showDeletePage({ auth, inertia, request, response }: HttpContext) {
+    const linkId = request.qs()?.linkId;
+    if (!linkId) {
+      return response.redirectToNamedRoute('dashboard');
+    }
+
+    const link = await this.getLinkById(linkId, auth.user!.id);
+    await link.load('collection');
+    return inertia.render('links/delete', { link });
+  }
+
+  async delete({ request, auth, response }: HttpContext) {
+    const { params } = await request.validateUsing(deleteLinkValidator);
+
+    const link = await this.getLinkById(params.id, auth.user!.id);
+    await link.delete();
+
+    return response.redirectToNamedRoute('dashboard', {
+      qs: { collectionId: link.id },
+    });
+  }
+
   /**
    * Get link by id.
    *

app/validators/link.ts

@@ -1,5 +1,9 @@
 import vine from '@vinejs/vine';
 
+const params = vine.object({
+  id: vine.string().trim(),
+});
+
 export const createLinkValidator = vine.compile(
   vine.object({
     name: vine.string().trim().minLength(1).maxLength(254),
@@ -18,9 +22,13 @@ export const updateLinkValidator = vine.compile(
     favorite: vine.boolean(),
     collectionId: vine.string().trim(),
 
-    params: vine.object({
-      id: vine.string().trim(),
-    }),
+    params,
+  })
+);
+
+export const deleteLinkValidator = vine.compile(
+  vine.object({
+    params,
   })
 );
 

inertia/components/common/form/_input.tsx

@@ -15,7 +15,7 @@ const Input = styled.input(({ theme }) => ({
   },
 
   '&:disabled': {
-    opacity: 0.5,
+    opacity: 0.85,
   },
 
   '&::placeholder': {

inertia/components/form/form_link.tsx

@@ -22,6 +22,8 @@ interface FormLinkProps {
   data: FormLinkData;
   errors?: Record<string, Array<string>>;
   collections: Collection[];
+  disableInputs?: boolean;
+  submitBtnDanger?: boolean;
 
   setData: (name: string, value: any) => void;
   handleSubmit: () => void;
@@ -34,12 +36,14 @@ export default function FormLink({
   data,
   errors,
   collections,
+  disableInputs = false,
+  submitBtnDanger = false,
 
   setData,
   handleSubmit,
 }: FormLinkProps) {
   const { t } = useTranslation('common');
-  const collectionId = useSearchParam('collectionId') ?? collections[0].id;
+  const collectionId = useSearchParam('collectionId') ?? collections?.[0].id;
 
   const onSubmit = (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
@@ -53,6 +57,7 @@ export default function FormLink({
       canSubmit={canSubmit}
       disableHomeLink={disableHomeLink}
       collectionId={collectionId}
+      submitBtnDanger={submitBtnDanger}
     >
       <BackToDashboard>
         <TextBox
@@ -62,6 +67,7 @@ export default function FormLink({
           onChange={setData}
           value={data.name}
           errors={errors?.name}
+          disabled={disableInputs}
           required
           autoFocus
         />
@@ -72,6 +78,7 @@ export default function FormLink({
           onChange={setData}
           value={data.url}
           errors={errors?.url}
+          disabled={disableInputs}
           required
         />
         <TextBox
@@ -81,12 +88,14 @@ export default function FormLink({
           onChange={setData}
           value={data.description ?? undefined}
           errors={errors?.description}
+          disabled={disableInputs}
         />
         <select
           onChange={({ target }) => setData('collectionId', target.value)}
           defaultValue={data.collectionId}
+          disabled={disableInputs}
         >
-          {collections.map((collection) => (
+          {collections?.map((collection) => (
             <option key={collection.id} value={collection.id}>
               {collection.name}
             </option>
@@ -98,6 +107,7 @@ export default function FormLink({
           onChange={setData}
           checked={data.favorite}
           errors={errors?.favorite}
+          disabled={disableInputs}
         />
       </BackToDashboard>
     </FormLayout>

inertia/pages/collections/delete.tsx

@@ -34,7 +34,7 @@ export default function DeleteCollectionPage({
       setData={setData}
       handleSubmit={handleSubmit}
       errors={errors as any}
-      disableInputs={true}
+      disableInputs
       submitBtnDanger
     />
   );

inertia/pages/links/delete.tsx

@@ -0,0 +1,35 @@
+import type Link from '#models/link';
+import { useForm } from '@inertiajs/react';
+import { route } from '@izzyjs/route/client';
+import { useTranslation } from 'react-i18next';
+import FormLink from '~/components/form/form_link';
+
+export default function DeleteLinkPage({ link }: { 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 handleSubmit = () => {
+    const { method, url } = route('link.delete', { params: { id: link.id } });
+    submit(method, url);
+  };
+  console.log(link);
+
+  return (
+    <FormLink
+      title={t('link.delete')}
+      canSubmit={!processing}
+      data={data}
+      setData={setData}
+      handleSubmit={handleSubmit}
+      collections={[link.collection]}
+      disableInputs
+      submitBtnDanger
+    />
+  );
+}

start/routes/link.ts

@@ -19,7 +19,10 @@ router
       .put('/:id/favorite', [LinksController, 'toggleFavorite'])
       .as('link.toggle-favorite');
 
-    router.get('/delete', () => 'delete').as('link.delete-form');
+    router
+      .get('/delete', [LinksController, 'showDeletePage'])
+      .as('link.delete-form');
+    router.delete('/:id', [LinksController, 'delete']).as('link.delete');
   })
   .middleware([middleware.auth()])
   .prefix('/links');