Show products count stat on dashboard home-screen

Author: kkamara

frontend/src/components/pages/adminDashboard/HomeComponent.jsx

@@ -1,38 +1,40 @@
-import React, { useEffect, } from "react";
-import { useNavigate, } from "react-router-dom";
-import { useDispatch, useSelector, } from "react-redux";
-import { Helmet } from "react-helmet";
-import { authorize, } from "../../../redux/actions/adminAuthActions";
-import Error from "../../layouts/Error";
-import { adminDashboardTitle, } from "../../../constants";
+import React, { useEffect, } from "react"
+import { useDispatch, useSelector, } from "react-redux"
+import { Helmet } from "react-helmet"
+import { authorize, } from "../../../redux/actions/adminAuthActions"
+import Error from "../../layouts/Error"
+import { adminDashboardTitle, } from "../../../constants"
+import { getAdminProductsCountStat, } from "../../../redux/actions/adminProductsCountStatActions"
 
 export default function HomeComponent() {
-  const navigate = useNavigate();
-
-  const dispatch = useDispatch();
+  const dispatch = useDispatch()
   const state = useSelector((state) => ({
     adminAuth: state.adminAuth,
-  }));
+    adminProductsCountStat: state.adminProductsCountStat,
+  }))
 
   useEffect(() => {
-    dispatch(authorize());
-  }, []);
+    dispatch(authorize())
+  }, [])
 
   useEffect(() => {
     if (false === state.adminAuth.loading && !state.adminAuth.data) {
-      window.location.href = "/admin/signin";
+      window.location.href = "/admin/signin"
+    }
+    if (false === state.adminAuth.loading && state.adminAuth.data) {
+      dispatch(getAdminProductsCountStat())
     }
-  }, [state.adminAuth]);
+  }, [state.adminAuth])
 
-  if (state.adminAuth.loading) {
+  if (state.adminAuth.loading || state.adminProductsCountStat.loading) {
     return (
       <div className="container dashboard-home-container text-center">
         <Helmet>
           <title>Dashboard Home - {adminDashboardTitle}</title>
         </Helmet>
         <p>Loading...</p>
       </div>
-    );
+    )
   }
 
   return (
@@ -58,7 +60,7 @@ export default function HomeComponent() {
                     Products
                   </div>
                   <div className="h5 mb-0 font-weight-bold text-gray-800">
-                    PRODUCTS_COUNT
+                    {state.adminProductsCountStat.data}
                   </div>
                 </div>
                 <div className="col-auto">
@@ -146,5 +148,5 @@ export default function HomeComponent() {
         </div>
       </div>
     </div>
-  );
+  )
 }

frontend/src/redux/actions/adminProductsCountStatActions.js

@@ -0,0 +1,37 @@
+
+import HttpService from "../../services/HttpService"
+import { adminProductsCountStat, } from "../types"
+
+export const getAdminProductsCountStat = () => {
+  return async dispatch => {
+    const http = new HttpService()
+
+    dispatch({ type: adminProductsCountStat.GET_ADMIN_PRODUCTS_COUNT_STAT_PENDING, })
+
+    const tokenId = "admin-user-token"
+    await http.getData("/stats/admin/products", tokenId)
+      .then(res => {
+        dispatch({
+          type: adminProductsCountStat.GET_ADMIN_PRODUCTS_COUNT_STAT_SUCCESS,
+          payload: res.data.data,
+        })
+      }).catch(error => {
+        let message
+        if ("ERR_NETWORK" === error.code) {
+          message = "Server unavailable."
+        } else if (
+          error.response &&
+          error.response.data &&
+          error.response.data.error
+        ) {
+          message = error.response.data.error
+        } else {
+          message = "Something went wrong. Please come back later."
+        }
+        dispatch({ 
+          type: adminProductsCountStat.GET_ADMIN_PRODUCTS_COUNT_STAT_ERROR, 
+          payload: message,
+        })
+      })
+  }
+}

frontend/src/redux/reducers/adminProductsCountStatReducer.js

@@ -0,0 +1,36 @@
+import { adminProductsCountStat, } from "../types"
+
+const initState = {
+  data: null,
+  error: null,
+  loading: true,
+}
+
+export default function adminProductsCountStatReducer (state = initState, action) {
+  switch (action.type) {
+    
+    case adminProductsCountStat.GET_ADMIN_PRODUCTS_COUNT_STAT_ERROR:
+      return {
+        ...state,
+        error: action.payload,
+        loading: false,
+      }
+    
+    case adminProductsCountStat.GET_ADMIN_PRODUCTS_COUNT_STAT_PENDING:
+      return {
+        ...state,
+        loading: true,
+      }
+    
+    case adminProductsCountStat.GET_ADMIN_PRODUCTS_COUNT_STAT_SUCCESS:
+      return {
+        ...state,
+        data: action.payload,
+        loading: false,
+        error: null,
+      }
+
+    default:
+      return state
+  }
+}

frontend/src/redux/reducers/index.js

@@ -2,9 +2,11 @@ import { combineReducers, } from "redux"
 import authReducer from "./authReducer"
 import usersReducer from "./usersReducer"
 import adminAuthReducer from "./adminAuthReducer"
+import adminProductsCountStatReducer from "./adminProductsCountStatReducer"
 
 export default combineReducers({
   auth: authReducer,
   users: usersReducer,
   adminAuth: adminAuthReducer,
+  adminProductsCountStat: adminProductsCountStatReducer,
 })

frontend/src/redux/types.js

@@ -31,3 +31,9 @@ export const adminAuth = {
   ADMIN_AUTH_AUTHORIZE_ERROR: "ADMIN_AUTH_AUTHORIZE_ERROR",
   ADMIN_AUTH_AUTHORIZE_PENDING: "ADMIN_AUTH_AUTHORIZE_PENDING",
 }
+
+export const adminProductsCountStat = {
+  GET_ADMIN_PRODUCTS_COUNT_STAT_SUCCESS: "GET_ADMIN_PRODUCTS_COUNT_STAT_SUCCESS",
+  GET_ADMIN_PRODUCTS_COUNT_STAT_ERROR: "GET_ADMIN_PRODUCTS_COUNT_STAT_ERROR",
+  GET_ADMIN_PRODUCTS_COUNT_STAT_PENDING: "GET_ADMIN_PRODUCTS_COUNT_STAT_PENDING",
+}