Redux implementation for admin

public/src/actions/index.js

@@ -27,6 +27,17 @@ import {
   SET_ADDRESS_MODAL,
   SET_FILE_MODAL,
   SET_MODAL,
+  SET_CERT_TYPE,
+  SET_REQ,
+  SET_REFRESHING,
+  SET_LOAD,
+  SET_LENGTH,
+  SET_APPROVE_MODEL,
+  SET_FILE_STATUS,
+  SET_EMAIL_MODEL,
+  SET_EMAIL_LOAD,
+  SET_POSTAL_MODEL,
+  SET_REJECT_MODEL,
 } from "./types";
 export function setInstructionModal(bool) {
   return {
@@ -253,3 +264,93 @@ export function setModal(bool) {
     },
   };
 }
+export function setCertType(certTypes) {
+  return {
+    type: SET_CERT_TYPE,
+    payload: {
+      certTypes: certTypes,
+    },
+  };
+}
+export function setReq(certReq) {
+  return {
+    type: SET_REQ,
+    payload: {
+      certReq: certReq,
+    },
+  };
+}
+export function setRefreshing(isRefreshing) {
+  return {
+    type: SET_REFRESHING,
+    payload: {
+      isRefreshing: isRefreshing,
+    },
+  };
+}
+export function setLoad(loading) {
+  return {
+    type: SET_LOAD,
+    payload: {
+      loading: loading,
+    },
+  };
+}
+export function setLength(length) {
+  return {
+    type: SET_LENGTH,
+    payload: {
+      length: length,
+    },
+  };
+}
+export function setApproveModel(showModalApprove) {
+  return {
+    type: SET_APPROVE_MODEL,
+    payload: {
+      showModalApprove: showModalApprove,
+    },
+  };
+}
+export function setFilestatus(fileStatus) {
+  return {
+    type: SET_FILE_STATUS,
+    payload: {
+      fileStatus: fileStatus,
+    },
+  };
+}
+export function setEmailModel(emailModel) {
+  return {
+    type: SET_EMAIL_MODEL,
+    payload: {
+      emailModel: emailModel,
+    },
+  };
+}
+export function setEmailLoad(emailLoad) {
+  return {
+    type: SET_EMAIL_LOAD,
+    payload: {
+      emailLoad: emailLoad,
+    },
+  };
+}
+export function setPostalModel(postalModel) {
+  return {
+    type: SET_POSTAL_MODEL,
+    payload: {
+      postalModel: postalModel,
+    },
+  };
+}
+export function setRejectModel(rejectModel) {
+  return {
+    type: SET_REJECT_MODEL,
+    payload: {
+      rejectModel: rejectModel,
+    },
+  };
+}
+
+

public/src/actions/types.js

@@ -26,3 +26,15 @@ export const SET_PRE_ADDRESS = "SET_PRE_ADDRESS";
 export const SET_ADDRESS_MODAL = "SET_ADDRESS_MODAL";
 export const SET_FILE_MODAL = "SET_FILE_MODAL";
 export const SET_MODAL = "SET_MODAL";
+
+export const SET_CERT_TYPE = "SET_CERT_TYPE";
+export const SET_REQ = "SET_REQ";
+export const SET_REFRESHING = "SET_REFRESHING";
+export const SET_LOAD = "SET_LOAD";
+export const SET_LENGTH = "SET_LENGTH";
+export const SET_APPROVE_MODEL = "SET_APPROVE_MODEL";
+export const SET_FILE_STATUS = "SET_FILE_STATUS";
+export const SET_EMAIL_MODEL = "SET_EMAIL_MODEL";
+export const SET_EMAIL_LOAD = "SET_EMAIL_LOAD";
+export const SET_POSTAL_MODEL = "SET_POSTAL_MODEL";
+export const SET_REJECT_MODEL = "SET_REJECT_MODEL";

public/src/admin/admin.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import spider from "../utils/API";
 import NavBar from "../student/navbar/navbar";
 import {
@@ -21,13 +21,19 @@ import xlsExport from "xlsexport";
 
 import { FaListAlt } from "react-icons/fa";
 
-function Admin() {
-  const [certReq, setReq] = useState([]);
-  const [isLoading, setLoad] = useState(true);
-  const [certTypes, setTypes] = useState([]);
-  const [length, setLength] = useState(0);
-  const [isRefreshing, setRefreshing] = useState(false);
+import store from "../store/index";
+import { setCertType, setReq, setRefreshing, setLoad, setLength } from "../actions/index";
 
+function Admin() {
+  //const [certReq, setReq] = useState([]);
+  //const [isLoading, setLoad] = useState(true);
+  //const [certTypes, setTypes] = useState([]); redux
+  //const [length, setLength] = useState(0);
+  //const [isRefreshing, setRefreshing] = useState(false);
+  const certReq = store.getState().certReq;
+  const isRefreshing = store.getState().isRefreshing;
+  const isLoading = store.getState().loading;
+  const length = store.getState().length;
   useEffect(() => {
     spider
       .get("/api/student/certificate_types")
@@ -39,7 +45,9 @@ function Admin() {
           delete x.id;
           return true;
         });
-        setTypes(Object.assign(certTypes, res.data));
+        //setTypes(Object.assign(certTypes, res.data));
+        store.dispatch(setCertType(res.data))
+        //console.log(store.getState().certTypes)
       })
       .catch((err) => {});
     spider
@@ -72,7 +80,7 @@ function Admin() {
         }
         let merged = [];
 
-        certTypes.forEach((typ) => {
+        store.getState().certTypes.forEach((typ) => {
           let tempType = {
             certificate_type_id: typ.certificate_type_id,
             certificate_type: typ.certificate_type,
@@ -87,17 +95,21 @@ function Admin() {
           });
           merged.push(tempType);
         });
-        setReq(Object.assign(certReq, merged));
-        setLength(
-          certReq[0].certificates.length +
-            certReq[1].certificates.length +
-            certReq[2].certificates.length +
-            certReq[3].certificates.length +
-            certReq[4].certificates.length +
-            certReq[5].certificates.length
-        );
-        setRefreshing(false);
-        setLoad(false);
+        //setReq(Object.assign(certReq, merged));
+        store.dispatch(setReq(merged))
+        const certRequest = store.getState().certReq
+        store.dispatch(setLength(
+          certRequest[0].certificates.length +
+          certRequest[1].certificates.length +
+          certRequest[2].certificates.length +
+          certRequest[3].certificates.length +
+          certRequest[4].certificates.length +
+          certRequest[5].certificates.length
+        ));
+        //setRefreshing(false)
+        store.dispatch(setRefreshing(false));
+        //setLoad(false);
+        store.dispatch(setLoad(false));
       })
       .catch((err) => {});
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -212,7 +224,8 @@ function Admin() {
     }
   };
   const changeRefresh = (boolVal) => {
-    setRefreshing(boolVal);
+    //setRefreshing(boolVal);
+    store.dispatch(setRefreshing(boolVal));
   };
 
   return (