feat: add create/edit link form + controller methods

app/controllers/collections_controller.ts

@@ -62,18 +62,6 @@ export default class CollectionsController {
     });
   }
 
-  /**
-   * Get collection by id.
-   *
-   * /!\ Only return private collection (create by the current user)
-   */
-  async getCollectionById(id: Collection['id'], userId: User['id']) {
-    return await Collection.query()
-      .where('id', id)
-      .andWhere('author_id', userId)
-      .firstOrFail();
-  }
-
   async update({ request, auth, response }: HttpContext) {
     const { params, ...payload } = await request.validateUsing(
       updateCollectionValidator
@@ -94,6 +82,18 @@ export default class CollectionsController {
     return this.redirectToCollectionId(response, params.id);
   }
 
+  /**
+   * Get collection by id.
+   *
+   * /!\ Only return private collection (create by the current user)
+   */
+  async getCollectionById(id: Collection['id'], userId: User['id']) {
+    return await Collection.query()
+      .where('id', id)
+      .andWhere('author_id', userId)
+      .firstOrFail();
+  }
+
   async getCollectionsByAuthorId(authorId: User['id']) {
     return await Collection.query()
       .where('author_id', authorId)

app/controllers/links_controller.ts

@@ -1,6 +1,10 @@
 import CollectionsController from '#controllers/collections_controller';
 import Link from '#models/link';
-import { linkValidator } from '#validators/link';
+import {
+  createLinkValidator,
+  updateLinkFavoriteStatusValidator,
+  updateLinkValidator,
+} from '#validators/link';
 import { inject } from '@adonisjs/core';
 import type { HttpContext } from '@adonisjs/core/http';
 
@@ -16,7 +20,7 @@ export default class LinksController {
 
   async store({ auth, request, response }: HttpContext) {
     const { collectionId, ...payload } =
-      await request.validateUsing(linkValidator);
+      await request.validateUsing(createLinkValidator);
 
     await this.collectionsController.getCollectionById(
       collectionId,
@@ -32,4 +36,67 @@ export default class LinksController {
       collectionId
     );
   }
+
+  async showEditPage({ auth, inertia, request, response }: HttpContext) {
+    const linkId = request.qs()?.linkId;
+    if (!linkId) {
+      return response.redirectToNamedRoute('dashboard');
+    }
+
+    const userId = auth.user!.id;
+    const collections =
+      await this.collectionsController.getCollectionsByAuthorId(userId);
+    const link = await this.getLinkById(linkId, userId);
+
+    return inertia.render('links/edit', { collections, link });
+  }
+
+  async update({ request, auth, response }: HttpContext) {
+    const { params, ...payload } =
+      await request.validateUsing(updateLinkValidator);
+
+    // Throw if invalid link id provided
+    await this.getLinkById(params.id, auth.user!.id);
+
+    await Link.updateOrCreate(
+      {
+        id: params.id,
+      },
+      payload
+    );
+
+    return response.redirectToNamedRoute('dashboard', {
+      qs: { collectionId: payload.collectionId },
+    });
+  }
+
+  async toggleFavorite({ request, auth, response }: HttpContext) {
+    const { params, favorite } = await request.validateUsing(
+      updateLinkFavoriteStatusValidator
+    );
+
+    // Throw if invalid link id provided
+    await this.getLinkById(params.id, auth.user!.id);
+
+    await Link.updateOrCreate(
+      {
+        id: params.id,
+      },
+      { favorite }
+    );
+
+    return response.json({ status: 'ok' });
+  }
+
+  /**
+   * Get link by id.
+   *
+   * /!\ Only return private link (create by the current user)
+   */
+  private async getLinkById(id: Link['id'], userId: Link['id']) {
+    return await Link.query()
+      .where('id', id)
+      .andWhere('author_id', userId)
+      .firstOrFail();
+  }
 }

app/validators/link.ts

@@ -1,6 +1,6 @@
 import vine from '@vinejs/vine';
 
-export const linkValidator = vine.compile(
+export const createLinkValidator = vine.compile(
   vine.object({
     name: vine.string().trim().minLength(1).maxLength(254),
     description: vine.string().trim().maxLength(300).optional(),
@@ -9,3 +9,27 @@ export const linkValidator = vine.compile(
     collectionId: vine.string().trim(),
   })
 );
+
+export const updateLinkValidator = vine.compile(
+  vine.object({
+    name: vine.string().trim().minLength(1).maxLength(254),
+    description: vine.string().trim().maxLength(300).optional(),
+    url: vine.string().trim(),
+    favorite: vine.boolean(),
+    collectionId: vine.string().trim(),
+
+    params: vine.object({
+      id: vine.string().trim(),
+    }),
+  })
+);
+
+export const updateLinkFavoriteStatusValidator = vine.compile(
+  vine.object({
+    favorite: vine.boolean(),
+
+    params: vine.object({
+      id: vine.string().trim(),
+    }),
+  })
+);

inertia/components/common/form/_button.tsx

@@ -14,7 +14,7 @@ const Button = styled.button(({ theme }) => ({
 
   '&:disabled': {
     cursor: 'not-allowed',
-    opacity: '0.75',
+    opacity: '0.5',
   },
 
   '&:not(:disabled):hover': {

inertia/components/common/form/_form.tsx

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 const Form = styled.form({
   width: '100%',
   display: 'flex',
-  gap: '0.5em',
+  gap: '1em',
   flexDirection: 'column',
 });
 

inertia/components/common/form/_form_field_error.tsx

@@ -0,0 +1,9 @@
+import styled from '@emotion/styled';
+
+// TODO: create a global style variable (fontSize)
+const FormFieldError = styled.p(({ theme }) => ({
+  fontSize: '12px',
+  color: theme.colors.lightRed,
+}));
+
+export default FormFieldError;

inertia/components/common/form/checkbox.tsx

@@ -0,0 +1,55 @@
+import { ChangeEvent, Fragment, InputHTMLAttributes, useState } from 'react';
+import Toggle from 'react-toggle';
+import FormField from '~/components/common/form/_form_field';
+import FormFieldError from '~/components/common/form/_form_field_error';
+
+interface InputProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+  label: string;
+  name: string;
+  checked: boolean;
+  errors?: string[];
+  onChange?: (name: string, checked: boolean) => void;
+}
+
+export default function Checkbox({
+  name,
+  label,
+  checked = false,
+  errors = [],
+  onChange,
+  required = false,
+  ...props
+}: InputProps): JSX.Element {
+  const [checkboxChecked, setCheckboxChecked] = useState<boolean>(checked);
+
+  if (typeof window === 'undefined') return <Fragment />;
+
+  function _onChange({ target }: ChangeEvent<HTMLInputElement>) {
+    setCheckboxChecked(target.checked);
+    if (onChange) {
+      onChange(target.name, target.checked);
+    }
+  }
+
+  return (
+    <FormField
+      css={{ alignItems: 'center', gap: '1em', flexDirection: 'row' }}
+      required={required}
+    >
+      <label htmlFor={name} title={label}>
+        {label}
+      </label>
+      <Toggle
+        {...props}
+        onChange={_onChange}
+        checked={checkboxChecked}
+        placeholder={props.placeholder ?? 'Type something...'}
+        name={name}
+        id={name}
+      />
+      {errors.length > 0 &&
+        errors.map((error) => <FormFieldError>{error}</FormFieldError>)}
+    </FormField>
+  );
+}

inertia/components/common/form/textbox.tsx

@@ -1,14 +1,8 @@
-import styled from '@emotion/styled';
 import { ChangeEvent, InputHTMLAttributes, useState } from 'react';
 import FormField from '~/components/common/form/_form_field';
+import FormFieldError from '~/components/common/form/_form_field_error';
 import Input from '~/components/common/form/_input';
 
-// TODO: create a global style variable (fontSize)
-const InputLegend = styled.p(({ theme }) => ({
-  fontSize: '12px',
-  color: theme.colors.lightRed,
-}));
-
 interface InputProps
   extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
   label: string;
@@ -49,7 +43,7 @@ export default function TextBox({
         placeholder={props.placeholder ?? 'Type something...'}
       />
       {errors.length > 0 &&
-        errors.map((error) => <InputLegend>{error}</InputLegend>)}
+        errors.map((error) => <FormFieldError>{error}</FormFieldError>)}
     </FormField>
   );
 }

inertia/components/common/modal/_modal_container.tsx

@@ -1,6 +1,7 @@
 import styled from '@emotion/styled';
+import TransitionLayout from '~/components/layouts/_transition_layout';
 
-const ModalContainer = styled.div(({ theme }) => ({
+const ModalContainer = styled(TransitionLayout)(({ theme }) => ({
   minWidth: '500px',
   background: theme.colors.secondary,
   padding: '1em',

inertia/components/common/modal/_modal_wrapper.tsx

@@ -13,6 +13,7 @@ const ModalWrapper = styled.div(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
   flexDirection: 'column',
+  transition: theme.transition.delay,
 }));
 
 export default ModalWrapper;

inertia/components/dashboard/link/link_controls.tsx

@@ -13,8 +13,9 @@ import {
   DropdownItemButton,
   DropdownItemLink,
 } from '~/components/common/dropdown/dropdown_item';
+import useActiveCollection from '~/hooks/use_active_collection';
 import useCollections from '~/hooks/use_collections';
-import { appendCollectionId } from '~/lib/navigation';
+import { appendLinkId } from '~/lib/navigation';
 import { makeRequest } from '~/lib/request';
 
 const StartItem = styled(DropdownItemButton)(({ theme }) => ({
@@ -25,6 +26,7 @@ export default function LinkControls({ link }: { link: Link }) {
   const theme = useTheme();
   const { t } = useTranslation('common');
   const { collections, setCollections } = useCollections();
+  const { setActiveCollection } = useActiveCollection();
 
   const toggleFavorite = useCallback(
     (linkId: Link['id']) => {
@@ -45,22 +47,20 @@ export default function LinkControls({ link }: { link: Link }) {
       };
 
       setCollections(collectionsCopy);
+      setActiveCollection(collectionsCopy[collectionIndex]);
     },
     [collections, setCollections]
   );
 
   const onFavorite = () => {
-    const editRoute = route('link.edit', {
+    const { url, method } = route('link.toggle-favorite', {
       params: { id: link.id },
     });
     makeRequest({
-      url: editRoute.url,
+      url,
-      method: editRoute.method,
+      method,
       body: {
-        name: link.name,
-        url: link.url,
         favorite: !link.favorite,
-        collectionId: link.collectionId,
       },
     })
       .then(() => toggleFavorite(link.id))
@@ -85,18 +85,12 @@ export default function LinkControls({ link }: { link: Link }) {
         )}
       </StartItem>
       <DropdownItemLink
-        href={appendCollectionId(
+        href={appendLinkId(route('link.edit-form').url, link.id)}
-          route('link.edit-form').url,
-          link.collectionId
-        )}
       >
         <GoPencil /> {t('link.edit')}
       </DropdownItemLink>
       <DropdownItemLink
-        href={appendCollectionId(
+        href={appendLinkId(route('link.delete-form').url, link.id)}
-          route('link.delete-form').url,
-          link.collectionId
-        )}
         danger
       >
         <IoTrashOutline /> {t('link.delete')}

inertia/components/dashboard/link/link_item.tsx

@@ -2,8 +2,8 @@ import type Link from '#models/link';
 import styled from '@emotion/styled';
 import { AiFillStar } from 'react-icons/ai';
 import ExternalLink from '~/components/common/external_link';
-import LinkFavicon from '~/components/dashboard/link/link_favicon';
 import LinkControls from '~/components/dashboard/link/link_controls';
+import LinkFavicon from '~/components/dashboard/link/link_favicon';
 
 const LinkWrapper = styled.li(({ theme }) => ({
   userSelect: 'none',

inertia/components/form/form_collection.tsx

@@ -1,10 +1,10 @@
-import { ChangeEvent, FormEvent } from 'react';
+import { FormEvent } from 'react';
-import FormField from '~/components/common/form/_form_field';
+import { useTranslation } from 'react-i18next';
+import Checkbox from '~/components/common/form/checkbox';
 import TextBox from '~/components/common/form/textbox';
 import BackToDashboard from '~/components/common/navigation/back_to_dashboard';
 import FormLayout from '~/components/layouts/form_layout';
 import { Visibility } from '../../../app/enums/visibility';
-import { useTranslation } from 'react-i18next';
 
 export type FormCollectionData = {
   name: string;
@@ -12,6 +12,17 @@ export type FormCollectionData = {
   visibility: Visibility;
 };
 
+interface FormCollectionProps {
+  title: string;
+  canSubmit: boolean;
+  disableHomeLink?: boolean;
+  data: FormCollectionData;
+  errors?: Record<string, Array<string>>;
+
+  setData: (name: string, value: any) => void;
+  handleSubmit: () => void;
+}
+
 export default function FormCollection({
   title,
   canSubmit,
@@ -21,22 +32,10 @@ export default function FormCollection({
 
   setData,
   handleSubmit,
-}: {
+}: FormCollectionProps) {
-  title: string;
-  canSubmit: boolean;
-  disableHomeLink?: boolean;
-  data: FormCollectionData;
-  errors?: Record<string, Array<string>>;
-
-  setData: (name: string, value: string) => void;
-  handleSubmit: () => void;
-}) {
   const { t } = useTranslation('common');
-  const handleOnCheck = ({ target }: ChangeEvent<HTMLInputElement>) =>
+  const handleOnCheck: FormCollectionProps['setData'] = (name, value) =>
-    setData(
+    setData(name, value ? Visibility.PUBLIC : Visibility.PRIVATE);
-      'visibility',
-      target.checked ? Visibility.PUBLIC : Visibility.PRIVATE
-    );
 
   const onSubmit = (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
@@ -62,22 +61,19 @@ export default function FormCollection({
           autoFocus
         />
         <TextBox
-          label={t('collection.name')}
+          label={t('collection.description')}
-          placeholder={t('collection.name')}
+          placeholder={t('collection.description')}
           name="description"
           onChange={setData}
           value={data.description ?? undefined}
           errors={errors?.description}
         />
-        <FormField>
+        <Checkbox
-          <label htmlFor="visibility">Public</label>
+          label="Public"
-          <input
+          name="visibility"
-            type="checkbox"
+          onChange={handleOnCheck}
-            onChange={handleOnCheck}
+          checked={data.visibility === Visibility.PUBLIC}
-            checked={data.visibility === Visibility.PUBLIC}
+        />
-            id="visibility"
-          />
-        </FormField>
       </BackToDashboard>
     </FormLayout>
   );

inertia/components/form/form_link.tsx

@@ -0,0 +1,105 @@
+import type Collection from '#models/collection';
+import { FormEvent } from 'react';
+import { useTranslation } from 'react-i18next';
+import Checkbox from '~/components/common/form/checkbox';
+import TextBox from '~/components/common/form/textbox';
+import BackToDashboard from '~/components/common/navigation/back_to_dashboard';
+import FormLayout from '~/components/layouts/form_layout';
+import useSearchParam from '~/hooks/use_search_param';
+
+export type FormLinkData = {
+  name: string;
+  description: string | null;
+  url: string;
+  favorite: boolean;
+  collectionId: Collection['id'];
+};
+
+interface FormLinkProps {
+  title: string;
+  canSubmit: boolean;
+  disableHomeLink?: boolean;
+  data: FormLinkData;
+  errors?: Record<string, Array<string>>;
+  collections: Collection[];
+
+  setData: (name: string, value: any) => void;
+  handleSubmit: () => void;
+}
+
+export default function FormLink({
+  title,
+  canSubmit,
+  disableHomeLink,
+  data,
+  errors,
+  collections,
+
+  setData,
+  handleSubmit,
+}: FormLinkProps) {
+  const { t } = useTranslation('common');
+  const collectionId = useSearchParam('collectionId') ?? collections[0].id;
+
+  const onSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    handleSubmit();
+  };
+
+  return (
+    <FormLayout
+      title={title}
+      handleSubmit={onSubmit}
+      canSubmit={canSubmit}
+      disableHomeLink={disableHomeLink}
+      collectionId={collectionId}
+    >
+      <BackToDashboard>
+        <TextBox
+          label={t('link.name')}
+          placeholder={t('link.name')}
+          name="name"
+          onChange={setData}
+          value={data.name}
+          errors={errors?.name}
+          required
+          autoFocus
+        />
+        <TextBox
+          label={t('link.link')}
+          placeholder={t('link.link')}
+          name="url"
+          onChange={setData}
+          value={data.url}
+          errors={errors?.url}
+          required
+        />
+        <TextBox
+          label={t('link.description')}
+          placeholder={t('link.description')}
+          name="description"
+          onChange={setData}
+          value={data.description ?? undefined}
+          errors={errors?.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>
+        <Checkbox
+          label={t('favorite')}
+          name="favorite"
+          onChange={setData}
+          checked={data.favorite}
+          errors={errors?.favorite}
+        />
+      </BackToDashboard>
+    </FormLayout>
+  );
+}

inertia/components/lang_selector.tsx

@@ -21,7 +21,9 @@ export default function LangSelector() {
       defaultValue={i18n.language}
     >
       {languages.map((lang) => (
-        <option value={lang}>{t(`language.${lang}`)}</option>
+        <option value={lang} key={lang}>
+          {t(`language.${lang}`)}
+        </option>
       ))}
     </select>
   );

inertia/i18n/locales/en/common.json

@@ -7,7 +7,7 @@
   "login": "Login",
   "link": {
     "links": "Links",
-    "link": "Link",
+    "link": "Link URL",
     "name": "Link name",
     "description": "Link description",
     "create": "Create a link",

inertia/i18n/locales/fr/common.json

@@ -7,7 +7,7 @@
   "login": "Connexion",
   "link": {
     "links": "Liens",
-    "link": "Lien",
+    "link": "URL du lien",
     "name": "Nom du lien",
     "description": "Description du lien",
     "create": "Créer un lien",

inertia/lib/navigation.ts

@@ -1,10 +1,16 @@
 import type Collection from '#models/collection';
+import type Link from '#models/link';
 
 export const appendCollectionId = (
   url: string,
   collectionId?: Collection['id'] | null | undefined
 ) => `${url}${collectionId ? `?collectionId=${collectionId}` : ''}`;
 
+export const appendLinkId = (
+  url: string,
+  linkId?: Link['id'] | null | undefined
+) => `${url}${linkId ? `?linkId=${linkId}` : ''}`;
+
 export const appendResourceId = (url: string, resourceId?: string) =>
   `${url}${resourceId ? `/${resourceId}` : ''}`;
 

inertia/pages/collections/create.tsx

@@ -1,10 +1,11 @@
 import { useForm } from '@inertiajs/react';
+import { route } from '@izzyjs/route/client';
 import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 import FormCollection, {
   FormCollectionData,
 } from '~/components/form/form_collection';
 import { Visibility } from '../../../app/enums/visibility';
-import { useTranslation } from 'react-i18next';
 
 export default function CreateCollectionPage({
   disableHomeLink,
@@ -12,7 +13,7 @@ export default function CreateCollectionPage({
   disableHomeLink: boolean;
 }) {
   const { t } = useTranslation('common');
-  const { data, setData, post, processing } = useForm<FormCollectionData>({
+  const { data, setData, submit, processing } = useForm<FormCollectionData>({
     name: '',
     description: '',
     visibility: Visibility.PRIVATE,
@@ -22,7 +23,10 @@ export default function CreateCollectionPage({
     [processing, data]
   );
 
-  const handleSubmit = () => post('/collections');
+  const handleSubmit = () => {
+    const { method, url } = route('collection.create');
+    submit(method, url);
+  };
 
   return (
     <FormCollection

inertia/pages/collections/edit.tsx

@@ -1,5 +1,6 @@
 import type Collection from '#models/collection';
 import { useForm } from '@inertiajs/react';
+import { route } from '@izzyjs/route/client';
 import { useMemo } from 'react';
 import FormCollection, {
   FormCollectionData,
@@ -10,7 +11,7 @@ export default function EditCollectionPage({
 }: {
   collection: Collection;
 }) {
-  const { data, setData, put, processing, errors } =
+  const { data, setData, submit, processing, errors } =
     useForm<FormCollectionData>({
       name: collection.name,
       description: collection.description,
@@ -25,7 +26,12 @@ export default function EditCollectionPage({
     return isFormEdited && isFormValid && !processing;
   }, [data, collection]);
 
-  const handleSubmit = () => put(`/collections/${collection.id}`);
+  const handleSubmit = () => {
+    const { method, url } = route('collection.edit', {
+      params: { id: collection.id },
+    });
+    submit(method, url);
+  };
 
   return (
     <FormCollection

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 FormLink from '~/components/form/form_link';
-import TextBox from '~/components/common/form/textbox';
-import BackToDashboard from '~/components/common/navigation/back_to_dashboard';
-import FormLayout from '~/components/layouts/form_layout';
 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>) => {
+  const handleSubmit = () => {
-    setData('favorite', !!target.checked);
+    const { method, url } = route('link.create');
-  };
+    submit(method, url);
-
-  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    post('/links');
   };
 
   return (
-    <FormLayout
+    <FormLink
-      title="Create a link"
+      title={t('link.create')}
-      handleSubmit={handleSubmit}
       canSubmit={canSubmit}
-      collectionId={collectionId}
+      data={data}
-    >
+      setData={setData}
-      <BackToDashboard>
+      handleSubmit={handleSubmit}
-        <TextBox
+      collections={collections}
-          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>
   );
 }

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

start/routes/link.ts

@@ -12,8 +12,12 @@ router
       .as('link.create-form');
     router.post('/', [LinksController, 'store']).as('link.create');
 
-    router.get('/edit', () => 'edit form').as('link.edit-form');
+    router.get('/edit', [LinksController, 'showEditPage']).as('link.edit-form');
-    router.put('/:id', () => 'edit route api').as('link.edit');
+    router.put('/:id', [LinksController, 'update']).as('link.edit');
+
+    router
+      .put('/:id/favorite', [LinksController, 'toggleFavorite'])
+      .as('link.toggle-favorite');
 
     router.get('/delete', () => 'delete').as('link.delete-form');
   })