Update product item page

Author: tduyng

server/db/db.json

@@ -27,49 +27,49 @@
   "products": [{
       "id": "iphone-8-plus",
       "name": "Iphone 8 Plus",
-      "image_url": "./images/iphone-8-plus.jpg",
+      "image_url": "/images/iphone-8-plus.jpg",
       "brand": "APPLE"
     },
     {
       "id": "iphone-11-pro-max",
       "name": "Iphone 11 Pro Max",
-      "image_url": "./images/iphone-11-pro-max.jpg",
+      "image_url": "/images/iphone-11-pro-max.jpg",
       "brand": "APPLE"
     },
     {
       "id": "iphone-11-pro",
       "name": "Iphone 11 Pro",
-      "image_url": "./images/iphone-11-pro.jpg",
+      "image_url": "/images/iphone-11-pro.jpg",
       "brand": "APPLE"
     },
     {
       "id": "iphone-11",
       "name": "Iphone 11",
-      "image_url": "./images/iphone-11.jpg",
+      "image_url": "/images/iphone-11.jpg",
       "brand": "APPLE"
     },
     {
       "id": "iphone-se",
       "name": "Iphone SE",
-      "image_url": "./images/iphone-se.jpg",
+      "image_url": "/images/iphone-se.jpg",
       "brand": "APPLE"
     },
     {
       "id": "iphone-x",
       "name": "Iphone X",
-      "image_url": "./images/iphone-x.jpg",
+      "image_url": "/images/iphone-x.jpg",
       "brand": "APPLE"
     },
     {
       "id": "iphone-xr",
       "name": "Iphone XR",
-      "image_url": "./images/iphone-xr.jpg",
+      "image_url": "/images/iphone-xr.jpg",
       "brand": "APPLE"
     },
     {
       "id": "iphone-xs-max",
       "name": "Iphone XS Max",
-      "image_url": "./images/iphone-xs-max.jpg",
+      "image_url": "/images/iphone-xs-max.jpg",
       "brand": "APPLE"
     }
   ]

src/components/Error/404.tsx

@@ -11,8 +11,8 @@ export const NotFound = () => {
   return (
     <div className="static-pages-section">
       <div className="container">
-        <div className="block-title">
-          <h2>
+        <div className="block-title" style={{ color: '#fa8c16' }}>
+          <h2 style={{ color: '#fa8c16' }}>
             <ExclamationOutlined />
             Page Not Found
           </h2>

src/components/Products/Product.thunks.ts

@@ -19,7 +19,6 @@ export const getProducts = () => async dispatch => {
 
 export const getProduct = id => async dispatch => {
   try {
-    console.log('Get Product triggered');
     const res = await axios.get(`${URL.baseAPIUrl}/api/products/${id}`);
     const product = res.data as Product;
     dispatch(actions.getProductSuccess(product));

src/components/Products/ProductItem.tsx

@@ -2,7 +2,9 @@ import React, { useEffect } from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 import { getProduct } from './Product.thunks';
 import { useParams } from 'react-router-dom';
-import { Row, Col, Image } from 'antd';
+import { Row, Col, Image, Button } from 'antd';
+import { NotFound } from 'src/components/Error/404';
+import { useHistory } from 'react-router-dom';
 
 const mapStateToProps = (state: AppState) => ({
   product: state.products.product,
@@ -18,23 +20,51 @@ interface Props extends ConnectedProps<typeof connector> {}
 
 export const _ProductItem = (props: Props) => {
   const { product, getProduct } = props;
+  const history = useHistory();
+  const goBack = () => {
+    history.goBack();
+  };
+
+  let productComponent = (item: Product) => {
+    if (item) {
+      return (
+        <div className="product-item-section mt-2">
+          <div className="container">
+            <Row>
+              <Col span={12}>
+                <Image src={item.image_url} />
+              </Col>
+              <Col span={12}>
+                <p>
+                  Name:{' '}
+                  <strong style={{ fontSize: '1.4rem' }}> {item.name}</strong>
+                </p>
+                <p>
+                  Brand: <strong>{item.brand}</strong>
+                </p>
+              </Col>
+            </Row>
+            <Row className="mt-2">
+              <Col offset={12}>
+                <Button type="primary" onClick={goBack}>
+                  Go Back
+                </Button>
+              </Col>
+            </Row>
+          </div>
+        </div>
+      );
+    } else {
+      return <NotFound />;
+    }
+  };
+
   const params: Params = useParams();
   useEffect(() => {
     const { id } = params;
     getProduct(id);
   }, [params, getProduct]);
-  return (
-    <div className="container">
-      <Row>
-        <Col span={12}>
-          <Image src={product.image_url} />
-        </Col>
-        <Col span={8} offset={4}>
-          <h2>Name: {product.name}</h2>
-          <p>Brand: {product.brand}</p>
-        </Col>
-      </Row>
-    </div>
-  );
+
+  return productComponent(product);
 };
 export const ProductItem = connector(_ProductItem);

src/pages/ErrorPages/404Pages.tsx

@@ -10,4 +10,5 @@ const _NotFoundPage = () => {
   );
 };
 const NotFoundPage = React.memo(_NotFoundPage);
+export { NotFoundPage };
 export default NotFoundPage;