Level 2
courseDetails.jsx
import { Link, useParams } from "react-router-dom";
import { useEffect, useState } from "react";
import CourseSidebar from "./CourseSidebar";
import RelatedCourses from "./RelatedCourses";
import CourseModal from "./CourseModal";
export default function CourseDetails() {
const [open, setOpen] = useState(false);
const { id } = useParams();
const [course, setCourse] = useState(null);
const [courseAttribute, setCourseAttribute] = useState({
id: "",
title: "",
video_link: "",
});
async function getCourseDetails() {
const res = await fetch(`/api/course_details/${id}`);
const data = await res.json();
if (res.ok) {
setCourse(data.course); //this course is the one comming from CourseController.php @ courseDetails function
}
// window.location.reload(); //this will reload your page after updating your data
}
// async function getCourseAttributeDetails() {
// const res = await fetch(`/api/course_attribute_details/${id}`);
// const data = await res.json();
// if (res.ok) {
// setCourseAttribute(data.courseattribute); //this courseattribute is the one comming from CourseController.php @ courseAttributeDetails function
// }
// // window.location.reload(); //this will reload your page after updating your data
// }
const getCourseAttributeDetails = (id) => {
fetch(`/api/course_attribute_details/${id}`)
.then((response) => response.json())
.then((res) => setCourseAttribute(res));
};
//this useEffect is calling the getCourseDetails and getCourseAttributeDetails function at the top
useEffect(() => {
getCourseDetails();
// getCourseAttributeDetails();
}, []);
return (
<>
<div className="xsm:h-[200px] md:h-[220px] w-full bg-primary">
<div className="container">
<div className="flex justify-between">
<div className="xsm:pt-[20px] md:pt-[50px]">
<h1 className="font-roboto text-secondary xsm:text-[30px] md:text-[50px] animation-delay-300 xsm:leading-8 md:leading-[50px]">
Modern Courses
</h1>
<p className="text-white text-[17px] pb-9 xsm:pt-2 md:pt-4">
Lorem ipsum dolor sit amet consectetur
adipisicing elit. Debitis reiciendis corrupti.
</p>
</div>
</div>
</div>
</div>
<div className="pt-10">
<div className="container grid grid-cols-4 gap-6 pt-4 pb-16 items-start">
<div className="lg:col-span-3 xsm:col-span-4">
{course ? (
<div key={course.id}>
<div>
<h1 className="text-primary font-roboto font-bold text-[24px]">
{course.title}
</h1>
<div className="flex justify-between gap-1 pt-3 pb-5 items-center">
<div className="flex gap-1">
<img
src={`http://localhost:8000/storage/${course.admin_created.profile_image}`}
// src={course.admin_created.profile_image}
className="rounded-full w-9"
/>
<p className="text-[12px] font-semibold">
{course.admin_created.name}
<br />
<span className="text-gray-500">
{new Date(
course.created_at
).toLocaleDateString()}
</span>
</p>
</div>
<div>
<Link
to="#"
className="text-gray-500 hover:text-tertiary"
>
<i
className="fa-light fa-heart"
title="Add To Favourite"
></i>
</Link>
</div>
</div>
<h3 className="text-primary pb-1">
{course.total_videos} (
{course.total_time})
</h3>
<div className="h-[155px] overflow-y-auto text-gray-500 items-center border border-gray-300 py-2">
{course.course_attributes.map(
(attObj) => {
return (
<div
key={attObj.id}
className="border-b border-gray-300 p-2 flex justify-between items-center"
>
<div className="flex">
<p>
<button
onClick={() =>
setOpen(
true &&
attObj.id
) &&
window.location.reload(
true
)
}
title={
attObj.id
}
>
<i className="fa-light fa-circle-play mr-1"></i>
<span className="mr-1">
2.
</span>{" "}
{
attObj.title
}
</button>
</p>
</div>
<div>
<p className="text-primary">
{
attObj.time_duration
}
</p>
</div>
</div>
);
}
)}
</div>
<CourseModal
open={open}
onClose={() => setOpen(false)}
data={course.course_attributes.id}
>
<div>
{course.course_attributes.title}
</div>
<div>
<iframe
width=""
height=""
class="xsm:h-[230px] md:h-[510px] w-full"
src={
course.course_attributes
.video_link
}
></iframe>
</div>
</CourseModal>
<div className="flex items-center text-gray-500 justify-between cursor-pointer pt-2">
<div>
<p>{course.course_category.name}</p>
</div>
<div className="flex items-center">
<p className="text-amber-500">
<i className="fa-duotone fa-solid fa-star"></i>
<span className="text-gray-500">
4.5
</span>
</p>
</div>
</div>
</div>
{/* rating or review */}
<div className="pt-10">
<div className="border border-gray-300 shadow-sm rounded">
<div className="xsm:my-0 md:my-7 xsm:mx-0 md:mx-4 border border-gray-300 shadow-sm rounded">
<div className="xsm:p-2 md:p-7">
<div className="border-b border-gray-200 pb-5">
<h2 className="font-roboto text-2xl font-medium pb-3">
Student Reviews
</h2>
<h4>
(0) Based on 0 reviews
</h4>
</div>
<div className="border-b border-gray-200 pb-5">
<h3 className="text-lg">
Write a review
</h3>
<h6 className="pb-2">
Rating
</h6>
<div className="flex items-center mb-4">
<div className="flex gap-1 text-sm text-amber-500">
<i className="fa-light fa-star"></i>
<i className="fa-light fa-star"></i>
<i className="fa-light fa-star"></i>
<i className="fa-light fa-star"></i>
<i className="fa-light fa-star"></i>
</div>
</div>
<textarea
rows="10"
className="w-full text-size-sm text-gray-600 px-2 py-1 border-gray-300 shadow-sm rounded focus:ring-primary focus:border-primary"
placeholder="Write your reviews here"
></textarea>
<button className="ml-auto mt-4 bg-primary border border-primary text-white px-8 py-2 font-medium rounded text-uppercase flex items-center gap-2 hover:bg-transparent hover:text-primary transition">
SEND REVIEW
</button>
</div>
{/* reviews */}
<div className="border-b border-gray-200 pb-5 pt-3">
<div className="flex items-center mb-4">
<div className="flex gap-1 text-sm text-amber-500">
<i className="fa-duotone fa-solid fa-star"></i>
<i className="fa-duotone fa-solid fa-star"></i>
<i className="fa-duotone fa-solid fa-star"></i>
</div>
</div>
<h6 className="italic text-gray-400">
Isaac Tetteh on
16-07-2024 23:02:26
</h6>
<p className="">
Lorem ipsum dolor sit
amet consectetur
adipisicing elit. Iusto
deserunt commodi dolor
quis maiores nesciunt
possimus excepturi
similique, nam deleniti
neque dignissimos beatae
reiciendis, aliquid esse
amet ipsum doloremque
dolorum.
</p>
</div>
<div className="border-b border-gray-200 pb-5 pt-3">
<div className="flex items-center mb-4">
<div className="flex gap-1 text-sm text-amber-500">
<i className="fa-duotone fa-solid fa-star"></i>
<i className="fa-duotone fa-solid fa-star"></i>
<i className="fa-duotone fa-solid fa-star"></i>
<i className="fa-duotone fa-solid fa-star"></i>
</div>
</div>
<h6 className="italic text-gray-400">
Adam Brown on 16-07-2024
23:02:26
</h6>
<p className="">
Lorem ipsum dolor sit
amet consectetur
adipisicing elit. Iusto
deserunt commodi dolor
quis maiores nesciunt
possimus excepturi
similique, nam deleniti
neque dignissimos beatae
reiciendis, aliquid esse
amet ipsum doloremque
dolorum.
</p>
</div>
<div className="border-b border-gray-200 pb-5 pt-3">
<div className="flex items-center mb-4">
<div className="flex gap-1 text-sm text-amber-500">
<i className="fa-duotone fa-solid fa-star"></i>
<i className="fa-duotone fa-solid fa-star"></i>
</div>
</div>
<h6 className="italic text-gray-400">
Nicholas Krow on
16-07-2024 23:02:26
</h6>
<p className="">
Lorem ipsum dolor sit
amet consectetur
adipisicing elit. Iusto
deserunt commodi dolor
quis maiores nesciunt
possimus excepturi
similique, nam deleniti
neque dignissimos beatae
reiciendis, aliquid esse
amet ipsum doloremque
dolorum.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
) : (
<p className="text-center text-red-500 text-[30px]">
Course not found!
</p>
)}
</div>
<div className="xsm:col-span-4 md:col-span-4 lg:col-span-1 px-4 pb-6 shadow rounded overflow-hidden xsm:mt-10 md:mt-[0px]">
<div className="divide-y divide-gray-200 space-y-5">
{/* categories */}
<div>
<h3 className="text-xl text-primary mb-3 uppercase font-medium mt-2">
Categories
</h3>
<div className="space-y-2 xsm:block md:flex lg:block items-center">
<CourseSidebar />
</div>
</div>
</div>
</div>
</div>
</div>
{/* related courses */}
<div className="pt-20">
<div className="container">
<div className="sm:flex justify-between items-center">
<h1 className="font-roboto text-primary xsm:text-[30px] md:text-[40px] font-semibold">
Related Courses
</h1>
</div>
<div className="pt-10 grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-4 gap-8">
<RelatedCourses />
</div>
</div>
</div>
{/* <CourseModal open={open} onClose={() => setOpen(false)}>
<div>
<iframe
width=""
height=""
class="xsm:h-[230px] md:h-[510px] w-full"
src={attObj.video_link}
></iframe>
</div>
</CourseModal> */}
</>
);
}
