Api integration shop

components/cartlist-card/index.js

@@ -63,7 +63,7 @@ export const CartCard = (props) => {
         .card-item {
           width: 100%;
         }
-        .card-bold{
+        .card-bold {
           font-weight: bold;
         }
         .cartcard-container > img {
@@ -114,12 +114,12 @@ export const CartCard = (props) => {
           .cartcard-container {
             flex-direction: column;
           }
-          .cartcard-button{
+          .cartcard-button {
             display: flex;
             flex-direction: row;
             justify-content: space-evenly;
           }
-          .cartcard-fnbutton{
+          .cartcard-fnbutton {
             display: flex;
             flex-direction: row;
             justify-content: space-evenly;

constants/index.js

@@ -0,0 +1,3 @@
+export const SHOP_PRODUCTS_ENDPOINT = 'http://localhost:5000/crypto/products';
+export const SOP_PRODUCT_BY_ID_ENDPOINT =
+  'http://localhost:5000/crypto/products';

mock/products.json

@@ -1,38 +1,38 @@
-{
-  "Shoe": {
-    "id": "Shoe",
-    "image": "shoes.jpeg",
-    "name": "Shoe",
-    "usage": [
-      "Can be used if you are pissed of at someone",
-      "Can also be used to promote healthy activites"
-    ],
-    "category": "Footwear",
-    "manufacturer": "Ankush",
-    "price": 200
-  },
-  "Flower": {
-    "id": "Flower",
-    "image": "flowers.jpeg",
-    "name": "Flower",
-    "usage": [
-      "Can be used as token of appreciation",
-      "Can be a good subsitute for gift"
-    ],
-    "category": "Gift",
-    "manufacturer": "Ankush",
-    "price": 300
-  },
-  "Coffee": {
-    "id": "Coffee",
-    "image": "coffee.jpeg",
-    "name": "Coffee",
-    "usage": [
-      "Can serve as ice-breaker",
-      "Can be used as token of appreciation"
-    ],
-    "category": "Drink",
-    "manufacturer": "Ankush",
-    "price": 500
-  }
-}
+[
+    {
+        "id": "Shoe",
+        "image": "shoes.jpeg",
+        "name": "Shoe",
+        "usage": [
+            "Can be used if you are pissed of at someone",
+            "Can also be used to promote healthy activites"
+        ],
+        "category": "Footwear",
+        "manufacturer": "Ankush",
+        "price": 200
+    },
+    {
+        "id": "Flower",
+        "image": "flowers.jpeg",
+        "name": "Flower",
+        "usage": [
+            "Can be used as token of appreciation",
+            "Can be a good subsitute for gift"
+        ],
+        "category": "Gift",
+        "manufacturer": "Ankush",
+        "price": 300
+    },
+    {
+        "id": "Coffee",
+        "image": "coffee.jpeg",
+        "name": "Coffee",
+        "usage": [
+            "Can serve as ice-breaker",
+            "Can be used as token of appreciation"
+        ],
+        "category": "Drink",
+        "manufacturer": "Ankush",
+        "price": 500
+    }
+]

package.json

@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "@babel/plugin-transform-react-jsx": "^7.12.11",
+    "axios": "^0.21.1",
     "chart.js": "2.9.4",
     "eslint-plugin-jest": "^24.1.3",
     "framer-motion": "^2.9.4",

pages/index.js

@@ -36,7 +36,7 @@ export default function Home() {
         <div className={styles.transactionMenu}>
           <div className={`${styles.card} ${styles.content}`}>
             <div className={`${styles.heading}`}>
-            <p> Latest Transactions</p>
+              <p> Latest Transactions</p>
             </div>
             <TransactionList transactions={transactionData} />
           </div>

pages/shop/[product].js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import productData from '../../mock/products.json';
+import { getProductById } from '../../utils';
 import { ProductDetails } from '../../components/product-details';
 const CACHE_MAX_AGE = 43200;
 const ProductDetail = ({ productJSON }) => {
@@ -12,7 +12,7 @@ export async function getServerSideProps(context) {
     params: { product },
   } = context;
 
-  const productJSON = productData[product];
+  const productJSON = await getProductById(product);
 
   return { props: { productJSON } };
 }

pages/shop/index.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import Link from 'next/link';
 import { ShopCard } from '../../components/shoplist-card';
@@ -10,10 +11,10 @@ import {
 } from '../../redux/action';
 // import Header from '../../components/header';
 import { Footer } from '../../components/footer';
-import productData from '../../mock/products.json';
+import { getShopProducts } from '../../utils';
 
-const products = Object.keys(productData);
 const Shop = (props) => {
+  const { products } = props;
   const { addCartItem, addShopListItem } = props;
   const { delCartItem, delShopListItem } = props;
   return (
@@ -26,15 +27,16 @@ const Shop = (props) => {
           </button>
         </div>
         <div className="shoppinglist-container">
-          {products.map((itemName) => {
+          {products.map((product) => {
+            const { id } = product;
             return (
               <ShopCard
-                key={itemName}
-                product={productData[itemName]}
-                quantity={props.shopListItemsCount[itemName] || 0}
+                key={id}
+                product={product}
+                quantity={props.shopListItemsCount[id] || 0}
                 add={{ addCartItem, addShopListItem }}
                 del={{ delCartItem, delShopListItem }}
-                link={{ href: '/shop/[product]', as: `/shop/${itemName}` }}
+                link={{ href: '/shop/[product]', as: `/shop/${id}` }}
               />
             );
           })}
@@ -67,11 +69,30 @@ const Shop = (props) => {
   );
 };
 
+export async function getServerSideProps() {
+  //   context.res.setHeader('Cache-Control', `max-age=${CACHE_MAX_AGE}`);
+
+  const products = await getShopProducts();
+  // console.log(products);
+  return { props: { products } };
+}
+
 const mapStateToProps = (state) => {
   const shopListItemsCount = getShopListCount(state);
   return { shopListItemsCount };
 };
 
+Shop.propTypes = {
+  products: PropTypes.arrayOf(PropTypes.object),
+  addCartItem: PropTypes.func,
+  addShopListItem: PropTypes.func,
+  delCartItem: PropTypes.func,
+  delShopListItem: PropTypes.func,
+};
+Shop.defaultProps = {
+  products: [],
+};
+
 export default connect(mapStateToProps, {
   addCartItem,
   delCartItem,

utils/get_product_by_id/index.js

@@ -0,0 +1,15 @@
+import axios from 'axios';
+import { SOP_PRODUCT_BY_ID_ENDPOINT } from '../../constants';
+
+export const get_product_by_id = async (id) => {
+  try {
+    const {
+      data: { Products },
+    } = await axios.get(`${SOP_PRODUCT_BY_ID_ENDPOINT}/${id}`);
+    // console.log(data);
+    return Products;
+  } catch (error) {
+    console.log(error.message);
+    return {};
+  }
+};

utils/get_shop_products/index.js

@@ -0,0 +1,16 @@
+import axios from 'axios';
+
+import { SHOP_PRODUCTS_ENDPOINT } from '../../constants';
+
+export const get_shop_products = async () => {
+  try {
+    const {
+      data: { Products },
+    } = await axios.get(SHOP_PRODUCTS_ENDPOINT);
+    // console.log(Products);
+    return Products;
+  } catch (error) {
+    console.log(error.message);
+    return [];
+  }
+};

utils/index.js

@@ -0,0 +1,2 @@
+export { get_shop_products as getShopProducts } from './get_shop_products';
+export { get_product_by_id as getProductById } from './get_product_by_id';