Skip to content

Commit

Permalink
bugFix(allPage): Fix all remain bug into champs Bay
Browse files Browse the repository at this point in the history
  • Loading branch information
@ErnestTchami
ErnestTchami committed Jul 18, 2024
1 parent ab7cedb commit ba9505f
Show file tree
Hide file tree
Showing 9 changed files with 160 additions and 98 deletions.
3 changes: 3 additions & 0 deletions src/app/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,9 @@ body {}
.hide-scrollbar::-webkit-scrollbar {
display: none;
}
.capitalize-first::first-letter {
text-transform: uppercase;
}

/* Hide scrollbar for IE, Edge and Firefox */
.hide-scrollbar {
Expand Down
58 changes: 32 additions & 26 deletions src/app/products/[id]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,23 +28,19 @@ import ReviewWrapper from '@/components/ReviewsWrapper';
//import StripeProvider from '@/components/StripeProvider';

function Page() {
const { wishNumber } = useAppSelector(
(state: RootState) => state.wishlist
)
const { wishNumber } = useAppSelector((state: RootState) => state.wishlist);
const [thumbsSwiper, setThumbsSwiper] = useState(null);
const [addProductToCart, setAddProductToCart]=useState(false)

const {cart} = useAppSelector(
(state: RootState) => state.userCartData,
);
const [addProductToCart, setAddProductToCart] = useState(false);

const { cart } = useAppSelector((state: RootState) => state.userCartData);

const carts=cart as IUSERCART
const { id } :any= useParams();
const carts = cart as IUSERCART;
const { id }: any = useParams();
const handleSwiper = (swiper: any) => {
setThumbsSwiper(swiper);
};
const _id: string = id.toLocaleString();
const { data, isLoading, error , refetch} = useQuery<any>({
const { data, isLoading, error, refetch } = useQuery<any>({
queryKey: ['product', id],
queryFn: async () => {
try {
Expand All @@ -71,17 +67,20 @@ function Page() {
const productId = data.product.id;
dispatch(handleUserAddCart({ productPrice, productId }));
};
const handleAddRemoveWish = async(event: { preventDefault: () => void; })=>{
const handleAddRemoveWish = async (event: { preventDefault: () => void }) => {
event.preventDefault();
const response:any = await request.post('/wishes', { productId:id });
if(response.status == 200 || response.status == 203){
const response: any = await request.post('/wishes', { productId: id });
if (response.status == 200 || response.status == 203) {
const { status } = response;
dispatch(handleWishlistCount(status == 200 ? await wishNumber + 1 : await wishNumber - 1));
showToast(response.message, 'success')
dispatch(
handleWishlistCount(
status == 200 ? (await wishNumber) + 1 : (await wishNumber) - 1,
),
);
showToast(response.message, 'success');
}
console.log('this is response', response)

}

};
return (
<div>
{/* // <StripeProvider> */}
Expand Down Expand Up @@ -163,18 +162,22 @@ function Page() {
</div>
<div className="w-full">
<div>
<h1 className="font-bold mt-5 text-2xl capitalize">
<h1 className="font-bold mt-5 text-2xl capitalize-first">
{productName}
</h1>
</div>
<div className="flex flex-col gap-4">
<div className="flex gap-2 mt-5">
<div className="p-3 rounded-full bg-gray-200 hover:bg-green-500 hover:text-white cursor-pointer" onClick={handleAddRemoveWish}>
<div
className="p-3 rounded-full bg-gray-200 hover:bg-green-500 hover:text-white cursor-pointer"
onClick={handleAddRemoveWish}
>
<FaRegHeart />
</div>
<div className={`p-3 rounded-full hover:bg-green-500 hover:text-white cursor-pointer '${(addProductToCart || carts.product.some(item => item.product ===data.product.id)) ?' bg-red-500 pointer-events-none':'pointer-events-auto bg-gray-200'}`}>
<div
className={`p-3 rounded-full hover:bg-green-500 hover:text-white cursor-pointer '${addProductToCart || carts.product.some((item) => item.product === data.product.id) ? ' bg-red-500 pointer-events-none' : 'pointer-events-auto bg-gray-200'}`}
>
<MdOutlineShoppingCart

onClick={() => {
handleNewItem();
}}
Expand Down Expand Up @@ -227,10 +230,13 @@ function Page() {
</div>
</div>
<div className="w-full flex flex-col mt-10">
<ReviewWrapper productId={_id.trim()} refetch={refetch} reviews={reviews} />
<ReviewWrapper
productId={_id.trim()}
refetch={refetch}
reviews={reviews}
/>
</div>
</div>

</div>
)}
</>
Expand All @@ -239,4 +245,4 @@ function Page() {
</div>
);
}
export default Page;
export default Page;
87 changes: 53 additions & 34 deletions src/components/Card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,57 +23,61 @@ function Card({
id,
reviews,
}: Cards) {
const [addProductToCart, setAddProductToCart] = useState(false);
const { cart } = useAppSelector((state: RootState) => state.userCartData);

const [addProductToCart, setAddProductToCart]=useState(false)
const {cart} = useAppSelector(
(state: RootState) => state.userCartData,
);

const carts=cart as IUSERCART
const carts = cart as IUSERCART;
const productId = id;

const dispatch = useAppDispatch();
const handleNewItem = () => {
setAddProductToCart(true)
setAddProductToCart(true);
dispatch(handleUserAddCart({ productPrice, productId }));
}
const handleImageError = (event: React.SyntheticEvent<HTMLImageElement, Event>) => {
};
const handleImageError = (
event: React.SyntheticEvent<HTMLImageElement, Event>,
) => {
event.currentTarget.src = defaultProductImage.src;
};
const { wishNumber } = useAppSelector(
(state: RootState) => state.wishlist
)
const { wishNumber } = useAppSelector((state: RootState) => state.wishlist);

const handleAddRemoveWish = async(event: { preventDefault: () => void; })=>{
event.preventDefault();
const response:any = await request.post('/wishes', { productId:id });

if(response.status == 200 || response.status == 203){
const { status } = response;
dispatch(handleWishlistCount(status == 200 ? await wishNumber + 1 : await wishNumber - 1));
showToast(response.message, 'success')
}
console.log('this is response', response)

}
const handleAddRemoveWish = async (event: { preventDefault: () => void }) => {
event.preventDefault();
const response: any = await request.post('/wishes', { productId: id });

if (response.status == 200 || response.status == 203) {
const { status } = response;
dispatch(
handleWishlistCount(
status == 200 ? (await wishNumber) + 1 : (await wishNumber) - 1,
),
);
showToast(response.message, 'success');
}
console.log('this is response', response);
};
return (
<div className="relative w-full max-w-[80%] sm:max-w-48 sm:mb-10 min-w-[200px] mx-3 my-6 sm:h-[17rem] h-[19rem] bg-white border border-gray-200 rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow duration-300 ease-in-out transform hover:scale-105">
<Link href={`/products/${id}`}>
<div className="overflow-hidden p-3">
<img
src={productThumbnail || '../../public/product-default.png'}
alt={productName}
<img
src={productThumbnail || '../../public/product-default.png'}
alt={productName}
className="w-full h-32 object-contain transition-transform duration-300"
onError={handleImageError}
/>
</div>
</Link>
<div className="px-3 pb-3">
<h5 className="text-sm font-semibold mb-1 text-gray-900 truncate">
{productName.length < 30 ? productName : `${productName.substring(0, 30)}...`}
<h5 className="text-sm font-semibold mb-1 text-gray-900 truncate capitalize-first">
{productName.length < 30
? productName
: `${productName.substring(0, 30)}...`}
</h5>
<p className="text-xs text-gray-700 mb-2 truncate">
{productDescription.length < 50 ? productDescription : `${productDescription.substring(0, 50)}...`}
{productDescription.length < 50
? productDescription
: `${productDescription.substring(0, 50)}...`}
</p>
<div className="flex items-center justify-between mb-2">
<span className="text-sm font-bold text-green-500">
Expand All @@ -92,11 +96,26 @@ const handleAddRemoveWish = async(event: { preventDefault: () => void; })=>{
</div>
<div className="flex justify-end space-x-4">
<Link href={`/products/${id}`}>
<MdOutlineRemoveRedEye className="text-gray-600 hover:text-blue-600 cursor-pointer" size={20} />
<MdOutlineRemoveRedEye
className="text-gray-600 hover:text-blue-600 cursor-pointer"
size={20}
/>
</Link>
<FaRegHeart className="text-gray-600 hover:text-red-500 cursor-pointer" size={20} onClick={handleAddRemoveWish}/>
<MdOutlineShoppingCart className={` hover:text-green-500 cursor-pointer ${addProductToCart || carts.product.some(item => item.product === id) ?
'text-red-600 pointer-events-none':'text-gray-600'}`} size={20} onClick={handleNewItem} />
<FaRegHeart
className="text-gray-600 hover:text-red-500 cursor-pointer"
size={20}
onClick={handleAddRemoveWish}
/>
<MdOutlineShoppingCart
className={` hover:text-green-500 cursor-pointer ${
addProductToCart ||
carts.product.some((item) => item.product === id)
? 'text-red-600 pointer-events-none'
: 'text-gray-600'
}`}
size={20}
onClick={handleNewItem}
/>
</div>
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/components/DashNavbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -162,7 +162,7 @@ const DashNavbar: React.FC<NewType> = ({ role }) => {
</span>
</li>
</Link>
<Link href="/dashboard/product/create">
{/* <Link href="/dashboard/product/create">
<li
key="product"
className={`flex bg-primary/80 ${activelink === 'addproduct' ? 'text-yellow-400' : 'text-white'} text-sm hover:text-yellow-400 duration-200 bg-transparent rounded-md hover:bg-primary p-2 cursor-pointer hover:bg-light-white items-center gap-x-4 bg-light-white`}
Expand All @@ -174,7 +174,7 @@ const DashNavbar: React.FC<NewType> = ({ role }) => {
Create Product
</span>
</li>
</Link>
</Link> */}
</>
)}
</div>
Expand Down
6 changes: 4 additions & 2 deletions src/components/LatestCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const LatestCard: React.FC<Properties> = ({
}) => {
return (
<div className="flex justify-center items-center flex-col shadow-lg border pb-2 ">
<div className="sm:w-[250px] sm:min-w-[250px] h-[260px] min-w-[340px] overflow-hidden ">
<div className="sm:w-[270px] sm:min-w-[250px] h-[270px] min-w-[340px] overflow-hidden ">
<div
className="w-full pt-10 h-full bg-no-repeat bg-cover transition-transform duration-500 ease-in-out transform hover:scale-110"
style={{
Expand All @@ -25,7 +25,9 @@ const LatestCard: React.FC<Properties> = ({
</div>
<div className=" w-full pl-2 ">
<div className=" bg-white h-full w-full bottom-0 left-0">
<h1 className=" font-semibold text-2xl mb-2 capitalize">{name}</h1>
<h1 className=" font-semibold text-1xl mb-2 capitalize-first">
{name}
</h1>
<div className="flex gap-4">
<p className="">Price:{price.toLocaleString()} RWF </p>
</div>
Expand Down
35 changes: 32 additions & 3 deletions src/components/Table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,10 +61,38 @@ const ProductsTable: React.FC<Properties> = ({ Role }) => {
<div className="border-t-4 border-b-4 border-blue-600 rounded-full w-20 h-20 animate-spin m-auto"></div>
</div>
);
if (error) return <span>Error: {error.message}</span>;
if (error)
return (
<div className="w-full">
<div className="w-full">
{' '}
<Link href="/dashboard/product/create">
<button className="bg-blue-500 p-3 px-5 text-white font-semibold cursor-pointer hover:bg-blue-700 duration-200">
Add New Product
</button>
</Link>
</div>
<div className="capitalize flex flex-col items-center w-full h-full font-bold text-gray-400 text-3xl">
<img
src="/empty.avif"
alt="Not found"
className="w-[140px] h-[50%]"
/>
No Product Available
</div>
</div>
);
return (
<>
<div className=" overflow-x-auto shadow-md sm:rounded-lg sm:w-[80%] w-full">
<div className="w-full">
{' '}
<Link href="/dashboard/product/create">
<button className="bg-blue-500 p-3 px-5 text-white font-semibold cursor-pointer hover:bg-blue-700 duration-200">
Add New Product
</button>
</Link>
</div>
<table className="w-full text-sm text-left rtl:text-right text-gray-900 dark:text-gray-400">
<thead className="text-xs text-gray-500 uppercase bg-gray-100 dark:text-gray-900">
<tr>
Expand Down Expand Up @@ -103,7 +131,7 @@ const ProductsTable: React.FC<Properties> = ({ Role }) => {
</tr>
</thead>
<tbody>
{data.map(
{data?.map(
(
product: {
id: string;
Expand All @@ -129,7 +157,8 @@ 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?.toLocaleString()} {product.productCurrency}
{product.productPrice?.toLocaleString()}{' '}
{product.productCurrency}
</td>
<td className="px-6 py-4">{product.productDiscount}</td>
<td className="py-4">
Expand Down
Loading

0 comments on commit ba9505f

Please sign in to comment.