diff --git a/components/cartlist-card/index.js b/components/cartlist-card/index.js
index 59bc297..51a3cee 100644
--- a/components/cartlist-card/index.js
+++ b/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;
diff --git a/constants/index.js b/constants/index.js
new file mode 100644
index 0000000..453df3d
--- /dev/null
+++ b/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';
diff --git a/mock/products.json b/mock/products.json
index 9830ae0..7e07029 100644
--- a/mock/products.json
+++ b/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
+ }
+]
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index f236492..d322ea6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5972,6 +5972,14 @@
"integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
"dev": true
},
+ "axios": {
+ "version": "0.21.1",
+ "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
+ "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
+ "requires": {
+ "follow-redirects": "^1.10.0"
+ }
+ },
"babel-code-frame": {
"version": "6.26.0",
"resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
@@ -10492,6 +10500,11 @@
"readable-stream": "^2.3.6"
}
},
+ "follow-redirects": {
+ "version": "1.13.1",
+ "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.1.tgz",
+ "integrity": "sha512-SSG5xmZh1mkPGyKzjZP8zLjltIfpW32Y5QpdNJyjcfGxK3qo3NDDkZOZSFiGn1A6SclQxY9GzEwAHQ3dmYRWpg=="
+ },
"for-in": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
diff --git a/package.json b/package.json
index 91382b4..ca021dd 100644
--- a/package.json
+++ b/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",
diff --git a/pages/index.js b/pages/index.js
index cc1ba44..e247f21 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -36,7 +36,7 @@ export default function Home() {
-
Latest Transactions
+
Latest Transactions
diff --git a/pages/shop/[product].js b/pages/shop/[product].js
index 1df4692..6f38b2a 100644
--- a/pages/shop/[product].js
+++ b/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 } };
}
diff --git a/pages/shop/index.js b/pages/shop/index.js
index f4e1dab..4984169 100644
--- a/pages/shop/index.js
+++ b/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) => {
- {products.map((itemName) => {
+ {products.map((product) => {
+ const { id } = product;
return (
);
})}
@@ -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,
diff --git a/utils/get_product_by_id/index.js b/utils/get_product_by_id/index.js
new file mode 100644
index 0000000..bea50fe
--- /dev/null
+++ b/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 {};
+ }
+};
diff --git a/utils/get_shop_products/index.js b/utils/get_shop_products/index.js
new file mode 100644
index 0000000..67a317f
--- /dev/null
+++ b/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 [];
+ }
+};
diff --git a/utils/index.js b/utils/index.js
new file mode 100644
index 0000000..f5eb3a1
--- /dev/null
+++ b/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';