From 20673659e283d53174b999f1339ec56ddcb07732 Mon Sep 17 00:00:00 2001 From: David Abolade <69032300+A-believer@users.noreply.github.com> Date: Sun, 22 Oct 2023 19:45:58 +0100 Subject: [PATCH 1/4] error state --- modules/marketplace/productDetailsDescription.tsx | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/modules/marketplace/productDetailsDescription.tsx b/modules/marketplace/productDetailsDescription.tsx index db4e6956f..bbd0de089 100644 --- a/modules/marketplace/productDetailsDescription.tsx +++ b/modules/marketplace/productDetailsDescription.tsx @@ -28,6 +28,7 @@ export default function ProductDetailsDescription({ productId }: { productId: st const { auth } = useAuth(); const [product, setProduct] = useState(null); const [isLoading, setIsLoading] = useState(true); + const [error, setError] = useState(false); const [cartLoading, setCartLoading] = useState(true); const [image, setImage] = useState(product?.images[0]?.url); const router = useRouter(); @@ -53,7 +54,9 @@ export default function ProductDetailsDescription({ productId }: { productId: st setProduct(response.data.data); setIsLoading(false); }) - .catch((error) => {}); + .catch((error) => { + setError(true); + }); }, [apiUrl, id]); const addToCart = async () => { @@ -153,10 +156,18 @@ export default function ProductDetailsDescription({ productId }: { productId: st const breadcrumbs: any = product?.name ? `/marketplace/${product?.name}` : '/marketplace/'; + if (error) { + return ( +
+ Product Details Fail to load!! +
+ ); + } + return ( {!product ? ( -
+
) : ( From 66c3807eb935b3a6f295dbd8861b2479734d3a86 Mon Sep 17 00:00:00 2001 From: David Abolade <69032300+A-believer@users.noreply.github.com> Date: Sun, 22 Oct 2023 21:45:47 +0100 Subject: [PATCH 2/4] feat: encrypted product id --- modules/marketplace/component/ProductCard.tsx | 3 +- .../marketplace/productDetailsDescription.tsx | 32 +++++++++---------- package.json | 2 ++ utils/encrypt.ts | 18 +++++++++++ yarn.lock | 10 ++++++ 5 files changed, 48 insertions(+), 17 deletions(-) create mode 100644 utils/encrypt.ts diff --git a/modules/marketplace/component/ProductCard.tsx b/modules/marketplace/component/ProductCard.tsx index 8e53ef040..7665403d6 100644 --- a/modules/marketplace/component/ProductCard.tsx +++ b/modules/marketplace/component/ProductCard.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { MarketPlaceProductCardProps, starProps } from '../../../@types'; import Image from 'next/image'; import Link from 'next/link'; +import { encryptId } from '../../../utils/encrypt'; export default function ProductCard({ image, @@ -47,7 +48,7 @@ export default function ProductCard({
{/* Product Image */} - +
{showTopPicks ? ( diff --git a/modules/marketplace/productDetailsDescription.tsx b/modules/marketplace/productDetailsDescription.tsx index bbd0de089..efc59169b 100644 --- a/modules/marketplace/productDetailsDescription.tsx +++ b/modules/marketplace/productDetailsDescription.tsx @@ -23,6 +23,8 @@ import { formatToNigerianNaira } from '../../helpers/formatCurrency'; import ProductWeThoughtMightInterestYou from './component/ProductWeThoughtMightInterestYou'; import Loader from '@ui/Loader'; import { API_URI } from './http'; +import { decryptId } from '../../utils/encrypt'; +import { encryptId } from '../../utils/encrypt'; export default function ProductDetailsDescription({ productId }: { productId: string }) { const { auth } = useAuth(); @@ -31,15 +33,17 @@ export default function ProductDetailsDescription({ productId }: { productId: st const [error, setError] = useState(false); const [cartLoading, setCartLoading] = useState(true); const [image, setImage] = useState(product?.images[0]?.url); - const router = useRouter(); - const { id } = router.query; + // const router = useRouter(); + // const params = router.query; + // console.log(params) + const decryptedId: string | undefined = decryptId(productId ? productId : ''); + console.log(decryptedId); const token: any = isUserAuthenticated(); const { setCartCountNav, cartCount } = useCart(); - console.log(token); const apiUrl: string = token - ? `${API_URI}/get-product/${productId}/${token?.id}/?guest=false` - : `${API_URI}/get-product/${productId}/none/?guest=true`; + ? `${API_URI}/get-product/${decryptedId}/${token?.id}/?guest=false` + : `${API_URI}/get-product/${decryptedId}/none/?guest=true`; useEffect(() => { // Fetch data using Axios @@ -57,7 +61,7 @@ export default function ProductDetailsDescription({ productId }: { productId: st .catch((error) => { setError(true); }); - }, [apiUrl, id]); + }, [apiUrl]); const addToCart = async () => { const apiUrl = `${CART_ENDPOINT}/carts`; @@ -156,17 +160,13 @@ export default function ProductDetailsDescription({ productId }: { productId: st const breadcrumbs: any = product?.name ? `/marketplace/${product?.name}` : '/marketplace/'; - if (error) { - return ( -
- Product Details Fail to load!! -
- ); - } - return ( - {!product ? ( + {error ? ( +
+ Product Details Fail to load!! +
+ ) : !product ? (
@@ -481,7 +481,7 @@ export default function ProductDetailsDescription({ productId }: { productId: st {/* favorite products */}
- +
)} diff --git a/package.json b/package.json index b9215d8ec..d83857374 100644 --- a/package.json +++ b/package.json @@ -29,8 +29,10 @@ "@tiptap/pm": "^2.1.12", "@tiptap/react": "^2.1.12", "@tiptap/starter-kit": "^2.1.12", + "@types/crypto-js": "^4.1.3", "axios": "^1.5.1", "class-variance-authority": "^0.7.0", + "crypto-js": "^4.1.1", "csv-parser": "^3.0.0", "date-fns": "^2.30.0", "eslint": "8.31.0", diff --git a/utils/encrypt.ts b/utils/encrypt.ts new file mode 100644 index 000000000..2b2a8acb2 --- /dev/null +++ b/utils/encrypt.ts @@ -0,0 +1,18 @@ +import AES from 'crypto-js/aes'; +import { enc } from 'crypto-js'; + +const secretPassphrase: string = 'beans-cookers'; + +export const decryptId = (str: string | string[]) => { + console.log(str); + if (str) { + const newStr = Array.isArray(str) ? str.join() : str; + const decodedStr = decodeURIComponent(newStr); + return AES.decrypt(decodedStr, secretPassphrase).toString(enc.Utf8); + } +}; + +export const encryptId = (str: string) => { + const ciphertext = AES.encrypt(str, secretPassphrase); + return encodeURIComponent(ciphertext.toString()); +}; diff --git a/yarn.lock b/yarn.lock index eb0bbf749..a24e24daf 100644 --- a/yarn.lock +++ b/yarn.lock @@ -796,6 +796,11 @@ resolved "https://registry.yarnpkg.com/@tsconfig/node16/-/node16-1.0.4.tgz#0b92dcc0cc1c81f6f306a381f28e31b1a56536e9" integrity sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA== +"@types/crypto-js@^4.1.3": + version "4.1.3" + resolved "https://registry.yarnpkg.com/@types/crypto-js/-/crypto-js-4.1.3.tgz#7f2fa22857ae2b5d3221edcba9644f67f8ea984c" + integrity sha512-YP1sYYayLe7Eg5oXyLLvOLfxBfZ5Fgpz6sVWkpB18wDMywCLPWmqzRz+9gyuOoLF0fzDTTFwlyNbx7koONUwqA== + "@types/d3-array@^3.0.3": version "3.0.9" resolved "https://registry.yarnpkg.com/@types/d3-array/-/d3-array-3.0.9.tgz#54feabd29d1f15940d422c16008c63c1e4e3d188" @@ -1766,6 +1771,11 @@ cross-spawn@^7.0.2, cross-spawn@^7.0.3: shebang-command "^2.0.0" which "^2.0.1" +crypto-js@^4.1.1: + version "4.1.1" + resolved "https://registry.yarnpkg.com/crypto-js/-/crypto-js-4.1.1.tgz#9e485bcf03521041bd85844786b83fb7619736cf" + integrity sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw== + css-color-keywords@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05" From d0a782b3707e72691c7c8074eef6ee930ce35496 Mon Sep 17 00:00:00 2001 From: David Abolade <69032300+A-believer@users.noreply.github.com> Date: Sun, 22 Oct 2023 22:14:28 +0100 Subject: [PATCH 3/4] fix: update refresh error --- .../marketplace/productDetailsDescription.tsx | 36 +++++++++---------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/modules/marketplace/productDetailsDescription.tsx b/modules/marketplace/productDetailsDescription.tsx index efc59169b..b135c43a0 100644 --- a/modules/marketplace/productDetailsDescription.tsx +++ b/modules/marketplace/productDetailsDescription.tsx @@ -24,7 +24,6 @@ import ProductWeThoughtMightInterestYou from './component/ProductWeThoughtMightI import Loader from '@ui/Loader'; import { API_URI } from './http'; import { decryptId } from '../../utils/encrypt'; -import { encryptId } from '../../utils/encrypt'; export default function ProductDetailsDescription({ productId }: { productId: string }) { const { auth } = useAuth(); @@ -33,19 +32,15 @@ export default function ProductDetailsDescription({ productId }: { productId: st const [error, setError] = useState(false); const [cartLoading, setCartLoading] = useState(true); const [image, setImage] = useState(product?.images[0]?.url); - // const router = useRouter(); - // const params = router.query; - // console.log(params) const decryptedId: string | undefined = decryptId(productId ? productId : ''); console.log(decryptedId); const token: any = isUserAuthenticated(); const { setCartCountNav, cartCount } = useCart(); - const apiUrl: string = token - ? `${API_URI}/get-product/${decryptedId}/${token?.id}/?guest=false` - : `${API_URI}/get-product/${decryptedId}/none/?guest=true`; - useEffect(() => { + const apiUrl: string = token + ? `${API_URI}/get-product/${decryptedId}/${token?.id}/?guest=false` + : `${API_URI}/get-product/${decryptedId}/none/?guest=true`; // Fetch data using Axios const headers = { accept: 'application/json', @@ -61,7 +56,7 @@ export default function ProductDetailsDescription({ productId }: { productId: st .catch((error) => { setError(true); }); - }, [apiUrl]); + }, [decryptedId, token]); const addToCart = async () => { const apiUrl = `${CART_ENDPOINT}/carts`; @@ -72,7 +67,7 @@ export default function ProductDetailsDescription({ productId }: { productId: st try { const response = await axios.post( apiUrl, - { product_ids: [`${productId}`] }, + { product_ids: [`${decryptedId}`] }, { headers: { Authorization: `Bearer ${bearerToken}`, @@ -160,13 +155,21 @@ export default function ProductDetailsDescription({ productId }: { productId: st const breadcrumbs: any = product?.name ? `/marketplace/${product?.name}` : '/marketplace/'; + if (error && !product) { + return ( + +

Error Loading Product

+ + + ); + } return ( - {error ? ( -
- Product Details Fail to load!! -
- ) : !product ? ( + {!error || !product ? (
@@ -491,6 +494,3 @@ export default function ProductDetailsDescription({ productId }: { productId: st ); } - -// 656525652ad33a@beaconmessenger.com656525652ad33a@beaconmessenger.com -// TeaBread1234 From a7d89a3de5a3f7e0a532dd3246e44c4e8b9053b2 Mon Sep 17 00:00:00 2001 From: David Abolade <69032300+A-believer@users.noreply.github.com> Date: Sun, 22 Oct 2023 22:20:33 +0100 Subject: [PATCH 4/4] chore: clean up --- modules/marketplace/productDetailsDescription.tsx | 1 - utils/encrypt.ts | 1 - 2 files changed, 2 deletions(-) diff --git a/modules/marketplace/productDetailsDescription.tsx b/modules/marketplace/productDetailsDescription.tsx index b135c43a0..0c90ef5b0 100644 --- a/modules/marketplace/productDetailsDescription.tsx +++ b/modules/marketplace/productDetailsDescription.tsx @@ -33,7 +33,6 @@ export default function ProductDetailsDescription({ productId }: { productId: st const [cartLoading, setCartLoading] = useState(true); const [image, setImage] = useState(product?.images[0]?.url); const decryptedId: string | undefined = decryptId(productId ? productId : ''); - console.log(decryptedId); const token: any = isUserAuthenticated(); const { setCartCountNav, cartCount } = useCart(); diff --git a/utils/encrypt.ts b/utils/encrypt.ts index 2b2a8acb2..3587add97 100644 --- a/utils/encrypt.ts +++ b/utils/encrypt.ts @@ -4,7 +4,6 @@ import { enc } from 'crypto-js'; const secretPassphrase: string = 'beans-cookers'; export const decryptId = (str: string | string[]) => { - console.log(str); if (str) { const newStr = Array.isArray(str) ? str.join() : str; const decodedStr = decodeURIComponent(newStr);