Refactored some code so that search is speedier

frontend/src/app/cache.ts

@@ -34,6 +34,7 @@ interface CacheState {
   allInstructors: { name: string }[];
   instructorsLoading: boolean;
   instructorPage: number;
+  selectedInstructors: { name: string }[];
 }
 
 const initialState: CacheState = {
@@ -53,6 +54,7 @@ const initialState: CacheState = {
   allInstructors: [],
   instructorsLoading: false,
   instructorPage: 1,
+  selectedInstructors: [],
 };
 
 export const selectCourseResults =
@@ -86,20 +88,6 @@ export const selectFCEResultsForInstructor =
     (state: RootState): FCE[] | undefined =>
       state.cache.instructorResults[name];
 
-export const selectInstructors = (search: string) => (state: RootState) => {
-  if (!search) return state.cache.allInstructors;
-
-  const options = {
-    keys: ['name'],
-    includeScore: true,
-  };
-
-  const fuse = new Fuse(state.cache.allInstructors, options);
-  const result = fuse.search(search);
-
-  return result.map(({ item }) => item);
-};
-
 export const cacheSlice = createSlice({
   name: "cache",
   initialState,
@@ -120,6 +108,21 @@ export const cacheSlice = createSlice({
     setInstructorsLoading: (state, action: PayloadAction<boolean>) => {
       state.instructorsLoading = action.payload;
     },
+    selectInstructors: (state, action: PayloadAction<string>) => {
+      const search = action.payload
+      if (!search) {
+        state.selectedInstructors = state.allInstructors;
+        return;
+      }
+
+      const options = {
+        keys: ['name'],
+        includeScore: true,
+      };
+
+      const fuse = new Fuse(state.allInstructors, options);
+      state.selectedInstructors = fuse.search(search).map(({item}) => item);
+    }
   },
   extraReducers: (builder) => {
     builder
@@ -222,7 +225,10 @@ export const cacheSlice = createSlice({
       })
       .addCase(fetchAllInstructors.fulfilled, (state, action) => {
         state.instructorsLoading = false;
-        if (action.payload) state.allInstructors = action.payload;
+        if (action.payload) {
+          state.allInstructors = action.payload;
+          state.selectedInstructors = action.payload;
+        }
       });
   },
 });

frontend/src/app/store.ts

@@ -108,6 +108,8 @@ export const throttledFilter = () => {
 
 const debouncedInstructorFilter = debounce(() => {
   setTimeout(() => {
+    const state = store.getState();
+    void store.dispatch(cacheSlice.actions.selectInstructors(state.instructors.search));
     void store.dispatch(cacheSlice.actions.setInstructorsLoading(false));
   }, 0);
 }, 300);

frontend/src/components/InstructorSearch.tsx

@@ -3,7 +3,6 @@ import React from "react";
 import { useAppDispatch, useAppSelector } from "../app/hooks";
 import { instructorsSlice } from "../app/instructors";
 import { cacheSlice } from "../app/cache";
-import { selectInstructors } from "../app/cache";
 import { throttledInstructorFilter } from "../app/store";
 
 const InstructorSearch = () => {
@@ -17,7 +16,7 @@ const InstructorSearch = () => {
     throttledInstructorFilter();
   };
 
-  const results = useAppSelector(selectInstructors(search));
+  const results = useAppSelector((state) => state.cache.selectedInstructors);
   const numResults = results.length;
 
   return (

frontend/src/components/InstructorSearchList.tsx

@@ -4,7 +4,7 @@ import { Pagination } from "./Pagination";
 import React, { useEffect } from "react";
 import InstructorDetail from "./InstructorDetail";
 import { fetchAllInstructors } from "../app/api/instructors";
-import { selectInstructors, cacheSlice } from "../app/cache";
+import { cacheSlice } from "../app/cache";
 
 const RESULTS_PER_PAGE = 10;
 
@@ -15,8 +15,7 @@ const InstructorSearchList = () => {
     void dispatch(fetchAllInstructors());
   }, [dispatch]);
 
-  const search = useAppSelector((state) => state.instructors.search);
-  const results = useAppSelector(selectInstructors(search));
+  const results = useAppSelector((state) => state.cache.selectedInstructors);
   const pages = Math.ceil(results.length / RESULTS_PER_PAGE);
   const curPage = useAppSelector((state) => state.cache.instructorPage);
   const loading = useAppSelector((state) => state.cache.instructorsLoading);