diff --git a/frontend/src/app/cache.ts b/frontend/src/app/cache.ts index a6d9de9..faec451 100644 --- a/frontend/src/app/cache.ts +++ b/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) => { state.instructorsLoading = action.payload; }, + selectInstructors: (state, action: PayloadAction) => { + 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; + } }); }, }); diff --git a/frontend/src/app/store.ts b/frontend/src/app/store.ts index 7554ec6..6d1aef8 100644 --- a/frontend/src/app/store.ts +++ b/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); diff --git a/frontend/src/components/InstructorSearch.tsx b/frontend/src/components/InstructorSearch.tsx index 106dccf..d674cf0 100644 --- a/frontend/src/components/InstructorSearch.tsx +++ b/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 ( diff --git a/frontend/src/components/InstructorSearchList.tsx b/frontend/src/components/InstructorSearchList.tsx index 42afc98..6590eb3 100644 --- a/frontend/src/components/InstructorSearchList.tsx +++ b/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);