fix render box layout issues.

Mohamed-Ramadan1 · Jun 4, 2024 · 4bad405 · 4bad405
1 parent dc66267
commit 4bad405
Show file tree

Hide file tree

Showing 9 changed files with 53 additions and 28 deletions.
diff --git a/src/components/courses/courseContent/CurrentVideoInformation.jsx b/src/components/courses/courseContent/CurrentVideoInformation.jsx
@@ -4,7 +4,9 @@ const CurrentVideoInformation = ({ selectVideoInformation }) => {
   // console.log(selectVideoInformation || "");
   return (
     <div className="flex justify-between items-center h-full mt-3">
-      <div>{selectVideoInformation.title || ""}</div>
+      <div className="font-bold text-xl">
+        {selectVideoInformation.title || ""}
+      </div>
       <TakeVideoNoteModal videoInformation={selectVideoInformation} />
     </div>
   );

diff --git a/src/components/courses/courseContent/RenderBox.jsx b/src/components/courses/courseContent/RenderBox.jsx
@@ -5,6 +5,8 @@ import { customFetch } from "../../../utils/customFetch";
 import VideoBox from "./VideoBox";
 import VideoItem from "./VideoItem";
 
+import { LoadingSpinner } from "../../../components";
+
 const fakeUrl =
   "https://res.cloudinary.com/dfjwny742/video/upload/v1715258237/Learn_HTML_In_Arabic_2021_-__03_-_First_Project_And_First_Page_720P_HD_uldnxx.mp4";
 
@@ -14,7 +16,7 @@ const RenderBox = ({ courseId }) => {
   const [selectedVideo, setSelectedVideo] = useState(null);
 
   const handleVideoClick = (course) => {
-    setSelectedVideo(course); // Update selected video state on click
+    setSelectedVideo(course);
   };
 
   useEffect(() => {
@@ -36,7 +38,7 @@ const RenderBox = ({ courseId }) => {
         {initialVideo ? (
           <VideoBox selectedVideoInformation={initialVideo} />
         ) : (
-          <div>Loading...</div>
+          <LoadingSpinner />
         )}
       </div>
 

diff --git a/src/components/courses/courseContent/TakeVideoNoteModal.jsx b/src/components/courses/courseContent/TakeVideoNoteModal.jsx
@@ -4,7 +4,7 @@ const TakeVideoNoteModal = ({ videoInformation }) => {
     <div>
       {/* You can open the modal using document.getElementById('ID').showModal() method */}
       <button
-        className="btn  text-2xl italic bg-blue-500 mt-2 hover:bg-blue-800 text-white font-bold py-2 px-4 rounded-[10px] focus:outline-none focus:shadow-outline"
+        className="btn  text-xl italic bg-blue-500 mt-2 hover:bg-blue-800 text-white font-bold py-2 px-4 rounded-[10px] focus:outline-none focus:shadow-outline"
         onClick={() => document.getElementById("my_modal_3").showModal()}
       >
         Take Note

diff --git a/src/components/courses/courseReviews/ReviewElement.jsx b/src/components/courses/courseReviews/ReviewElement.jsx
@@ -23,23 +23,27 @@ const ReviewElement = ({ fullReview, currentUser, token, setIsChanged }) => {
   return (
     <div class="bg-white p-4 rounded-lg shadow-md mt-5">
       <div>
-        <h3 class="text-lg font-bold">{user[0].name}</h3>
-        <p class="text-gray-700 text-sm mb-2">Posted on {formatDate}</p>
+        <div className="flex justify-between">
+          <h3 class="text-lg font-bold">{user[0].name}</h3>
+          <p class="text-gray-700 text-l mb-2">Posted on {formatDate}</p>
+        </div>
         <p class="text-gray-700 text-l f">
-          Rating:{" "}
+          Rating:
           <span className="text-blue-800 font-bold text-xl">{rating}</span>
         </p>
 
         <p class="text-gray-700">{review}</p>
       </div>
       {currentUser._id === user[0]._id && (
-        <button
-          onClick={handleDeleteReview}
-          type="button"
-          className="bg-red-500 mt-5  text-white p-1.5 rounded hover:bg-red-800"
-        >
-          Delete
-        </button>
+        <div className="flex justify-end ">
+          <button
+            onClick={handleDeleteReview}
+            type="button"
+            className="bg-red-500 mt-5  text-white p-1.5 rounded hover:bg-red-800 w-20 text-center"
+          >
+            Delete
+          </button>
+        </div>
       )}
     </div>
   );

diff --git a/src/components/courses/courseReviews/ReviewsContainer.jsx b/src/components/courses/courseReviews/ReviewsContainer.jsx
@@ -5,7 +5,7 @@ import { customFetch } from "../../../utils/customFetch";
 import { Pagination } from "../../../components/";
 import AddRatingForm from "./AddRatingForm";
 import ReviewElement from "./ReviewElement";
-
+import { LoadingSpinner } from "../../../components";
 const ReviewsContainer = () => {
   const [isChanged, setIsChanged] = useState(false);
   const [reviews, setReviews] = useState([]);
@@ -40,7 +40,6 @@ const ReviewsContainer = () => {
           setLoading(false);
           setIsMorePages(false);
         }
-        // console.log(res.data.data.reviews);
       } catch (error) {
         console.log(error.response.data.message);
       }
@@ -65,9 +64,7 @@ const ReviewsContainer = () => {
               setIsChanged={setIsChanged}
             />
           ))}
-        {loading && (
-          <p className="text-3xl text-bold text-center">No reviews found</p>
-        )}
+        {loading && <LoadingSpinner />}
         {reviews.length === 0 && !loading && (
           <p className="text-3xl text-bold text-center">No reviews found</p>
         )}

diff --git a/src/components/courses/coursesOverview/CourseCard.jsx b/src/components/courses/coursesOverview/CourseCard.jsx
@@ -14,6 +14,7 @@ const CourseCard = ({ course }) => {
     photo,
     language,
     paymentModel,
+    financialAid,
     category,
   } = course;
 
@@ -42,6 +43,9 @@ const CourseCard = ({ course }) => {
             <h3 className="text-sm font-bold text-[#333] max-md:text-base">
               {category}
             </h3>
+            <h3 className="text-sm font-bold text-blue-500 max-md:text-base">
+              {financialAid && "Financial Aid Available"}
+            </h3>
             <p className="text-base font-medium text-[#6e6e6e] max-md:font-light max-md:truncate max-md:max-w-[200px]">
               {description}
             </p>

diff --git a/src/components/courses/coursesOverview/OptionList.jsx b/src/components/courses/coursesOverview/OptionList.jsx
@@ -123,7 +123,6 @@ const OptionList = ({ titleCheckList, setCourses, clearFilters }) => {
             />
           ))}
         </FilterOptionsBox>
-
         {/* skill level */}
         <FilterOptionsBox
           label="Skill Level"
@@ -135,7 +134,6 @@ const OptionList = ({ titleCheckList, setCourses, clearFilters }) => {
             <FilterOptionItem key={level} value={level} OptionText={level} />
           ))}
         </FilterOptionsBox>
-
         {/*languages options */}
         <FilterOptionsBox
           label="Language"
@@ -158,6 +156,21 @@ const OptionList = ({ titleCheckList, setCourses, clearFilters }) => {
             <FilterOptionItem key={el} value={el} OptionText={el} />
           ))}
         </FilterOptionsBox>
+
+        {/* <FilterOptionsBox
+          label="Financial Aid "
+          id="financialAid"
+          value={formData.financialAid}
+          onChange={handleInputChange}
+        >
+          {["available", "not-available"].map((el) => (
+            <FilterOptionItem
+              key={el}
+              value={el === "available" ? true : false}
+              OptionText={el}
+            />
+          ))}
+        </FilterOptionsBox> */}
       </div>
     </div>
   );

diff --git a/src/pages/dashboard/Dashboard.jsx b/src/pages/dashboard/Dashboard.jsx
@@ -1,9 +1,7 @@
 import { useSelector } from "react-redux";
-import { useState, useEffect } from "react";
-import { customFetch } from "../../utils/customFetch";
+import { useEffect } from "react";
 import { PageIntro, StatsBox, StatsContainer } from "../../components";
 import { LoadingSpinner } from "../../components";
-import SyncLoader from "react-spinners/SyncLoader";
 
 import useFetchData from "../../hooks/useFetchData";
 function Dashboard() {
@@ -23,7 +21,6 @@ function Dashboard() {
   useEffect(() => {
     fetchData();
   }, [token]);
-  console.log(data);
   return (
     <>
       <div className="p-5">

diff --git a/src/pages/mainLayout/MyPaiedCourse.jsx b/src/pages/mainLayout/MyPaiedCourse.jsx
@@ -4,10 +4,11 @@ import { useParams, Link } from "react-router-dom";
 import { customFetch } from "../../utils/customFetch";
 import RenderBox from "../../components/courses/courseContent/RenderBox";
 import ReviewsContainer from "../../components/courses/courseReviews/ReviewsContainer";
-
+import { LoadingSpinner } from "../../components";
 function MyPaiedCourse() {
   const [isEnrolled, setIsEnrolled] = useState(false);
   const { courseId } = useParams();
+  const [loading, setLoading] = useState(true);
   const { token, user } = useSelector((state) => state.userReducers);
 
   useEffect(() => {
@@ -21,21 +22,26 @@ function MyPaiedCourse() {
 
         if (res.data.data.enrollments.user._id === user._id) {
           setIsEnrolled(true);
+          setLoading(false);
         }
       } catch (error) {
         console.log(error);
+        setLoading(false);
       }
     };
     fetchEnrolledCourse();
   }, [courseId, token, user]);
   return (
     <>
-      {isEnrolled ? (
+      {isEnrolled && (
         <>
           <RenderBox courseId={courseId} />
           <ReviewsContainer />
         </>
-      ) : (
+      )}
+      {loading && <LoadingSpinner />}
+
+      {!loading && isEnrolled === false && (
         <div className="container flex justify-center items-center h-[80vh] flex-col">
           <h1 className="text-4xl ">You are not enrolled in this course</h1>
           <Link