Merge pull request CS3219-AY2324S1#1 from cheehongw/zq-23

Use redux to keep track of questions state

Author: Eclipse-Dominator

frontend/package-lock.json

@@ -7,6 +7,7 @@
     "@chakra-ui/react": "^2.8.1",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@reduxjs/toolkit": "^1.9.7",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

frontend/package.json

@@ -2,18 +2,19 @@ import { Flex, HStack, Input } from "@chakra-ui/react";
 import { QnFilter } from "../../models/Quesiton.model";
 import React, { useState } from "react";
 
-export interface filterprop extends QnFilter {
-  onFilterChange?: (filter: QnFilter) => void; // refilters original db
+export interface FilterBarProps extends QnFilter {
+  setFilter : (filter: QnFilter) => void; // refilters original db
 }
 
 export const FilterBar = ({
   qnFilter = "",
   tagFilter = new Set(),
   difficultyFilter = [0, 100],
   titleAscd = true,
-  onFilterChange,
-}: filterprop) => {
+  setFilter,
+}: FilterBarProps) => {
   const [txtFilter, setTextFilter] = useState(qnFilter);
+
   const filterChange = (event: React.FormEvent<HTMLInputElement>) => {
     setTextFilter((event.target as HTMLInputElement).value);
     const newFilter: QnFilter = {
@@ -23,16 +24,17 @@ export const FilterBar = ({
       titleAscd: titleAscd,
     };
 
-    if (onFilterChange) onFilterChange(newFilter);
+    if (setFilter) setFilter(newFilter);
   };
+
   return (
     <Flex w="80%" px="6" py="4" align={"center"} justify={"space-between"}>
       <HStack spacing="1">
         <Input
           variant="outline"
           placeholder={qnFilter || "Find Questions"}
           borderRadius="15"
-          onChange={(ev) => filterChange(ev)}
+          onChange={filterChange}
           value={txtFilter}
         ></Input>
       </HStack>

frontend/src/components/QnFilter/QnFilter.component.tsx

@@ -2,13 +2,17 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
 import { ChakraProvider } from "@chakra-ui/react"
+import { Provider } from 'react-redux';
+import store from './reducers/store';
 
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 root.render(
   <React.StrictMode>
     <ChakraProvider>
-      <App /> 
+      <Provider store={store}>
+        <App />
+      </Provider>
     </ChakraProvider>
   </React.StrictMode>,
 );

frontend/src/index.tsx

@@ -1,52 +1,30 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { QnTable } from "../../components/QnTable/QnTable.component";
 import { FilterBar } from "../../components/QnFilter/QnFilter.component";
 import { VStack } from "@chakra-ui/react";
 import { QnFilter } from "../../models/Quesiton.model";
 import { Question } from "../../models/Quesiton.model";
 import { dummyQn } from "../../data/sampleqn";
+import { useDispatch, useSelector } from "react-redux";
+import { selectFilteredQuestions, setQuestions } from "../../reducers/questionsSlice";
+import { RootState } from "../../reducers/store";
 
-const filterQn = (questions: Question[], filter: QnFilter) => {
-  return questions.filter((qn) => {
-    if (filter.difficultyFilter) {
-      if (
-        qn.difficulty > filter.difficultyFilter[1] ||
-        qn.difficulty < filter.difficultyFilter[0]
-      )
-        return false;
-    }
-
-    if (filter.tagFilter && filter.tagFilter.size) {
-      if (qn.categories.every((tag) => !filter.tagFilter?.has(tag))) {
-        return false;
-      }
-    }
-
-    if (filter.qnFilter) {
-      if (qn.displayedQuestion.toLowerCase().indexOf(filter.qnFilter) === -1) {
-        return false;
-      }
-    }
-
-    return true;
-  });
-};
 
 const BankPage = () => {
-  const allQuestion = dummyQn;
-  const [filter, changeFilter] = useState<QnFilter>({});
-  const [filteredQn, setFilteredQn] = useState<Question[]>(
-    filterQn(allQuestion, filter)
-  );
-  const onFilterChange = (newFilter: QnFilter) => {
-    changeFilter(newFilter);
-    setFilteredQn(filterQn(allQuestion, newFilter));
-  };
+  const [filter, setFilter] = useState<QnFilter>({});
+  const filteredQns = useSelector((state : RootState) => selectFilteredQuestions(state, filter))
+  const dispatch = useDispatch();
+  
+  useEffect(() => {
+    console.log('dispatching...')
+    setTimeout(() => dispatch(setQuestions(dummyQn)), 3000) //simulating network fetch
+  }, [])
+
   return (
     <VStack spacing="3">
-      <FilterBar onFilterChange={onFilterChange} />
+      <FilterBar setFilter={setFilter} />
 
-      <QnTable filteredQn={filteredQn} pageSize={7}></QnTable>
+      <QnTable filteredQn={filteredQns} pageSize={7}></QnTable>
     </VStack>
   );
 };

frontend/src/pages/BankPage/Bank.page.tsx

@@ -0,0 +1,45 @@
+import { createSlice } from '@reduxjs/toolkit';
+import { RootState } from './store';
+import { QnFilter, Question } from '../models/Quesiton.model';
+
+
+const questionsSlice = createSlice({
+    name: 'questions',
+    initialState: {
+        originalQuestions: [] as Question[]
+    },
+    reducers: {
+        setQuestions: (state, action) => {
+            state.originalQuestions = action.payload;
+        }
+    },
+});
+
+export const selectFilteredQuestions = (state: RootState, filter: QnFilter) => {
+    return state.questions.originalQuestions.filter((qn) => {
+        if (filter.difficultyFilter) {
+          if (
+            qn.difficulty > filter.difficultyFilter[1] ||
+            qn.difficulty < filter.difficultyFilter[0]
+          )
+            return false;
+        }
+    
+        if (filter.tagFilter && filter.tagFilter.size) {
+          if (qn.categories.every((tag) => !filter.tagFilter?.has(tag))) {
+            return false;
+          }
+        }
+    
+        if (filter.qnFilter) {
+          if (qn.displayedQuestion.toLowerCase().indexOf(filter.qnFilter) === -1) {
+            return false;
+          }
+        }
+    
+        return true;
+      });
+}
+
+export const { setQuestions } = questionsSlice.actions;
+export default questionsSlice.reducer;

frontend/src/reducers/questionsSlice.ts

@@ -0,0 +1,11 @@
+import { configureStore } from '@reduxjs/toolkit';
+import questionReducer from './questionsSlice'
+
+const store = configureStore({
+  reducer: {
+    questions: questionReducer
+  }
+});
+
+export type RootState = ReturnType<typeof store.getState>;
+export default store;