Skip to content

Commit

Permalink
bg(bug)-fixproductview
Browse files Browse the repository at this point in the history
  • Loading branch information
kayigmb committed Jul 16, 2024
1 parent 4c439e6 commit 0b14d01
Show file tree
Hide file tree
Showing 3 changed files with 116 additions and 83 deletions.
57 changes: 30 additions & 27 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 @@ -130,27 +132,26 @@ const Header = () => {
<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}
/>
</>
) : (
''
Expand Down Expand Up @@ -277,7 +278,9 @@ const Header = () => {
) : (
<>
<Dropdown
onOpenChange={(isOpen: boolean) => dropDownShowEvent(isOpen)}
onOpenChange={(isOpen: boolean) =>
dropDownShowEvent(isOpen)
}
>
<DropdownTrigger>
<Button variant="bordered">
Expand Down Expand Up @@ -349,7 +352,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;

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

0 comments on commit 0b14d01

Please sign in to comment.