From 28c412424518b3555eab5450c0b8df6c86392bb5 Mon Sep 17 00:00:00 2001
From: jakeaturner <jturner@cosmistack.com>
Date: Tue, 13 Feb 2024 11:14:13 -0800
Subject: [PATCH] fix(Search): improve project search reactivity

---
 client/src/screens/conductor/Search/index.tsx | 37 ++++++++++++++-----
 server/api/search.ts                          | 14 +++----
 2 files changed, 35 insertions(+), 16 deletions(-)

diff --git a/client/src/screens/conductor/Search/index.tsx b/client/src/screens/conductor/Search/index.tsx
index 4752b975..6850f45b 100644
--- a/client/src/screens/conductor/Search/index.tsx
+++ b/client/src/screens/conductor/Search/index.tsx
@@ -36,6 +36,7 @@ import {
   Project,
   ProjectFile,
   ProjectFileWProjectData,
+  ProjectSearchParams,
   User,
 } from "../../../types";
 import { format, parseISO, set } from "date-fns";
@@ -78,7 +79,8 @@ const Search = () => {
   );
 
   const [projects, setProjects] = useState<Project[]>([]);
-  const [projectsSort, setProjectsSort] = useState(projSortDefault);
+  const [projectsSort, setProjectsSort] =
+    useState<ProjectSearchParams["sort"]>(projSortDefault);
   const [projectsTotal, setProjectsTotal] = useState<number>(0);
 
   const [books, setBooks] = useState<Book[]>([]);
@@ -274,7 +276,9 @@ const Search = () => {
 
   async function handleProjectSearch(
     query: string = searchQuery,
-    page: number = activeProjectPage
+    page: number = activeProjectPage,
+    limit: number = projectsLimit,
+    sort: ProjectSearchParams["sort"] = projectsSort
   ) {
     try {
       setProjectsLoading(true);
@@ -283,7 +287,8 @@ const Search = () => {
         searchQuery: query,
         strictMode: false,
         page,
-        limit: projectsLimit,
+        limit,
+        sort,
       });
 
       if (res.data.err) {
@@ -536,9 +541,15 @@ const Search = () => {
                         className="search-itemsperpage-dropdown"
                         selection
                         options={catalogItemsPerPageOptions}
-                        onChange={(_e, { value }) =>
-                          setProjectsLimit((value as number) ?? 12)
-                        }
+                        onChange={(_e, { value }) => {
+                          const newLimit = (value as number) ?? 12;
+                          setProjectsLimit(newLimit);
+                          handleProjectSearch(
+                            searchQuery,
+                            activeProjectPage,
+                            newLimit
+                          );
+                        }}
                         value={projectsLimit}
                         aria-label="Number of results to display per page"
                       />
@@ -567,9 +578,17 @@ const Search = () => {
                         selection
                         button
                         options={projSortOptions}
-                        onChange={(_e, { value }) =>
-                          setProjectsSort((value as string) ?? "title")
-                        }
+                        onChange={(_e, { value }) => {
+                          const newSort =
+                            (value as ProjectSearchParams["sort"]) ?? "title";
+                          setProjectsSort(newSort);
+                          handleProjectSearch(
+                            searchQuery,
+                            activeProjectPage,
+                            projectsLimit,
+                            newSort
+                          );
+                        }}
                         value={projectsSort}
                         aria-label="Sort Project Results by"
                       />
diff --git a/server/api/search.ts b/server/api/search.ts
index 03f3f718..6c5a711e 100644
--- a/server/api/search.ts
+++ b/server/api/search.ts
@@ -123,14 +123,8 @@ async function projectsSearch(
       },
     ]);
 
-    const totalCount = results.length;
-    const paginated = results.slice(
-      projectsOffset,
-      projectsOffset + projectsLimit
-    );
-
     //Sort projects
-    paginated.sort((a, b) => {
+    results.sort((a, b) => {
       let aData = null;
       let bData = null;
       if (req.query.sort === "title") {
@@ -150,6 +144,12 @@ async function projectsSearch(
       return 0;
     });
 
+    const totalCount = results.length;
+    const paginated = results.slice(
+      projectsOffset,
+      projectsOffset + projectsLimit
+    );
+
     return res.send({
       err: false,
       numResults: totalCount,