fix types/lint/format

simonswiss · simonswiss · commit a051ee92c5b1 · 2025-10-01T08:04:44.000+10:00
diff --git a/app/Actions/OptimizeWebpImageAction.php b/app/Actions/OptimizeWebpImageAction.php
@@ -2,7 +2,6 @@
 
 namespace App\Actions;
 
-use Illuminate\Http\UploadedFile;
 use Intervention\Image\Laravel\Facades\Image;
 use Illuminate\Support\Str;
 
diff --git a/app/Http/Controllers/PuppyController.php b/app/Http/Controllers/PuppyController.php
@@ -2,13 +2,12 @@
 
 namespace App\Http\Controllers;
 
+use App\Actions\OptimizeWebpImageAction;
 use App\Http\Resources\PuppyResource;
 use App\Models\Puppy;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Storage;
 use Inertia\Inertia;
-use Intervention\Image\Laravel\Facades\Image;
-use Illuminate\Support\Str;
 
 class PuppyController extends Controller
 {
@@ -45,7 +44,6 @@ public function index(Request $request)
     // ------------------------------
     public function like(Request $request, Puppy $puppy)
     {
-        usleep(200000);
         $puppy->likedBy()->toggle($request->user()->id);
         return back();
     }
@@ -55,7 +53,6 @@ public function like(Request $request, Puppy $puppy)
     // ------------------------------
     public function store(Request $request)
     {
-        usleep(200000);
         // Validate the data
         $request->validate([
             'name' => 'required|string|max:255',
@@ -67,20 +64,10 @@ public function store(Request $request)
         $image_url = null;
         if ($request->hasFile('image')) {
 
-            // Image optimization
-            $image = Image::read($request->file('image'));
+            $optimized = (new OptimizeWebpImageAction())->handle($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, $webpEncoded);
+            $stored = Storage::disk('public')->put($path, $optimized['webpString']);
 
             if (!$stored) {
                 return back()->withErrors(['image' => 'Failed to upload image.']);
@@ -104,8 +91,6 @@ public function store(Request $request)
     // ------------------------------
     public function destroy(Request $request, Puppy $puppy)
     {
-        sleep(2);
-
         $imagePath = str_replace('/storage/', '', $puppy->image_url);
 
         if ($request->user()->cannot('delete', $puppy)) {
@@ -129,6 +114,47 @@ public function destroy(Request $request, Puppy $puppy)
     // ------------------------------
     public function update(Request $request, Puppy $puppy)
     {
-        dd('Hello from the update method!');
+        // Validate the data
+        $request->validate([
+            'name' => 'required|string|max:255',
+            'trait' => 'required|string|max:255',
+            'image' => 'nullable|image|mimes:jpeg,png,jpg,gif,svg|max:5120',
+        ]);
+
+        // If there is a new image
+        if ($request->hasFile('image')) {
+
+            $oldImagePath = str_replace('/storage/', '', $puppy->image_url);
+
+            // Optimize and store the new image
+            $optimized = (new OptimizeWebpImageAction())->handle($request->file('image'));
+            $path = 'puppies/' . $optimized['fileName'];
+
+            $stored = Storage::disk('public')->put($path, $optimized['webpString']);
+
+            if (!$stored) {
+                return back()->withErrors(['image' => 'Failed to upload image.']);
+            }
+            $puppy->image_url = Storage::url($path);
+
+            // Delete the old image
+            if ($oldImagePath && Storage::disk('public')->exists($oldImagePath)) {
+                Storage::disk('public')->delete($oldImagePath);
+            }
+        }
+
+        // Update the puppy values
+        $puppy->name = $request->name;
+        $puppy->trait = $request->trait;
+
+
+        $puppy->save();
+
+        return back()
+            ->with('success', 'Puppy updated successfully!');
+
+        // Save the updated puppy
+
+        // Redirect back with success message
     }
 }
diff --git a/resources/js/components/Container.tsx b/resources/js/components/Container.tsx
@@ -1,3 +1,3 @@
-export function Container({ children }) {
-  return <div className="mx-auto max-w-5xl p-4 md:p-8">{children}</div>;
+export function Container({ children }: { children: React.ReactNode }) {
+    return <div className="mx-auto max-w-5xl p-4 md:p-8">{children}</div>;
 }
diff --git a/resources/js/components/ImageUploadPreview.tsx b/resources/js/components/ImageUploadPreview.tsx
@@ -0,0 +1,29 @@
+import { cn } from '@/lib/utils';
+import { useEffect, useState } from 'react';
+
+export function ImageUploadPreview({
+    source,
+    className,
+    ...restProps
+}: {
+    source: File | string | null;
+    className?: string;
+} & React.ImgHTMLAttributes<HTMLImageElement>) {
+    const [src, setSrc] = useState<string | null>(null);
+
+    useEffect(() => {
+        if (source instanceof File) {
+            const objectUrl = URL.createObjectURL(source);
+            setSrc(objectUrl);
+            return () => {
+                URL.revokeObjectURL(objectUrl);
+            };
+        } else {
+            setSrc(source);
+        }
+    }, [source]);
+
+    if (!src) return null;
+
+    return <img src={src} className={cn('mt-4 h-24 rounded-md', className)} {...restProps} />;
+}
diff --git a/resources/js/components/NewPuppyForm.tsx b/resources/js/components/NewPuppyForm.tsx
@@ -1,5 +1,6 @@
 import { useForm } from '@inertiajs/react';
 import { useRef } from 'react';
+import { ImageUploadPreview } from './ImageUploadPreview';
 
 export function NewPuppyForm({ mainRef }: { mainRef?: React.RefObject<HTMLElement | null> }) {
     const { post, setData, data, errors, reset, processing } = useForm({
@@ -65,6 +66,7 @@ export function NewPuppyForm({ mainRef }: { mainRef?: React.RefObject<HTMLElemen
                                 onChange={(e) => setData('image', e.target.files ? e.target.files[0] : null)}
                             />
                             {errors.image && <p className="mt-1 text-xs text-red-500">{errors.image}</p>}
+                            <ImageUploadPreview height={96} className="self-start" source={data.image} />
                         </fieldset>
                     </div>
                     <button
diff --git a/resources/js/components/Shortlist.tsx b/resources/js/components/Shortlist.tsx
@@ -1,10 +1,8 @@
-import { useForm, usePage } from '@inertiajs/react';
+import { useForm } from '@inertiajs/react';
 import { Heart, LoaderCircle, X } from 'lucide-react';
-import { Puppy, SharedData } from '../types';
+import { Puppy } 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;
 
diff --git a/resources/js/components/puppy-update.tsx b/resources/js/components/puppy-update.tsx
@@ -4,12 +4,13 @@ import { useForm } from '@inertiajs/react';
 import clsx from 'clsx';
 import { EditIcon, LoaderCircle } from 'lucide-react';
 import { useState } from 'react';
+import { ImageUploadPreview } from './ImageUploadPreview';
 import { Button } from './ui/button';
 import { Input } from './ui/input';
 import { Label } from './ui/label';
 
 export function PuppyUpdate({ puppy }: { puppy: Puppy }) {
-    const { data, setData, errors, put, processing } = useForm({
+    const { data, setData, transform, errors, post, processing } = useForm({
         name: puppy.name,
         trait: puppy.trait,
         image: null as File | null,
@@ -28,47 +29,60 @@ export function PuppyUpdate({ puppy }: { puppy: Puppy }) {
                 <DialogTitle>Edit {puppy.name}</DialogTitle>
                 <DialogDescription>Make changes to your puppy’s information below.</DialogDescription>
                 <form
-                    className="space-y-6"
+                    className="flex flex-col gap-6"
                     onSubmit={(e) => {
                         e.preventDefault();
-                        // TODO
-                        put(route('puppies.update', puppy.id));
+                        transform((data) => ({
+                            ...data,
+                            _method: 'put',
+                        }));
+                        post(route('puppies.update', puppy.id), {
+                            preserveScroll: true,
+                            onSuccess: () => setOpen(false),
+                        });
                     }}
                 >
-                    <Label htmlFor="name">Name</Label>
-                    <Input
-                        id="name"
-                        className="mt-1 block w-full"
-                        value={data.name}
-                        onChange={(e) => setData('name', e.target.value)}
-                        required
-                        autoComplete="name"
-                        placeholder="Full name"
-                    />
-                    {errors.name && <p className="mt-1 text-xs text-red-500">{errors.name}</p>}
+                    <fieldset>
+                        <Label htmlFor="name">Name</Label>
+                        <Input
+                            id="name"
+                            className="mt-1 block w-full"
+                            value={data.name}
+                            onChange={(e) => setData('name', e.target.value)}
+                            required
+                            autoComplete="name"
+                            placeholder="Full name"
+                        />
+                        {errors.name && <p className="mt-1 text-xs text-red-500">{errors.name}</p>}
+                    </fieldset>
 
-                    <Label htmlFor="trait">Personality trait</Label>
-                    <Input
-                        id="trait"
-                        className="mt-1 block w-full"
-                        value={data.trait}
-                        onChange={(e) => setData('trait', e.target.value)}
-                        required
-                        placeholder="Personality trait"
-                    />
+                    <fieldset>
+                        <Label htmlFor="trait">Personality trait</Label>
+                        <Input
+                            id="trait"
+                            className="mt-1 block w-full"
+                            value={data.trait}
+                            onChange={(e) => setData('trait', e.target.value)}
+                            required
+                            placeholder="Personality trait"
+                        />
+                        {errors.trait && <p className="mt-1 text-xs text-red-500">{errors.trait}</p>}
+                    </fieldset>
 
-                    {errors.trait && <p className="mt-1 text-xs text-red-500">{errors.trait}</p>}
+                    <fieldset>
+                        <Label htmlFor="image">Change image</Label>
+                        <Input
+                            id="image"
+                            type="file"
+                            className="mt-1 block w-full"
+                            onChange={(e) => setData('image', e.target.files ? e.target.files[0] : null)}
+                            placeholder="Profile picture"
+                        />
 
-                    <Label htmlFor="image">Change image</Label>
-                    <Input
-                        id="image"
-                        type="file"
-                        className="mt-1 block w-full"
-                        onChange={(e) => setData('image', e.target.files ? e.target.files[0] : null)}
-                        placeholder="Profile picture"
-                    />
+                        {errors.image && <p className="mt-1 text-xs text-red-500">{errors.image}</p>}
 
-                    {errors.image && <p className="mt-1 text-xs text-red-500">{errors.image}</p>}
+                        <ImageUploadPreview source={data.image ?? puppy.imageUrl} />
+                    </fieldset>
 
                     <DialogFooter className="gap-2">
                         <DialogClose asChild>
diff --git a/resources/js/pages/dashboard.tsx b/resources/js/pages/dashboard.tsx
@@ -14,7 +14,7 @@ export default function Dashboard() {
     return (
         <AppLayout breadcrumbs={breadcrumbs}>
             <Head title="Dashboard" />
-            <div className="flex h-full flex-1 flex-col gap-4 rounded-xl p-4 overflow-x-auto">
+            <div className="flex h-full flex-1 flex-col gap-4 overflow-x-auto rounded-xl p-4">
                 <div className="grid auto-rows-min gap-4 md:grid-cols-3">
                     <div className="relative aspect-video overflow-hidden rounded-xl border border-sidebar-border/70 dark:border-sidebar-border">
                         <PlaceholderPattern className="absolute inset-0 size-full stroke-neutral-900/20 dark:stroke-neutral-100/20" />

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,3 @@`
`1`		`-export function Container({ children }) {`
`2`		`- return <div className="mx-auto max-w-5xl p-4 md:p-8">{children}</div>;`
	`1`	`+export function Container({ children }: { children: React.ReactNode }) {`
	`2`	`+ return <div className="mx-auto max-w-5xl p-4 md:p-8">{children}</div>;`
`3`	`3`	`}`