stateManagement using react context api

src/App.js

@@ -3,9 +3,9 @@ import "./App.css";
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 
 import { ThemeProvider } from "styled-components";
-import { useDarkMode } from "./components/useDarkMode";
-import { lightTheme, darkTheme } from "./components/themes";
-import { GlobalStyles } from "./components/globalStyles";
+import { useDarkMode } from "./Themes/useDarkMode";
+import { lightTheme, darkTheme } from "./Themes/themes";
+import { GlobalStyles } from "./Themes/globalStyles";
 
 import { MuiThemeProvider, createMuiTheme } from "@material-ui/core/styles";
 

src/Context/DataLayer.js

@@ -0,0 +1,14 @@
+import React, { createContext, useContext, useReducer } from "react";
+
+export const DataLayerContext = createContext();
+
+export const DataLayer = ({ reducer, initialState, children }) => (
+  <DataLayerContext.Provider value={useReducer(reducer, initialState)}>
+    {children}
+  </DataLayerContext.Provider>
+);
+const useDataLayerValue = () => useContext(DataLayerContext);
+
+export { useDataLayerValue };
+
+export default DataLayer;

src/Context/Reducer.js

@@ -0,0 +1,74 @@
+const initialState = {
+  states: [],
+  districts: [],
+  vaccineData: [],
+  contributors: [],
+  toSearch: [
+    "Find By District",
+    "Find By PinCode & Date",
+    "Find By Pincode & Date(Slots for next 7 days)",
+    "Find By District & Date(Slots for next 7 days)",
+  ],
+
+  toSearchValue: "",
+  stateCode: "States",
+  districtCode: "PLEASE SELECT A STATE FIRST",
+  vaccinePerPage: 3,
+  currentPage: 1,
+};
+
+const reducer = (state, action) => {
+  console.log(action);
+  switch (action.type) {
+    case "SET_STATES":
+      return {
+        ...state,
+        states: action.states,
+      };
+    case "SET_DISTRICTS":
+      return {
+        ...state,
+        districts: action.districts,
+      };
+
+    case "SET_VACCINEDATA":
+      return {
+        ...state,
+        vaccineData: action.vaccineData,
+      };
+    case "SET_CONTRIBUTORS":
+      return {
+        ...state,
+        contributors: action.contributors,
+      };
+
+    case "SET_TOSEARCHVALUE":
+      return {
+        ...state,
+        toSearchValue: action.toSearchValue,
+      };
+
+    case "SET_STATECODE":
+      return {
+        ...state,
+        stateCode: action.stateCode,
+      };
+    case "SET_DISTRICTCODE":
+      return {
+        ...state,
+        districtCode: action.districtCode,
+      };
+
+    case "SET_CURRENTPAGE":
+      return {
+        ...state,
+        currentPage: action.currentPage,
+      };
+    default:
+      return state;
+  }
+};
+
+export { initialState };
+
+export default reducer;

src/components/About/About.js

@@ -1,23 +1,22 @@
-import { useState, useEffect } from "react";
+import { useEffect } from "react";
+import { useDataLayerValue } from "../../Context/DataLayer";
 import "./About.css";
 
 const About = () => {
-  const [contributors, setContributors] = useState([]);
+  const [{ contributors }, dispatch] = useDataLayerValue();
 
-  const getContributors = async () => {
+  useEffect(() => {
     fetch(
       "https://api.github.com/repos/stephin007/Cowin-Vaccine-Availablity-Checker/contributors"
     )
       .then((response) => response.json())
       .then((data) => {
-        setContributors(data);
-        console.log(data);
+        dispatch({
+          type: "SET_CONTRIBUTORS",
+          contributors: data,
+        });
       });
-  };
-
-  useEffect(() => {
-    getContributors();
-  }, []);
+  }, [dispatch]);
 
   return (
     <>
@@ -38,7 +37,7 @@ const About = () => {
             <div className="contributor_text">
               <h3>CONTRIBUTORS</h3>
             </div>
-            {contributors.map((contributor) => {
+            {contributors?.map((contributor) => {
               const { contributions, avatar_url, login, type } = contributor;
               return (
                 <div className="contributors_block">

src/components/Home/Home.js

@@ -17,27 +17,27 @@ import SearchIcon from "@material-ui/icons/Search";
 import "./Home.css";
 import VaccineDataMain from "../VaccineData/VaccineDataMain";
 import Pagination from "../Pagination/Pagination";
+import { useDataLayerValue } from "../../Context/DataLayer";
 
 const Home = () => {
-  const [state, setState] = useState([]);
-  const [stateCode, setStateCode] = useState("States");
-  const [districts, setDistricts] = useState([]);
-  const [districtCode, setDistrictCode] = useState(
-    "PLEASE SELECT A STATE FIRST"
-  );
+  const [
+    {
+      states,
+      districts,
+      vaccineData,
+      toSearch,
+      toSearchValue,
+      stateCode,
+      districtCode,
+      vaccinePerPage,
+      currentPage,
+    },
+    dispatch,
+  ] = useDataLayerValue();
+
   const [pin, setPin] = useState("");
   const [formattedDate, setFormattedDate] = useState("");
   const [selectedDate, setSelectedDate] = useState(new Date());
-  const [vaccineData, setVaccineData] = useState([]);
-  const [toSearchValue, setToSearchValue] = useState("");
-  const [toSearch] = useState([
-    "Find By District",
-    "Find By PinCode & Date",
-    "Find By Pincode & Date(Slots for next 7 days)",
-    "Find By District & Date(Slots for next 7 days)",
-  ]);
-  const [currentPage, setCurrentPage] = useState(1);
-  const [vaccinePerPage] = useState(3);
   const indexOfLastVaccine = currentPage * vaccinePerPage;
   const indexOfFirstVaccine = indexOfLastVaccine - vaccinePerPage;
   const currentVaccine = vaccineData.slice(
@@ -52,22 +52,35 @@ const Home = () => {
   }
 
   const paginate = (pageNumber) => {
-    setCurrentPage(pageNumber);
+    dispatch({
+      type: "SET_CURRENTPAGE",
+      currentPage: pageNumber,
+    });
   };
 
   const nextPage = () => {
-    setCurrentPage(currentPage + 1);
-
+    dispatch({
+      type: "SET_CURRENTPAGE",
+      currentPage: currentPage + 1,
+    });
     if (currentPage + 1 > pageNumber.length) {
-      setCurrentPage(pageNumber.length);
+      dispatch({
+        type: "SET_CURRENTPAGE",
+        currentPage: pageNumber.length,
+      });
     }
   };
 
   const prevPage = () => {
-    setCurrentPage(currentPage - 1);
-
+    dispatch({
+      type: "SET_CURRENTPAGE",
+      currentPage: currentPage - 1,
+    });
     if (currentPage - 1 <= 0 && pageNumber.length) {
-      setCurrentPage(pageNumber.slice(0, 1));
+      dispatch({
+        type: "SET_CURRENTPAGE",
+        currentPage: pageNumber.slice(0, 1),
+      });
     }
   };
 
@@ -83,27 +96,41 @@ const Home = () => {
     fetch("https://cdn-api.co-vin.in/api/v2/admin/location/states")
       .then((res) => res.json())
       .then((data) => {
-        setState(data.states);
+        dispatch({
+          type: "SET_STATES",
+          states: data.states,
+        });
       });
     GetFormattedDate();
     // eslint-disable-next-line
   }, [selectedDate, formattedDate]);
 
   const handleDateChange = (date) => {
     setSelectedDate(date);
-    setVaccineData([]);
-    setDistrictCode("");
-    setCurrentPage(1);
+    dispatch({
+      type: "SET_DISTRICTCODE",
+      districtCode: "",
+    });
+    dispatch({
+      type: "SET_CURRENTPAGE",
+      currentPage: 1,
+    });
   };
 
   const onStateChange = async (e) => {
     const stateCode = e.target.value;
-
-    setDistricts([]);
-
-    setCurrentPage(1);
-
-    setVaccineData([]);
+    dispatch({
+      type: "SET_DISTRICTS",
+      districts: [],
+    });
+    dispatch({
+      type: "SET_CURRENTPAGE",
+      currentPage: 1,
+    });
+    dispatch({
+      type: "SET_VACCINEDATA",
+      vaccineData: [],
+    });
 
     const url =
       stateCode === "States"
@@ -113,15 +140,23 @@ const Home = () => {
     await fetch(url)
       .then((res) => res.json())
       .then((data) => {
-        setStateCode(stateCode);
-        setDistricts(data.districts);
+        dispatch({
+          type: "SET_STATECODE",
+          stateCode: stateCode,
+        });
+        dispatch({
+          type: "SET_DISTRICTS",
+          districts: data.districts,
+        });
       });
   };
 
   const findByDistrict = async (e) => {
     const districtCode = e.target.value;
-    setCurrentPage(1);
-
+    dispatch({
+      type: "SET_CURRENTPAGE",
+      currentPage: 1,
+    });
     const url =
       districtCode === "PLEASE SELECT A STATE FIRST"
         ? null
@@ -130,8 +165,15 @@ const Home = () => {
     await fetch(url)
       .then((res) => res.json())
       .then((data) => {
-        setDistrictCode(districtCode);
-        setVaccineData(data.sessions);
+        dispatch({
+          type: "SET_DISTRICTCODE",
+          districtCode: districtCode,
+        });
+
+        dispatch({
+          type: "SET_VACCINEDATA",
+          vaccineData: data.sessions,
+        });
       });
   };
 
@@ -163,7 +205,15 @@ const Home = () => {
             fee_type: res?.fee_type,
             slots: res?.sessions?.slice(0, 1).map((res) => res.slots),
           }));
-          setVaccineData(pincodeData);
+          dispatch({
+            type: "SET_VACCINEDATA",
+            vaccineData: pincodeData,
+          });
+
+          dispatch({
+            type: "SET_CURRENTPAGE",
+            currentPage: 1,
+          });
         });
     }
   };
@@ -177,8 +227,10 @@ const Home = () => {
       )
         .then((res) => res.json())
         .then((data) => {
-          console.log(data);
-          setVaccineData(data.sessions);
+          dispatch({
+            type: "SET_VACCINEDATA",
+            vaccineData: data.sessions,
+          });
         });
     }
   };
@@ -201,8 +253,14 @@ const Home = () => {
                 variant="filled"
                 value={toSearchValue}
                 onChange={(e) => {
-                  setToSearchValue(e.target.value);
-                  setVaccineData([]);
+                  dispatch({
+                    type: "SET_TOSEARCHVALUE",
+                    toSearchValue: e.target.value,
+                  });
+                  dispatch({
+                    type: "SET_VACCINEDATA",
+                    vaccineData: [],
+                  });
                 }}
               >
                 {toSearch.map((functionName, index) => {
@@ -233,7 +291,7 @@ const Home = () => {
                   onChange={onStateChange}
                 >
                   <MenuItem value="States">Select a State</MenuItem>
-                  {state?.map((stateData) => (
+                  {states?.map((stateData) => (
                     <MenuItem value={stateData?.state_id}>
                       {stateData?.state_name}
                     </MenuItem>
@@ -290,7 +348,7 @@ const Home = () => {
                   onChange={onStateChange}
                 >
                   <MenuItem value="States">Select a State</MenuItem>
-                  {state?.map((stateData) => (
+                  {states?.map((stateData) => (
                     <MenuItem value={stateData?.state_id}>
                       {stateData?.state_name}
                     </MenuItem>