Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Stage ten/fix/team romulus #1497

Open
wants to merge 6 commits into
base: dev
Choose a base branch
from
Open

Stage ten/fix/team romulus #1497

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
2067365
error state
A-believer Oct 22, 2023
66c3807
feat: encrypted product id
A-believer Oct 22, 2023
d0a782b
fix: update refresh error
A-believer Oct 22, 2023
0cac5c7
Merge branch 'dev' of https://github.com/hngx-org/zuriportfolio-front…
A-believer Oct 22, 2023
a7d89a3
chore: clean up
A-believer Oct 22, 2023
7e2915d
Merge branch 'dev' of https://github.com/hngx-org/zuriportfolio-front…
A-believer Nov 2, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion modules/marketplace/component/ProductCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -47,7 +48,7 @@ export default function ProductCard({
<div className="p-[16px] border-[1px] border-custom-color32 rounded-[8px] h-full w-[286px] max-w-full">
<div className="flex flex-col h-full items-start">
{/* Product Image */}
<Link href={`/marketplace/product-details/${id}`} className="relative flex flex-col">
<Link href={`/marketplace/product-details/${encryptId(id)}`} className="relative flex flex-col">
<div>
<div>
{showTopPicks ? (
Expand Down
42 changes: 26 additions & 16 deletions modules/marketplace/productDetailsDescription.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,24 +23,23 @@ 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';

export default function ProductDetailsDescription({ productId }: { productId: string }) {
const { auth } = useAuth();
const [product, setProduct] = useState<ProductData | null>(null);
const [isLoading, setIsLoading] = useState<boolean>(true);
const [error, setError] = useState<boolean>(false);
const [cartLoading, setCartLoading] = useState<boolean>(true);
const [image, setImage] = useState(product?.images[0]?.url);
const router = useRouter();
const { id } = router.query;
const decryptedId: string | undefined = decryptId(productId ? productId : '');
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`;

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',
Expand All @@ -53,8 +52,10 @@ export default function ProductDetailsDescription({ productId }: { productId: st
setProduct(response.data.data);
setIsLoading(false);
})
.catch((error) => {});
}, [apiUrl, id]);
.catch((error) => {
setError(true);
});
}, [decryptedId, token]);

const addToCart = async () => {
const apiUrl = `${CART_ENDPOINT}/carts`;
Expand All @@ -65,7 +66,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}`,
Expand Down Expand Up @@ -153,10 +154,22 @@ export default function ProductDetailsDescription({ productId }: { productId: st

const breadcrumbs: any = product?.name ? `/marketplace/${product?.name}` : '/marketplace/';

if (error && !product) {
return (
<CategoryLayout
isBreadcrumb={true}
pathName={breadcrumbs}
className="animate-pulse h-[50vh] w-full flex justify-center items-center text-2xl flex-col text-gray-400"
>
<p>Error Loading Product</p>
<Loader />
</CategoryLayout>
);
}
return (
<CategoryLayout isBreadcrumb={true} pathName={breadcrumbs}>
{!product ? (
<div className="animate-pulse h-[50vh] w-full flex justify-center items-center text-4xl text-gray-400">
{!error || !product ? (
<div className="animate-pulse h-[50vh]">
<Loader />
</div>
) : (
Expand Down Expand Up @@ -470,7 +483,7 @@ export default function ProductDetailsDescription({ productId }: { productId: st
{/* favorite products */}
<div></div>
<div>
<ProductWeThoughtMightInterestYou id={id} />
<ProductWeThoughtMightInterestYou id={decryptedId} />
</div>
</main>
)}
Expand All @@ -480,6 +493,3 @@ export default function ProductDetailsDescription({ productId }: { productId: st
</CategoryLayout>
);
}

// [email protected]@beaconmessenger.com
// TeaBread1234
2 changes: 2 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
17 changes: 17 additions & 0 deletions utils/encrypt.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import AES from 'crypto-js/aes';
import { enc } from 'crypto-js';

const secretPassphrase: string = 'beans-cookers';

export const decryptId = (str: string | string[]) => {
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());
};
10 changes: 10 additions & 0 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down