Merge pull request #79 from NTUCourse-Neo/remove-redux

Replace redux code by context API

package.json

@@ -13,15 +13,13 @@
     "@testing-library/user-event": "^12.0.2",
     "array-move": "^4.0.0",
     "axios": "^0.24.0",
-    "chart.js": "^3.7.0",
     "color-hash": "^2.0.1",
     "dotenv-defaults": "^3.0.0",
     "focus-visible": "^5.2.0",
     "framer-motion": "^4.1.17",
     "moment": "^2.29.1",
     "randomcolor": "^0.6.2",
     "react": "^17.0.2",
-    "react-chartjs-2": "^4.0.1",
     "react-copy-to-clipboard": "^5.0.4",
     "react-countdown-hook": "^1.1.1",
     "react-dom": "^17.0.2",
@@ -30,7 +28,6 @@
     "react-icons": "^3.0.0",
     "react-loading-overlay": "^1.0.1",
     "react-minimal-pie-chart": "^8.2.0",
-    "react-redux": "^7.2.6",
     "react-router-dom": "6",
     "react-scripts": "4.0.3",
     "react-scroll": "^1.8.4",
@@ -39,9 +36,8 @@
     "react-spinners": "^0.11.0",
     "react-table-drag-select": "^0.3.1",
     "react-use": "^17.4.0",
-    "redux": "^4.1.2",
-    "redux-thunk": "^2.4.1",
     "uuid": "^8.3.2",
+    "valtio": "^1.6.1",
     "web-vitals": "^0.2.2"
   },
   "scripts": {

src/App.js

@@ -15,6 +15,10 @@ import CourseInfoContainer from "containers/CourseInfoContainer";
 import { useParams } from "react-router-dom";
 import ReactGA from "react-ga";
 import RecruitingPageContainer from "containers/RecruitingPageContainer";
+import { UserDataProvider } from "components/Providers/UserProvider";
+import { CourseSearchingProvider } from "components/Providers/CourseSearchingProvider";
+import { DisplayTagsProvider } from "components/Providers/DisplayTagsProvider";
+import { CourseTableProvider } from "components/Providers/CourseTableProvider";
 
 dotenv.config();
 
@@ -59,11 +63,19 @@ function App(props) {
       cacheLocation={"localstorage"}
     >
       <ChakraProvider theme={theme}>
-        <Box w="100vw" h={{ base: "100%", lg: "" }}>
-          <HeaderBar useColorModeValue={useColorModeValue} />
-          {content(props.route)}
-          <Footer />
-        </Box>
+        <CourseSearchingProvider>
+          <CourseTableProvider>
+            <UserDataProvider>
+              <DisplayTagsProvider>
+                <Box w="100vw" h={{ base: "100%", lg: "" }}>
+                  <HeaderBar useColorModeValue={useColorModeValue} />
+                  {content(props.route)}
+                  <Footer />
+                </Box>
+              </DisplayTagsProvider>
+            </UserDataProvider>
+          </CourseTableProvider>
+        </CourseSearchingProvider>
       </ChakraProvider>
     </Auth0Provider>
   );