feat: search by alternative titles in dashboard

app/(app)/dashboard/client.tsx

@@ -27,8 +27,10 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { FilterStyle, useDashboardStore } from './state';
+import useSwr from 'swr';
+import fetcher from '@/client/fetcher';
 
 const Dashboard = ({
   userEntries: originalUserEntries,
@@ -45,13 +47,21 @@ const Dashboard = ({
 
     userEntries,
     setUserEntries,
-    setUserEntry,
   } = useDashboardStore();
 
   useEffect(() => {
     setUserEntries(originalUserEntries);
   }, [originalUserEntries]);
 
+  const {
+    data: queryResults,
+    error: queryError,
+    isLoading: queryIsLoading,
+  } = useSwr<number[], { error: string }>(
+    `/api/user/entries/search?q=${filterTitle}`,
+    fetcher
+  );
+
   return (
     <>
       <Header>
@@ -158,13 +168,23 @@ const Dashboard = ({
               }
             })
             .map(userEntry => {
-              if (
+              if (filterTitle !== '' && (queryIsLoading || queryError)) {
+                if (
+                  filterTitle !== '' &&
+                  !userEntry.entry.originalTitle
+                    .toLowerCase()
+                    .includes(filterTitle.toLowerCase())
+                ) {
+                  return;
+                }
+              } else if (
                 filterTitle !== '' &&
-                !userEntry.entry.originalTitle
-                  .toLowerCase()
-                  .includes(filterTitle.toLowerCase())
+                !queryIsLoading &&
+                queryResults
               ) {
-                return;
+                if (!queryResults.includes(userEntry.id)) {
+                  return;
+                }
               }
 
               // if (

app/api/user/entries/search/route.ts

@@ -0,0 +1,36 @@
+import { validateSessionToken } from '@/server/auth/validateSession';
+import prisma from '@/server/db';
+import { NextRequest } from 'next/server';
+
+export const GET = async (request: NextRequest) => {
+  const user = await validateSessionToken();
+
+  if (!user) {
+    return Response.json({ error: 'You are not logged in' }, { status: 400 });
+  }
+
+  const query = request.nextUrl.searchParams.get('q');
+
+  if (!query) {
+    return Response.json({ error: 'No query provided' }, { status: 400 });
+  }
+
+  return Response.json(
+    (
+      await prisma.userEntry.findMany({
+        where: {
+          userId: user.id,
+          entry: {
+            alternativeTitles: {
+              some: {
+                title: {
+                  contains: query,
+                },
+              },
+            },
+          },
+        },
+      })
+    ).map(e => e.id)
+  );
+};

client/fetcher.ts

@@ -0,0 +1,7 @@
+export default async function fetcher<JSON = any>(
+  input: RequestInfo,
+  init?: RequestInit
+): Promise<JSON> {
+  const res = await fetch(input, init);
+  return res.json();
+}

package.json

@@ -52,6 +52,7 @@
     "react-dom": "18.2.0",
     "server-only": "^0.0.1",
     "sonner": "^1.4.0",
+    "swr": "^2.2.5",
     "tailwind-merge": "^2.2.1",
     "tailwindcss-animate": "^1.0.7",
     "usehooks-ts": "^2.16.0",