[resumes][feat] add useDebounceValue hook

apps/portal/src/pages/resumes/browse.tsx

@@ -33,6 +33,7 @@ import ResumeListItems from '~/components/resumes/browse/ResumeListItems';
 import ResumeReviewsTitle from '~/components/resumes/ResumeReviewsTitle';
 import ResumeSignInButton from '~/components/resumes/shared/ResumeSignInButton';
 
+import useDebounceValue from '~/utils/resumes/useDebounceValue';
 import { trpc } from '~/utils/trpc';
 
 const filters: Array<Filter> = [
@@ -80,6 +81,7 @@ export default function ResumeHomePage() {
         locationFilters: userFilters.location,
         numComments: userFilters.numComments,
         roleFilters: userFilters.role,
+        searchValue: useDebounceValue(searchValue, 800),
         skip,
         sortOrder,
       },
@@ -100,6 +102,7 @@ export default function ResumeHomePage() {
         locationFilters: userFilters.location,
         numComments: userFilters.numComments,
         roleFilters: userFilters.role,
+        searchValue: useDebounceValue(searchValue, 800),
         skip,
         sortOrder,
       },
@@ -122,6 +125,7 @@ export default function ResumeHomePage() {
         locationFilters: userFilters.location,
         numComments: userFilters.numComments,
         roleFilters: userFilters.role,
+        searchValue: useDebounceValue(searchValue, 800),
         skip,
         sortOrder,
       },

apps/portal/src/server/router/resumes/resumes-resume-router.ts

@@ -11,6 +11,7 @@ export const resumesRouter = createRouter()
       locationFilters: z.string().array(),
       numComments: z.number().optional(),
       roleFilters: z.string().array(),
+      searchValue: z.string(),
       skip: z.number(),
       sortOrder: z.string(),
     }),
@@ -22,6 +23,7 @@ export const resumesRouter = createRouter()
         sortOrder,
         numComments,
         skip,
+        searchValue,
       } = input;
       const userId = ctx.session?.user?.id;
       const totalRecords = await ctx.prisma.resumesResume.count({
@@ -81,6 +83,7 @@ export const resumesRouter = createRouter()
           experience: { in: experienceFilters },
           location: { in: locationFilters },
           role: { in: roleFilters },
+          title: { contains: searchValue, mode: 'insensitive' },
         },
       });
       const mappedResumeData = resumesData.map((r) => {

apps/portal/src/server/router/resumes/resumes-resume-user-router.ts

@@ -50,6 +50,7 @@ export const resumesResumeUserRouter = createProtectedRouter()
       locationFilters: z.string().array(),
       numComments: z.number().optional(),
       roleFilters: z.string().array(),
+      searchValue: z.string(),
       skip: z.number(),
       sortOrder: z.string(),
     }),
@@ -59,6 +60,7 @@ export const resumesResumeUserRouter = createProtectedRouter()
         roleFilters,
         locationFilters,
         experienceFilters,
+        searchValue,
         sortOrder,
         numComments,
         skip,
@@ -130,6 +132,7 @@ export const resumesResumeUserRouter = createProtectedRouter()
             experience: { in: experienceFilters },
             location: { in: locationFilters },
             role: { in: roleFilters },
+            title: { contains: searchValue, mode: 'insensitive' },
           },
           userId,
         },
@@ -161,6 +164,7 @@ export const resumesResumeUserRouter = createProtectedRouter()
       locationFilters: z.string().array(),
       numComments: z.number().optional(),
       roleFilters: z.string().array(),
+      searchValue: z.string(),
       skip: z.number(),
       sortOrder: z.string(),
     }),
@@ -171,6 +175,7 @@ export const resumesResumeUserRouter = createProtectedRouter()
         locationFilters,
         experienceFilters,
         sortOrder,
+        searchValue,
         numComments,
         skip,
       } = input;
@@ -229,6 +234,7 @@ export const resumesResumeUserRouter = createProtectedRouter()
           experience: { in: experienceFilters },
           location: { in: locationFilters },
           role: { in: roleFilters },
+          title: { contains: searchValue, mode: 'insensitive' },
           userId,
         },
       });

apps/portal/src/utils/resumes/useDebounceValue.ts

@@ -0,0 +1,15 @@
+import { useEffect, useState } from 'react';
+
+export default function useDebounceValue(value: string, delay: number) {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+  return debouncedValue;
+}