From 12cbdd1eb6474f11e1cdb98984135ac88af944aa Mon Sep 17 00:00:00 2001 From: tchami <131756888+tchamianest@users.noreply.github.com> Date: Mon, 24 Jun 2024 15:58:29 +0200 Subject: [PATCH] Bgfix(Navabar): The login user and user type the issue about Menu --- src/app/page.tsx | 4 +- src/app/products/[id]/page.tsx | 71 ++++--- src/components/2faVerification.tsx | 12 +- src/components/Card.tsx | 42 ++-- src/components/CartContainer.tsx | 2 +- src/components/Footer.tsx | 6 +- src/components/Header.tsx | 226 +++++++++++++++------ src/components/ProductList.tsx | 22 +- src/components/UsableSideOvelay.tsx | 11 +- src/hooks/useLogin.ts | 9 +- src/redux/slices/2faAuthenticationSlice.ts | 5 +- 11 files changed, 268 insertions(+), 142 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index e2312e0..496ccfe 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -53,7 +53,7 @@ export default function Home() {
-
+ {/*
-
+
*/} {showlModal && (
diff --git a/src/app/products/[id]/page.tsx b/src/app/products/[id]/page.tsx index 24a5431..bcdfb03 100644 --- a/src/app/products/[id]/page.tsx +++ b/src/app/products/[id]/page.tsx @@ -7,16 +7,21 @@ import 'swiper/css/free-mode'; import 'swiper/css/navigation'; import 'swiper/css/thumbs'; import { FreeMode, Navigation, Thumbs } from 'swiper/modules'; -import Image from 'next/image';//@ts-ignore -import ReactStars from "react-rating-stars-component"; +import Image from 'next/image'; //@ts-ignore +import ReactStars from 'react-rating-stars-component'; import { MdOutlineShoppingCart } from 'react-icons/md'; import { FaRegHeart } from 'react-icons/fa6'; import { useParams } from 'next/navigation'; import { Product } from '@/utils/requests'; -import { ProductObj, ProductType, ReviewType, imageType } from '@/types/Product'; +import { + ProductObj, + ProductType, + ReviewType, + imageType, +} from '@/types/Product'; import Card from '@/components/Card'; import Header from '@/components/Header'; -import Footer from '@/components/Footer'; +import Footer from '@/components/Footer'; import image from '../../../../public/product.png'; import { useQuery } from '@tanstack/react-query'; import ReviewCard from '@/components/ReviewCard'; @@ -36,8 +41,10 @@ function Page() { queryKey: ['product', id], queryFn: async () => { try { - const response: ProductType = (await Product.single(_id)) as ProductType; - + const response: ProductType = (await Product.single( + _id, + )) as ProductType; + return response; } catch (error) { throw new Error('Error fetching product data'); @@ -56,14 +63,14 @@ function Page() { reviews, } = data.product; console.log('this is reviews >>>>>>>>>', reviews); - console.log(' this is average reviews', averageReviews(reviews)); + console.log(' this is average reviews', productPictures); const { relatedProducts } = data; -const dispatch = useAppDispatch(); -const handleNewItem=()=>{ - const productId=data.product.id -dispatch(handleUserAddCart({productPrice,productId})); -} - + const dispatch = useAppDispatch(); + const handleNewItem = () => { + const productId = data.product.id; + dispatch(handleUserAddCart({ productPrice, productId })); + }; + return (
@@ -80,10 +87,10 @@ dispatch(handleUserAddCart({productPrice,productId})); modules={[FreeMode, Navigation, Thumbs]} className="mySwiper2" > - {productPictures.map((image:imageType) => { + {productPictures.map((image: imageType) => { return ( - image + image ); })} @@ -104,10 +111,10 @@ dispatch(handleUserAddCart({productPrice,productId})); modules={[FreeMode, Navigation, Thumbs]} className="mySwiper mycss" > - {productPictures.map((image:imageType) => { + {productPictures.map((image: imageType) => { return ( - image + image ); })} @@ -128,21 +135,25 @@ dispatch(handleUserAddCart({productPrice,productId}));
- {handleNewItem()}} /> + { + handleNewItem(); + }} + />
- ${productPrice} + RWF {productPrice} -
+
@@ -156,7 +167,7 @@ dispatch(handleUserAddCart({productPrice,productId}));
{relatedProducts && relatedProducts.length > 0 ? ( - relatedProducts.map((product:ProductType) => ( + relatedProducts.map((product: ProductType) => (
-
+

Reviews:

- +
{reviews && reviews.length > 0 ? ( @@ -203,4 +214,4 @@ dispatch(handleUserAddCart({productPrice,productId})); ); } -export default Page; \ No newline at end of file +export default Page; diff --git a/src/components/2faVerification.tsx b/src/components/2faVerification.tsx index d19afd0..974d755 100644 --- a/src/components/2faVerification.tsx +++ b/src/components/2faVerification.tsx @@ -2,7 +2,7 @@ import React, { useRef, useEffect, useState } from 'react'; import axios from 'axios'; import Image from 'next/image'; -import {Button} from '@/components/Button'; +import { Button } from '@/components/Button'; import { otpValidation } from '@/validations/otpValidations'; import { useRouter } from 'next/navigation'; import Link from 'next/link'; @@ -13,6 +13,7 @@ import { resendOTPCode, } from '@/redux/slices/2faAuthenticationSlice'; import GlobarPopUp from './UsablePopUp'; +import request from '@/utils/axios'; interface OtpVerifyInterface { isOpen: boolean; @@ -44,7 +45,12 @@ const OtpVerify: React.FC = ({ isOpen }) => { const VerifyOtp = async () => { var otp = input.join(''); const result = otpValidation.safeParse({ otp }); - dispatch(handleOTPVerification(otp)); + const result1 = await dispatch(handleOTPVerification(otp)); + if (result1) { + const profile = await request.get(`${URL}/users/profile`); + const userData = JSON.stringify(profile); + localStorage.setItem('profile', userData); + } }; const HandleInput = ( index: number, @@ -131,4 +137,4 @@ const OtpVerify: React.FC = ({ isOpen }) => { ); }; -export default OtpVerify; \ No newline at end of file +export default OtpVerify; diff --git a/src/components/Card.tsx b/src/components/Card.tsx index dbb8c58..b5b1972 100644 --- a/src/components/Card.tsx +++ b/src/components/Card.tsx @@ -1,10 +1,10 @@ import React from 'react'; -import { MdOutlineRemoveRedEye, MdOutlineShoppingCart } from "react-icons/md"; -import Image from 'next/image';//@ts-ignore -import ReactStars from "react-rating-stars-component"; -import { FaRegHeart } from "react-icons/fa6"; -import { Cards } from "../types/Product"; -import image from "../../public/product.png"; +import { MdOutlineRemoveRedEye, MdOutlineShoppingCart } from 'react-icons/md'; +import Image from 'next/image'; //@ts-ignore +import ReactStars from 'react-rating-stars-component'; +import { FaRegHeart } from 'react-icons/fa6'; +import { Cards } from '../types/Product'; +import image from '../../public/product.png'; import Link from 'next/link'; import { averageReviews } from '@/utils/averageReviews'; import { RootState, useAppDispatch, useAppSelector } from '@/redux/store'; @@ -18,7 +18,7 @@ function Card({ productPrice, productThumbnail, id, - reviews + reviews, }: Cards) { const productId=id @@ -29,13 +29,13 @@ const handleNewItem=()=>{ dispatch(handleUserAddCart({productPrice,productId})); } return ( -
+
{productThumbnail && productThumbnail.length > 0 ? ( default image ) : ( {'no @@ -43,23 +43,27 @@ dispatch(handleUserAddCart({productPrice,productId}));
- {productName.length < 30 ? productName : productName.substring(0,30)+'...' } + {productName.length < 30 + ? productName + : productName.substring(0, 30) + '...'}
-
- {productDescription.length < 50 ? productDescription : productDescription.substring(0,50)+'...' } +
+ {productDescription.length < 50 + ? productDescription + : productDescription.substring(0, 50) + '...'}
{productPrice} RWF - +
diff --git a/src/components/CartContainer.tsx b/src/components/CartContainer.tsx index 2e02f9f..bf14e51 100644 --- a/src/components/CartContainer.tsx +++ b/src/components/CartContainer.tsx @@ -114,7 +114,7 @@ const CartContainer = (hideOverLay: any) => { } return (
-
+
+