From 9172d1eba044c24d1f12305d3a91edf77f202af5 Mon Sep 17 00:00:00 2001
From: Justus Kluge <justus.kluge@aikq.de>
Date: Fri, 4 Apr 2025 09:04:44 +0200
Subject: [PATCH 1/7] Small Fixes and Caching

---
 my-app/firebase.js                            | 42 +++++++++++++++++++
 .../SideBarComponents/SliderField.jsx         |  2 +-
 .../SideBarComponents/ToggleField.jsx         | 14 +++----
 .../SideBarComponents/UploadField.jsx         |  4 +-
 my-app/src/views/SidebarView.jsx              |  4 +-
 5 files changed, 54 insertions(+), 12 deletions(-)

diff --git a/my-app/firebase.js b/my-app/firebase.js
index 161896cb..666de8b9 100644
--- a/my-app/firebase.js
+++ b/my-app/firebase.js
@@ -24,8 +24,49 @@ googleProvider.addScope("email");
 
 // fetches all relevant information to create the model
 async function firebaseToModel(model) {
+    // Load metadata from localStorage
+    const cachedMetadata = JSON.parse(localStorage.getItem("coursesMetadata"));
+    const firebaseTimestamp = await fetchLastUpdatedTimestamp();
+    // check if up to date
+    if (cachedMetadata && cachedMetadata.timestamp === firebaseTimestamp) {
+        console.log("Using cached courses...");
+        let mergedCourses = [];
+        for (let i = 0; i < cachedMetadata.parts; i++) {
+            const part = JSON.parse(localStorage.getItem(`coursesPart${i}`));
+            if (part) 
+                mergedCourses = mergedCourses.concat(part);
+        }
+        model.setCourses(mergedCourses);
+        return;
+    }
+
+    // Fetch if outdated or missing
+    console.log("Fetching courses from Firebase...");
     const courses = await fetchAllCourses();
     model.setCourses(courses);
+    saveCoursesInChunks(courses, firebaseTimestamp);
+}
+
+function saveCoursesInChunks(courses, timestamp) {
+    const parts = 3; // Adjust this based on course size
+    const chunkSize = Math.ceil(courses.length / parts);
+
+    for (let i = 0; i < parts; i++) {
+        const chunk = courses.slice(i * chunkSize, (i + 1) * chunkSize);
+        localStorage.setItem(`coursesPart${i}`, JSON.stringify(chunk));
+    }
+    localStorage.setItem("coursesMetadata", JSON.stringify({ parts, timestamp }));
+}
+
+async function updateLastUpdatedTimestamp() {
+    const timestampRef = ref(db, "metadata/lastUpdated");
+    await set(timestampRef, Date.now());
+}
+
+async function fetchLastUpdatedTimestamp() {
+    const timestampRef = ref(db, "metadata/lastUpdated");
+    const snapshot = await get(timestampRef);
+    return snapshot.exists() ? snapshot.val() : 0;
 }
 
 export function connectToFirebase(model) {
@@ -40,6 +81,7 @@ export async function addCourse(course){
         return;
     const myRef = ref(db, `courses/${course.code}`);
     await set(myRef, course);
+    updateLastUpdatedTimestamp();
 }
 
 export async function fetchAllCourses() {
diff --git a/my-app/src/views/Components/SideBarComponents/SliderField.jsx b/my-app/src/views/Components/SideBarComponents/SliderField.jsx
index 165e1936..37eb5ec5 100644
--- a/my-app/src/views/Components/SideBarComponents/SliderField.jsx
+++ b/my-app/src/views/Components/SideBarComponents/SliderField.jsx
@@ -45,7 +45,7 @@ export default function UploadField(props) {
                     <p className='text-sm opacity-50'> - filter description</p>
                 </div>
             </div>
-            <div class="flex flex-col sm:inline-flex sm:flex-row rounded-lg shadow-2xs w-full 
+            <div className="flex flex-col sm:inline-flex sm:flex-row rounded-lg shadow-2xs w-full 
             items-center font-medium text-white bg-[#aba8e0] border border-gray-200 p-3">
                 <div className="flex-1 justify-between pl-2">
                     <span
diff --git a/my-app/src/views/Components/SideBarComponents/ToggleField.jsx b/my-app/src/views/Components/SideBarComponents/ToggleField.jsx
index 76c14a92..95cc050a 100644
--- a/my-app/src/views/Components/SideBarComponents/ToggleField.jsx
+++ b/my-app/src/views/Components/SideBarComponents/ToggleField.jsx
@@ -12,14 +12,14 @@ export default function ToggleField({field1, field2 }) {
                     <p className='text-sm opacity-50'> - filter description</p>
                 </div>
             </div>
-            <div class="flex flex-col sm:flex-row md:flex-row rounded-lg shadow-2xs w-full items-center
+            <div className="flex flex-col sm:flex-row md:flex-row rounded-lg shadow-2xs w-full items-center
              font-medium text-white bg-[#aba8e0] ">
-                <label class="flex-auto py-3 px-4 inline-flex gap-x-2 -mt-px -ms-px 
+                <label className="flex-auto py-3 px-4 inline-flex gap-x-2 -mt-px -ms-px 
                 first:rounded-t-md last:rounded-b-md sm:first:rounded-s-md sm:mt-0 sm:first:ms-0 s
                 m:first:rounded-se-none sm:last:rounded-es-none sm:last:rounded-e-md text-sm font-medium
                 focus:z-10 border border-gray-200  shadow-2xs cursor-pointer">
-                    <input type="checkbox" value="" class="sr-only peer" />
-                    <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none 
+                    <input type="checkbox" value="" className="sr-only peer" />
+                    <div className="relative w-11 h-6 bg-gray-200 peer-focus:outline-none 
                     peer-focus:ring-4 peer-focus:ring-blue-300 
                     rounded-full peer  peer-checked:after:translate-x-full
                     rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-['']
@@ -28,12 +28,12 @@ export default function ToggleField({field1, field2 }) {
                       peer-checked:bg-violet-500 "></div>
                     <span>{field1}</span>
                 </label>
-                <label class="flex-auto py-3 px-4 inline-flex gap-x-2 -mt-px -ms-px 
+                <label className="flex-auto py-3 px-4 inline-flex gap-x-2 -mt-px -ms-px 
                 first:rounded-t-md last:rounded-b-md sm:first:rounded-s-md sm:mt-0 sm:first:ms-0 s
                 m:first:rounded-se-none sm:last:rounded-es-none sm:last:rounded-e-md text-sm font-medium
                 focus:z-10 border border-gray-200  shadow-2xs cursor-pointer">
-                    <input type="checkbox" value="" class="sr-only peer" />
-                    <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 
+                    <input type="checkbox" value="" className="sr-only peer" />
+                    <div className="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 
                     peer-focus:ring-blue-300  rounded-full peer
                       peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full
                       peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px]
diff --git a/my-app/src/views/Components/SideBarComponents/UploadField.jsx b/my-app/src/views/Components/SideBarComponents/UploadField.jsx
index 611a0235..c8a22486 100644
--- a/my-app/src/views/Components/SideBarComponents/UploadField.jsx
+++ b/my-app/src/views/Components/SideBarComponents/UploadField.jsx
@@ -176,11 +176,11 @@ export default function UploadField(props) {
     return (
         <div className='pb-5 px-8 '>
             <div className="flex items-center justify-center ">
-                <label for="PDF-Scraper-Input" className="flex flex-col items-center justify-center w-full h-50 border-2 
+                <label htmlFor="PDF-Scraper-Input" className="flex flex-col items-center justify-center w-full h-50 border-2 
                  border-gray-300 border-dashed rounded-lg cursor-pointer bg-[#aba8e0] hover:bg-gray-400">
                     <div className="flex flex-col items-center justify-center pt-5 pb-6">
                         <svg className="w-8 h-8 mb-4 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 16">
-                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2" />
+                            <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2" />
                         </svg>
                         <p className="mb-2 text-sm "><span className="font-semibold">Click to upload</span> or drag and drop</p>
                         <p className="text-xs">KTH trnascript of records in PDF format</p>
diff --git a/my-app/src/views/SidebarView.jsx b/my-app/src/views/SidebarView.jsx
index 9d2170b3..6786af1e 100644
--- a/my-app/src/views/SidebarView.jsx
+++ b/my-app/src/views/SidebarView.jsx
@@ -15,8 +15,8 @@ function SidebarView(props) {
   [&::-webkit-scrollbar]:opacity-2
   [&::-webkit-scrollbar-track]:bg-gray-100
   [&::-webkit-scrollbar-thumb]:bg-gray-300'>
-                <div class="z-10 w-100% rounded-lg justify-center" >
-                    <h6 class="m-2 text-lg font-medium text-white text-center">
+                <div className="z-10 w-100% rounded-lg justify-center" >
+                    <h6 className="m-2 text-lg font-medium text-white text-center">
                         Filters 
                     </h6>
                     <ToggleField

From 5b8e986e723cdfa1e20c81f171b400cf965148ff Mon Sep 17 00:00:00 2001
From: Justus Kluge <justus.kluge@aikq.de>
Date: Wed, 9 Apr 2025 15:21:46 +0200
Subject: [PATCH 2/7] Changes to favourites

---
 Dockerfile                                   |   1 +
 my-app/firebase.js                           | 226 +++++++++++--------
 my-app/src/model.js                          |  18 +-
 my-app/src/presenters/SearchbarPresenter.jsx |   7 +-
 4 files changed, 137 insertions(+), 115 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index 042c8c65..69183eae 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -4,5 +4,6 @@ COPY my-app .
 RUN npm ci
 ARG CI=false
 RUN if [ "$CI" = "true" ]; then npm run build; fi
+RUN if [ "$CI" = "true" ]; then npm run lint; fi
 EXPOSE 5173
 CMD ["npm", "run", "dev"]
diff --git a/my-app/firebase.js b/my-app/firebase.js
index 11221da1..5c8a05d9 100644
--- a/my-app/firebase.js
+++ b/my-app/firebase.js
@@ -1,18 +1,19 @@
 import { initializeApp } from "firebase/app";
 import { getAuth, GoogleAuthProvider, onAuthStateChanged } from "firebase/auth";
 import { get, getDatabase, ref, set } from "firebase/database";
+import { reaction } from "mobx";
 
 // Your web app's Firebase configuration
 const firebaseConfig = {
-    apiKey: "AIzaSyCBckVI9nhAP62u5jZJW3F4SLulUv7znis",
-    authDomain: "findmynextcourse.firebaseapp.com",
-    databaseURL: "https://findmynextcourse-default-rtdb.europe-west1.firebasedatabase.app",
-    projectId: "findmynextcourse",
-    storageBucket: "findmynextcourse.firebasestorage.app",
-    messagingSenderId: "893484115963",
-    appId: "1:893484115963:web:59ac087d280dec919ccd5e"
-  };
-  
+	apiKey: "AIzaSyCBckVI9nhAP62u5jZJW3F4SLulUv7znis",
+	authDomain: "findmynextcourse.firebaseapp.com",
+	databaseURL:
+		"https://findmynextcourse-default-rtdb.europe-west1.firebasedatabase.app",
+	projectId: "findmynextcourse",
+	storageBucket: "findmynextcourse.firebasestorage.app",
+	messagingSenderId: "893484115963",
+	appId: "1:893484115963:web:59ac087d280dec919ccd5e",
+};
 
 // Initialize Firebase
 const app = initializeApp(firebaseConfig);
@@ -21,119 +22,146 @@ export const db = getDatabase(app);
 export const googleProvider = new GoogleAuthProvider();
 googleProvider.addScope("profile");
 googleProvider.addScope("email");
+let noUpload = false;
+
+export function connectToFirebase(model) {
+    loadCoursesFromCacheOrFirebase(model);
+	onAuthStateChanged(auth, (user) => {
+		model.setUser(user);
+        if (!user) return;
+	});
+	firebaseToModel(model);
+}
 
 // fetches all relevant information to create the model
 async function firebaseToModel(model) {
-    // Load metadata from localStorage
-    const cachedMetadata = JSON.parse(localStorage.getItem("coursesMetadata"));
-    const firebaseTimestamp = await fetchLastUpdatedTimestamp();
-    // check if up to date
-    if (cachedMetadata && cachedMetadata.timestamp === firebaseTimestamp) {
-        console.log("Using cached courses...");
-        let mergedCourses = [];
-        for (let i = 0; i < cachedMetadata.parts; i++) {
-            const part = JSON.parse(localStorage.getItem(`coursesPart${i}`));
-            if (part) 
-                mergedCourses = mergedCourses.concat(part);
-        }
-        model.setCourses(mergedCourses);
+	if (!model.user) 
         return;
-    }
+	const userRef = ref(db, `users/${model.user}`);
+	onValue(userRef, (snapshot) => {
+		if (!snapshot.exists()) 
+            return;
+		const data = snapshot.val();
+		noUpload = true;
+		if (data.favourites) 
+            model.setFavourite(data.favourites);
+		if (data.currentSearch) 
+            model.setCurrentSearch(data.currentSearch);
+		noUpload = false;
+	});
+}
 
-    // Fetch if outdated or missing
-    console.log("Fetching courses from Firebase...");
-    const courses = await fetchAllCourses();
-    model.setCourses(courses);
-    saveCoursesInChunks(courses, firebaseTimestamp);
+
+export function syncModelToFirebase(model) {
+	reaction(
+		() => ({
+			userId: model?.user,
+			favourites: toJS(model.favourites),
+			currentSearch: toJS(model.currentSearch),
+			// Add more per-user attributes here
+		}),
+		({ userId, favourites, currentSearch }) => {
+			if (noUpload || !userId) 
+                return;
+			const userRef = ref(db, `users/${userId}`);
+			const dataToSync = {
+				favourites,
+				currentSearch,
+			};
+
+			set(userRef, dataToSync)
+				.then(() => console.log("User model synced to Firebase"))
+				.catch(console.error);
+		}
+	);
 }
 
 function saveCoursesInChunks(courses, timestamp) {
-    const parts = 3; // Adjust this based on course size
-    const chunkSize = Math.ceil(courses.length / parts);
-
-    for (let i = 0; i < parts; i++) {
-        const chunk = courses.slice(i * chunkSize, (i + 1) * chunkSize);
-        localStorage.setItem(`coursesPart${i}`, JSON.stringify(chunk));
-    }
-    localStorage.setItem("coursesMetadata", JSON.stringify({ parts, timestamp }));
+	const parts = 3; // Adjust this based on course size
+	const chunkSize = Math.ceil(courses.length / parts);
+
+	for (let i = 0; i < parts; i++) {
+		const chunk = courses.slice(i * chunkSize, (i + 1) * chunkSize);
+		localStorage.setItem(`coursesPart${i}`, JSON.stringify(chunk));
+	}
+	localStorage.setItem("coursesMetadata", JSON.stringify({ parts, timestamp }));
 }
 
 async function updateLastUpdatedTimestamp() {
-    const timestampRef = ref(db, "metadata/lastUpdated");
-    await set(timestampRef, Date.now());
+	const timestampRef = ref(db, "metadata/lastUpdated");
+	await set(timestampRef, Date.now());
 }
 
 async function fetchLastUpdatedTimestamp() {
-    const timestampRef = ref(db, "metadata/lastUpdated");
-    const snapshot = await get(timestampRef);
-    return snapshot.exists() ? snapshot.val() : 0;
-}
-
-export function connectToFirebase(model) {
-    onAuthStateChanged(auth, (user) => {
-      model.setUser(user);
-    });
-    firebaseToModel(model);
+	const timestampRef = ref(db, "metadata/lastUpdated");
+	const snapshot = await get(timestampRef);
+	return snapshot.exists() ? snapshot.val() : 0;
 }
 
-export async function addCourse(course){
-    if(!course?.code)
-        return;
-    const myRef = ref(db, `courses/${course.code}`);
-    await set(myRef, course);
-    updateLastUpdatedTimestamp();
+export async function addCourse(course) {
+	if (!course?.code) return;
+	const myRef = ref(db, `courses/${course.code}`);
+	await set(myRef, course);
+	updateLastUpdatedTimestamp();
 }
 
 export async function fetchAllCourses() {
-    const myRef = ref(db, `courses`);
-    const snapshot = await get(myRef);
-
-    if (!snapshot.exists()) return [];
+	const myRef = ref(db, `courses`);
+	const snapshot = await get(myRef);
+	if (!snapshot.exists()) return [];
 
-    const value = snapshot.val(); // Firebase returns an object where keys are course IDs
-    const courses = [];
+	const value = snapshot.val(); // Firebase returns an object where keys are course IDs
+	const courses = [];
 
-    for (const id of Object.keys(value)) {
-        courses.push({ id, ...value[id] });
-    }
-
-    return courses;
+	for (const id of Object.keys(value)) {
+		courses.push({ id, ...value[id] });
+	}
+	return courses;
 }
 
-// Before: [ {courseCode: "CS101", name: "Intro to CS"}, {...} ]
-// After: { "CS101": { name: "Intro to CS" }, "CS102": {...} }
-
-
-export async function fetchCoursesSnapshot() {
-    const myRef = ref(db, `courses`);
-    const snapshot = await get(myRef);
-    if (!snapshot.exists()) return {};  // Return empty object instead of array
-
-    return snapshot.val();  // Return the object directly
+async function loadCoursesFromCacheOrFirebase(model) {
+	// Load metadata from localStorage
+	const cachedMetadata = JSON.parse(localStorage.getItem("coursesMetadata"));
+	const firebaseTimestamp = await fetchLastUpdatedTimestamp();
+	// check if up to date
+	if (cachedMetadata && cachedMetadata.timestamp === firebaseTimestamp) {
+		console.log("Using cached courses...");
+		let mergedCourses = [];
+		for (let i = 0; i < cachedMetadata.parts; i++) {
+			const part = JSON.parse(localStorage.getItem(`coursesPart${i}`));
+			if (part) mergedCourses = mergedCourses.concat(part);
+		}
+		model.setCourses(mergedCourses);
+		return;
+	}
+
+	// Fetch if outdated or missing
+	console.log("Fetching courses from Firebase...");
+	const courses = await fetchAllCourses();
+	model.setCourses(courses);
+	saveCoursesInChunks(courses, firebaseTimestamp);
 }
 
-export async function saveJSONCoursesToFirebase(model, data){
-    if(!data || !model){
-        console.log("no model or data")
-        return;
-    }
-    const entries = Object.entries(data);
-    entries.forEach(entry => {
-        const course = {
-            code : entry[1].code ,
-            name: entry[1]?.name ?? "",
-            location: entry[1]?.location ?? "",
-            department: entry[1]?.department ?? "",
-            language: entry[1]?.language ?? "",
-            description: entry[1]?.description ?? "",
-            academicLevel: entry[1]?.academic_level ?? "",
-            period: entry[1]?.period ?? "",
-            credits: entry[1]?.credits ?? 0,
-            //lectureCount:entry[1].courseLectureCount,
-            //prerequisites:entry.coursePrerequisites
-            }
-            model.addCourse(course);
-            
-    });
+export async function saveJSONCoursesToFirebase(model, data) {
+	if (!data || !model) {
+		console.log("no model or data");
+		return;
+	}
+	const entries = Object.entries(data);
+	entries.forEach((entry) => {
+		const course = {
+			code: entry[1].code,
+			name: entry[1]?.name ?? "",
+			location: entry[1]?.location ?? "",
+			department: entry[1]?.department ?? "",
+			language: entry[1]?.language ?? "",
+			description: entry[1]?.description ?? "",
+			academicLevel: entry[1]?.academic_level ?? "",
+			period: entry[1]?.period ?? "",
+			credits: entry[1]?.credits ?? 0,
+			//lectureCount:entry[1].courseLectureCount,
+			//prerequisites:entry.coursePrerequisites
+		};
+		model.addCourse(course);
+	});
 }
-
diff --git a/my-app/src/model.js b/my-app/src/model.js
index d98c2e5f..513b20d5 100644
--- a/my-app/src/model.js
+++ b/my-app/src/model.js
@@ -2,21 +2,15 @@ import { addCourse } from "../firebase";
 
 export const model = {
     user: undefined,
-    currentCourse: undefined,
     currentSearch: [],
     courses: [],
     favourites: [],
-    isReady: false,
 
     setUser(user) {
         if (!this.user)
             this.user = user;
     },
 
-    setCurrentCourse(course){
-        this.currentCourse = course;
-    },
-
     setCurrentSearch(searchResults){
         this.currentSearch = searchResults;
     },
@@ -33,6 +27,9 @@ export const model = {
             console.error("Error adding course:", error);
         }
     },
+    setFavourite(favorites){
+        this.favourites = favorites;
+    },
 
     addFavourite(course) {
         this.favourites = [...this.favourites, course];
@@ -68,13 +65,4 @@ export const model = {
             this.addCourse(course);
         });
     },
-
-    searchCourses(query) {
-        const searchResults = this.courses.filter(course =>
-            course.code.toLowerCase() === query.toLowerCase() ||
-            course.name.toLowerCase().includes(query.toLowerCase()) ||
-            course.description.toLowerCase().includes(query.toLowerCase())
-        );
-        this.setCurrentSearch(searchResults);
-    }
 };
diff --git a/my-app/src/presenters/SearchbarPresenter.jsx b/my-app/src/presenters/SearchbarPresenter.jsx
index d9a48e3d..82c16324 100644
--- a/my-app/src/presenters/SearchbarPresenter.jsx
+++ b/my-app/src/presenters/SearchbarPresenter.jsx
@@ -4,7 +4,12 @@ import SearchbarView from "../views/SearchbarView.jsx";
 
 const SearchbarPresenter = observer(({ model }) => {
     const searchCourses = (query) => {
-        model.searchCourses(query);
+        const searchResults = model.courses.filter(course =>
+            course.code.toLowerCase() === query.toLowerCase() ||
+            course.name.toLowerCase().includes(query.toLowerCase()) ||
+            course.description.toLowerCase().includes(query.toLowerCase())
+        );
+        model.setCurrentSearch(searchResults);
     }
 
     const removeFavourite = (course) => {

From b2bad771a5e80a452ed371dfe85078a3b022ecd4 Mon Sep 17 00:00:00 2001
From: Justus Kluge <justus.kluge@aikq.de>
Date: Wed, 9 Apr 2025 15:33:15 +0200
Subject: [PATCH 3/7] Persistance

---
 my-app/firebase.js                                 | 14 +++++++++-----
 .../Components/SideBarComponents/UploadField.jsx   |  3 +++
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/my-app/firebase.js b/my-app/firebase.js
index 5c8a05d9..551ee5a9 100644
--- a/my-app/firebase.js
+++ b/my-app/firebase.js
@@ -1,7 +1,7 @@
 import { initializeApp } from "firebase/app";
 import { getAuth, GoogleAuthProvider, onAuthStateChanged } from "firebase/auth";
-import { get, getDatabase, ref, set } from "firebase/database";
-import { reaction } from "mobx";
+import { get, getDatabase, ref, set, onValue } from "firebase/database";
+import { reaction, toJS } from "mobx";
 
 // Your web app's Firebase configuration
 const firebaseConfig = {
@@ -27,10 +27,14 @@ let noUpload = false;
 export function connectToFirebase(model) {
     loadCoursesFromCacheOrFirebase(model);
 	onAuthStateChanged(auth, (user) => {
-		model.setUser(user);
-        if (!user) return;
+		if (user) {
+			model.setUser(user.uid); // Set the user ID once authenticated
+			firebaseToModel(model);  // Set up listeners for user-specific data
+			syncModelToFirebase(model);  // Start syncing changes to Firebase
+		} else {
+			model.setUser(null);  // If no user, clear user-specific data
+		}
 	});
-	firebaseToModel(model);
 }
 
 // fetches all relevant information to create the model
diff --git a/my-app/src/views/Components/SideBarComponents/UploadField.jsx b/my-app/src/views/Components/SideBarComponents/UploadField.jsx
index 26104c6b..495b393a 100644
--- a/my-app/src/views/Components/SideBarComponents/UploadField.jsx
+++ b/my-app/src/views/Components/SideBarComponents/UploadField.jsx
@@ -3,6 +3,9 @@ import CourseTranscriptList from './CourseTranscriptList';
 //import * as scraper from '../../../../src/scripts/transcript-scraper/transcript-scraper.js';
 import { useState } from "react";
 
+export default function UploadField(props) {
+
+
     const [isDragging, setIsDragging] = useState(false);
 
     const handleDragOver = (event) => {

From f8d0d0f0c9a6f4afb38d030bdb7c65ae9b431338 Mon Sep 17 00:00:00 2001
From: Justus Kluge <justus.kluge@aikq.de>
Date: Wed, 9 Apr 2025 15:49:56 +0200
Subject: [PATCH 4/7] Lint Annotations

---
 my-app/src/pages/App.jsx                                        | 2 --
 my-app/src/presenters/ListViewPresenter.jsx                     | 2 +-
 my-app/src/presenters/UploadTranscriptPresenter.jsx             | 1 -
 my-app/src/views/Components/CoursePagePopup.jsx                 | 2 +-
 .../src/views/Components/PrerequisiteTreeComponents/BoxTest.jsx | 2 +-
 5 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/my-app/src/pages/App.jsx b/my-app/src/pages/App.jsx
index a0c0df32..f19ec871 100644
--- a/my-app/src/pages/App.jsx
+++ b/my-app/src/pages/App.jsx
@@ -5,8 +5,6 @@ import { ListViewPresenter } from '../presenters/ListViewPresenter.jsx';
 import {model} from '/src/model.js';
 
 function App() {
-	const [isPopupOpen, setIsPopupOpen] = useState(false);
-
 	return (
 		<div className="flex h-screen w-screen">
 			<div className="flex-auto w-40% h-full bg-gradient-to-t from-[#4f3646] to-[#6747c0]">
diff --git a/my-app/src/presenters/ListViewPresenter.jsx b/my-app/src/presenters/ListViewPresenter.jsx
index d51fbff7..ef29cdc3 100644
--- a/my-app/src/presenters/ListViewPresenter.jsx
+++ b/my-app/src/presenters/ListViewPresenter.jsx
@@ -10,7 +10,7 @@ const ListViewPresenter = observer(({ model }) => {
     const [isPopupOpen, setIsPopupOpen] = useState(false);
     const [selectedCourse, setSelectedCourse] = useState(null);
     const preP = <PrerequisitePresenter model={model} selectedCourse={selectedCourse}/>
-    const popup = <CoursePagePopup isOpen={isPopupOpen} onClose={() => setIsPopupOpen(false)} course={selectedCourse} prerequisiteTree={preP}/>
+    const popup = <CoursePagePopup isOpen={isPopupOpen} onClose={() => setIsPopupOpen(false)} course={selectedCourse} handleFavouriteClick={handleFavouriteClick} prerequisiteTree={preP}/>
 
     const addFavourite = (course) => {
         model.addFavourite(course);
diff --git a/my-app/src/presenters/UploadTranscriptPresenter.jsx b/my-app/src/presenters/UploadTranscriptPresenter.jsx
index 40fa1bb7..c185daf0 100644
--- a/my-app/src/presenters/UploadTranscriptPresenter.jsx
+++ b/my-app/src/presenters/UploadTranscriptPresenter.jsx
@@ -32,7 +32,6 @@ const UploadTranscriptPresenter = observer(({ model }) => {
         const typedArray = new Uint8Array(arrayBuffer);
         try {
             const pdf = await pdfjsLib.getDocument({ data: typedArray }).promise;
-            let extractedText = '';
 
             //this is our array we are going to work with
             let textObjects = [];
diff --git a/my-app/src/views/Components/CoursePagePopup.jsx b/my-app/src/views/Components/CoursePagePopup.jsx
index 8ca557f6..517e00a1 100644
--- a/my-app/src/views/Components/CoursePagePopup.jsx
+++ b/my-app/src/views/Components/CoursePagePopup.jsx
@@ -26,7 +26,7 @@ function CoursePagePopup({ isOpen, onClose, course, prerequisiteTree }) {
                 className="text-yellow-500 cursor-pointer"
                 onClick={(e) => {
                   e.stopPropagation(); // prevent popup from opening
-                  handleFavouriteClick(course.code);
+                  PaymentResponse.handleFavouriteClick(course.code);
                 }}
               >
                 {/* {model.favouriteCourses.includes(course.code)
diff --git a/my-app/src/views/Components/PrerequisiteTreeComponents/BoxTest.jsx b/my-app/src/views/Components/PrerequisiteTreeComponents/BoxTest.jsx
index c008efc1..aa3c0e35 100644
--- a/my-app/src/views/Components/PrerequisiteTreeComponents/BoxTest.jsx
+++ b/my-app/src/views/Components/PrerequisiteTreeComponents/BoxTest.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-function PrerequisiteTree(props) {
+function PrerequisiteTree() {
     return (
         <div class ="flex ">
 

From 029708f10513ce7d2070799f4156d4b75b75d252 Mon Sep 17 00:00:00 2001
From: Justus Kluge <justus.kluge@aikq.de>
Date: Wed, 9 Apr 2025 15:54:23 +0200
Subject: [PATCH 5/7] Even more lint fixes

---
 my-app/src/pages/App.jsx                            | 2 +-
 my-app/src/presenters/ListViewPresenter.jsx         | 8 ++++++++
 my-app/src/presenters/UploadTranscriptPresenter.jsx | 2 +-
 my-app/src/views/ListView.jsx                       | 8 --------
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/my-app/src/pages/App.jsx b/my-app/src/pages/App.jsx
index f19ec871..e1d7e9c2 100644
--- a/my-app/src/pages/App.jsx
+++ b/my-app/src/pages/App.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { SidebarPresenter } from "../presenters/SidebarPresenter.jsx";
 import { SearchbarPresenter } from "../presenters/SearchbarPresenter.jsx";
 import { ListViewPresenter } from '../presenters/ListViewPresenter.jsx';
diff --git a/my-app/src/presenters/ListViewPresenter.jsx b/my-app/src/presenters/ListViewPresenter.jsx
index ef29cdc3..2ed88e79 100644
--- a/my-app/src/presenters/ListViewPresenter.jsx
+++ b/my-app/src/presenters/ListViewPresenter.jsx
@@ -19,6 +19,14 @@ const ListViewPresenter = observer(({ model }) => {
         model.removeFavourite(course);
     }
 
+    function handleFavouriteClick(course){
+        if (props.favouriteCourses.some(fav => fav.code === course.code)) {
+            props.removeFavourite(course);
+        } else {
+            props.addFavourite(course);
+        }
+    };
+
     return <ListView
         courses={model.courses}
         searchResults={model.currentSearch}
diff --git a/my-app/src/presenters/UploadTranscriptPresenter.jsx b/my-app/src/presenters/UploadTranscriptPresenter.jsx
index c185daf0..b55c5cb0 100644
--- a/my-app/src/presenters/UploadTranscriptPresenter.jsx
+++ b/my-app/src/presenters/UploadTranscriptPresenter.jsx
@@ -7,7 +7,7 @@ import UploadField from '../views/Components/SideBarComponents/UploadField';
 
 pdfjsLib.GlobalWorkerOptions.workerSrc = pdfWorker;
 
-const UploadTranscriptPresenter = observer(({ model }) => {
+const UploadTranscriptPresenter = observer(() => {
     const [errorMessage, setErrorMessage] = useState(""); // Stores error message
     const [errorVisibility, setErrorVisibility] = useState("hidden"); // Controls visibility
     const [fileInputValue, setFileInputValue] = useState(""); // Controls upload field state
diff --git a/my-app/src/views/ListView.jsx b/my-app/src/views/ListView.jsx
index de90c051..8cbd0376 100644
--- a/my-app/src/views/ListView.jsx
+++ b/my-app/src/views/ListView.jsx
@@ -11,14 +11,6 @@ function ListView(props) {
             { ...prevState, [courseCode]: !prevState[courseCode] }
         ));
     };
-
-    const handleFavouriteClick = (course) => {
-        if (props.favouriteCourses.some(fav => fav.code === course.code)) {
-            props.removeFavourite(course);
-        } else {
-            props.addFavourite(course);
-        }
-    };
   
 
     return (

From a508d5c9adfb235008494eb1e13671b3154e35e1 Mon Sep 17 00:00:00 2001
From: Justus Kluge <justus.kluge@aikq.de>
Date: Wed, 9 Apr 2025 15:56:19 +0200
Subject: [PATCH 6/7] Change xD

---
 my-app/firebase.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/my-app/firebase.js b/my-app/firebase.js
index 551ee5a9..642f3f44 100644
--- a/my-app/firebase.js
+++ b/my-app/firebase.js
@@ -2,7 +2,7 @@ import { initializeApp } from "firebase/app";
 import { getAuth, GoogleAuthProvider, onAuthStateChanged } from "firebase/auth";
 import { get, getDatabase, ref, set, onValue } from "firebase/database";
 import { reaction, toJS } from "mobx";
-
+// foo
 // Your web app's Firebase configuration
 const firebaseConfig = {
 	apiKey: "AIzaSyCBckVI9nhAP62u5jZJW3F4SLulUv7znis",

From 23cbe67c2a4712c9ec6678e67e23c5cc2827f6ad Mon Sep 17 00:00:00 2001
From: Justus Kluge <justus.kluge@aikq.de>
Date: Wed, 9 Apr 2025 16:10:53 +0200
Subject: [PATCH 7/7] Eeeven more lint

---
 my-app/src/presenters/ListViewPresenter.jsx | 17 +++++++++--------
 my-app/src/views/ListView.jsx               | 19 +++----------------
 2 files changed, 12 insertions(+), 24 deletions(-)

diff --git a/my-app/src/presenters/ListViewPresenter.jsx b/my-app/src/presenters/ListViewPresenter.jsx
index 2ed88e79..7a91ce72 100644
--- a/my-app/src/presenters/ListViewPresenter.jsx
+++ b/my-app/src/presenters/ListViewPresenter.jsx
@@ -7,6 +7,14 @@ import PrerequisitePresenter from './PrerequisitePresenter.jsx';
 
 const ListViewPresenter = observer(({ model }) => {
 
+    const handleFavouriteClick = (course) => {
+        if (model.favourites.some(fav => fav.code === course.code)) {
+            model.removeFavourite(course);
+        } else {
+            model.addFavourite(course);
+        }
+    };
+
     const [isPopupOpen, setIsPopupOpen] = useState(false);
     const [selectedCourse, setSelectedCourse] = useState(null);
     const preP = <PrerequisitePresenter model={model} selectedCourse={selectedCourse}/>
@@ -19,14 +27,6 @@ const ListViewPresenter = observer(({ model }) => {
         model.removeFavourite(course);
     }
 
-    function handleFavouriteClick(course){
-        if (props.favouriteCourses.some(fav => fav.code === course.code)) {
-            props.removeFavourite(course);
-        } else {
-            props.addFavourite(course);
-        }
-    };
-
     return <ListView
         courses={model.courses}
         searchResults={model.currentSearch}
@@ -37,6 +37,7 @@ const ListViewPresenter = observer(({ model }) => {
         setIsPopupOpen={setIsPopupOpen}
         setSelectedCourse={setSelectedCourse}
         popUp={popup}
+        handleFavouriteClick={handleFavouriteClick}
 
     />;
 });
diff --git a/my-app/src/views/ListView.jsx b/my-app/src/views/ListView.jsx
index 8cbd0376..f8444c08 100644
--- a/my-app/src/views/ListView.jsx
+++ b/my-app/src/views/ListView.jsx
@@ -11,18 +11,12 @@ function ListView(props) {
             { ...prevState, [courseCode]: !prevState[courseCode] }
         ));
     };
-  
 
     return (
         <div className="relative bg-white text-black p-2 flex flex-col gap-5 h-full overflow-auto">
             {coursesToDisplay.length > 0 ? (
                 coursesToDisplay.map((course) => (
                     <div
-                    onClick={() => {
-                        console.log('Clicked:', course); // check browser console
-                        props.setSelectedCourse(course);
-                        props.setIsPopupOpen(true);
-                    }}
                         key={course.code}
                         className="p-5 hover:bg-blue-100 flex items-center border border-b-black border-solid w-full rounded-lg cursor-pointer"
                     >
@@ -40,10 +34,7 @@ function ListView(props) {
                             {course.description.length > 150 && (
                                 <span
                                     className="text-blue-500 cursor-pointer"
-                                    onClick={(e) => {
-                                        e.stopPropagation();  // Prevent the event from bubbling up.
-                                        toggleReadMore(course.code);
-                                    }}
+                                    onClick={() => toggleReadMore(course.code)}
                                 >
                                     {readMoreState[course.code]
                                         ?
@@ -55,10 +46,7 @@ function ListView(props) {
                             <div>
                                 <button
                                     className="text-yellow-500 cursor-pointer"
-                                    onClick={(e) => {
-                                        e.stopPropagation();  // Prevent the event from bubbling up.
-                                        handleFavouriteClick(course);
-                                    }}
+                                    onClick={() => props.handleFavouriteClick(course)}
                                 >
                                     {props.favouriteCourses.some(fav => fav.code === course.code)
                                         ?
@@ -78,9 +66,8 @@ function ListView(props) {
                     color="#000061"
                 />
             )}
-             {props.popUp}
         </div>
     );
 }
 
-export default ListView;
+export default ListView;
\ No newline at end of file