Processing state with useForm helper

Author: simonswiss

app/Http/Controllers/PuppyController.php

@@ -19,7 +19,7 @@ public function index()
 
     public function like(Request $request, Puppy $puppy)
     {
-        sleep(3);
+        sleep(1);
         $puppy->likedBy()->toggle($request->user()->id);
         return back();
     }

resources/js/components/LikeToggle.tsx

@@ -1,26 +1,34 @@
-import { Link, usePage } from '@inertiajs/react';
+import { useForm, usePage } from '@inertiajs/react';
 import clsx from 'clsx';
 import { Heart, LoaderCircle } from 'lucide-react';
 import { Puppy, SharedData } from '../types';
 
 export function LikeToggle({ puppy }: { puppy: Puppy }) {
     const { auth } = usePage<SharedData>().props;
+    const { processing, patch } = useForm();
 
     return (
-        <Link
-            preserveScroll
-            method="patch"
-            href={route('puppies.like', puppy.id)}
-            className={clsx('group', !auth.user && 'cursor-not-allowed')}
-            disabled={!auth.user}
+        <form
+            onSubmit={(e) => {
+                e.preventDefault();
+                patch(route('puppies.like', puppy.id), {
+                    preserveScroll: true,
+                });
+            }}
         >
-            <LoaderCircle className="hidden animate-spin stroke-slate-300 group-data-loading:block" />
-            <Heart
-                className={clsx(
-                    auth.user && puppy.likedBy.includes(auth.user.id) ? 'fill-pink-500 stroke-none' : 'stroke-slate-200 group-hover:stroke-slate-300',
-                    'group-data-loading:hidden',
+            <button type="submit" className={clsx('group', !auth.user && 'cursor-not-allowed')} disabled={!auth.user || processing}>
+                {processing ? (
+                    <LoaderCircle className="animate-spin stroke-slate-300" />
+                ) : (
+                    <Heart
+                        className={clsx(
+                            auth.user && puppy.likedBy.includes(auth.user.id)
+                                ? 'fill-pink-500 stroke-none'
+                                : 'stroke-slate-200 group-hover:stroke-slate-300',
+                        )}
+                    />
                 )}
-            />
-        </Link>
+            </button>
+        </form>
     );
 }

resources/js/components/Shortlist.tsx

@@ -1,10 +1,8 @@
-import { usePage } from '@inertiajs/react';
+import { useForm, usePage } from '@inertiajs/react';
 import { Heart, LoaderCircle, X } from 'lucide-react';
-import { Dispatch, SetStateAction, useState } from 'react';
-import { toggleLikedStatus } from '../queries';
 import { Puppy, SharedData } from '../types';
 
-export function Shortlist({ puppies, setPuppies }: { puppies: Puppy[]; setPuppies: Dispatch<SetStateAction<Puppy[]>> }) {
+export function Shortlist({ puppies }: { puppies: Puppy[] }) {
     const { auth } = usePage<SharedData>().props;
     return (
         <div>
@@ -22,34 +20,33 @@ export function Shortlist({ puppies, setPuppies }: { puppies: Puppy[]; setPuppie
                         >
                             <img height={32} width={32} alt={puppy.name} className="aspect-square w-8 object-cover" src={puppy.imageUrl} />
                             <p className="px-3 text-sm text-slate-800">{puppy.name}</p>
-                            <DeleteButton id={puppy.id} setPuppies={setPuppies} />
+                            <DeleteButton id={puppy.id} />
                         </li>
                     ))}
             </ul>
         </div>
     );
 }
 
-function DeleteButton({ id, setPuppies }: { id: Puppy['id']; setPuppies: Dispatch<SetStateAction<Puppy[]>> }) {
-    const [pending, setPending] = useState(false);
+function DeleteButton({ id }: { id: Puppy['id'] }) {
+    const { processing, patch } = useForm();
     return (
-        <button
-            onClick={async () => {
-                setPending(true);
-                const updatedPuppy = await toggleLikedStatus(id);
-                setPuppies((prevPups) => {
-                    return prevPups.map((existingPuppy) => (existingPuppy.id === updatedPuppy.id ? updatedPuppy : existingPuppy));
+        <form
+            className="h-full"
+            onSubmit={(e) => {
+                e.preventDefault();
+                patch(route('puppies.like', id), {
+                    preserveScroll: true,
                 });
-                setPending(false);
             }}
-            className="group h-full border-l border-slate-100 px-2 hover:bg-slate-100"
-            disabled={pending}
         >
-            {pending ? (
-                <LoaderCircle className="size-4 animate-spin stroke-slate-300" />
-            ) : (
-                <X className="size-4 stroke-slate-400 group-hover:stroke-red-400" />
-            )}
-        </button>
+            <button type="submit" className="group h-full border-l border-slate-100 px-2 hover:bg-slate-100" disabled={processing}>
+                {processing ? (
+                    <LoaderCircle className="size-4 animate-spin stroke-slate-300" />
+                ) : (
+                    <X className="size-4 stroke-slate-400 group-hover:stroke-red-400" />
+                )}
+            </button>
+        </form>
     );
 }

resources/js/pages/puppies/index.tsx

@@ -30,7 +30,7 @@ function Main({ inertiaPuppies }: { inertiaPuppies: Puppy[] }) {
         <main>
             <div className="mt-24 grid gap-8 sm:grid-cols-2">
                 <Search searchQuery={searchQuery} setSearchQuery={setSearchQuery} />
-                {auth.user && <Shortlist puppies={inertiaPuppies} setPuppies={setPuppies} />}
+                {auth.user && <Shortlist puppies={inertiaPuppies} />}
             </div>
             <PuppiesList puppies={inertiaPuppies} searchQuery={searchQuery} />
             <NewPuppyForm puppies={inertiaPuppies} setPuppies={setPuppies} />