Server-side search/filtering

simonswiss · simonswiss · commit 007d8bb68d4f · 2025-07-17T13:36:30.000+10:00
diff --git a/app/Http/Controllers/PuppyController.php b/app/Http/Controllers/PuppyController.php
@@ -10,10 +10,23 @@
 class PuppyController extends Controller
 {
 
-    public function index()
+    public function index(Request $request)
     {
+        $search = $request->search;
+
         return Inertia::render('puppies/index', [
-            'puppies' => PuppyResource::collection(Puppy::all()->load(['user', 'likedBy'])),
+            'puppies' => PuppyResource::collection(
+                Puppy::query()
+                    ->when($search, function ($query, $search) {
+                        $query->where('name', 'like', "%{$search}%")
+                            ->orWhere('trait', 'like', "%{$search}%");
+                    })
+                    ->with(['user', 'likedBy'])
+                    ->get()
+            ),
+            'filters' => [
+                'search' => $search,
+            ],
         ]);
     }
 
diff --git a/database/seeders/PuppySeeder.php b/database/seeders/PuppySeeder.php
@@ -4,7 +4,6 @@
 
 use App\Models\Puppy;
 use App\Models\User;
-use Illuminate\Database\Console\Seeds\WithoutModelEvents;
 use Illuminate\Database\Seeder;
 use Illuminate\Support\Facades\Storage;
 
@@ -25,6 +24,115 @@ public function run(): void
             ['name' => 'Leia', 'trait' => 'Enjoys naps', 'image' => '3.jpg'],
             ['name' => 'Chase', 'trait' => 'Very good boi', 'image' => '2.jpg'],
             ['name' => 'Frisket', 'trait' => 'Mother of all pups', 'image' => '1.jpg'],
+            ['name' => 'Max', 'trait' => 'Loves to play fetch', 'image' => '11.jpg'],
+            ['name' => 'Buddy', 'trait' => 'Loyal companion', 'image' => '12.jpg'],
+            ['name' => 'Charlie', 'trait' => 'Friendly and outgoing', 'image' => '13.jpg'],
+            ['name' => 'Cooper', 'trait' => 'Great with kids', 'image' => '14.jpg'],
+            ['name' => 'Rocky', 'trait' => 'Strong and brave', 'image' => '15.jpg'],
+            ['name' => 'Bear', 'trait' => 'Gentle giant', 'image' => '16.jpg'],
+            ['name' => 'Duke', 'trait' => 'Noble and proud', 'image' => '17.jpg'],
+            ['name' => 'Jack', 'trait' => 'Playful and energetic', 'image' => '18.jpg'],
+            ['name' => 'Tucker', 'trait' => 'Loves treats', 'image' => '19.jpg'],
+            ['name' => 'Oliver', 'trait' => 'Curious explorer', 'image' => '20.jpg'],
+            ['name' => 'Toby', 'trait' => 'Sweet and gentle', 'image' => '21.jpg'],
+            ['name' => 'Buster', 'trait' => 'Full of energy', 'image' => '22.jpg'],
+            ['name' => 'Lucky', 'trait' => 'Always finds treats', 'image' => '1.jpg'],
+            ['name' => 'Milo', 'trait' => 'Loves belly rubs', 'image' => '2.jpg'],
+            ['name' => 'Jake', 'trait' => 'Protective guardian', 'image' => '3.jpg'],
+            ['name' => 'Bruno', 'trait' => 'Loves to swim', 'image' => '4.jpg'],
+            ['name' => 'Oscar', 'trait' => 'Dignified and calm', 'image' => '5.jpg'],
+            ['name' => 'Rusty', 'trait' => 'Loves the outdoors', 'image' => '6.jpg'],
+            ['name' => 'Zeus', 'trait' => 'Mighty and powerful', 'image' => '7.jpg'],
+            ['name' => 'Leo', 'trait' => 'Brave like a lion', 'image' => '8.jpg'],
+            ['name' => 'Finn', 'trait' => 'Loves adventure', 'image' => '9.jpg'],
+            ['name' => 'Ace', 'trait' => 'Top of his class', 'image' => '10.jpg'],
+            ['name' => 'Gus', 'trait' => 'Loves to cuddle', 'image' => '11.jpg'],
+            ['name' => 'Cody', 'trait' => 'Great listener', 'image' => '12.jpg'],
+            ['name' => 'Jasper', 'trait' => 'Loves to dig', 'image' => '13.jpg'],
+            ['name' => 'Bandit', 'trait' => 'Mischievous spirit', 'image' => '14.jpg'],
+            ['name' => 'Scout', 'trait' => 'Always exploring', 'image' => '15.jpg'],
+            ['name' => 'Sammy', 'trait' => 'Loves everyone', 'image' => '16.jpg'],
+            ['name' => 'Dexter', 'trait' => 'Smart and quick', 'image' => '17.jpg'],
+            ['name' => 'Ziggy', 'trait' => 'Playful clown', 'image' => '18.jpg'],
+            ['name' => 'Diesel', 'trait' => 'Strong and sturdy', 'image' => '19.jpg'],
+            ['name' => 'Harley', 'trait' => 'Loves car rides', 'image' => '20.jpg'],
+            ['name' => 'Bentley', 'trait' => 'Sophisticated pup', 'image' => '21.jpg'],
+            ['name' => 'Murphy', 'trait' => 'Loves to chase', 'image' => '22.jpg'],
+            ['name' => 'Riley', 'trait' => 'Happy-go-lucky', 'image' => '1.jpg'],
+            ['name' => 'Baxter', 'trait' => 'Loves to bark', 'image' => '2.jpg'],
+            ['name' => 'Hank', 'trait' => 'Country dog at heart', 'image' => '3.jpg'],
+            ['name' => 'Louie', 'trait' => 'Loves music', 'image' => '4.jpg'],
+            ['name' => 'Ollie', 'trait' => 'Loves to roll over', 'image' => '5.jpg'],
+            ['name' => 'Rocco', 'trait' => 'Tough but sweet', 'image' => '6.jpg'],
+            ['name' => 'Peanut', 'trait' => 'Small but mighty', 'image' => '7.jpg'],
+            ['name' => 'Moose', 'trait' => 'Big and friendly', 'image' => '8.jpg'],
+            ['name' => 'Oreo', 'trait' => 'Black and white beauty', 'image' => '9.jpg'],
+            ['name' => 'Pepper', 'trait' => 'Spicy personality', 'image' => '10.jpg'],
+            ['name' => 'Koda', 'trait' => 'Loves the forest', 'image' => '11.jpg'],
+            ['name' => 'Copper', 'trait' => 'Shiny and bright', 'image' => '12.jpg'],
+            ['name' => 'Marley', 'trait' => 'Loves reggae', 'image' => '13.jpg'],
+            ['name' => 'Benny', 'trait' => 'Always cheerful', 'image' => '14.jpg'],
+            ['name' => 'Teddy', 'trait' => 'Soft and cuddly', 'image' => '15.jpg'],
+            ['name' => 'Winston', 'trait' => 'Distinguished gentleman', 'image' => '16.jpg'],
+            ['name' => 'Gunner', 'trait' => 'Ready for action', 'image' => '17.jpg'],
+            ['name' => 'Ranger', 'trait' => 'Loves the wilderness', 'image' => '18.jpg'],
+            ['name' => 'Boomer', 'trait' => 'Loud and proud', 'image' => '19.jpg'],
+            ['name' => 'Titan', 'trait' => 'Larger than life', 'image' => '20.jpg'],
+            ['name' => 'Champ', 'trait' => 'Winner at everything', 'image' => '21.jpg'],
+            ['name' => 'Blaze', 'trait' => 'Fast as lightning', 'image' => '22.jpg'],
+            ['name' => 'Hunter', 'trait' => 'Great tracker', 'image' => '1.jpg'],
+            ['name' => 'Storm', 'trait' => 'Powerful presence', 'image' => '2.jpg'],
+            ['name' => 'Shadow', 'trait' => 'Follows everywhere', 'image' => '3.jpg'],
+            ['name' => 'Spike', 'trait' => 'Tough exterior, soft heart', 'image' => '4.jpg'],
+            ['name' => 'Dash', 'trait' => 'Super speedy', 'image' => '5.jpg'],
+            ['name' => 'Chief', 'trait' => 'Natural leader', 'image' => '6.jpg'],
+            ['name' => 'Maple', 'trait' => 'Sweet as syrup', 'image' => '7.jpg'],
+            ['name' => 'Daisy', 'trait' => 'Bright and cheerful', 'image' => '8.jpg'],
+            ['name' => 'Rosie', 'trait' => 'Pretty in pink', 'image' => '9.jpg'],
+            ['name' => 'Coco', 'trait' => 'Rich and smooth', 'image' => '10.jpg'],
+            ['name' => 'Honey', 'trait' => 'Sweet disposition', 'image' => '11.jpg'],
+            ['name' => 'Ruby', 'trait' => 'Precious gem', 'image' => '12.jpg'],
+            ['name' => 'Stella', 'trait' => 'Shines bright', 'image' => '13.jpg'],
+            ['name' => 'Zoe', 'trait' => 'Full of life', 'image' => '14.jpg'],
+            ['name' => 'Penny', 'trait' => 'Worth her weight in gold', 'image' => '15.jpg'],
+            ['name' => 'Sadie', 'trait' => 'Sweet and loyal', 'image' => '16.jpg'],
+            ['name' => 'Molly', 'trait' => 'Loves to play', 'image' => '17.jpg'],
+            ['name' => 'Maggie', 'trait' => 'Motherly instincts', 'image' => '18.jpg'],
+            ['name' => 'Sophie', 'trait' => 'Wise beyond her years', 'image' => '19.jpg'],
+            ['name' => 'Chloe', 'trait' => 'Elegant and graceful', 'image' => '20.jpg'],
+            ['name' => 'Lily', 'trait' => 'Pure and innocent', 'image' => '21.jpg'],
+            ['name' => 'Mia', 'trait' => 'Small but fierce', 'image' => '22.jpg'],
+            ['name' => 'Nala', 'trait' => 'Regal and proud', 'image' => '1.jpg'],
+            ['name' => 'Piper', 'trait' => 'Loves to sing', 'image' => '2.jpg'],
+            ['name' => 'Gracie', 'trait' => 'Graceful dancer', 'image' => '3.jpg'],
+            ['name' => 'Hazel', 'trait' => 'Beautiful eyes', 'image' => '4.jpg'],
+            ['name' => 'Ivy', 'trait' => 'Loves to climb', 'image' => '5.jpg'],
+            ['name' => 'Willow', 'trait' => 'Flexible and adaptable', 'image' => '6.jpg'],
+            ['name' => 'Autumn', 'trait' => 'Loves fall leaves', 'image' => '7.jpg'],
+            ['name' => 'Ginger', 'trait' => 'Spicy personality', 'image' => '8.jpg'],
+            ['name' => 'Paisley', 'trait' => 'Unique patterns', 'image' => '9.jpg'],
+            ['name' => 'Roxy', 'trait' => 'Rock and roll spirit', 'image' => '10.jpg'],
+            ['name' => 'Lexi', 'trait' => 'Smart and quick', 'image' => '11.jpg'],
+            ['name' => 'Ellie', 'trait' => 'Loves elephants', 'image' => '12.jpg'],
+            ['name' => 'Abby', 'trait' => 'Loves to hug', 'image' => '13.jpg'],
+            ['name' => 'Kenzie', 'trait' => 'Scottish heritage', 'image' => '14.jpg'],
+            ['name' => 'Lacey', 'trait' => 'Delicate and pretty', 'image' => '15.jpg'],
+            ['name' => 'Misty', 'trait' => 'Mysterious aura', 'image' => '16.jpg'],
+            ['name' => 'Dixie', 'trait' => 'Southern charm', 'image' => '17.jpg'],
+            ['name' => 'Sasha', 'trait' => 'Russian beauty', 'image' => '18.jpg'],
+            ['name' => 'Bonnie', 'trait' => 'Beautiful Scottish lass', 'image' => '19.jpg'],
+            ['name' => 'Trixie', 'trait' => 'Loves tricks', 'image' => '20.jpg'],
+            ['name' => 'Nikki', 'trait' => 'Victory in Greek', 'image' => '21.jpg'],
+            ['name' => 'Sheba', 'trait' => 'Queen of the pack', 'image' => '22.jpg'],
+            ['name' => 'Fiona', 'trait' => 'Fair and beautiful', 'image' => '1.jpg'],
+            ['name' => 'Cassie', 'trait' => 'Loves to explore', 'image' => '2.jpg'],
+            ['name' => 'Josie', 'trait' => 'Cheerful companion', 'image' => '3.jpg'],
+            ['name' => 'Minnie', 'trait' => 'Small and sweet', 'image' => '4.jpg'],
+            ['name' => 'Dolly', 'trait' => 'Loves to dress up', 'image' => '5.jpg'],
+            ['name' => 'Fancy', 'trait' => 'Always dressed to impress', 'image' => '6.jpg'],
+            ['name' => 'Princess', 'trait' => 'Royalty in the making', 'image' => '7.jpg'],
+            ['name' => 'Angel', 'trait' => 'Heavenly disposition', 'image' => '8.jpg'],
+            ['name' => 'Diamond', 'trait' => 'Precious and rare', 'image' => '9.jpg'],
         ];
 
         $simon = User::first();
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -39,6 +39,7 @@
         "@radix-ui/react-toggle-group": "^1.1.2",
         "@radix-ui/react-tooltip": "^1.1.8",
         "@tailwindcss/vite": "^4.0.6",
+        "@types/lodash-es": "^4.17.12",
         "@types/react": "^19.0.3",
         "@types/react-dom": "^19.0.2",
         "@vitejs/plugin-react": "^4.3.4",
@@ -47,6 +48,7 @@
         "concurrently": "^9.0.1",
         "globals": "^15.14.0",
         "laravel-vite-plugin": "^1.0",
+        "lodash-es": "^4.17.21",
         "lucide-react": "^0.475.0",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
diff --git a/resources/js/components/PuppiesList.tsx b/resources/js/components/PuppiesList.tsx
@@ -1,14 +1,12 @@
 import { type Puppy } from '../types';
 import { LikeToggle } from './LikeToggle';
 
-export function PuppiesList({ searchQuery, puppies }: { searchQuery: string; puppies: Puppy[] }) {
+export function PuppiesList({ puppies }: { puppies: Puppy[] }) {
     return (
         <ul className="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
-            {puppies
-                .filter((pup) => pup.trait.toLowerCase().includes(searchQuery.toLowerCase()))
-                .map((puppy) => (
-                    <PuppyCard key={puppy.id} puppy={puppy} />
-                ))}
+            {puppies.map((puppy) => (
+                <PuppyCard key={puppy.id} puppy={puppy} />
+            ))}
         </ul>
     );
 }
diff --git a/resources/js/components/Search.tsx b/resources/js/components/Search.tsx
@@ -1,40 +1,56 @@
-import { Delete } from "lucide-react";
-import { Dispatch, SetStateAction, useRef } from "react";
+import { Filters } from '@/types';
+import { router } from '@inertiajs/react';
+import { debounce } from 'lodash-es';
+import { Delete } from 'lucide-react';
+import { useRef } from 'react';
 
-export function Search({
-  searchQuery,
-  setSearchQuery,
-}: {
-  searchQuery: string;
-  setSearchQuery: Dispatch<SetStateAction<string>>;
-}) {
-  const inputRef = useRef(null);
-  return (
-    <div>
-      <label htmlFor="search" className="font-medium">
-        Search for a character trait
-      </label>
-      <div className="mt-2 flex items-center gap-4">
-        <input
-          ref={inputRef}
-          value={searchQuery}
-          onChange={(e) => setSearchQuery(e.target.value)}
-          placeholder="playful..."
-          name="search"
-          id="search"
-          type="text"
-          className="w-full max-w-80 bg-white px-4 py-2 ring ring-black/5 focus:ring-2 focus:ring-cyan-500 focus:outline-none"
-        />
-        <button
-          onClick={() => {
-            setSearchQuery("");
-            inputRef.current.focus();
-          }}
-          className="inline-block rounded bg-cyan-300 px-4 py-2 !pr-3 !pl-2.5 font-medium text-cyan-900 hover:bg-cyan-200 focus:ring-2 focus:ring-cyan-500 focus:outline-none"
-        >
-          <Delete />
-        </button>
-      </div>
-    </div>
-  );
+export function Search({ filters }: { filters: Filters }) {
+    const inputRef = useRef<HTMLInputElement>(null);
+    return (
+        <div>
+            <label htmlFor="search" className="font-medium">
+                Search for a character trait
+            </label>
+            <div className="mt-2 flex items-center gap-4">
+                <input
+                    defaultValue={filters.search}
+                    ref={inputRef}
+                    onChange={debounce((e) => {
+                        router.get(
+                            route('home'),
+                            { search: e.target.value },
+                            {
+                                preserveState: true,
+                                preserveScroll: true,
+                            },
+                        );
+                    }, 300)}
+                    placeholder="playful..."
+                    name="search"
+                    id="search"
+                    type="text"
+                    className="w-full max-w-80 bg-white px-4 py-2 ring ring-black/5 focus:ring-2 focus:ring-cyan-500 focus:outline-none"
+                />
+                <button
+                    onClick={() => {
+                        router.get(
+                            route('home'),
+                            {},
+                            {
+                                preserveState: true,
+                                preserveScroll: true,
+                                onSuccess: () => {
+                                    inputRef.current!.value = '';
+                                    inputRef.current?.focus();
+                                },
+                            },
+                        );
+                    }}
+                    className="inline-block rounded bg-cyan-300 px-4 py-2 !pr-3 !pl-2.5 font-medium text-cyan-900 hover:bg-cyan-200 focus:ring-2 focus:ring-cyan-500 focus:outline-none"
+                >
+                    <Delete />
+                </button>
+            </div>
+        </div>
+    );
 }
diff --git a/resources/js/pages/puppies/index.tsx b/resources/js/pages/puppies/index.tsx
@@ -6,33 +6,32 @@ import { PuppiesList } from '@/components/PuppiesList';
 import { Search } from '@/components/Search';
 import { Shortlist } from '@/components/Shortlist';
 
-import { Puppy, SharedData } from '@/types';
+import { Filters, Puppy, SharedData } from '@/types';
 import { usePage } from '@inertiajs/react';
 import { useState } from 'react';
 
-export default function App({ puppies }: { puppies: Puppy[] }) {
+export default function App({ puppies, filters }: { puppies: Puppy[]; filters: Filters }) {
     return (
         <PageWrapper>
             <Container>
                 <Header />
-                <Main inertiaPuppies={puppies} />
+                <Main inertiaPuppies={puppies} filters={filters} />
             </Container>
         </PageWrapper>
     );
 }
 
-function Main({ inertiaPuppies }: { inertiaPuppies: Puppy[] }) {
-    const [searchQuery, setSearchQuery] = useState('');
+function Main({ inertiaPuppies, filters }: { inertiaPuppies: Puppy[]; filters: Filters }) {
     const [puppies, setPuppies] = useState<Puppy[]>(inertiaPuppies);
     const { auth } = usePage<SharedData>().props;
 
     return (
         <main>
             <div className="mt-24 grid gap-8 sm:grid-cols-2">
-                <Search searchQuery={searchQuery} setSearchQuery={setSearchQuery} />
+                <Search filters={filters} />
                 {auth.user && <Shortlist puppies={inertiaPuppies} />}
             </div>
-            <PuppiesList puppies={inertiaPuppies} searchQuery={searchQuery} />
+            <PuppiesList puppies={inertiaPuppies} />
             <NewPuppyForm puppies={inertiaPuppies} setPuppies={setPuppies} />
         </main>
     );
diff --git a/resources/js/types/index.d.ts b/resources/js/types/index.d.ts
@@ -50,3 +50,8 @@ export interface Puppy {
     user: Pick<User, 'id' | 'name'>;
     likedBy: User['id'][];
 }
+
+export interface Filters {
+    search?: string;
+    [key: string]: unknown;
+}

Original file line number	Diff line number	Diff line change
`@@ -50,3 +50,8 @@ export interface Puppy {`
`50`	`50`	`user: Pick<User, 'id' \| 'name'>;`
`51`	`51`	`likedBy: User['id'][];`
`52`	`52`	`}`
	`53`	`+`
	`54`	`+export interface Filters {`
	`55`	`+ search?: string;`
	`56`	`+ [key: string]: unknown;`
	`57`	`+}`