From fafddc341f5b746d8afcc4b0f92fa972fd63e584 Mon Sep 17 00:00:00 2001
From: Blair Kayigamba <kayigm1@gmail.com>
Date: Wed, 17 Jul 2024 08:10:05 +0200
Subject: [PATCH] bg(bug)-fixproductview (#67)

---
 src/components/Header.tsx         |  67 ++++++++-------
 src/components/ReviewsWrapper.tsx | 135 ++++++++++++++++++------------
 src/components/Table.tsx          |   2 +-
 src/components/singleproduct.tsx  |   7 +-
 src/redux/slices/wishlistSlice.ts |   2 +-
 5 files changed, 126 insertions(+), 87 deletions(-)

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 5507273..62d26f4 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -35,14 +35,17 @@ import {
 } from '@nextui-org/react';
 import { useRouter } from 'next/navigation';
 const Header = () => {
-  const { wishNumber } = useAppSelector(
-    (state: RootState) => state.wishlist
-  )
-  
-  const { isOrdersOverlayOpen, setIsOrdersOverlayOpen, toggleOrdersSlider } = OrdersOverlay();
+  const { wishNumber } = useAppSelector((state: RootState) => state.wishlist);
+
+  const { isOrdersOverlayOpen, setIsOrdersOverlayOpen, toggleOrdersSlider } =
+    OrdersOverlay();
   const [activelink, setActivelink] = useState('home');
 
-  const { isWishlistOverlayOpen, setIsWishlistOverlayOpen, toggleWishlistSlider } = WishlistOverlay();
+  const {
+    isWishlistOverlayOpen,
+    setIsWishlistOverlayOpen,
+    toggleWishlistSlider,
+  } = WishlistOverlay();
   const [showlModal, setShowmodal] = useState(false);
 
   const [showCart, setShowCart] = useState(false);
@@ -53,16 +56,16 @@ const Header = () => {
     'cart' | 'notification' | null
   >(null);
 
-  const handleShowWishlist=()=>{
+  const handleShowWishlist = () => {
     setIsOrdersOverlayOpen(false);
     setOverlayComponent(null);
     toggleWishlistSlider();
-  }
-  const handleShowOrders=()=>{
+  };
+  const handleShowOrders = () => {
     setIsWishlistOverlayOpen(false);
     setOverlayComponent(null);
     toggleOrdersSlider();
-  }
+  };
   const handleShowCart = () => {
     setIsWishlistOverlayOpen(false);
     setIsOrdersOverlayOpen(false);
@@ -90,7 +93,6 @@ const Header = () => {
     setShowmodal(!showlModal);
   };
 
-
   const [viewMenu, setViewmenu] = useState(false);
   const [userdata, setUserdata] = useState<any | null>(null);
   useEffect(() => {
@@ -127,30 +129,35 @@ const Header = () => {
           <Link href="/">
             <Image src={logo} alt={'logo'} width={100} height={100} />
           </Link>
-          <div className="flex gap-5 justify-center items-center ">
+          <div className="flex gap-5 justify-center items-center">
             {userdata && userdata.User.Role.name === 'buyer' && (
               <>
-              <span className="flex items-center" onClick={handleShowCart}>
-                <i className=" bg-black  border items-center border-slate-100 w-6 h-6 text-center rounded-[100%] relative  top-[-10px] right-[-5px] text-[#ffff] text-[12px]">
-                  {cart?.product.length}
-                </i>
-                <MdOutlineShoppingCart className="hover:bg-black text-white cursor-pointer z-20" />
-              </span>
-               <span className='flex items-center mx-2  cursor-pointer' onClick={handleShowWishlist}>
-                <i className=" bg-black  border items-center border-slate-100 w-6 h-6 text-center rounded-[100%] relative top-[-10px] right-[-5px] text-[#ffff] text-[12px]">
+                <span className="flex items-center" onClick={handleShowCart}>
+                  <i className=" bg-black  border items-center border-slate-100 w-6 h-6 text-center rounded-[100%] relative  top-[-10px] right-[-5px] text-[#ffff] text-[12px]">
+                    {cart?.product.length}
+                  </i>
+                  <MdOutlineShoppingCart className="hover:bg-black text-white cursor-pointer z-20" />
+                </span>
+                <span
+                  className="flex items-center mx-2  cursor-pointer"
+                  onClick={handleShowWishlist}
+                >
+                  <i className=" bg-black  border items-center border-slate-100 w-6 h-6 text-center rounded-[100%] relative top-[-10px] right-[-5px] text-[#ffff] text-[12px]">
                     {wishNumber}
                   </i>
                   <FaRegHeart className="hover:bg-black text-white cursor-pointer z-20" />
-              </span>
-             </>
+                </span>
+              </>
             )}
             {userdata ? (
               <>
-                <NotificationIcon toggleNotification={handleShowNotification} />
-                <IoMdMenu
-                  className="text-white text-2xl cursor-pointer sm:hidden  mxs-2 block"
-                  onClick={handleMenuToggle}
-                />
+                <span
+                  className="flex items-center sm:mx-2 mr-5 cursor-pointer"
+                >
+                  <NotificationIcon
+                    toggleNotification={handleShowNotification}
+                  />
+                </span>
               </>
             ) : (
               ''
@@ -277,7 +284,9 @@ const Header = () => {
                     ) : (
                       <>
                         <Dropdown
-                          onOpenChange={(isOpen: boolean) => dropDownShowEvent(isOpen)}
+                          onOpenChange={(isOpen: boolean) =>
+                            dropDownShowEvent(isOpen)
+                          }
                         >
                           <DropdownTrigger>
                             <Button variant="bordered">
@@ -349,7 +358,7 @@ const Header = () => {
           ''
         )}
       </div>
-    
+
       {overlayComponent && (
         <SideBarOverlay handleOpenOverlay={handleCloseOverlay}>
           {overlayComponent === 'cart' && (
diff --git a/src/components/ReviewsWrapper.tsx b/src/components/ReviewsWrapper.tsx
index a3330f8..739d149 100644
--- a/src/components/ReviewsWrapper.tsx
+++ b/src/components/ReviewsWrapper.tsx
@@ -1,5 +1,9 @@
 import { ReviewType } from '@/types/Product';
-import { QueryObserverResult, RefetchOptions, useQuery } from '@tanstack/react-query';
+import {
+  QueryObserverResult,
+  RefetchOptions,
+  useQuery,
+} from '@tanstack/react-query';
 import React, { useEffect, useState } from 'react';
 import ReviewCard from './ReviewCard';
 import Button from './Button';
@@ -7,61 +11,84 @@ import ReviewPopup from '@/hooks/reviewPopup';
 import ReviewProduct from './ReviewProductPopup';
 import request from '@/utils/axios';
 
-interface reviewWrapper{
-    refetch: (options?: RefetchOptions | undefined) => Promise<QueryObserverResult<any, Error>>;
-    reviews:ReviewType[];
-    productId:string;
+interface reviewWrapper {
+  refetch: (
+    options?: RefetchOptions | undefined,
+  ) => Promise<QueryObserverResult<any, Error>>;
+  reviews: ReviewType[];
+  productId: string;
 }
 
-const ReviewWrapper:React.FC<reviewWrapper>=({ refetch, reviews, productId })=>{
-    const { isReviewPopupOpen, setIsReviewPopupOpen, toggleReviewPopup} = ReviewPopup();
-    const [currentUser, setCurrentUser] = useState([]);
+const ReviewWrapper: React.FC<reviewWrapper> = ({
+  refetch,
+  reviews,
+  productId,
+}) => {
+  const { isReviewPopupOpen, setIsReviewPopupOpen, toggleReviewPopup } =
+    ReviewPopup();
+  const [currentUser, setCurrentUser] = useState([]);
 
-    useEffect(()=>{
-        const { User } = JSON.parse(localStorage.getItem('profile') as string);
-        const { id } = User
-        if(User){
-            setCurrentUser(id)
-        }
-    })
- 
-    const { isLoading, error, data } = useQuery<any>({
-        queryKey: ['CheckBuyerOrders'],
-        queryFn: () => request.get('/orders'),
-    });
-    //setOrders(data)
-    var ordersData = data?.orders ?? [];
-    const canUserAddReview = ordersData.filter((item: { buyerId: any; productId:string; isPaid: any; }) => item.buyerId == currentUser && item.productId == productId && item.isPaid)
-    return(
-        <>
-           <div className="w-full flex flex-col mt-10">
-            <div className="flex">
-              <h2 className="font-medium text-2xl mr-5">Reviews:</h2>
-              {canUserAddReview.length ? 
-                <Button name="Add Review" background="blue" handle={toggleReviewPopup}></Button>
-              :"" }
-            </div>
-            <div className="my-10">
-              {reviews && reviews.length > 0 ? (
-                reviews.map((review: ReviewType) => (
-                  <ReviewCard
-                    rating={review.rating}
-                    feedback={review.feedback}
-                    image={review.userProfile.profileImage}
-                    firstName={review.userProfile.firstName}
-                    lastName={review.userProfile.lastName}
-                  />
-                ))
-              ) : (
-                <p className="text-red-500">No ratings yet.</p>
-              )}
-            </div>
-          </div>
-          {isReviewPopupOpen &&
-              <ReviewProduct id={productId} isOpen={isReviewPopupOpen} handleClose={toggleReviewPopup} refetch={refetch}/>
-            }
-        </>
-    )
+  useEffect(() => {
+    const data  = JSON.parse(localStorage.getItem('profile') as string);
+    const  id  = data?.User?.id;
+    if (data?.User) {
+      setCurrentUser(id);
+    }
+  });
+
+  const { isLoading, error, data } = useQuery<any>({
+    queryKey: ['CheckBuyerOrders'],
+    queryFn: () => request.get('/orders'),
+    enabled: currentUser.length > 0,
+  });
+  //setOrders(data)
+  var ordersData = data?.orders ?? [];
+  const canUserAddReview = ordersData.filter(
+    (item: { buyerId: any; productId: string; isPaid: any }) =>
+      item.buyerId == currentUser && item.productId == productId && item.isPaid,
+  );
+  return (
+    <>
+      <div className="w-full flex flex-col mt-10">
+        <div className="flex">
+          <h2 className="font-medium text-2xl mr-5">Reviews:</h2>
+          {canUserAddReview.length ? (
+            <Button
+              name="Add Review"
+              background="blue"
+              handle={toggleReviewPopup}
+            ></Button>
+          ) : (
+            ''
+          )}
+        </div>
+        <div className="my-10">
+          {reviews && reviews.length > 0 ? (
+            reviews.map((review: ReviewType) => (
+              <ReviewCard
+                rating={review.rating}
+                feedback={review.feedback}
+                image={review.userProfile.profileImage}
+                firstName={review.userProfile.firstName}
+                lastName={review.userProfile.lastName}
+              />
+            ))
+          ) : (
+            <p className="text-red-500">No ratings yet.</p>
+          )}
+        </div>
+      </div>
+      {isReviewPopupOpen && (
+        <ReviewProduct
+          id={productId}
+          isOpen={isReviewPopupOpen}
+          handleClose={toggleReviewPopup}
+          refetch={refetch}
+        />
+      )}
+    </>
+  );
 };
 
-export default ReviewWrapper;
\ No newline at end of file
+export default ReviewWrapper;
+
diff --git a/src/components/Table.tsx b/src/components/Table.tsx
index 37be6ba..f961f43 100644
--- a/src/components/Table.tsx
+++ b/src/components/Table.tsx
@@ -129,7 +129,7 @@ const ProductsTable: React.FC<Properties> = ({ Role }) => {
                   <td className="px-6 py-4">{product.productName}</td>
                   <td className="px-6 py-4">{product.stockLevel}</td>
                   <td className="px-6 py-4">
-                    {product.productPrice} {product.productCurrency}
+                    {product.productPrice?.toLocaleString()} {product.productCurrency}
                   </td>
                   <td className="px-6 py-4">{product.productDiscount}</td>
                   <td className="py-4">
diff --git a/src/components/singleproduct.tsx b/src/components/singleproduct.tsx
index 9fe370d..1cc8383 100644
--- a/src/components/singleproduct.tsx
+++ b/src/components/singleproduct.tsx
@@ -152,8 +152,11 @@ const Singleproduct: React.FC<Properties> = ({ role }) => {
                     </div>
                   </div>
                 )}
-                <span className="font-medium text-2xl text-blue-300 mt-2">
-                  <span className="font-bold text-3xl">{productPrice}</span> RWF
+                <span className="font-medium text-2xl text-green-400 mt-2">
+                  <span className="font-bold text-3xl">
+                    {productPrice?.toLocaleString()}
+                  </span>{' '}
+                  RWF
                 </span>
               </div>
               <div className="block">
diff --git a/src/redux/slices/wishlistSlice.ts b/src/redux/slices/wishlistSlice.ts
index 9e820bd..f5963a0 100644
--- a/src/redux/slices/wishlistSlice.ts
+++ b/src/redux/slices/wishlistSlice.ts
@@ -9,7 +9,7 @@ const handleFetchUserWishes = async ():Promise<number>=>{
         const response:any = await request.get('/wishes');
         console.log('this is data from wishlist', response);
         if(response.status == 200){
-            return response.wishes.length;
+            return response?.wishes?.length;
         }
     }
     return 0;