Skip to content

Commit

Permalink
Coures Details Page
Browse files Browse the repository at this point in the history
  • Loading branch information
@raihanuldev
raihanuldev committed Apr 20, 2024
1 parent 83238a2 commit c47d115
Showing 1 changed file with 112 additions and 102 deletions.
214 changes: 112 additions & 102 deletions src/Pages/couresDetails/CouresDetails.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { Navigate, useLocation } from "react-router-dom";
import { AuthContex } from "../../Providers/AuthProvider";
import Swal from "sweetalert2";
import UseCart from "../../Hooks/UseCart";
import Coures from "../Home/Coures/Coures";

const CouresDetails = () => {
// get data useing Location
Expand All @@ -15,59 +16,60 @@ const CouresDetails = () => {
const [userFromData, setUserData] = useState(null);
const [cart, refetch] = UseCart();
const handleCart = () => {
if (!user) {
Swal.fire({
position: "top-end",
icon: "warning",
title: "You Need to Login Frist",
showConfirmButton: false,
timer: 2500,
});
return Navigate("/login");}
if (!user) {
Swal.fire({
position: "top-end",
icon: "warning",
title: "You Need to Login Frist",
showConfirmButton: false,
timer: 2500,
});
return Navigate("/login");
}
if (user && user?.email) {
const { _id, price, image, name } = couresInfo;
const seletedItem = {
cartId: _id,
name,
image,
price,
email: user.email,
};
fetch("http://localhost:5000/carts", {
method: "POST",
headers: {
"content-type": "application/json",
},
body: JSON.stringify(seletedItem),
const { _id, price, image, name } = couresInfo;
const seletedItem = {
cartId: _id,
name,
image,
price,
email: user.email,
};
fetch("http://localhost:5000/carts", {
method: "POST",
headers: {
"content-type": "application/json",
},
body: JSON.stringify(seletedItem),
})
.then((res) => res.json())
.then((data) => {
console.log(data);
if (data.insertedId) {
refetch();
setDisable(true);
Swal.fire({
position: "top-end",
icon: "success",
title: "Coures Added On Cart!!",
showConfirmButton: false,
timer: 2500,
});
} else {
Swal.fire({
position: "top-end",
icon: "error",
title: "Coures Was Added!!",
showConfirmButton: false,
timer: 2500,
});
}
})
.then((res) => res.json())
.then((data) => {
console.log(data);
if (data.insertedId) {
refetch();
setDisable(true);
Swal.fire({
position: "top-end",
icon: "success",
title: "Coures Added On Cart!!",
showConfirmButton: false,
timer: 2500,
});
} else {
Swal.fire({
position: "top-end",
icon: "error",
title: "Coures Was Added!!",
showConfirmButton: false,
timer: 2500,
});
}
})
.catch((error) => {
console.log(error);
});
}
};
.catch((error) => {
console.log(error);
});
}
};

// pdf generator
const infoPdf = () => {
Expand All @@ -94,63 +96,71 @@ const CouresDetails = () => {
}
}, [user?.email]);
return (
<div className="mt-[6rem] grid md:grid-cols-2 ">
<div className="">
<img
className="border border-gray-200 md:w-[100%] p-9 h-screen rounded-lg"
src={couresInfo.image}
alt=""
/>
</div>
<div className="ml-8">
<p className="text-4xl font-semibold">{couresInfo.name}</p>
<p>
by{" "}
<span className="font-semibold underline">
{couresInfo.instructorName}
</span>
</p>
<div>
<div className="mt-[6rem] grid md:grid-cols-2 ">
<div className="">
<p className="text-xl my-3">{couresInfo.details}</p>
<p>
{" "}
<span className="text-warning font-semibold">Price</span>:{" "}
<span className="font-bold"> {couresInfo.price} USD</span>
</p>
<p>
{" "}
<span className="text-warning font-semibold">
Discount Price
</span>:{" "}
<span className="font-bold"> {couresInfo.price - 19.8} USD</span>
</p>
<p>
{" "}
<span className="text-warning font-semibold">
Available Seats
</span>:{" "}
<span className="font-bold"> {couresInfo.availableSeats}</span>
</p>
<p>
{" "}
<span className="text-warning font-semibold">Enrolled</span>:{" "}
<span className="font-bold"> {couresInfo.enrolled}</span>
</p>
<img
className="border border-gray-200 md:w-[100%] p-9 h-screen rounded-lg"
src={couresInfo.image}
alt=""
/>
</div>
<div className="ml-8">
<p className="text-4xl font-semibold">{couresInfo.name}</p>
<p>
{" "}
<span className="text-warning font-semibold">Rating</span>:{" "}
<span className="font-bold"> {couresInfo.ratings}</span>
by{" "}
<span className="font-semibold underline">
{couresInfo.instructorName}
</span>
</p>
<div>
<button onClick={handleCart} className="btn btn-outline bg-slate-500 mr-5">
Add to Cart
</button>
<button onClick={infoPdf} className="btn btn-outline bg-slate-500">
Download PDF
</button>
<div className="">
<p className="text-xl my-3">{couresInfo.details}</p>
<p>
{" "}
<span className="text-warning font-semibold">Price</span>:{" "}
<span className="font-bold"> {couresInfo.price} USD</span>
</p>
<p>
{" "}
<span className="text-warning font-semibold">Discount Price</span>
:{" "}
<span className="font-bold"> {couresInfo.price - 19.8} USD</span>
</p>
<p>
{" "}
<span className="text-warning font-semibold">
Available Seats
</span>
: <span className="font-bold"> {couresInfo.availableSeats}</span>
</p>
<p>
{" "}
<span className="text-warning font-semibold">Enrolled</span>:{" "}
<span className="font-bold"> {couresInfo.enrolled}</span>
</p>
<p>
{" "}
<span className="text-warning font-semibold">Rating</span>:{" "}
<span className="font-bold"> {couresInfo.ratings}</span>
</p>
<div className="my-3">
<button
onClick={handleCart}
className="btn btn-outline bg-slate-500 mr-5"
>
Add to Cart
</button>
<button
onClick={infoPdf}
className="btn btn-outline bg-slate-500"
>
Download PDF
</button>
</div>
</div>
</div>
</div>
<Coures/>
</div>
);
};
Expand Down

0 comments on commit c47d115

Please sign in to comment.