Skip to content

Commit

Permalink
bg(bug)-fixproductview (#67)
Browse files Browse the repository at this point in the history
  • Loading branch information
kayigmb authored Jul 17, 2024
1 parent 4c439e6 commit 0df2919
Show file tree
Hide file tree
Showing 5 changed files with 126 additions and 87 deletions.
67 changes: 38 additions & 29 deletions src/components/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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);
Expand Down Expand Up @@ -90,7 +93,6 @@ const Header = () => {
setShowmodal(!showlModal);
};


const [viewMenu, setViewmenu] = useState(false);
const [userdata, setUserdata] = useState<any | null>(null);
useEffect(() => {
Expand Down Expand Up @@ -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>
</>
) : (
''
Expand Down Expand Up @@ -277,7 +284,9 @@ const Header = () => {
) : (
<>
<Dropdown
onOpenChange={(isOpen: boolean) => dropDownShowEvent(isOpen)}
onOpenChange={(isOpen: boolean) =>
dropDownShowEvent(isOpen)
}
>
<DropdownTrigger>
<Button variant="bordered">
Expand Down Expand Up @@ -349,7 +358,7 @@ const Header = () => {
''
)}
</div>

{overlayComponent && (
<SideBarOverlay handleOpenOverlay={handleCloseOverlay}>
{overlayComponent === 'cart' && (
Expand Down
135 changes: 81 additions & 54 deletions src/components/ReviewsWrapper.tsx
Original file line number Diff line number Diff line change
@@ -1,67 +1,94 @@
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';
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;
export default ReviewWrapper;

2 changes: 1 addition & 1 deletion src/components/Table.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
7 changes: 5 additions & 2 deletions src/components/singleproduct.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion src/redux/slices/wishlistSlice.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down

0 comments on commit 0df2919

Please sign in to comment.