+ {error} +
+ } + +
+ {/*COURSE CONTENT*/}
+ {
+ course.courseContents.length > 0 && course.courseContents.map((content, index) => {
+ return (
+
+ );
+}
+
+export default AdminAddCourseContents;
Index: frontend/src/admin/components/AdminAddCourseInfo.tsx
===================================================================
--- frontend/src/admin/components/AdminAddCourseInfo.tsx (revision 00bf631b9e4b4b620af6d3d50ac94906a41e4ce0)
+++ frontend/src/admin/components/AdminAddCourseInfo.tsx (revision 00bf631b9e4b4b620af6d3d50ac94906a41e4ce0)
@@ -0,0 +1,199 @@
+import AdminAddCourseInput from "./AdminAddCourseInput.tsx";
+import type {Difficulty} from "../../types/Difficulty.tsx";
+import AdminAddCourseInputWithPills from "./AdminAddCourseInputWithPills.tsx";
+import AdminAddCourseInputTextArea from "./AdminAddCourseInputTextArea.tsx";
+import type {CourseEntity} from "../types/CourseEntity.tsx";
+import AdminAddCourseInputSelect from "./AdminAddCourseInputSelect.tsx";
+import type {JSX} from "react";
+
+function AdminAddCourseInfo({course, setCourse, courseCard, setCourseImage}: {
+ course: CourseEntity;
+ setCourse: (course: CourseEntity) => void;
+ courseCard: JSX.Element;
+ setCourseImage: (image: File | null) => void;
+}) {
+
+ return (
+
+ {/*CONTENT HEADER*/}
+ setCourse({
+ ...course,
+ courseContents: course.courseContents.map((item, i) => i === index ? {
+ ...item,
+ title: e.target.value
+ } : item)
+ })}
+ type={"text"}
+ width={"full"}
+ />
+
+ {/*LECTURES*/}
+
+ ) + } +
+ )
+ })
+ }
+
+
+
+
+
+ Module {index + 1}
+ + {/*Header Buttons*/} +
+ {index > 0 && (
+
+ )}
+ {index < course.courseContents.length - 1 && (
+
+ )}
+
+
+
+
+
+
+
+ {
+ index !== course.courseContents.length - 1 && (
+
+ {
+ content.courseLectures.length > 0 && content.courseLectures.map((_, lectureIndex) => (
+
+ {
+ content.courseLectures.length > 0 && content.courseLectures.map((lecture, lectureIndex) => {
+ return (
+
+
+ {
+ lectureIndex === content.courseLectures.length - 1 ? (
+
+ ) : (
+
+ )
+ }
+
+ ))
+ }
+
+ {/*LECTURE HEADER*/}
+ setCourse({
+ ...course,
+ courseContents: course.courseContents.map((item, i) => {
+ if (i === index) {
+ const updatedLectures = item.courseLectures.map((l, li) => li === lectureIndex ? {
+ ...l,
+ description: e.target.value
+ } : l);
+ return {...item, courseLectures: updatedLectures};
+ }
+ return item;
+ })
+ })}/>
+ setCourse({
+ ...course,
+ courseContents: course.courseContents.map((item, i) => {
+ if (i === index) {
+ const updatedLectures = item.courseLectures.map((l, li) => li === lectureIndex ? {
+ ...l,
+ contentText: e.target.value
+ } : l);
+ return {...item, courseLectures: updatedLectures};
+ }
+ return item;
+ })
+ })}/>
+ {
+ lecture.contentType !== "TEXT" && (
+ {
+ const file = e.target.files && e.target.files[0];
+ if (!file) return;
+
+ setCourseLectureFiles([
+ ...courseLectureFiles.filter(item => item.lecturePosition !== lecture.position || item.contentPosition !== content.position),
+ {
+ file,
+ type: lecture.contentType,
+ contentPosition: content.position,
+ lecturePosition: lecture.position
+ }
+ ]);
+ }}
+ type={"file"}
+ width={"full"}
+ />
+ )
+ }
+
+ )
+ })
+ }
+
+
+
+ Lecture {lectureIndex + 1}
+ + {/*Header Buttons*/} +
+ {lectureIndex > 0 && (
+
+ )}
+ {lectureIndex < content.courseLectures.length - 1 && (
+
+ )}
+
+
+
+ setCourse({
+ ...course,
+ courseContents: course.courseContents.map((item, i) => {
+ if (i === index) {
+ const updatedLectures = item.courseLectures.map((l, li) => li === lectureIndex ? {
+ ...l,
+ title: e.target.value
+ } : l);
+ return {...item, courseLectures: updatedLectures};
+ }
+ return item;
+ })
+ })}
+ type={"text"}
+ width={"full"}
+ />
+ setCourse({
+ ...course,
+ courseContents: course.courseContents.map((item, i) => {
+ if (i === index) {
+ const updatedLectures = item.courseLectures.map((l, li) => li === lectureIndex ? {
+ ...l,
+ durationMinutes: Number(e.target.value)
+ } : l);
+ return {...item, courseLectures: updatedLectures};
+ }
+ return item;
+ })
+ })}
+ type={"number"}
+ width={"fit"}
+ />
+ setCourse({
+ ...course,
+ courseContents: course.courseContents.map((item, i) => {
+ if (i === index) {
+ const updatedLectures = item.courseLectures.map((l, li) => li === lectureIndex ? {
+ ...l,
+ contentType: e.target.value as ContentType
+ } : l);
+ return {...item, courseLectures: updatedLectures};
+ }
+ return item;
+ })
+ })}
+ options={[
+ {value: "TEXT", name: "Text"},
+ {value: "FILE", name: "File"},
+ {value: "VIDEO", name: "Video"},
+ {value: "QUIZ", name: "Quiz"},
+ {value: "TOOL", name: "Tool"}
+ ]}
+ />
+
+ + ) + } +
+ {/*Course Card*/}
+
+
+
+ {courseCard}
+
+
+ {/*Course Info*/}
+
+
+ {
+ // const file = e.target.files?.[0];
+ // if (!file) return;
+ const file = e.target.files ? e.target.files[0] : null;
+ setCourseImage(file);
+ }}
+ type={"file"}
+ width={"full"}
+ />
+
+ setCourse({
+ ...course,
+ titleShort: e.target.value
+ })}
+ type={"text"}
+ width={"full"}
+ />
+
+ setCourse({
+ ...course,
+ title: e.target.value
+ })}
+ type={"text"}
+ width={"full"}
+ />
+
+ setCourse({
+ ...course,
+ topicsCovered: course.topicsCovered.includes(option) ? course.topicsCovered : [...course.topicsCovered, option]
+ })}
+ removePill={index => setCourse({
+ ...course,
+ topicsCovered: course.topicsCovered.filter((_, i) => i !== index)
+ })}
+ width={"full"}
+ />
+
+ setCourse({
+ ...course,
+ skillsGained: course.skillsGained.includes(option) ? course.skillsGained : [...course.skillsGained, option]
+ })}
+ removePill={index => setCourse({
+ ...course,
+ skillsGained: course.skillsGained.filter((_, i) => i !== index)
+ })}
+ width={"full"}
+ />
+
+
+ setCourse({
+ ...course,
+ durationMinutes: Number(e.target.value)
+ })}
+ type={"number"}
+ width={"fit"}
+ />
+ setCourse({
+ ...course,
+ price: Number(e.target.value)
+ })}
+ type={"number"}
+ width={"fit"}
+ />
+ setCourse({
+ ...course,
+ difficulty: e.target.value as Difficulty
+ })}
+ options={[
+ {value: "BEGINNER", name: "Beginner"},
+ {value: "INTERMEDIATE", name: "Intermediate"},
+ {value: "ADVANCED", name: "Advanced"},
+ {value: "EXPERT", name: "Expert"}
+ ]}
+ />
+
+
+
+ setCourse({
+ ...course,
+ color: e.target.value
+ })}
+ type={"text"}
+ width={"fit"}
+ />
+
+
+
+
+ setCourse({
+ ...course,
+ whatWillBeLearned: course.whatWillBeLearned.includes(option) ? course.whatWillBeLearned : [...course.whatWillBeLearned, option]
+ })}
+ removePill={index => setCourse({
+ ...course,
+ whatWillBeLearned: course.whatWillBeLearned.filter((_, i) => i !== index)
+ })}
+ width={"full"}
+ />
+ setCourse({
+ ...course,
+ descriptionShort: e.target.value
+ })}
+ />
+ setCourse({
+ ...course,
+ description: e.target.value
+ })}
+ />
+ setCourse({
+ ...course,
+ descriptionLong: e.target.value
+ })}
+ />
+
+
+
+
+
+ )
+}
+
+export default Input;
Index: frontend/src/admin/components/AdminAddCourseInputSelect.tsx
===================================================================
--- frontend/src/admin/components/AdminAddCourseInputSelect.tsx (revision 00bf631b9e4b4b620af6d3d50ac94906a41e4ce0)
+++ frontend/src/admin/components/AdminAddCourseInputSelect.tsx (revision 00bf631b9e4b4b620af6d3d50ac94906a41e4ce0)
@@ -0,0 +1,29 @@
+import React from "react";
+
+function AdminAddCourseInputSelect({label, value, options, onChange}: {
+ label: string;
+ value?: string | number;
+ options: {value: string, name: string}[];
+ onChange?: (e: React.ChangeEvent
+
+
+
+ )
+}
+
+export default AdminAddCourseInputSelect;
Index: frontend/src/admin/components/AdminAddCourseInputTextArea.tsx
===================================================================
--- frontend/src/admin/components/AdminAddCourseInputTextArea.tsx (revision 00bf631b9e4b4b620af6d3d50ac94906a41e4ce0)
+++ frontend/src/admin/components/AdminAddCourseInputTextArea.tsx (revision 00bf631b9e4b4b620af6d3d50ac94906a41e4ce0)
@@ -0,0 +1,28 @@
+import React from "react";
+
+function InputTextArea({label, name, value, placeholder, rows, onChange}: {
+ label: string;
+ name: string;
+ value: string;
+ placeholder: string;
+ rows: number;
+ onChange: (e: React.ChangeEvent
+
+
+
+ )
+}
+
+export default InputTextArea;
Index: frontend/src/admin/components/AdminAddCourseInputWithPills.tsx
===================================================================
--- frontend/src/admin/components/AdminAddCourseInputWithPills.tsx (revision 00bf631b9e4b4b620af6d3d50ac94906a41e4ce0)
+++ frontend/src/admin/components/AdminAddCourseInputWithPills.tsx (revision 00bf631b9e4b4b620af6d3d50ac94906a41e4ce0)
@@ -0,0 +1,58 @@
+import {X} from "lucide-react";
+import AdminAddCourseInput from "./AdminAddCourseInput.tsx";
+
+function InputWithPills({label, name, options, addPill, removePill, width}: {
+ name: string;
+ label: string;
+ options: string[];
+ addPill: (option: string) => void;
+ removePill: (index: number) => void;
+ width: "full" | "fit";
+}) {
+ return (
+
+
+
+
+ )
+}
+
+export default InputWithPills;
Index: frontend/src/admin/pages/AdminAddCourse.tsx
===================================================================
--- frontend/src/admin/pages/AdminAddCourse.tsx (revision 00bf631b9e4b4b620af6d3d50ac94906a41e4ce0)
+++ frontend/src/admin/pages/AdminAddCourse.tsx (revision 00bf631b9e4b4b620af6d3d50ac94906a41e4ce0)
@@ -0,0 +1,134 @@
+import {useState} from "react";
+import type {CourseEntity} from "../types/CourseEntity.tsx";
+import CourseCard from "../../components/CourseCard.tsx";
+import {createCourseApi, uploadCourseFilesApi} from "../api/addCourse.ts";
+import {useAuthContext} from "../../context/AuthContext.tsx";
+import type {ContentType} from "../../types/ContentType.tsx";
+import AdminAddCourseInfo from "../components/AdminAddCourseInfo.tsx";
+import AdminAddCourseContent from "../components/AdminAddCourseContent.tsx";
+import {useNavigate} from "react-router-dom";
+
+function AdminAddCourse() {
+ const [course, setCourse] = useState
+ {
+ options.length > 0 && options.map((option, index) => (
+
+ ))
+ }
+
+
-
-
-
- {card.ratingCount} reviews
-
+ {
+ card.ratingCount > 10 ? (
+ <>
+
+
+
+ {card.ratingCount} reviews
+
+
+ ) : (
+
+
+ )
+ }
{(card.durationMinutes / 60).toFixed(1)} hours
Index: frontend/src/components/CoursesCarouselCourseDetails.tsx
===================================================================
--- frontend/src/components/CoursesCarouselCourseDetails.tsx (revision af4cd1f4c1fd5370da9c889d92ef91382f245b92)
+++ frontend/src/components/CoursesCarouselCourseDetails.tsx (revision 00bf631b9e4b4b620af6d3d50ac94906a41e4ce0)
@@ -2,5 +2,5 @@
import Slider from "react-slick";
import CourseCard from "./CourseCard.tsx";
-import {useGlobalContext} from "../context/GlobalContext.tsx";
+import {useAuthContext} from "../context/AuthContext.tsx";
import {useEffect} from "react";
import {fetchRecommendedCoursesApi} from "../api/courseApi.ts";
@@ -9,5 +9,5 @@
function CoursesCarouselCourseDetails() {
const {recommendedCourses, setRecommendedCourses} = useCourseStorage();
- const {accessToken} = useGlobalContext();
+ const {accessToken} = useAuthContext();
useEffect(() => {
@@ -39,18 +39,31 @@
+ className="relative flex flex-col gap-10 items-center bg-dark-blue/10 py-vertical-md px-horizontal-lg overflow-clip">
@@ -30,20 +31,34 @@
-
-
- {
- recommendedCourses ?
- recommendedCourses.map((course, index) => (
-
- //
+ {recommendedCourses && recommendedCourses.length > 0 ? (
+ recommendedCourses.length <= 3 ? (
+
+ {recommendedCourses.map((course, index) => (
+
+ )
+ ) : (
+
+ {[...Array(4)].map((_, index) => (
+
+ )}
Index: frontend/src/components/CoursesCarouselHome.tsx
===================================================================
--- frontend/src/components/CoursesCarouselHome.tsx (revision af4cd1f4c1fd5370da9c889d92ef91382f245b92)
+++ frontend/src/components/CoursesCarouselHome.tsx (revision 00bf631b9e4b4b620af6d3d50ac94906a41e4ce0)
@@ -11,8 +11,9 @@
function CoursesCarouselHome() {
const {recommendedCourses} = useCourseStorage();
+ console.log(recommendedCourses)
return (
- //
- //
- )) :
- [...Array(4)].map((_, index) => (
-
+ {recommendedCourses.map((course, index) => (
+
+ ) : (
+
+
+
+ ))}
+
+
+
+ ))}
+
+
+ ))}
+
-
- {
- recommendedCourses ?
- recommendedCourses.map((course, index) => (
-
- //
+
- //
- //
- )) :
- [...Array(4)].map((_, index) => (
-
+ {recommendedCourses && recommendedCourses.length > 0 ? (
+ recommendedCourses.length <= 3 ? (
+
+ {recommendedCourses.map((course, index) => (
+
+ )
+ ) : (
+
+ {[...Array(4)].map((_, index) => (
+
+ )}
+
);
Index: frontend/src/components/CoursesFilters.tsx
===================================================================
--- frontend/src/components/CoursesFilters.tsx (revision af4cd1f4c1fd5370da9c889d92ef91382f245b92)
+++ frontend/src/components/CoursesFilters.tsx (revision 00bf631b9e4b4b620af6d3d50ac94906a41e4ce0)
@@ -3,5 +3,5 @@
import {durationToQueryMapper, priceToQueryMapper} from "../utils/mapper.ts";
import type {FilterParams} from "../types/FilterParams.tsx";
-import {useGlobalContext} from "../context/GlobalContext.tsx";
+import {useAuthContext} from "../context/AuthContext.tsx";
function CoursesFilters({filters, setFilters, topics, skills}: {
@@ -11,5 +11,5 @@
skills: string[] | null,
}) {
- const {user} = useGlobalContext();
+ const {user} = useAuthContext();
const duration = [
"< 3 hours",
@@ -87,5 +87,5 @@
className="flex flex-col gap-8 pl-8 pt-12 text-left sticky top-0 h-screen border-r-2 border-black/10">
+ {recommendedCourses.map((course, index) => (
+
+ ) : (
+
+
+
+ ))}
+
+
+
+ ))}
+
+
+ ))}
+ Filter by
-
+
{
user && (
Index: frontend/src/components/DashboardCourses.tsx
===================================================================
--- frontend/src/components/DashboardCourses.tsx (revision af4cd1f4c1fd5370da9c889d92ef91382f245b92)
+++ frontend/src/components/DashboardCourses.tsx (revision 00bf631b9e4b4b620af6d3d50ac94906a41e4ce0)
@@ -2,5 +2,5 @@
import {fetchCoursesApi, fetchEnrolledCoursesApi} from "../api/courseApi.ts";
import type {CoursePreview} from "../types/CoursePreview.tsx";
-import {useGlobalContext} from "../context/GlobalContext.tsx";
+import {useAuthContext} from "../context/AuthContext.tsx";
import {useCourseStorage} from "../context/CourseStorage.ts";
import StarFilled from "../assets/icons/StarFilled.tsx";
@@ -8,5 +8,5 @@
function DashboardCourses() {
const {allCourses: allCoursesStorage, setAllCourses: setAllCoursesStorage} = useCourseStorage();
- const {user, loading, accessToken} = useGlobalContext();
+ const {user, loading, accessToken} = useAuthContext();
const [selectedTab, setSelectedTab] = useState("all");
Index: frontend/src/components/HeroCourseDetails.tsx
===================================================================
--- frontend/src/components/HeroCourseDetails.tsx (revision af4cd1f4c1fd5370da9c889d92ef91382f245b92)
+++ frontend/src/components/HeroCourseDetails.tsx (revision 00bf631b9e4b4b620af6d3d50ac94906a41e4ce0)
@@ -13,10 +13,15 @@
{
header: `${course?.durationMinutes && (course.durationMinutes / 60).toFixed(1)} Hours Duration`,
- description: 'Self-paced course with flexible learning and optional exercises and templates.'
+ description: 'Learn at your own pace with flexible timing, plus optional exercises and helpful templates.'
},
{
- header: `${(course?.rating || 0) / (course?.ratingCount || 1)} Rating`,
- description: 'Rated highly by learners for its practical insights and actionable strategies.'
- },
+ header: course?.ratingCount && course.ratingCount > 10
+ ? `${(course.rating || 0) / course.ratingCount} Rating`
+ : `New & Trending`,
+ description: course?.ratingCount && course.ratingCount > 10
+ ? 'Rated highly by learners for its practical insights and actionable strategies.'
+ : 'New to the platform, this course is growing quickly. Be among the first learners to benefit from its insights.'
+ }
+ ,
]
@@ -88,5 +93,5 @@
([]);
Index: frontend/src/components/ProfileMyProfile.tsx
===================================================================
--- frontend/src/components/ProfileMyProfile.tsx (revision af4cd1f4c1fd5370da9c889d92ef91382f245b92)
+++ frontend/src/components/ProfileMyProfile.tsx (revision 00bf631b9e4b4b620af6d3d50ac94906a41e4ce0)
@@ -1,3 +1,3 @@
-import {useGlobalContext} from "../context/GlobalContext.tsx";
+import {useAuthContext} from "../context/AuthContext.tsx";
import React, {useState} from "react";
import {updateUserApi} from "../api/userApi.ts";
@@ -5,5 +5,5 @@
function ProfileMyProfile() {
const [loading, setLoading] = useState(false);
- const {user, setUser, accessToken} = useGlobalContext();
+ const {user, setUser, accessToken} = useAuthContext();
const [formData, setFormData] = useState({
@@ -63,5 +63,5 @@
{info.header}
Index: frontend/src/components/NavbarLink.tsx =================================================================== --- frontend/src/components/NavbarLink.tsx (revision 00bf631b9e4b4b620af6d3d50ac94906a41e4ce0) +++ frontend/src/components/NavbarLink.tsx (revision 00bf631b9e4b4b620af6d3d50ac94906a41e4ce0) @@ -0,0 +1,12 @@ +import {Link} from "react-router-dom"; + +const NavbarLink = ({to, label, className}: { to: string; label: string, className?: string; }) => ( +
+
+ {label}
+
+
+
+);
+
+export default NavbarLink;
Index: frontend/src/components/ProfileInfo.tsx
===================================================================
--- frontend/src/components/ProfileInfo.tsx (revision af4cd1f4c1fd5370da9c889d92ef91382f245b92)
+++ frontend/src/components/ProfileInfo.tsx (revision 00bf631b9e4b4b620af6d3d50ac94906a41e4ce0)
@@ -1,6 +1,6 @@
-import {useGlobalContext} from "../context/GlobalContext.tsx";
+import {useAuthContext} from "../context/AuthContext.tsx";
function ProfileInfo() {
- const {user} = useGlobalContext();
+ const {user} = useAuthContext();
return (
Index: frontend/src/components/ProfileModalAddSkills&Interests.tsx
===================================================================
--- frontend/src/components/ProfileModalAddSkills&Interests.tsx (revision af4cd1f4c1fd5370da9c889d92ef91382f245b92)
+++ frontend/src/components/ProfileModalAddSkills&Interests.tsx (revision 00bf631b9e4b4b620af6d3d50ac94906a41e4ce0)
@@ -3,5 +3,5 @@
import React, {useEffect} from "react";
import {fetchCoursesSkillsApi, fetchCoursesTopicsApi, fetchRecommendedCoursesApi} from "../api/courseApi.ts";
-import {useGlobalContext} from "../context/GlobalContext.tsx";
+import {useAuthContext} from "../context/AuthContext.tsx";
import {X} from "lucide-react";
import ProfileModalAddSkillsInterestsSkeleton from "./skeletons/ProfileModalAddSkills&InterestsSkeleton.tsx";
@@ -14,5 +14,5 @@
closeModal: () => void;
}) {
- const {user, setUser, accessToken} = useGlobalContext();
+ const {user, setUser, accessToken} = useAuthContext();
const {setRecommendedCourses} = useCourseStorage();
const [allOptions, setAllOptions] = React.useState+