Shortlist refactoring

Author: simonswiss

app/Http/Controllers/PuppyController.php

@@ -7,7 +7,8 @@
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Storage;
 use Inertia\Inertia;
-use App\Actions\OptimizeWebpImageAction;
+use Intervention\Image\Laravel\Facades\Image;
+use Illuminate\Support\Str;
 
 class PuppyController extends Controller
 {
@@ -31,6 +32,9 @@ public function index(Request $request)
                     ->paginate(9)
                     ->withQueryString()
             ),
+            'likedPuppies' => $request->user()
+                ? PuppyResource::collection($request->user()->likedPuppies)
+                : [],
             'filters' => [
                 'search' => $search,
             ],
@@ -42,7 +46,7 @@ public function index(Request $request)
     // ------------------------------
     public function like(Request $request, Puppy $puppy)
     {
-        sleep(1);
+        usleep(200000);
         $puppy->likedBy()->toggle($request->user()->id);
         return back();
     }
@@ -52,7 +56,7 @@ public function like(Request $request, Puppy $puppy)
     // ------------------------------
     public function store(Request $request)
     {
-        sleep(2);
+        usleep(200000);
         // Validate the data
         $request->validate([
             'name' => 'required|string|max:255',
@@ -64,11 +68,20 @@ public function store(Request $request)
         $image_url = null;
         if ($request->hasFile('image')) {
 
-            $optimized = (new OptimizeWebpImageAction())->handle($request->file('image'));
+            // Image optimization
+            $image = Image::read($request->file('image'));
 
-            $path = 'puppies/' . $optimized['fileName'];
+            // Scale down only
+            if ($image->width() > 1000) {
+                $image->scale(width: 1000);
+            }
+
+            $webpEncoded = $image->toWebp(quality: 95)->toString();
+
+            $fileName = Str::random() . '.webp';
+            $path = 'puppies/' . $fileName;
 
-            $stored = Storage::disk('public')->put($path, $optimized['webpString']);
+            $stored = Storage::disk('public')->put($path, $webpEncoded);
 
             if (!$stored) {
                 return back()->withErrors(['image' => 'Failed to upload image.']);

app/Http/Resources/PuppyResource.php

@@ -19,7 +19,9 @@ public function toArray(Request $request): array
             'name' => $this->name,
             'trait' => $this->trait,
             'imageUrl' => $this->image_url,
-            'likedBy' => UserResource::collection($this->whenLoaded('likedBy'))->pluck('id'),
+            'likedBy' => $this->whenLoaded('likedBy', function () {
+                return $this->likedBy->pluck('id');
+            }),
             'user' => UserResource::make($this->whenLoaded('user'))
         ];
     }

resources/js/components/Shortlist.tsx

@@ -5,25 +5,28 @@ import { Puppy, SharedData } from '../types';
 // TODO: Make sure all the liked puppies are showing, not just the ones from the current page.
 export function Shortlist({ puppies }: { puppies: Puppy[] }) {
     const { auth } = usePage<SharedData>().props;
+    const firstFivePuppies = puppies.slice(0, 5);
+    const extraPuppiesCount = puppies.length - firstFivePuppies.length;
+
     return (
         <div>
             <h2 className="flex items-center gap-2 font-medium">
                 <span>Your shortlist</span>
                 <Heart className="fill-pink-500 stroke-pink-500" />
             </h2>
             <ul className="mt-4 flex flex-wrap gap-4">
-                {puppies
-                    .filter((pup) => pup.likedBy.includes(auth.user?.id))
-                    .map((puppy) => (
-                        <li
-                            key={puppy.id}
-                            className="relative flex items-center overflow-clip rounded-md bg-white shadow-sm ring ring-black/5 transition duration-100 starting:scale-0 starting:opacity-0"
-                        >
-                            <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} />
-                        </li>
-                    ))}
+                {firstFivePuppies.map((puppy) => (
+                    <li
+                        key={puppy.id}
+                        className="relative flex items-center overflow-clip rounded-md bg-white shadow-sm ring ring-black/5 transition duration-100 starting:scale-0 starting:opacity-0"
+                    >
+                        <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} />
+                    </li>
+                ))}
+
+                {extraPuppiesCount > 0 && <li className="self-center text-sm text-slate-800">+{extraPuppiesCount} more</li>}
             </ul>
         </div>
     );

resources/js/pages/puppies/index.tsx

@@ -10,29 +10,22 @@ import { Filters, PaginatedResponse, Puppy, SharedData } from '@/types';
 import { usePage } from '@inertiajs/react';
 import { useRef } from 'react';
 
-export default function App({ puppies, filters }: { puppies: PaginatedResponse<Puppy>; filters: Filters }) {
+export default function App({ puppies, likedPuppies, filters }: { puppies: PaginatedResponse<Puppy>; likedPuppies: Puppy[]; filters: Filters }) {
+    const { auth } = usePage<SharedData>().props;
+    const mainRef = useRef<HTMLElement>(null);
     return (
         <PageWrapper>
             <Container>
                 <Header />
-                <Main paginatedPuppies={puppies} filters={filters} />
+                <main ref={mainRef} className="scroll-mt-6">
+                    <div className="mt-24 grid gap-8 sm:grid-cols-2">
+                        <Search filters={filters} />
+                        {auth.user && <Shortlist puppies={likedPuppies} />}
+                    </div>
+                    <PuppiesList puppies={puppies} />
+                    {auth.user && <NewPuppyForm mainRef={mainRef} />}
+                </main>
             </Container>
         </PageWrapper>
     );
 }
-
-function Main({ paginatedPuppies, filters }: { paginatedPuppies: PaginatedResponse<Puppy>; filters: Filters }) {
-    const { auth } = usePage<SharedData>().props;
-    const mainRef = useRef<HTMLElement>(null);
-
-    return (
-        <main ref={mainRef} className="scroll-mt-6">
-            <div className="mt-24 grid gap-8 sm:grid-cols-2">
-                <Search filters={filters} />
-                {auth.user && <Shortlist puppies={paginatedPuppies.data} />}
-            </div>
-            <PuppiesList puppies={paginatedPuppies} />
-            {auth.user && <NewPuppyForm mainRef={mainRef} />}
-        </main>
-    );
-}