From 870a28756a26eab63b8382d69346abde9264bcc6 Mon Sep 17 00:00:00 2001 From: Akashdeep-Patra Date: Tue, 12 Jan 2021 06:15:46 +0000 Subject: [PATCH 1/3] utlis and constants added --- constants/index.js | 1 + mock/products.json | 76 ++++++++++++++++---------------- package-lock.json | 13 ++++++ package.json | 1 + pages/shop/[product].js | 4 +- pages/shop/index.js | 14 +++--- utils/get_product_by_id/index.js | 12 +++++ utils/get_shop_products/index.js | 12 +++++ utils/index.js | 2 + 9 files changed, 88 insertions(+), 47 deletions(-) create mode 100644 constants/index.js create mode 100644 utils/get_product_by_id/index.js create mode 100644 utils/get_shop_products/index.js create mode 100644 utils/index.js diff --git a/constants/index.js b/constants/index.js new file mode 100644 index 0000000..809be1b --- /dev/null +++ b/constants/index.js @@ -0,0 +1 @@ +export const SHOP_PRODUCTS_ENDPOINT = '/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/shop/[product].js b/pages/shop/[product].js index 1df4692..3757cf3 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 products from '../../mock/products.json'; 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 = products.find((object) => object.id == product); return { props: { productJSON } }; } diff --git a/pages/shop/index.js b/pages/shop/index.js index f4e1dab..0102347 100644 --- a/pages/shop/index.js +++ b/pages/shop/index.js @@ -10,9 +10,8 @@ import { } from '../../redux/action'; // import Header from '../../components/header'; import { Footer } from '../../components/footer'; -import productData from '../../mock/products.json'; +import products from '../../mock/products.json'; -const products = Object.keys(productData); const Shop = (props) => { const { addCartItem, addShopListItem } = props; const { delCartItem, delShopListItem } = props; @@ -26,15 +25,16 @@ const Shop = (props) => {
- {products.map((itemName) => { + {products.map((product) => { + const { id } = product; return ( ); })} diff --git a/utils/get_product_by_id/index.js b/utils/get_product_by_id/index.js new file mode 100644 index 0000000..cf607ed --- /dev/null +++ b/utils/get_product_by_id/index.js @@ -0,0 +1,12 @@ +import axios from 'axios'; +import { SHOP_PRODUCTS_ENDPOINT } from '../../constants'; + +export const get_product_by_id = async (id) => { + try { + const { Product } = axios.get(`${SHOP_PRODUCTS_ENDPOINT}/${id}`); + return Product; + } 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..9bf50e4 --- /dev/null +++ b/utils/get_shop_products/index.js @@ -0,0 +1,12 @@ +import axios from 'axios'; +import { SHOP_PRODUCTS_ENDPOINT } from '../../constants'; + +export const get_shop_products = async () => { + try { + const { Products } = await axios.get(SHOP_PRODUCTS_ENDPOINT); + 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..8a80f77 --- /dev/null +++ b/utils/index.js @@ -0,0 +1,2 @@ +export { get_shop_products as getShopProduct } from './get_shop_products'; +export { get_product_by_id as getProductById } from './get_product_by_id'; From 00ae3eb6f8c24a7e863e361c422053edea9bd9d6 Mon Sep 17 00:00:00 2001 From: Akashdeep-Patra Date: Tue, 12 Jan 2021 07:12:34 +0000 Subject: [PATCH 2/3] end points added --- constants/index.js | 3 +- pages/shop/[product].js | 20 +++--- pages/shop/index.js | 110 +++++++++++++++++++------------ utils/get_product_by_id/index.js | 16 ++--- utils/index.js | 2 +- 5 files changed, 89 insertions(+), 62 deletions(-) diff --git a/constants/index.js b/constants/index.js index 809be1b..ced0a2e 100644 --- a/constants/index.js +++ b/constants/index.js @@ -1 +1,2 @@ -export const SHOP_PRODUCTS_ENDPOINT = '/CRYPTO/PRODUCTS'; +export const SHOP_PRODUCTS_ENDPOINT = 'https://realdevsquad.com/crypto/products'; +export const SOP_PRODUCT_BY_ID_ENDPOINT = 'https://realdevsquad.com/crypto/product' \ No newline at end of file diff --git a/pages/shop/[product].js b/pages/shop/[product].js index 3757cf3..63eab3e 100644 --- a/pages/shop/[product].js +++ b/pages/shop/[product].js @@ -1,28 +1,28 @@ import PropTypes from 'prop-types'; -import products from '../../mock/products.json'; +import { getProductById } from '../../utils' import { ProductDetails } from '../../components/product-details'; const CACHE_MAX_AGE = 43200; const ProductDetail = ({ productJSON }) => { - return ; + return ; }; export async function getServerSideProps(context) { - context.res.setHeader('Cache-Control', `max-age=${CACHE_MAX_AGE}`); - const { - params: { product }, - } = context; + context.res.setHeader('Cache-Control', `max-age=${CACHE_MAX_AGE}`); + const { + params: { product }, + } = context; - const productJSON = products.find((object) => object.id == product); + const productJSON = await getProductById(product) - return { props: { productJSON } }; + return { props: { productJSON } }; } export default ProductDetail; ProductDetail.propTypes = { - productJSON: PropTypes.object, + productJSON: PropTypes.object, }; ProductDetail.defaultProps = { - productJSON: {}, + productJSON: {}, }; diff --git a/pages/shop/index.js b/pages/shop/index.js index 0102347..8bbe382 100644 --- a/pages/shop/index.js +++ b/pages/shop/index.js @@ -1,47 +1,50 @@ +import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import Link from 'next/link'; import { ShopCard } from '../../components/shoplist-card'; import { getShopListCount } from '../../redux/selector'; import { - addCartItem, - delCartItem, - addShopListItem, - delShopListItem, + addCartItem, + delCartItem, + addShopListItem, + delShopListItem, } from '../../redux/action'; // import Header from '../../components/header'; import { Footer } from '../../components/footer'; -import products from '../../mock/products.json'; +import { getShopProducts } from '../../utils' + const Shop = (props) => { - const { addCartItem, addShopListItem } = props; - const { delCartItem, delShopListItem } = props; - return ( -
-
- {/*
*/} -
- -
-
- {products.map((product) => { - const { id } = product; - return ( - - ); - })} -
-
-
- -
- ); +
+ ); }; + + +export async function getServerSideProps() { + // context.res.setHeader('Cache-Control', `max-age=${CACHE_MAX_AGE}`); + + + const products = await getShopProducts() + + return { props: { ...props, products } }; +} + const mapStateToProps = (state) => { - const shopListItemsCount = getShopListCount(state); - return { shopListItemsCount }; + const shopListItemsCount = getShopListCount(state); + return { shopListItemsCount }; }; + +Shop.prototypes = { + 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, - addShopListItem, - delShopListItem, + addCartItem, + delCartItem, + addShopListItem, + delShopListItem, })(Shop); diff --git a/utils/get_product_by_id/index.js b/utils/get_product_by_id/index.js index cf607ed..62d7799 100644 --- a/utils/get_product_by_id/index.js +++ b/utils/get_product_by_id/index.js @@ -1,12 +1,12 @@ import axios from 'axios'; -import { SHOP_PRODUCTS_ENDPOINT } from '../../constants'; +import { SOP_PRODUCT_BY_ID_ENDPOINT } from '../../constants'; export const get_product_by_id = async (id) => { - try { - const { Product } = axios.get(`${SHOP_PRODUCTS_ENDPOINT}/${id}`); - return Product; - } catch (error) { - console.log(error.message); - return {}; - } + try { + const { Products } = axios.get(`${SOP_PRODUCT_BY_ID_ENDPOINT}/${id}`); + return Products; + } catch (error) { + console.log(error.message); + return {}; + } }; diff --git a/utils/index.js b/utils/index.js index 8a80f77..f5eb3a1 100644 --- a/utils/index.js +++ b/utils/index.js @@ -1,2 +1,2 @@ -export { get_shop_products as getShopProduct } from './get_shop_products'; +export { get_shop_products as getShopProducts } from './get_shop_products'; export { get_product_by_id as getProductById } from './get_product_by_id'; From 095055e62afe979cbdb3e0980e16873726e0cfbd Mon Sep 17 00:00:00 2001 From: Akashdeep-Patra Date: Sat, 16 Jan 2021 19:15:43 +0530 Subject: [PATCH 3/3] ssr with serverside props added --- components/cartlist-card/index.js | 6 +- constants/index.js | 5 +- pages/index.js | 2 +- pages/shop/[product].js | 20 ++--- pages/shop/index.js | 117 ++++++++++++++---------------- utils/get_product_by_id/index.js | 17 +++-- utils/get_shop_products/index.js | 6 +- 7 files changed, 88 insertions(+), 85 deletions(-) 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 index ced0a2e..453df3d 100644 --- a/constants/index.js +++ b/constants/index.js @@ -1,2 +1,3 @@ -export const SHOP_PRODUCTS_ENDPOINT = 'https://realdevsquad.com/crypto/products'; -export const SOP_PRODUCT_BY_ID_ENDPOINT = 'https://realdevsquad.com/crypto/product' \ No newline at end of file +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/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 63eab3e..6f38b2a 100644 --- a/pages/shop/[product].js +++ b/pages/shop/[product].js @@ -1,28 +1,28 @@ import PropTypes from 'prop-types'; -import { getProductById } from '../../utils' +import { getProductById } from '../../utils'; import { ProductDetails } from '../../components/product-details'; const CACHE_MAX_AGE = 43200; const ProductDetail = ({ productJSON }) => { - return ; + return ; }; export async function getServerSideProps(context) { - context.res.setHeader('Cache-Control', `max-age=${CACHE_MAX_AGE}`); - const { - params: { product }, - } = context; + context.res.setHeader('Cache-Control', `max-age=${CACHE_MAX_AGE}`); + const { + params: { product }, + } = context; - const productJSON = await getProductById(product) + const productJSON = await getProductById(product); - return { props: { productJSON } }; + return { props: { productJSON } }; } export default ProductDetail; ProductDetail.propTypes = { - productJSON: PropTypes.object, + productJSON: PropTypes.object, }; ProductDetail.defaultProps = { - productJSON: {}, + productJSON: {}, }; diff --git a/pages/shop/index.js b/pages/shop/index.js index 8bbe382..4984169 100644 --- a/pages/shop/index.js +++ b/pages/shop/index.js @@ -4,47 +4,46 @@ import Link from 'next/link'; import { ShopCard } from '../../components/shoplist-card'; import { getShopListCount } from '../../redux/selector'; import { - addCartItem, - delCartItem, - addShopListItem, - delShopListItem, + addCartItem, + delCartItem, + addShopListItem, + delShopListItem, } from '../../redux/action'; // import Header from '../../components/header'; import { Footer } from '../../components/footer'; -import { getShopProducts } from '../../utils' - +import { getShopProducts } from '../../utils'; const Shop = (props) => { - const { products } = props - const { addCartItem, addShopListItem } = props; - const { delCartItem, delShopListItem } = props; - return ( -
-
- {/*
*/} -
- -
-
- {products.map((product) => { - const { id } = product; - return ( - - ); - })} -
-
-
- ); +
+ ); }; - - export async function getServerSideProps() { - // context.res.setHeader('Cache-Control', `max-age=${CACHE_MAX_AGE}`); - + // context.res.setHeader('Cache-Control', `max-age=${CACHE_MAX_AGE}`); - const products = await getShopProducts() - - return { props: { ...props, products } }; + const products = await getShopProducts(); + // console.log(products); + return { props: { products } }; } const mapStateToProps = (state) => { - const shopListItemsCount = getShopListCount(state); - return { shopListItemsCount }; + const shopListItemsCount = getShopListCount(state); + return { shopListItemsCount }; }; - -Shop.prototypes = { - products: PropTypes.arrayOf(PropTypes.object), - addCartItem: PropTypes.func, - addShopListItem: PropTypes.func, - delCartItem: PropTypes.func, - delShopListItem: PropTypes.func -} +Shop.propTypes = { + products: PropTypes.arrayOf(PropTypes.object), + addCartItem: PropTypes.func, + addShopListItem: PropTypes.func, + delCartItem: PropTypes.func, + delShopListItem: PropTypes.func, +}; Shop.defaultProps = { - products: [] -} + products: [], +}; export default connect(mapStateToProps, { - addCartItem, - delCartItem, - addShopListItem, - delShopListItem, + addCartItem, + delCartItem, + addShopListItem, + delShopListItem, })(Shop); diff --git a/utils/get_product_by_id/index.js b/utils/get_product_by_id/index.js index 62d7799..bea50fe 100644 --- a/utils/get_product_by_id/index.js +++ b/utils/get_product_by_id/index.js @@ -2,11 +2,14 @@ import axios from 'axios'; import { SOP_PRODUCT_BY_ID_ENDPOINT } from '../../constants'; export const get_product_by_id = async (id) => { - try { - const { Products } = axios.get(`${SOP_PRODUCT_BY_ID_ENDPOINT}/${id}`); - return Products; - } catch (error) { - console.log(error.message); - return {}; - } + 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 index 9bf50e4..67a317f 100644 --- a/utils/get_shop_products/index.js +++ b/utils/get_shop_products/index.js @@ -1,9 +1,13 @@ import axios from 'axios'; + import { SHOP_PRODUCTS_ENDPOINT } from '../../constants'; export const get_shop_products = async () => { try { - const { Products } = await axios.get(SHOP_PRODUCTS_ENDPOINT); + const { + data: { Products }, + } = await axios.get(SHOP_PRODUCTS_ENDPOINT); + // console.log(Products); return Products; } catch (error) { console.log(error.message);