Merge pull request #50 from mateuszmanczak04/39-keep-scroll-level-aft…

…er-navigating

39 keep scroll level after navigating

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+	"editor.codeActionsOnSave": {
+		"source.organizeImports": "always"
+	}
+}

src/app/calendar/_context/calendar-context.tsx

@@ -26,6 +26,8 @@ interface CalendarContextProps {
 	rowHeight: number;
 	zoomIn: () => void;
 	zoomOut: () => void;
+	scrollTop: number;
+	setScrollTop: (newValue: number) => void;
 }
 
 const CalendarContext = createContext({} as CalendarContextProps);
@@ -39,6 +41,9 @@ export const CalendarContextProvider = ({
 	const containerRef = useRef<HTMLDivElement | null>(null);
 	const { settings, update: updateSettings } = useSettings();
 
+	// Keeping the same calendar scroll y level after switching routes
+	const [scrollTop, setScrollTop] = useState(0);
+
 	if (!settings) return null; // TOOD: handle this
 
 	// Returns a date object which is X days after "currentFirstDay"
@@ -151,6 +156,8 @@ export const CalendarContextProvider = ({
 				getRelativePosition,
 				getDateFromPosition,
 				displayedDays: settings.displayedDays,
+				scrollTop,
+				setScrollTop,
 			}}>
 			{children}
 		</CalendarContext.Provider>

src/app/calendar/page.tsx

@@ -1,17 +1,32 @@
 'use client';
 
 import ErrorMessage from '@/components/common/error-message';
+import { useEffect, useRef } from 'react';
 import useCourses from '../courses/_hooks/use-courses';
 import useNotes from '../notes/_hooks/use-notes';
 import Grid from './_components/grid';
 import Header from './_components/header';
 import Notes from './_components/notes';
 import TopBar from './_components/top-bar';
+import { useCalendarContext } from './_context/calendar-context';
 
 const CalendarPage = () => {
 	const { error: notesError } = useNotes();
 	const { error: coursesError } = useCourses();
 
+	// Used to keep the same calendar scroll y level even after
+	// switching routes
+	const { scrollTop, setScrollTop } = useCalendarContext();
+	const scrollContainerRef = useRef<HTMLDivElement | null>(null);
+
+	const handleScroll = () => {
+		setScrollTop(scrollContainerRef.current!.scrollTop);
+	};
+
+	useEffect(() => {
+		scrollContainerRef.current!.scrollTop = scrollTop;
+	}, [scrollTop]);
+
 	return (
 		<div className='flex h-full flex-col'>
 			{/* Year and month: */}
@@ -31,7 +46,10 @@ const CalendarPage = () => {
 
 			<TopBar />
 
-			<div className='relative overflow-y-scroll overscroll-none outline-none scrollbar-hide'>
+			<div
+				className='relative overflow-y-scroll overscroll-none scroll-auto outline-none scrollbar-hide'
+				onScroll={handleScroll}
+				ref={scrollContainerRef}>
 				{/* Just grid: */}
 				<Grid />