refactor: Add lazy loading for images in CourseContentDetails, Course…

…InstructorDetails, HeaderPhone, Hero, and ProfileInfo components
Mohamed-Ramadan1 · May 27, 2024 · 1b6395a · 1b6395a
1 parent 2b2bdf9
commit 1b6395a
Show file tree

Hide file tree

Showing 5 changed files with 115 additions and 43 deletions.
diff --git a/src/components/courses/courseDetails/CourseContentDetails.jsx b/src/components/courses/courseDetails/CourseContentDetails.jsx
@@ -6,23 +6,38 @@ import CourseRequirementSection from "./CourseRequirementSection";
 import CourseInstructorDetails from "./CourseInstructorDetails";
 import CourseDetails from "./CourseDetails";
 import { MdAttachMoney } from "react-icons/md";
-
-const CourseContentDetails = ({
-  title,
-  description,
-  duration,
-  totalReviews,
-  averageRating,
-  updatedAt,
-  language,
-  learningObjectives,
-  videos,
-  instructor,
-  prerequisites,
-  financialAid,
-  paymentModel,
-}) => {
+import { useEffect, useState } from "react";
+import PaymentDetailsModal from "./PaymentDetailsModal";
+const CourseContentDetails = ({ course }) => {
+  const {
+    title,
+    description,
+    duration,
+    totalReviews,
+    averageRating,
+    updatedAt,
+    language,
+    learningObjectives,
+    videos,
+    prerequisites,
+    financialAid,
+    paymentModel,
+  } = course;
+  const instructor = course.instructor[0];
   const formatUpdatedDate = new Date(updatedAt).toLocaleDateString();
+  const [isLargeScreen, setIsLargeScreen] = useState(false);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsLargeScreen(window.innerWidth > 970);
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
   return (
     <div className="details w-full flex gap-[40px] flex-col items-start">
       <div className="w-full flex gap-3 flex-col items-start ">
@@ -38,6 +53,11 @@ const CourseContentDetails = ({
         <p className="text-1xl font-medium max-w-[900px] text-[#353535]">
           {description}
         </p>
+        {!isLargeScreen && (
+          <div>
+            <PaymentDetailsModal course={course} />
+          </div>
+        )}
       </div>
 
       <div className="flex flex-col gap-3">

diff --git a/src/components/courses/courseDetails/CourseEnrollmentDetails.jsx b/src/components/courses/courseDetails/CourseEnrollmentDetails.jsx
@@ -69,7 +69,7 @@ const CourseEnrollmentDetails = ({
   }, [courseId, token, user, isChanged]);
   //max-md:flex-col
   return (
-    <div className="salary p-3 min-w-[290px] max-h-[425px] flex flex-col gap-4 items-start rounded-3xl max-md:flex-col bg-[#D5FF40]">
+    <div className="salary p-3 min-w-[290px] max-h-[425px] flex flex-col gap-4 items-start rounded-3xl  bg-[#D5FF40]">
       <div className="top-salary w-full relative flex justify-between items-start">
         <div>
           {paymentModel === "free" ? (

diff --git a/src/components/courses/courseDetails/PaymentDetailsModal.jsx b/src/components/courses/courseDetails/PaymentDetailsModal.jsx
@@ -0,0 +1,36 @@
+import CourseEnrollmentDetails from "./CourseEnrollmentDetails";
+const PaymentDetailsModal = ({ course }) => {
+  const { duration, price, paymentModel, _id, videos, financialAid } = course;
+  return (
+    <>
+      <button
+        className="btn bg-blue-400 text-white"
+        onClick={() => document.getElementById("my_modal_1").showModal()}
+      >
+        Course Enrollment Details
+      </button>
+      <dialog id="my_modal_1" className="modal">
+        <div className="modal-box">
+          <h3 className="font-bold text-lg">Course Enrollment information</h3>
+          <p className="py-4">
+            <CourseEnrollmentDetails
+              duration={duration}
+              price={price}
+              paymentModel={paymentModel}
+              courseId={_id}
+              videos={videos}
+              financialAid={financialAid}
+            />
+          </p>
+          <div className="modal-action">
+            <form method="dialog">
+              <button className="btn">Close</button>
+            </form>
+          </div>
+        </div>
+      </dialog>
+    </>
+  );
+};
+
+export default PaymentDetailsModal;
diff --git a/src/components/payment/PaymentForm.jsx b/src/components/payment/PaymentForm.jsx
@@ -39,8 +39,6 @@ const PaymentForm = ({ coursePrice, courseDiscount, courseId }) => {
               }
             );
             toast.success("Payment and enrollment Successfull");
-            // window.location.reload();
-            // navigate(`/courses/${courseId}`);
             navigate(`/courses/${courseId}`, { replace: true });
           } catch (error) {
             console.log(error);

diff --git a/src/pages/mainLayout/CourseDetails.jsx b/src/pages/mainLayout/CourseDetails.jsx
@@ -14,8 +14,13 @@ const DetailsCourse = () => {
   const [enrollments, setEnrollments] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState("");
+  const [isLargeScreen, setIsLargeScreen] = useState(false);
 
   useEffect(() => {
+    const handleResize = () => {
+      setIsLargeScreen(window.innerWidth > 970);
+    };
+
     const fetchCourse = async () => {
       try {
         const response = await customFetch.get(`/courses/${courseId}`);
@@ -29,8 +34,19 @@ const DetailsCourse = () => {
       }
     };
     fetchCourse();
+    handleResize();
+
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
   }, [courseId]);
-  if (loading) return <h1>Loading...</h1>;
+  if (loading)
+    return (
+      <h1 className="container flex gap-[50px] flex-col items-center justify-center text-3xl">
+        Loading...
+      </h1>
+    );
   if (error) return <h1>{error}</h1>;
   return (
     <div className="detailsCourse relative overflow-hidden flex justify-center items-center px-[124px] py-[70px] max-lg:px-[30px] max-sm:py-[30px] max-sm:px-[15px]">
@@ -44,34 +60,36 @@ const DetailsCourse = () => {
         </div>
 
         <div className="flex w-full gap-[50px] ">
-          <CourseContentDetails
-            title={course.title}
-            description={course.description}
-            duration={course.duration}
-            totalReviews={course.totalReviews}
-            averageRating={course.averageRating}
-            updatedAt={course.updatedAt}
-            language={course.language}
-            learningObjectives={course.learningObjectives}
-            videos={course.videos}
-            instructor={course.instructor[0]}
-            prerequisites={course.prerequisites}
-            financialAid={course.financialAid}
-            paymentModel={course.paymentModel}
-          />
+          <CourseContentDetails course={course} />
 
-          <CourseEnrollmentDetails
-            duration={course.duration}
-            price={course.price}
-            paymentModel={course.paymentModel}
-            courseId={course._id}
-            videos={course.videos}
-            financialAid={course.financialAid}
-          />
+          {isLargeScreen && (
+            <CourseEnrollmentDetails
+              duration={course.duration}
+              price={course.price}
+              paymentModel={course.paymentModel}
+              courseId={course._id}
+              videos={course.videos}
+              financialAid={course.financialAid}
+            />
+          )}
         </div>
       </div>
     </div>
   );
 };
 
 export default DetailsCourse;
+
+// title={course.title}
+// description={course.description}
+// duration={course.duration}
+// totalReviews={course.totalReviews}
+// averageRating={course.averageRating}
+// updatedAt={course.updatedAt}
+// language={course.language}
+// learningObjectives={course.learningObjectives}
+// videos={course.videos}
+// instructor={course.instructor[0]}
+// prerequisites={course.prerequisites}
+// financialAid={course.financialAid}
+// paymentModel={course.paymentModel}