fix: Product Details State

frontend/src/Components/Body.jsx

@@ -2,14 +2,13 @@ import React, { useEffect } from 'react'
 import { useDispatch, useSelector } from "react-redux";
 import { Container } from 'react-bootstrap'
 import ProductView from './Products'
-import getProducts from '../actions/productListAction'
-import { LinkContainer } from 'react-router-bootstrap';
+import { productListAction } from '../actions/productActions'
 
 const Body = () => {
     const dispatch = useDispatch();
 
     useEffect(() => {
-        dispatch(getProducts())
+        dispatch(productListAction())
     }, [dispatch])
 
     const productList = useSelector(state => state.productList)
@@ -19,6 +18,7 @@ const Body = () => {
     return (
         <div style={{ minHeight: "80vh" }}>
             {(function () {
+
                 if (loading) {
                     return <h1> Loading...</h1 >
                 } else if (error) {

frontend/src/Screens/ProductDetail.jsx

@@ -2,80 +2,73 @@ import React, { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { Image, Row, Col, Container, Button } from 'react-bootstrap'
 import Rating from '../Components/Rating'
-import { Link } from 'react-router-dom'
-import { productDetailsActions } from "../actions/productDetailsActions";
-import axios from 'axios'
-import { useParams } from 'react-router-dom'
+import { Link, useParams } from 'react-router-dom'
+import { productDetailsActions } from "../actions/productActions";
 
 const ProductDetail = () => {
   const params = useParams();
-  // const dispatch = useDispatch()
-  // useEffect(() => {
-  //   dispatch(productDetailsActions(match.params.id));
-  // }, [dispatch])
+  const id = params.id;
+  const dispatch = useDispatch()
 
-  // const productDetails = useSelector(state => state.productDetails)
-  // const { loading, productDetail, error } = productDetails
-  // const product = productDetail;
-
-  const [product, setProduct] = useState({})
   useEffect(() => {
-    const getProduct = async () => {
-      const { data } = await axios.get(`/api/products/${params.id}`)
-      setProduct(data)
-    }
-    getProduct()
-  }, [params.id])
+    dispatch(productDetailsActions(id));
+  }, [dispatch, id])
+
+  const productDetails = useSelector(state => state.productDetails)
+  const { loading, product, error } = productDetails
 
-  let loading = false;
   return (
     <div>
       {
-        loading ? <h1>loading...</h1> : (
-          <Container fluid="md" style={{ height: "80vh" }} className="pt-2">
-            <Link to='/' className=' offset-md-11 px-4 py-2 btn btn-outline-dark' variant="outline-dark">Back</Link>
-            <Row>
-              <Col className="col-lg-6 col-md-12">
-                <Image src={product.image} alt={product.name} />
-              </Col>
-              <Col>
-                <Row>
-                  <h1>{product.name}</h1>
-                </Row>
-                <Row className="mt-2">
-                  <h5 style={{ fontSize: '15px' }}>
-                    {product.brand} - {product.category}
-                  </h5>
-                </Row>
-                <Row className="mt-2">
-                  <h4 style={{ fontFamily: 'monospace', fontWeight: 'bold' }}>
-                    Price: {product.price}
-                  </h4>
-                </Row>
+        function () {
+          if (loading) return <h1>loading...</h1>
+          else if (error) return <h1>{error}</h1>
+          else return (
+            <Container fluid="md" style={{ height: "80vh" }} className="pt-2">
+              <Link to='/' className=' offset-md-11 px-4 py-2 btn btn-outline-dark' variant="outline-dark">Back</Link>
+              <Row>
+                <Col className="col-lg-6 col-md-12">
+                  <Image src={product.image} alt={product.name} />
+                </Col>
+                <Col>
+                  <Row>
+                    <h1>{product.name}</h1>
+                  </Row>
+                  <Row className="mt-2">
+                    <h5 style={{ fontSize: '15px' }}>
+                      {product.brand} - {product.category}
+                    </h5>
+                  </Row>
+                  <Row className="mt-2">
+                    <h4 style={{ fontFamily: 'monospace', fontWeight: 'bold' }}>
+                      Price: {product.price}
+                    </h4>
+                  </Row>
 
-                <Row className="mt-1">
-                  <Rating value={product.rating} reviewCount={product.numReview} />
-                </Row>
+                  <Row className="mt-1">
+                    <Rating value={product.rating} reviewCount={product.numReview} />
+                  </Row>
 
-                <Row className="mt-5">
+                  <Row className="mt-5">
 
-                  <Col>
-                    <Button variant="outline-danger" size="lg" block="true" disabled={product.count === 0} >
-                      <strong>Add to Cart</strong>
-                    </Button>
-                  </Col>
-                </Row>
+                    <Col>
+                      <Button variant="outline-danger" size="lg" block="true" disabled={product.count === 0} >
+                        <strong>Add to Cart</strong>
+                      </Button>
+                    </Col>
+                  </Row>
 
-                <Row className="mt-5">
-                  <div className=" pr-4 ">
-                    <h4>Details: <br /></h4>
-                    {product.details}
-                  </div>
-                </Row>
-              </Col>
-            </Row>
-          </Container>
-        )
+                  <Row className="mt-5">
+                    <div className=" pr-4 ">
+                      <h4>Details: <br /></h4>
+                      {product.details}
+                    </div>
+                  </Row>
+                </Col>
+              </Row>
+            </Container>
+          )
+        }()
       }
     </div>
   )

frontend/src/actions/productActions.js

@@ -0,0 +1,40 @@
+import {
+    PRODUCT_LIST_LOADING,
+    PRODUCT_LIST_SUCCESS,
+    PRODUCT_LIST_FAILED,
+
+    PRODUCT_DETAILS_LOADING,
+    PRODUCT_DETAILS_SUCCESS,
+    PRODUCT_DETAILS_FAILED
+} from '../constants/productConsts'
+import axios from 'axios'
+
+// Product List
+export const productListAction = () => async (dispatch) => {
+    try {
+        dispatch({
+            type: PRODUCT_LIST_LOADING,
+        })
+        const { data } = await axios.get('/api/products')
+        dispatch({
+            type: PRODUCT_LIST_SUCCESS,
+            payload: data
+        })
+    } catch (error) {
+        dispatch({
+            type: PRODUCT_LIST_FAILED,
+            payload: error.response && error.response.data.message ? error.response.data.message : error.response
+        })
+    }
+}
+
+// Product Details
+export const productDetailsActions = (id) => async (dispatch) => {
+    try {
+        dispatch({ type: PRODUCT_DETAILS_LOADING })
+        const { data } = await axios.get(`/api/products/${id}`)
+        dispatch({ type: PRODUCT_DETAILS_SUCCESS, payload: data })
+    } catch (error) {
+        dispatch({ type: PRODUCT_DETAILS_FAILED, payload: error.response && error.response.data.message ? error.response.data.message : error.response })
+    }
+}

frontend/src/constants/productConsts.js

@@ -0,0 +1,11 @@
+// PRODUCT LIST CONSTANTS
+
+export const PRODUCT_LIST_LOADING = "PRODUCT_LIST_LOADING"
+export const PRODUCT_LIST_SUCCESS = "PRODUCT_LIST_SUCCESS"
+export const PRODUCT_LIST_FAILED = "PRODUCT_LIST_FAILED"
+
+// PRODUCT DETAILS CONSTANTS
+
+export const PRODUCT_DETAILS_LOADING = "PRODUCT_DETAILS_LOADING"
+export const PRODUCT_DETAILS_SUCCESS = "PRODUCT_DETAILS_SUCCESS"
+export const PRODUCT_DETAILS_FAILED = "PRODUCT_DETAILS_FAILED"

frontend/src/reducer/productReducers.js

@@ -0,0 +1,51 @@
+import {
+    PRODUCT_LIST_LOADING,
+    PRODUCT_LIST_SUCCESS,
+    PRODUCT_LIST_FAILED,
+
+    PRODUCT_DETAILS_LOADING,
+    PRODUCT_DETAILS_SUCCESS,
+    PRODUCT_DETAILS_FAILED
+} from '../constants/productConsts'
+
+// Product List Reducer
+export function productListReducer(state = { products: [] }, action) {
+    switch (action.type) {
+        case PRODUCT_LIST_LOADING:
+            return {
+                loading: true,
+                products: []
+            }
+        case PRODUCT_LIST_SUCCESS:
+            return {
+                loading: false,
+                products: action.payload,
+            }
+        case PRODUCT_LIST_FAILED:
+            return {
+                loading: false,
+                error: action.payload
+            }
+        default:
+            return state;
+    }
+}
+
+// Product Details Reducer
+export const productDetailsReducer = (state = { product: { reviews: [] } }, action) => {
+    switch (action.type) {
+        case PRODUCT_DETAILS_LOADING: return {
+            loading: true,
+        }
+        case PRODUCT_DETAILS_SUCCESS: return {
+            loading: false,
+            product: action.payload
+        }
+
+        case PRODUCT_DETAILS_FAILED: return {
+            loading: false,
+            error: action.payload
+        }
+        default: return state;
+    }
+}

frontend/src/store.js

@@ -1,12 +1,12 @@
 import { createStore, applyMiddleware, combineReducers } from 'redux'
 import thunk from 'redux-thunk'
 import { composeWithDevTools } from 'redux-devtools-extension'
-import productListReducer from './reducer/productListReducer'
-import { productDetailsReducer } from './reducer/productDetailsReducer.'
+import { productListReducer, productDetailsReducer } from './reducer/productReducers'
+
 const initialState = {}
 const reducers = combineReducers({
     productList: productListReducer,
-    productDetails: productDetailsReducer
+    productDetails: productDetailsReducer,
 })
 const middlewear = [thunk]