Fetch chart of single product data

- Edit get revenues order route in server to add product id query and edit pipline for additional request by new query if founded
- fetch single product chart data fetch > then sort it by id > then map it in jsx
- Fix: verifyToken for admin as change promise of condition isAdmin

Author: Soliman3

admin/src/pages/ProductSinglePage.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 
 // import styled components for css styling...
 import styled from 'styled-components'
@@ -13,6 +13,7 @@ import Charts from '../components/Charts'
 import { productsData } from '../Data/dummyData'
 import { AddOutlined, Publish } from '@mui/icons-material'
 import { useSelector } from 'react-redux'
+import { userRequest } from '../requestAxiosMethod'
 
 // Styling...
 const Container = styled.div`
@@ -171,8 +172,31 @@ export default function ProductSinglePage() {
     // get product by it's id from url...
     const pageUrl = useLocation()
     const productId = pageUrl.pathname.split('/')[2]
+    const [productChartInfo, setProductChartInfo] = useState([])
     // get the product from redux by it's _id that comes from url...
     const product = useSelector((state) => state.product.products.find((item) => item._id === productId))
+
+    const months = useMemo(
+        () => [
+            'Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec',
+        ], []
+    );
+
+    useEffect(() => {
+        const getOrderedProductInfo = async () => {
+            try {
+                const response = await userRequest.get("orders/revenues?pid=" + productId )
+                // sort response by id..
+                const sortedResponse = response.data.sort((a,b)=> a._id - b._id)
+                sortedResponse.map((item) => {
+                    setProductChartInfo(previous=>[...previous, {name:months[item._id-1], Sales: item.total}])
+                })
+            } catch (error) {
+                
+            }
+        }
+        getOrderedProductInfo()
+    }, [months, productId])
     console.log(product)
     return (
         <Container>
@@ -187,7 +211,7 @@ export default function ProductSinglePage() {
             </ProductTitleContainer>
             <ProductTop>
                 <ProductTopLeft>
-                    <Charts data={productsData} title="Product Movements" secondLine="Sales" firstLine="Returns" />
+                    <Charts data={productChartInfo} title="Product Movements" secondLine="Sales" firstLine="Returns" />
                 </ProductTopLeft>
                 <ProductTopRight>
                     <ProductInfoTop>

server/controllers/authenticationController.js

@@ -42,7 +42,7 @@ export const singin = async (req, res, next) => {
         // intialize user token throw user _id and user isAdmin and send jwt...
         const accessToken = jwt.sign({
             id: user._id,
-            isAdmin: user.isAdmin
+            isAdmin: user.isAdmin,
         }, process.env.JWT_SEC,
             { expiresIn: '1d' }
         );

server/controllers/orderController.js

@@ -56,6 +56,8 @@ export const getAllOrders = async (req, res, next) => {
 
 // Get Monthly Revenues...
 export const getMonthlyRevenues = async (req, res, next) => {
+    // query for productId in product single page...
+    const productId = req.query.pid;
     // current date...
     const date = new Date()
     // last month from current date...
@@ -65,7 +67,7 @@ export const getMonthlyRevenues = async (req, res, next) => {
 
     try {
         const revenues = await Order.aggregate([
-            { $match: { createdAt: { $gte: previousTwoMonth } } },
+            { $match: { createdAt: { $gte: previousTwoMonth }, ...(productId && {products:{$elemMatch: {productId}}}), }, },
             {
                 $project: {
                     month: { $month: "$createdAt" },

server/index.js

@@ -31,7 +31,6 @@ const Connection = ()=>{
 // midlewares...
 app.use(cors());
 app.use(express.json());  // allowing receiving json data...
-app.use(cookieParser()); // using cookie parser...
 // using cookie parser...
 app.use(cookieParser())
 // api routes...

server/verifyToken.js

@@ -13,8 +13,8 @@ export const verifyToken = async (req, res, next) => {
         })
 }
 
-export const verifyTokenAndAuthorization = (req, res, next) => {
-    verifyToken(req, res, () => {
+export const verifyTokenAndAuthorization = async (req, res, next) => {
+    await verifyToken(req, res, () => {
         if (req.user.id === req.params.id || req.user.isAdmin){
             next()
         } else {
@@ -23,9 +23,9 @@ export const verifyTokenAndAuthorization = (req, res, next) => {
     })
 }
 
-export const verifyTokenAndAdmin = (req, res, next) => {
-    verifyToken(req, res, () => {
-        if (req.user.isAdmin) {
+export const verifyTokenAndAdmin = async (req, res, next) => {
+   await verifyToken(req, res, async () => {
+         if ( await req.user?.isAdmin) {
             next()
         } else {
             res.status(403).json("You don't have AUTHORIZATION for such action")