From 89f55bc132e34456e75fcca3d04e94db64aacf2c Mon Sep 17 00:00:00 2001
From: Wu Peirong <wupeirong294@gmail.com>
Date: Thu, 20 Oct 2022 21:30:15 +0800
Subject: [PATCH] [resumes][feat] add useDebounceValue hook

---
 apps/portal/src/pages/resumes/browse.tsx          |  4 ++++
 .../router/resumes/resumes-resume-router.ts       |  3 +++
 .../router/resumes/resumes-resume-user-router.ts  |  6 ++++++
 apps/portal/src/utils/resumes/useDebounceValue.ts | 15 +++++++++++++++
 4 files changed, 28 insertions(+)
 create mode 100644 apps/portal/src/utils/resumes/useDebounceValue.ts

diff --git a/apps/portal/src/pages/resumes/browse.tsx b/apps/portal/src/pages/resumes/browse.tsx
index 81948432..def47f95 100644
--- a/apps/portal/src/pages/resumes/browse.tsx
+++ b/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,
       },
diff --git a/apps/portal/src/server/router/resumes/resumes-resume-router.ts b/apps/portal/src/server/router/resumes/resumes-resume-router.ts
index 00f20b20..0747c535 100644
--- a/apps/portal/src/server/router/resumes/resumes-resume-router.ts
+++ b/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) => {
diff --git a/apps/portal/src/server/router/resumes/resumes-resume-user-router.ts b/apps/portal/src/server/router/resumes/resumes-resume-user-router.ts
index e368365f..10bf5c81 100644
--- a/apps/portal/src/server/router/resumes/resumes-resume-user-router.ts
+++ b/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,
         },
       });
diff --git a/apps/portal/src/utils/resumes/useDebounceValue.ts b/apps/portal/src/utils/resumes/useDebounceValue.ts
new file mode 100644
index 00000000..230a9726
--- /dev/null
+++ b/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;
+}