Index: backend/src/main/java/com/shifterwebapp/shifter/course/CourseDtoPreview.java =================================================================== --- backend/src/main/java/com/shifterwebapp/shifter/course/CourseDtoPreview.java (revision 4e141b3cf2db7ded0bc6d5ef1fc36fcecaef109f) +++ backend/src/main/java/com/shifterwebapp/shifter/course/CourseDtoPreview.java (revision 3b9a2ae4985b4a733b21f6ff291fc8f9b242deaa) @@ -1,4 +1,5 @@ package com.shifterwebapp.shifter.course; +import com.shifterwebapp.shifter.coursecontent.CourseContentDto; import com.shifterwebapp.shifter.enums.Difficulty; import com.shifterwebapp.shifter.enums.Interests; @@ -38,4 +39,6 @@ private List topicsCovered; + + private Integer courseContentCount; } Index: backend/src/main/java/com/shifterwebapp/shifter/course/CourseMapperPreview.java =================================================================== --- backend/src/main/java/com/shifterwebapp/shifter/course/CourseMapperPreview.java (revision 4e141b3cf2db7ded0bc6d5ef1fc36fcecaef109f) +++ backend/src/main/java/com/shifterwebapp/shifter/course/CourseMapperPreview.java (revision 3b9a2ae4985b4a733b21f6ff291fc8f9b242deaa) @@ -10,4 +10,5 @@ public interface CourseMapperPreview { + @Mapping(target = "courseContentCount", expression = "java(course.getCourseContents() != null ? course.getCourseContents().size() : 0)") CourseDtoPreview toDto(Course course); List toDto(List courses); Index: frontend/src/App.tsx =================================================================== --- frontend/src/App.tsx (revision 4e141b3cf2db7ded0bc6d5ef1fc36fcecaef109f) +++ frontend/src/App.tsx (revision 3b9a2ae4985b4a733b21f6ff291fc8f9b242deaa) @@ -6,5 +6,4 @@ import Register from "./pages/Register.tsx"; import Courses from "./pages/Courses.tsx"; -import {useGlobalContext} from "./context/GlobalContext.tsx"; import {useEffect} from "react"; import CourseDetails from "./pages/CourseDetails.tsx"; @@ -12,4 +11,5 @@ import 'react-toastify/dist/ReactToastify.css'; import AppLoader from "./AppLoader.tsx"; +import Profile from "./pages/Profile.tsx"; function LayoutWrapper() { @@ -25,4 +25,5 @@ } /> + } /> } /> } /> @@ -44,13 +45,13 @@ function App() { - const {loading} = useGlobalContext(); - - if (loading) - return ( -
-
-
- ) + // const {loading} = useGlobalContext(); + // + // if (loading) + // return ( + //
+ //
+ //
+ // ) return ( Index: frontend/src/AppLoader.tsx =================================================================== --- frontend/src/AppLoader.tsx (revision 4e141b3cf2db7ded0bc6d5ef1fc36fcecaef109f) +++ frontend/src/AppLoader.tsx (revision 3b9a2ae4985b4a733b21f6ff291fc8f9b242deaa) @@ -2,7 +2,4 @@ import {useCourseStorage} from "./context/CourseStorage.ts"; import { - fetchCoursesApi, - fetchCoursesSkillsApi, - fetchCoursesTopicsApi, fetchRecommendedCoursesApi } from "./api/courseApi.ts"; @@ -14,8 +11,5 @@ const { setEnrollments, - setAllCourses, setRecommendedCourses, - setTopics, - setSkills } = useCourseStorage(); @@ -23,46 +17,4 @@ const load = async () => { try { - // Topics - try { - const topicsStored = sessionStorage.getItem("courseTopics"); - if (topicsStored) { - setTopics(JSON.parse(topicsStored)); - } else { - const topics = await fetchCoursesTopicsApi(); - setTopics(topics); - sessionStorage.setItem("courseTopics", JSON.stringify(topics)); - } - } catch (err) { - console.error("Failed to fetch topics:", err); - } - - // Skills - try { - const skillsStored = sessionStorage.getItem("courseSkills"); - if (skillsStored) { - setSkills(JSON.parse(skillsStored)); - } else { - const skills = await fetchCoursesSkillsApi(); - setSkills(skills); - sessionStorage.setItem("courseSkills", JSON.stringify(skills)); - } - } catch (err) { - console.error("Failed to fetch skills:", err); - } - - // Courses - try { - const allCoursesStored = sessionStorage.getItem("allCourses"); - if (allCoursesStored) { - setAllCourses(JSON.parse(allCoursesStored)); - } else { - const courses = await fetchCoursesApi(accessToken || ""); - setAllCourses(courses); - sessionStorage.setItem("allCourses", JSON.stringify(courses)); - } - } catch (err) { - console.error("Failed to fetch courses:", err); - } - // Enrollments try { Index: frontend/src/components/CourseCard.tsx =================================================================== --- frontend/src/components/CourseCard.tsx (revision 4e141b3cf2db7ded0bc6d5ef1fc36fcecaef109f) +++ frontend/src/components/CourseCard.tsx (revision 3b9a2ae4985b4a733b21f6ff291fc8f9b242deaa) @@ -101,5 +101,5 @@
- {0} modules + {card.courseContentCount} modules
Index: frontend/src/components/CourseDetailsInfo.tsx =================================================================== --- frontend/src/components/CourseDetailsInfo.tsx (revision 4e141b3cf2db7ded0bc6d5ef1fc36fcecaef109f) +++ frontend/src/components/CourseDetailsInfo.tsx (revision 3b9a2ae4985b4a733b21f6ff291fc8f9b242deaa) @@ -67,5 +67,5 @@
-
+
{content.courseLectures.length} lectures • Index: frontend/src/components/CoursesCarouselCourseDetails.tsx =================================================================== --- frontend/src/components/CoursesCarouselCourseDetails.tsx (revision 4e141b3cf2db7ded0bc6d5ef1fc36fcecaef109f) +++ frontend/src/components/CoursesCarouselCourseDetails.tsx (revision 3b9a2ae4985b4a733b21f6ff291fc8f9b242deaa) @@ -5,4 +5,5 @@ import {useEffect} from "react"; import {fetchRecommendedCoursesApi} from "../api/courseApi.ts"; +import CourseCardSkeleton from "./skeletons/CourseCardSkeleton.tsx"; function CoursesCarouselCourseDetails() { @@ -38,22 +39,18 @@
- { - recommendedCourses ? - - { - recommendedCourses.map((course, index) => ( - - //
- // - //
- )) - } - - : -
-
- Loading... -
- } + + { + recommendedCourses ? + recommendedCourses.map((course, index) => ( + + //
+ // + //
+ )) : + [...Array(4)].map((_, index) => ( + + )) + } +
Index: frontend/src/components/CoursesCarouselHome.tsx =================================================================== --- frontend/src/components/CoursesCarouselHome.tsx (revision 4e141b3cf2db7ded0bc6d5ef1fc36fcecaef109f) +++ frontend/src/components/CoursesCarouselHome.tsx (revision 3b9a2ae4985b4a733b21f6ff291fc8f9b242deaa) @@ -7,4 +7,5 @@ import ShifterArrow from "../../public/Shifter-Arrow.png"; import {useCourseStorage} from "../context/CourseStorage.ts"; +import CourseCardSkeleton from "./skeletons/CourseCardSkeleton.tsx"; function CoursesCarouselHome() { @@ -30,22 +31,18 @@
- { - recommendedCourses ? - - { - recommendedCourses.map((course, index) => ( - - //
- // - //
- )) - } - - : -
-
- Loading... -
- } + + { + recommendedCourses ? + recommendedCourses.map((course, index) => ( + + //
+ // + //
+ )) : + [...Array(4)].map((_, index) => ( + + )) + } +
Index: frontend/src/components/CoursesFilters.tsx =================================================================== --- frontend/src/components/CoursesFilters.tsx (revision 4e141b3cf2db7ded0bc6d5ef1fc36fcecaef109f) +++ frontend/src/components/CoursesFilters.tsx (revision 3b9a2ae4985b4a733b21f6ff291fc8f9b242deaa) @@ -1,14 +1,12 @@ import React from "react"; import Checkbox from "@mui/material/Checkbox"; +import {durationToQueryMapper, priceToQueryMapper} from "../utils/mapper.ts"; import type {FilterParams} from "../types/FilterParams.tsx"; -import {durationToQueryMapper, priceToQueryMapper} from "../utils/mapper.ts"; - -function CoursesFilters({setFilters, filters, topics, skills, showOnlyFavoriteCourses, setShowOnlyFavorites}: { + +function CoursesFilters({filters, setFilters, topics, skills}: { + filters: FilterParams, setFilters: React.Dispatch>, - filters: FilterParams, topics: string[] | null, skills: string[] | null, - showOnlyFavoriteCourses: boolean - setShowOnlyFavorites: React.Dispatch>, }) { const duration = [ @@ -76,4 +74,11 @@ } + const handleShowOnlyFavoritesChange = () => { + setFilters(prevFilters => ({ + ...prevFilters, + showOnlyFavoriteCourses: !prevFilters.showOnlyFavoriteCourses + })); + } + return (
) : ( Index: frontend/src/pages/CourseDetails.tsx =================================================================== --- frontend/src/pages/CourseDetails.tsx (revision 4e141b3cf2db7ded0bc6d5ef1fc36fcecaef109f) +++ frontend/src/pages/CourseDetails.tsx (revision 3b9a2ae4985b4a733b21f6ff291fc8f9b242deaa) @@ -9,7 +9,11 @@ import {useGlobalContext} from "../context/GlobalContext.tsx"; import {showInfoToast} from "../utils/showInfoToast.ts"; +import {useCourseStorage} from "../context/CourseStorage.ts"; +import HeroCourseDetailsSkeleton from "../components/skeletons/HeroCourseDetailsSkeleton.tsx"; +import CourseDetailsInfoSkeleton from "../components/skeletons/CourseDetailsInfoSkeleton.tsx"; function CourseDetails() { - const { user, accessToken } = useGlobalContext(); + const { user, accessToken, loading: authLoading } = useGlobalContext(); + const { enrollments, setEnrollments } = useCourseStorage(); const [loading, setLoading] = useState(true); const { courseId } = useParams<{ courseId: string; courseTitle: string }>(); @@ -24,4 +28,7 @@ return enrollUserApi(Number(courseId), accessToken || "") .then(() => { + if (enrollments) { + setEnrollments(enrollments.filter((enrollment) => enrollment.courseId !== Number(courseId))); + } console.log("User enrolled in course successfully"); }) @@ -50,9 +57,10 @@
{ - loading ? -
-
- Loading... -
: + (authLoading || loading) ? + <> + + + + : <> Index: frontend/src/pages/Courses.tsx =================================================================== --- frontend/src/pages/Courses.tsx (revision 4e141b3cf2db7ded0bc6d5ef1fc36fcecaef109f) +++ frontend/src/pages/Courses.tsx (revision 3b9a2ae4985b4a733b21f6ff291fc8f9b242deaa) @@ -1,7 +1,6 @@ -import React, {useEffect, useRef} from "react"; +import React, {useEffect, useMemo, useState} from "react"; import CoursesFilters from "../components/CoursesFilters.tsx"; import CoursesGrid from "../components/CoursesGrid.tsx"; import type {FilterParams} from "../types/FilterParams.tsx"; -import {useLocation, useNavigate} from "react-router-dom"; import {fetchCoursesApi} from "../api/courseApi.ts"; import ShifterRocket from "../../public/Rocket-Blue-Fire.png" @@ -9,11 +8,14 @@ import type {CoursePreview} from "../types/CoursePreview.tsx"; import {useGlobalContext} from "../context/GlobalContext.tsx"; - -function getInitialFiltersFromSearch(): FilterParams { - const searchParams = new URLSearchParams(location.search); +import {useLocation, useNavigate} from "react-router-dom"; +import CoursesFiltersSkeleton from "../components/skeletons/CoursesFiltersSkeleton.tsx"; +import CoursesGridSkeleton from "../components/skeletons/CoursesGridSkeleton.tsx"; + +function getInitialFiltersFromSearch(locationSearch: string): FilterParams { + const searchParams = new URLSearchParams(locationSearch); const initialParams: FilterParams = {}; - const search = searchParams.get("search"); - if (search) initialParams.search = search; + const search = searchParams.getAll("search"); + if (search.length > 0) initialParams.search = search; const skill = searchParams.getAll("skill"); @@ -38,82 +40,156 @@ const navigate = useNavigate(); const location = useLocation(); - const { accessToken } = useGlobalContext(); - const {allCourses, topics, skills} = useCourseStorage(); - - const [showOnlyFavorites, setShowOnlyFavorites] = React.useState(false); - const [filteredCourses, setFilteredCourses] = React.useState(null); - - const [filters, setFilters] = React.useState(getInitialFiltersFromSearch()); - const [loading, setLoading] = React.useState(false); - - const abortControllerRef = useRef(null); - const debounceTimeoutRef = useRef(null); - - // Effect to fetch filtered courses on filters change + const {accessToken, user, loading: authLoading} = useGlobalContext(); + const {allCourses, setAllCourses} = useCourseStorage(); + + const [courses, setCourses] = React.useState(null); + const [loading, setLoading] = useState(false); + + const [filters, setFilters] = useState(getInitialFiltersFromSearch(location.search)); + + const topics = useMemo(() => + allCourses?.map(course => course.topicsCovered).flat() || [], + [allCourses] + ); + const skills = useMemo(() => + allCourses?.map(course => course.skillsGained).flat() || [], + [allCourses] + ); + + // Effect to initialize courses useEffect(() => { - if (debounceTimeoutRef.current) clearTimeout(debounceTimeoutRef.current); - + const storedCourses = sessionStorage.getItem("allCourses"); + if (storedCourses) { + setAllCourses(JSON.parse(storedCourses)); + return; + } + + setLoading(true); + fetchCoursesApi(accessToken || "") + .then(courses => { + setAllCourses(courses); + sessionStorage.setItem("allCourses", JSON.stringify(courses)); + }) + .catch(err => { + console.error("Failed to fetch courses:", err); + }) + .finally(() => setLoading(false)); + }, [authLoading]) + + // Effect to filter courses based on filters and favorites + useEffect(() => { + if (!allCourses) return; + + let filteredCourses = [...allCourses]; + + // Apply search filter + if (filters.search) { + filteredCourses = filteredCourses.filter(course => + filters.search!.some(search => + course.difficulty.toLowerCase().includes(search.toLowerCase()) || + course.title.toLowerCase().includes(search.toLowerCase()) || + course.topicsCovered.some(topic => topic.toLowerCase().includes(search.toLowerCase())) || + course.skillsGained.some(skill => skill.toLowerCase().includes(search.toLowerCase())) + ) + ); + } + + // Apply skill filter + if (filters.skill && filters.skill.length > 0) { + filteredCourses = filteredCourses.filter(course => + filters.skill!.some(skill => course.skillsGained.includes(skill)) + ); + } + + // Apply topic filter + if (filters.topic && filters.topic.length > 0) { + filteredCourses = filteredCourses.filter(course => + filters.topic!.some(topic => course.topicsCovered.includes(topic)) + ); + } + + // Apply difficulty filter + if (filters.difficulty && filters.difficulty.length > 0) { + filteredCourses = filteredCourses.filter(course => + filters.difficulty!.includes(course.difficulty) + ); + } + + // Apply price filter + if (filters.price && filters.price.length > 0) { + filteredCourses = filteredCourses.filter(course => { + return filters.price!.some(priceRange => { + const price = course.price; + + switch (priceRange) { + case "free": + return price === 0; + case "low": // < $20 + return price > 0 && price < 20; + case "medium": // $20 - $50 + return price >= 20 && price <= 50; + case "high": // $50+ + return price > 50; + default: + return false; + } + }); + }); + } + + // Apply duration filter + if (filters.duration && filters.duration.length > 0) { + filteredCourses = filteredCourses.filter(course => { + return filters.duration!.some(durationRange => { + const minutes = course.durationMinutes; + + switch (durationRange) { + case "extraShort": // < 3 hours + return minutes < 60 * 3; + case "short": // 3-6 hours + return minutes >= 60 * 3 && minutes < 60 * 6; + case "medium": // 6-10 hours + return minutes >= 60 * 6 && minutes < 60 * 10; + case "long": // 10+ hours + return minutes >= 60 * 10; + default: + return false; + } + }); + }); + } + + // Apply favorites filter + if (filters.showOnlyFavoriteCourses) { + filteredCourses = filteredCourses.filter(course => + user?.favoriteCourses.includes(course.id) + ) + } + + setCourses(filteredCourses); + }, [allCourses, filters, user?.favoriteCourses]); + + // Effect to change url params based on filters + useEffect(() => { const noFiltersApplied = Object.keys(filters).length === 0; + // Clear URL query params if (noFiltersApplied) { - - if (abortControllerRef.current) { - abortControllerRef.current.abort(); - abortControllerRef.current = null; + navigate({pathname: location.pathname, search: ""}, {replace: true}); + return; + } + + + // Add URL query params from filters + const paramsToUrl = new URLSearchParams(); + Object.entries(filters).forEach(([key, value]) => { + if (Array.isArray(value)) { + value.forEach(v => paramsToUrl.append(key, v)); + } else if (value) { + paramsToUrl.set(key, value.toString()); } - - setFilteredCourses(null); - - // Clear URL query params - navigate({pathname: location.pathname, search: ""}, {replace: true}); - setLoading(false); - return; - } - - debounceTimeoutRef.current = window.setTimeout(() => { - if (abortControllerRef.current) { - abortControllerRef.current.abort(); - } - - abortControllerRef.current = new AbortController(); - - setLoading(true); - - fetchCoursesApi(accessToken || "", filters, abortControllerRef.current?.signal) - .then(data => { - setFilteredCourses(data); - }) - .catch(error => { - if (error.name === "CanceledError" || error.message === "canceled") { - // request was aborted, do nothing - console.log("Previous request aborted"); - } else { - console.error(error); - } - }) - .finally(() => { - setLoading(false); - abortControllerRef.current = null; - }); - - // Update URL with filters - const paramsToUrl = new URLSearchParams(); - Object.entries(filters).forEach(([key, value]) => { - if (Array.isArray(value)) { - value.forEach(v => paramsToUrl.append(key, v)); - } else if (value) { - paramsToUrl.set(key, value.toString()); - } - }); - navigate({pathname: location.pathname, search: paramsToUrl.toString()}, {replace: true}); - }, 500); - - return () => { - if (debounceTimeoutRef.current) clearTimeout(debounceTimeoutRef.current); - if (abortControllerRef.current) { - abortControllerRef.current.abort(); - abortControllerRef.current = null; - } - }; + }); + navigate({pathname: location.pathname, search: paramsToUrl.toString()}, {replace: true}); + }, [filters]); @@ -138,20 +214,26 @@

-
- - -
+ { + (authLoading || loading) ? ( +
+ + +
+ ) : ( +
+ + +
+ ) + }
); Index: frontend/src/pages/Profile.tsx =================================================================== --- frontend/src/pages/Profile.tsx (revision 3b9a2ae4985b4a733b21f6ff291fc8f9b242deaa) +++ frontend/src/pages/Profile.tsx (revision 3b9a2ae4985b4a733b21f6ff291fc8f9b242deaa) @@ -0,0 +1,14 @@ +import HeroProfile from "../components/HeroProfile.tsx"; +import {useState} from "react"; + +function Profile() { + const [selectedTab, setSelectedTab] = useState("myCourses"); + + return ( +
+ +
+ ) +} + +export default Profile; Index: frontend/src/types/CoursePreview.tsx =================================================================== --- frontend/src/types/CoursePreview.tsx (revision 4e141b3cf2db7ded0bc6d5ef1fc36fcecaef109f) +++ frontend/src/types/CoursePreview.tsx (revision 3b9a2ae4985b4a733b21f6ff291fc8f9b242deaa) @@ -14,4 +14,5 @@ skillsGained: string[]; topicsCovered: string[]; + courseContentCount: number; } Index: frontend/src/types/Difficulty.tsx =================================================================== --- frontend/src/types/Difficulty.tsx (revision 4e141b3cf2db7ded0bc6d5ef1fc36fcecaef109f) +++ frontend/src/types/Difficulty.tsx (revision 3b9a2ae4985b4a733b21f6ff291fc8f9b242deaa) @@ -1,1 +1,1 @@ -export type Difficulty = "Beginner" | "Intermediate" | "Advanced" | "Expert"; +export type Difficulty = "BEGINNER" | "INTERMEDIATE" | "ADVANCED" | "EXPERT"; Index: frontend/src/types/FilterParams.tsx =================================================================== --- frontend/src/types/FilterParams.tsx (revision 4e141b3cf2db7ded0bc6d5ef1fc36fcecaef109f) +++ frontend/src/types/FilterParams.tsx (revision 3b9a2ae4985b4a733b21f6ff291fc8f9b242deaa) @@ -1,5 +1,6 @@ export interface FilterParams { - search?: string; + showOnlyFavoriteCourses?: boolean; + search?: string[]; difficulty?: string[]; price?: string[];