Persistance III

* Favourite Clear Button

* scrolling I

* Allow to cache query

* Persistant Scrolling P.2

* Scrolling Pt.3

* Persistant Scrolling

* Scrolling is Persistant!

* Scroll persistance with going back to the top on search finished

Author: jkluge

my-app/firebase.js

@@ -2,6 +2,8 @@ import { initializeApp } from "firebase/app";
 import { getAuth, GoogleAuthProvider, onAuthStateChanged } from "firebase/auth";
 import { get, getDatabase, ref, set, onValue, push } from "firebase/database";
 import { reaction, toJS } from "mobx";
+import throttle from "lodash.throttle";
+
 // Your web app's Firebase configuration
 const firebaseConfig = {
 	apiKey: "AIzaSyCBckVI9nhAP62u5jZJW3F4SLulUv7znis",
@@ -24,53 +26,54 @@ googleProvider.addScope("email");
 let noUpload = false;
 
 export function connectToFirebase(model) {
-    loadCoursesFromCacheOrFirebase(model);
+	loadCoursesFromCacheOrFirebase(model);
 	onAuthStateChanged(auth, (user) => {
 		if (user) {
 			model.setUser(user); // Set the user ID once authenticated
-			firebaseToModel(model);  // Set up listeners for user-specific data
-			syncModelToFirebase(model);  // Start syncing changes to Firebase
+			firebaseToModel(model); // Set up listeners for user-specific data
+			syncModelToFirebase(model); // Start syncing changes to Firebase
+			syncScrollPositionToFirebase(model);
 		} else {
-			model.setUser(null);  // If no user, clear user-specific data
+			model.setUser(null); // If no user, clear user-specific data
 		}
 	});
 }
 
 // fetches all relevant information to create the model
 async function firebaseToModel(model) {
-	if (!model.user) 
-        return;
+	if (!model.user) return;
 	const userRef = ref(db, `users/${model.user.uid}`);
 	onValue(userRef, (snapshot) => {
-		if (!snapshot.exists()) 
-            return;
+		if (!snapshot.exists()) return;
 		const data = snapshot.val();
 		noUpload = true;
-		if (data.favourites) 
-            model.setFavourite(data.favourites);
-		// if (data.currentSearch) 
-        //     model.setCurrentSearch(data.currentSearch);
+		if (data.favourites) model.setFavourite(data.favourites);
+		if (data.currentSearchText)
+			model.setCurrentSearchText(data.currentSearchText);
+		if (data.scrollPosition) 
+			model.setScrollPosition(data.scrollPosition);
+		// if (data.currentSearch)
+		//     model.setCurrentSearch(data.currentSearch);
 		noUpload = false;
 	});
 }
 
-
 export function syncModelToFirebase(model) {
 	reaction(
 		() => ({
 			userId: model?.user.uid,
 			favourites: toJS(model.favourites),
+			currentSearchText: toJS(model.currentSearchText),
 			// currentSearch: toJS(model.currentSearch),
 			// Add more per-user attributes here
 		}),
 		// eslint-disable-next-line no-unused-vars
-		({ userId, favourites, currentSearch }) => {
-			if (noUpload || !userId) 
-                return;
+		({ userId, favourites, currentSearchText }) => {
+			if (noUpload || !userId) return;
 			const userRef = ref(db, `users/${userId}`);
 			const dataToSync = {
 				favourites,
-				//currentSearch,
+				currentSearchText,
 			};
 
 			set(userRef, dataToSync)
@@ -80,6 +83,34 @@ export function syncModelToFirebase(model) {
 	);
 }
 
+export function syncScrollPositionToFirebase(model, containerRef) {
+	if (!containerRef?.current) return;
+	let lastSavedPosition = 0;
+	
+    // const throttledSet = throttle((scrollPixel) => {
+    //     if (model?.user?.uid) {
+    //         const userRef = ref(db, `users/${model.user.uid}/scrollPosition`);
+    //         set(userRef, scrollPixel).catch(console.error);
+    //     }
+    // }, 500);
+
+    const handleScroll = () => {
+        const scrollTop = containerRef.current.scrollTop;
+		// make a 100px threshold
+		if (Math.abs(scrollTop - lastSavedPosition) < 100)
+			return;
+
+		lastSavedPosition = scrollTop;
+        model.setScrollPosition(scrollTop);
+        localStorage.setItem("scrollPosition", scrollTop);
+        // throttledSet(scrollTop);
+    };
+
+    containerRef.current.addEventListener('scroll', handleScroll);
+    return () => containerRef.current?.removeEventListener('scroll', handleScroll);
+}
+
+
 function saveCoursesInChunks(courses, timestamp) {
 	const parts = 3; // Adjust this based on course size
 	const chunkSize = Math.ceil(courses.length / parts);
@@ -170,23 +201,20 @@ export async function saveJSONCoursesToFirebase(model, data) {
 	});
 }
 
-
 export async function addReviewForCourse(courseCode, review) {
-    try {
-        const reviewsRef = ref(db, `reviews/${courseCode}`);
-        const newReviewRef = push(reviewsRef);
-        await set(newReviewRef, review);
-    } catch (error) {
-        console.error("Error when adding a course to firebase:", error);
+	try {
+		const reviewsRef = ref(db, `reviews/${courseCode}`);
+		const newReviewRef = push(reviewsRef);
+		await set(newReviewRef, review);
+	} catch (error) {
+		console.error("Error when adding a course to firebase:", error);
 	}
 }
 
-
 export async function getReviewsForCourse(courseCode) {
 	const reviewsRef = ref(db, `reviews/${courseCode}`);
 	const snapshot = await get(reviewsRef);
 	if (!snapshot.exists()) return [];
-
 	const reviews = [];
 	snapshot.forEach(childSnapshot => {
 		reviews.push({
@@ -195,9 +223,4 @@ export async function getReviewsForCourse(courseCode) {
 		});
 	});
 	return reviews;
-}
-
-
-
-
-
+}

my-app/package-lock.json

@@ -19,6 +19,7 @@
     "autoprefixer": "^10.4.21",
     "firebase": "^11.5.0",
     "ldrs": "^1.1.6",
+    "lodash.throttle": "^4.1.1",
     "mobx": "^6.13.7",
     "mobx-react-lite": "^4.1.0",
     "pdfjs-dist": "^5.1.91",

my-app/package.json

@@ -15,7 +15,6 @@ configure({ enforceActions: "never" });
 const reactiveModel = makeAutoObservable(model);
 connectToFirebase(reactiveModel);
 
-// ✅ Add /share route here
 export function makeRouter(reactiveModel) {
   return createHashRouter([
     {

my-app/src/index.jsx

@@ -6,6 +6,8 @@ export const model = {
     //add searchChange: false,   //this is for reworking the searchbar presenter, so that it triggers as a model, 
     //instead of passing searchcouses lambda function down into the searchbarview.
     currentSearch: [],
+    currentSearchText: "",
+    scrollPosition: 0,
     courses: [],
     favourites: [],
     isReady: false,
@@ -37,6 +39,14 @@ export const model = {
         this.currentSearch = searchResults;
     },
 
+    setCurrentSearchText(text){
+        this.currentSearchText = text;
+    },
+    
+    setScrollPosition(position) {
+        this.scrollPosition = position;
+    },
+
     setCourses(courses){
         this.courses = courses;
     },

my-app/src/model.js

@@ -1,12 +1,61 @@
 import React from 'react';
 import { observer } from "mobx-react-lite";
-import { useState } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import ListView from "../views/ListView.jsx";
 import CoursePagePopup from '../views/Components/CoursePagePopup.jsx';
 import PrerequisitePresenter from './PrerequisitePresenter.jsx';
 import {ReviewPresenter} from "../presenters/ReviewPresenter.jsx"
+import {syncScrollPositionToFirebase} from "../../firebase.js"
 
 const ListViewPresenter = observer(({ model }) => {
+    const scrollContainerRef = useRef(null);
+    let attempts = 0;
+    const MAX_Depth = 49;
+
+    function persistantScrolling(fetchMoreCourses, hasMore){
+        const container = scrollContainerRef.current;
+        if (!container || !model.scrollPosition) return;
+
+        
+
+        const attemptScroll = () => {
+
+            // refresh on significant change (same as in firebase)
+            if (Math.abs(container.scrollTop - model.scrollPosition) < 100) 
+                return;
+
+            attempts++;
+            if (attempts > MAX_Depth) {
+                return;
+            }
+            const needsMoreCourses = container.scrollHeight < model.scrollPosition && hasMore;
+
+            if (needsMoreCourses) {
+                fetchMoreCourses();
+                setTimeout(attemptScroll, 100); // Add delay between attempts
+            } else {
+                container.scrollTop = model.scrollPosition;
+                syncScrollPositionToFirebase(model, scrollContainerRef)
+            }
+        };
+        attemptScroll();
+    }
+
+    useEffect(() => {
+        // Load initial scroll position
+        const savedPosition = model.user 
+            ? model.scrollPosition
+            : localStorage.getItem("scrollPosition");
+        if (savedPosition) {
+            model.setScrollPosition(parseInt(savedPosition, 10));
+        }
+    }, [model.user]);
+
+    useEffect(() => {
+        const cleanup = syncScrollPositionToFirebase(model, scrollContainerRef);
+        return () => cleanup;
+    }, [model.user, model.currentSearch, scrollContainerRef]);
+
     const addFavourite = (course) => {
         model.addFavourite(course);
     }
@@ -41,15 +90,21 @@ const ListViewPresenter = observer(({ model }) => {
     return <ListView
         courses={model.courses}
         searchResults={model.currentSearch}
+        currentSearchLenght={model.currentSearch.length}
+        
         favouriteCourses={model.favourites}
         addFavourite={addFavourite}
         removeFavourite={removeFavourite}
+        handleFavouriteClick={handleFavouriteClick}
+
         isPopupOpen={isPopupOpen}
         setIsPopupOpen={setIsPopupOpen}
         setSelectedCourse={setSelectedCourse}
         popup={popup}
-        handleFavouriteClick={handleFavouriteClick}
-        currentSearchLenght={model.currentSearch.length}
+        
+        targetScroll={model.scrollPosition}
+        scrollContainerRef={scrollContainerRef}
+        persistantScrolling={persistantScrolling}
 
     />;
 });

my-app/src/presenters/ListViewPresenter.jsx

@@ -16,6 +16,7 @@ const SearchbarPresenter = observer(({ model }) => {
             course.name.toLowerCase().includes(query.toLowerCase()) ||
             course.description.toLowerCase().includes(query.toLowerCase())
         );
+        model.setCurrentSearchText(query);
         model.setCurrentSearch(searchResults);
         console.log(model.currentSearch.length);
     };
@@ -36,6 +37,10 @@ const SearchbarPresenter = observer(({ model }) => {
         }
     };
 
+    function resetScoll(){
+        model.setScrollPosition(0.01);
+    }
+
     const creditsSum = (favouriteCourses) => {
         return favouriteCourses.reduce((sum, course) => sum + parseFloat(course.credits), 0);
     };
@@ -60,6 +65,7 @@ const SearchbarPresenter = observer(({ model }) => {
         reviewPresenter={reviewPresenter}
         prerequisiteTree={preP}
     />;
+    
 
     if(model.filtersCalculated){
         searchCourses("");
@@ -68,7 +74,6 @@ const SearchbarPresenter = observer(({ model }) => {
 
     return (
         <SearchbarView
-            model={model}
             searchCourses={searchCourses}
             favouriteCourses={model.favourites}
             removeAllFavourites={removeAllFavourites}
@@ -80,6 +85,7 @@ const SearchbarPresenter = observer(({ model }) => {
             popup={popup}
             handleFavouriteClick={handleFavouriteClick}
             totalCredits={creditsSum(model.favourites)}
+            resetScrollPosition={resetScoll}
         />
     );
 });