Index: frontend/src/api/preferences.ts =================================================================== --- frontend/src/api/preferences.ts (revision 650c45e5d67db4e6dcb8639ca9b69d914b6ba2aa) +++ frontend/src/api/preferences.ts (revision 650c45e5d67db4e6dcb8639ca9b69d914b6ba2aa) @@ -0,0 +1,44 @@ +import { Dispatch, SetStateAction } from "react"; +import axiosInstance from "../api/axiosInstance"; + +interface FetchPreferencesProps { + setIsLoaded?: Dispatch>; + setIsLoading?: Dispatch>; + setDislikedIds: Dispatch | undefined>>; + setFavoriteIds: Dispatch | undefined>>; + setLikedIds: Dispatch | undefined>>; +} + +export const fetchPreferences = async ({ + setIsLoading, + setDislikedIds, + setFavoriteIds, + setLikedIds, + setIsLoaded, +}: FetchPreferencesProps) => { + const accessToken = localStorage.getItem("access"); + if (accessToken) { + axiosInstance + .get<{ + favorite_ids: number[]; + liked_ids: number[]; + disliked_ids: number[]; + }>("/student/preferences/") + .then((response) => { + setFavoriteIds(new Set(response.data.favorite_ids || [])); + setLikedIds(new Set(response.data.liked_ids || [])); + setDislikedIds(new Set(response.data.disliked_ids || [])); + }) + .catch((error) => console.error("Failed to fetch preferences:", error)) + .finally(() => { + setIsLoaded && setIsLoaded(true); + setIsLoading && setIsLoading(false); + }); + } else { + setFavoriteIds(new Set()); + setLikedIds(new Set()); + setDislikedIds(new Set()); + setIsLoaded && setIsLoaded(true); + setIsLoading && setIsLoading(false); + } +}; Index: frontend/src/api/subjects.ts =================================================================== --- frontend/src/api/subjects.ts (revision 650c45e5d67db4e6dcb8639ca9b69d914b6ba2aa) +++ frontend/src/api/subjects.ts (revision 650c45e5d67db4e6dcb8639ca9b69d914b6ba2aa) @@ -0,0 +1,18 @@ +import { Dispatch, SetStateAction } from "react"; +import { Subject } from "../components/types"; + +interface fetchSubjectsProps { + setSubjects: Dispatch>; +} + +export const fetchSubjects = async ({ setSubjects }: fetchSubjectsProps) => { + try { + const resSubjects = await fetch("http://localhost:8000/subjects/"); + if (resSubjects.ok) { + const subJson: Subject[] = await resSubjects.json(); + setSubjects(subJson || []); + } + } catch (error) { + console.error("Error fetching subjects:", error); + } +}; Index: frontend/src/api/user.ts =================================================================== --- frontend/src/api/user.ts (revision 650c45e5d67db4e6dcb8639ca9b69d914b6ba2aa) +++ frontend/src/api/user.ts (revision 650c45e5d67db4e6dcb8639ca9b69d914b6ba2aa) @@ -0,0 +1,17 @@ +import { Dispatch, SetStateAction } from "react"; +import { User } from "../context/AuthContext"; +import axiosInstance from "./axiosInstance"; + +export const fetchUser = async ( + token: string, + setUser: Dispatch> +) => { + try { + const response = await axiosInstance.get("/auth/user/", { + headers: { Authorization: `Bearer ${token}` }, + }); + setUser(response.data); + } catch (error) { + console.error("Could not fetch user data on load", error); + } +}; Index: frontend/src/components/Navbar.tsx =================================================================== --- frontend/src/components/Navbar.tsx (revision 666344defb4cc10ccede9c512f0e4bb0d5328196) +++ frontend/src/components/Navbar.tsx (revision 650c45e5d67db4e6dcb8639ca9b69d914b6ba2aa) @@ -4,4 +4,5 @@ import { toast } from "react-toastify"; import IOimage from "../assets/IOLogo.png"; +import { usePreferences } from "../context/PreferencesContext"; import { useRecommendations } from "../context/RecommendationsContext"; import { useAuth } from "../hooks/useAuth"; @@ -12,4 +13,5 @@ const [, setRecommendations] = useRecommendations(); const { isAuthenticated, logout, login, user } = useAuth(); + const { setFavoriteIds, setLikedIds, setDislikedIds } = usePreferences(); const navigate = useNavigate(); const profileMenuRef = useRef(null); @@ -34,4 +36,7 @@ logout(); setRecommendations([]); + setFavoriteIds(new Set()); + setLikedIds(new Set()); + setDislikedIds(new Set()); navigate("/"); toast.success("Успешно сте одјавени!"); Index: frontend/src/components/StudentForm/StudentForm.tsx =================================================================== --- frontend/src/components/StudentForm/StudentForm.tsx (revision 666344defb4cc10ccede9c512f0e4bb0d5328196) +++ frontend/src/components/StudentForm/StudentForm.tsx (revision 650c45e5d67db4e6dcb8639ca9b69d914b6ba2aa) @@ -2,4 +2,5 @@ import { toast } from "react-toastify"; import axiosInstance from "../../api/axiosInstance"; +import { fetchSubjects } from "../../api/subjects"; import { EVALUATIONS, @@ -90,4 +91,5 @@ const [showProfessors, setShowProfessors] = useState(false); const [showAssistants, setShowAssistants] = useState(false); + const [, setSubjects] = useSubjects(); const [distinctSubjectData, setDistinctSubjectData] = useState({ @@ -105,4 +107,7 @@ // Update form when formData changes (e.g., after fetching user data) useEffect(() => { + if (!subjects || subjects.length === 0) { + fetchSubjects({ setSubjects }); + } const fetchFormData = async (token: string) => { try { Index: frontend/src/components/SubjectCatalog/FavoriteButton.tsx =================================================================== --- frontend/src/components/SubjectCatalog/FavoriteButton.tsx (revision 666344defb4cc10ccede9c512f0e4bb0d5328196) +++ frontend/src/components/SubjectCatalog/FavoriteButton.tsx (revision 650c45e5d67db4e6dcb8639ca9b69d914b6ba2aa) @@ -21,10 +21,11 @@ interface FavoriteButtonProps { subjectId: number; + isLoading?: boolean; } -const FavoriteButton = ({ subjectId }: FavoriteButtonProps) => { - const { favoriteIds, toggleFavorite, isLoading } = usePreferences(); +const FavoriteButton = ({ subjectId, isLoading }: FavoriteButtonProps) => { + const { favoriteIds, toggleFavorite } = usePreferences(); const { isAuthenticated } = useAuth(); - const isFavorite = favoriteIds.has(subjectId); + const isFavorite = favoriteIds?.has(subjectId) || false; const isFilled = isAuthenticated && isFavorite; return ( @@ -32,5 +33,5 @@ onClick={() => toggleFavorite(subjectId)} disabled={isLoading || !isAuthenticated} - className={`group relative flex items-center justify-center transition-all duration-200 p-2 rounded-full + className={`relative flex items-center justify-center transition-all duration-200 p-2 rounded-full ${!isAuthenticated ? "cursor-not-allowed" : ""} ${isFavorite ? "text-red-500" : "text-gray-400"} Index: frontend/src/components/SubjectCatalog/SubjectCard.tsx =================================================================== --- frontend/src/components/SubjectCatalog/SubjectCard.tsx (revision 666344defb4cc10ccede9c512f0e4bb0d5328196) +++ frontend/src/components/SubjectCatalog/SubjectCard.tsx (revision 650c45e5d67db4e6dcb8639ca9b69d914b6ba2aa) @@ -11,4 +11,5 @@ isFirst?: boolean; isRecommended?: boolean; + isLoading?: boolean; } @@ -20,4 +21,5 @@ isFirst = false, isRecommended = false, + isLoading = false, }: SubjectCardProps) => { return ( @@ -52,5 +54,5 @@ - + {canReview && ( <> Index: frontend/src/components/SubjectCatalog/SubjectCatalog.tsx =================================================================== --- frontend/src/components/SubjectCatalog/SubjectCatalog.tsx (revision 666344defb4cc10ccede9c512f0e4bb0d5328196) +++ frontend/src/components/SubjectCatalog/SubjectCatalog.tsx (revision 650c45e5d67db4e6dcb8639ca9b69d914b6ba2aa) @@ -1,4 +1,8 @@ import { useEffect, useMemo, useState } from "react"; +import { fetchPreferences } from "../../api/preferences"; +import { fetchSubjects } from "../../api/subjects"; +import { usePreferences } from "../../context/PreferencesContext"; import { useSubjects } from "../../context/SubjectsContext"; +import { useAuth } from "../../hooks/useAuth"; import { Filters, Subject } from "../types"; import FilterSidebar from "./FilterSidebar"; @@ -14,5 +18,6 @@ } from "./utils"; const SubjectCatalog = () => { - const [subjects] = useSubjects(); + const { accessToken } = useAuth(); + const [subjects, setSubjects] = useSubjects(); const [visibleCourses, setVisibleCourses] = useState(12); const [searchTerm, setSearchTerm] = useState(""); @@ -44,4 +49,13 @@ subjects, }); + const { setDislikedIds, setLikedIds, setFavoriteIds } = usePreferences(); + + useEffect(() => { + fetchPreferences({ + setDislikedIds, + setFavoriteIds, + setLikedIds, + }); + }, [accessToken]); useEffect(() => { @@ -76,4 +90,10 @@ setShowModal(true); }; + + useEffect(() => { + if (!subjects || subjects.length === 0) { + fetchSubjects({ setSubjects }); + } + }, []); const closeModal = () => { Index: frontend/src/context/AuthContext.tsx =================================================================== --- frontend/src/context/AuthContext.tsx (revision 666344defb4cc10ccede9c512f0e4bb0d5328196) +++ frontend/src/context/AuthContext.tsx (revision 650c45e5d67db4e6dcb8639ca9b69d914b6ba2aa) @@ -1,22 +1,20 @@ -import { createContext } from 'react'; -import { StudentData } from '../components/types'; +import { createContext } from "react"; +import { StudentData } from "../components/types"; export interface User { - full_name: string; - user_type: string; + full_name: string; + user_type: string; } export interface AuthContextType { - accessToken: string | null; - formData: StudentData | null; - setFormData: (data: StudentData | null) => void; - user: User | null; - login: (accessToken: string, refreshToken: string, userData: User) => void; - logout: () => void; - isAuthenticated: boolean; - loading: boolean; + accessToken: string | null; + formData: StudentData | null; + setFormData: (data: StudentData | null) => void; + user: User | null; + login: (accessToken: string, refreshToken: string, userData: User) => void; + logout: () => void; + isAuthenticated: boolean; + loading: boolean; } const AuthContext = createContext(undefined); export default AuthContext; - - Index: frontend/src/context/AuthProvider.tsx =================================================================== --- frontend/src/context/AuthProvider.tsx (revision 666344defb4cc10ccede9c512f0e4bb0d5328196) +++ frontend/src/context/AuthProvider.tsx (revision 650c45e5d67db4e6dcb8639ca9b69d914b6ba2aa) @@ -215,18 +215,4 @@ }, []); - // const fetchFormData = useCallback(async (token: string) => { - // try { - // const response = await axiosInstance.get("/auth/form/", { - // headers: { Authorization: `Bearer ${token}` }, - // }); - // setFormData(response.data); - // } catch (error) { - // console.error("Could not fetch user form data", error); - // if ((error as any).response?.status !== 401) { - // toast.error("Could not load form data."); - // } - // } - // }, []); - const login = useCallback( async (newAccessToken: string, newRefreshToken: string, userData: User) => { @@ -252,15 +238,10 @@ setRefreshToken(localStorage.getItem("refresh")); scheduleProactiveRefresh(token); - await Promise.all([fetchUser(token)]); - // await Promise.all([fetchUser(token), fetchFormData(token)]); + await fetchUser(token); } setLoading(false); }; initializeAuth(); - }, [ - fetchUser, - // fetchFormData, - scheduleProactiveRefresh, - ]); + }, [scheduleProactiveRefresh, fetchUser]); const contextValue: AuthContextType = { Index: frontend/src/context/PreferencesContext.tsx =================================================================== --- frontend/src/context/PreferencesContext.tsx (revision 666344defb4cc10ccede9c512f0e4bb0d5328196) +++ frontend/src/context/PreferencesContext.tsx (revision 650c45e5d67db4e6dcb8639ca9b69d914b6ba2aa) @@ -8,16 +8,14 @@ import { toast } from "react-toastify"; import axiosInstance from "../api/axiosInstance"; -import { useAuth } from "../hooks/useAuth"; interface PreferencesContextType { - favoriteIds: Set; - setFavoriteIds: React.Dispatch>>; - likedIds: Set; - setLikedIds: React.Dispatch>>; - dislikedIds: Set; - setDislikedIds: React.Dispatch>>; + favoriteIds: Set | undefined; + setFavoriteIds: React.Dispatch | undefined>>; + likedIds: Set | undefined; + setLikedIds: React.Dispatch | undefined>>; + dislikedIds: Set | undefined; + setDislikedIds: React.Dispatch | undefined>>; toggleFavorite: (subjectId: number) => Promise; toggleLike: (subjectId: number) => Promise; toggleDislike: (subjectId: number) => Promise; - isLoading: boolean; } @@ -27,9 +25,11 @@ export const PreferencesProvider = ({ children }: { children: ReactNode }) => { - const { accessToken } = useAuth(); - const [isLoading, setIsLoading] = useState(true); - const [favoriteIds, setFavoriteIds] = useState>(new Set()); - const [likedIds, setLikedIds] = useState>(new Set()); - const [dislikedIds, setDislikedIds] = useState>(new Set()); + const [favoriteIds, setFavoriteIds] = useState | undefined>( + undefined + ); + const [likedIds, setLikedIds] = useState | undefined>(undefined); + const [dislikedIds, setDislikedIds] = useState | undefined>( + undefined + ); const toggleFavorite = useCallback( @@ -63,5 +63,5 @@ const toggleLike = useCallback( async (subjectId: number) => { - const wasDisliked = dislikedIds.has(subjectId); + const wasDisliked = dislikedIds?.has(subjectId); if (wasDisliked) { const newDisliked = new Set(dislikedIds); @@ -102,5 +102,5 @@ const toggleDislike = useCallback( async (subjectId: number) => { - const wasLiked = likedIds.has(subjectId); + const wasLiked = likedIds?.has(subjectId); if (wasLiked) { const newLiked = new Set(likedIds); @@ -149,5 +149,4 @@ toggleLike, toggleDislike, - isLoading, }; Index: frontend/src/context/SubjectsContext.tsx =================================================================== --- frontend/src/context/SubjectsContext.tsx (revision 666344defb4cc10ccede9c512f0e4bb0d5328196) +++ frontend/src/context/SubjectsContext.tsx (revision 650c45e5d67db4e6dcb8639ca9b69d914b6ba2aa) @@ -6,5 +6,4 @@ useContext, useState, - useEffect, } from "react"; import { Subject } from "../components/types"; @@ -21,20 +20,4 @@ const [subjects, setSubjects] = useState([]); - useEffect(() => { - const fetchSubjects = async () => { - try { - const resSubjects = await fetch("http://localhost:8000/subjects/"); - if (resSubjects.ok) { - const subJson: Subject[] = await resSubjects.json(); - setSubjects(subJson || []); - } - } catch (error) { - console.error("Error fetching subjects:", error); - } - }; - - fetchSubjects(); - }, []); - return ( Index: frontend/src/pages/Recommendations.tsx =================================================================== --- frontend/src/pages/Recommendations.tsx (revision 666344defb4cc10ccede9c512f0e4bb0d5328196) +++ frontend/src/pages/Recommendations.tsx (revision 650c45e5d67db4e6dcb8639ca9b69d914b6ba2aa) @@ -2,4 +2,6 @@ import { useNavigate } from "react-router-dom"; import axiosInstance from "../api/axiosInstance"; +import { fetchPreferences } from "../api/preferences"; +import { fetchSubjects } from "../api/subjects"; import SubjectCard from "../components/SubjectCatalog/SubjectCard"; import SubjectModal from "../components/SubjectCatalog/SubjectModal"; @@ -13,11 +15,12 @@ const Recommendations = () => { const navigate = useNavigate(); - const { setFavoriteIds, setLikedIds, setDislikedIds } = usePreferences(); + const { setDislikedIds, setFavoriteIds, setLikedIds } = usePreferences(); + const [isLoading, setIsLoading] = useState(false); const { formData } = useAuth(); const { accessToken } = useAuth(); - const [subjects] = useSubjects(); + const [subjects, setSubjects] = useSubjects(); const [recommendations, setRecommendations] = useRecommendations(); + const [recommendationsLoaded, setRecommendationsLoaded] = useState(true); const [season_, setSeason] = useState<"winter" | "summer" | "all">("all"); - const [isLoading, setIsLoading] = useState(false); const [showModal, setShowModal] = useState(false); const [hasSearched, setHasSearched] = useState(false); @@ -28,6 +31,12 @@ }; + useEffect(() => { + if (!subjects || subjects.length === 0) { + fetchSubjects({ setSubjects }); + } + }, []); + const fetchRecommendations = async () => { - setIsLoading(true); + setRecommendationsLoaded(false); try { const season = mapToSeasonInt(season_); @@ -39,5 +48,5 @@ console.error("Error fetching recommendations:", error); } finally { - setIsLoading(false); + setRecommendationsLoaded(true); setHasSearched(true); const container = document.querySelector(".flex-1.p-8.overflow-y-auto"); @@ -47,16 +56,4 @@ } }; - - // (new) Now we use the context to get the subjects, but we can also fetch them directly from the backend if needed! - // (old) need to fetch subject data so that we can compare the subject IDs (prerequisites store IDs, but we need names) in the modals for the recommendations - // useEffect(() => { - // const fetchData = async () => { - // const response = await fetch("http://localhost:8000/subjects"); - // const data = await response.json(); - // setSubjects(data); - // }; - // fetchData(); - // if (subjects.length == 0) fetchData(); - // }, []); const subjectIdToNameMap = useMemo(() => { @@ -104,26 +101,10 @@ useEffect(() => { - const accessToken = localStorage.getItem("access"); - if (accessToken) { - setIsLoading(true); - axiosInstance - .get<{ - favorite_ids: number[]; - liked_ids: number[]; - disliked_ids: number[]; - }>("/student/preferences/") - .then((response) => { - setFavoriteIds(new Set(response.data.favorite_ids || [])); - setLikedIds(new Set(response.data.liked_ids || [])); - setDislikedIds(new Set(response.data.disliked_ids || [])); - }) - .catch((error) => console.error("Failed to fetch preferences:", error)) - .finally(() => setIsLoading(false)); - } else { - setFavoriteIds(new Set()); - setLikedIds(new Set()); - setDislikedIds(new Set()); - setIsLoading(false); - } + fetchPreferences({ + setIsLoading, + setDislikedIds, + setFavoriteIds, + setLikedIds, + }); }, [accessToken]); @@ -163,12 +144,12 @@