Persist report period override across reloads (#105)

src/lib/cache.ts

@@ -1,4 +1,3 @@
-import { get, type Writable } from 'svelte/store';
 import {
 	attendance,
 	attendanceLoaded,
@@ -16,6 +15,11 @@ import {
 	studentInfo,
 	studentInfoLoaded
 } from '$lib/stores';
+import { get, type Writable } from 'svelte/store';
+import {
+	periodOverrideState,
+	type PeriodOverrideState
+} from '../routes/(authed)/grades/reportingPeriods.svelte';
 
 const writeCacheToStore = (key: string, store: Writable<unknown>) => {
 	const cache = localStorage.getItem(key);
@@ -34,6 +38,23 @@ export const loadGradebook = async () => {
 
 	writeCacheToStore('gradebook', gradebook);
 
+	const override = localStorage.getItem('periodOverrideState');
+
+	if (override) {
+		const restoredState: PeriodOverrideState = JSON.parse(override);
+
+		periodOverrideState.new = restoredState.new;
+		periodOverrideState.original = restoredState.original;
+
+		const grades = await get(studentAccount)?.grades(periodOverrideState.new?.index);
+
+		gradebook.set(grades);
+
+		gradebookLoaded.set(true);
+
+		return;
+	}
+
 	const grades = await get(studentAccount)?.grades();
 
 	gradebook.set(grades);

src/routes/(authed)/grades/+layout.svelte

@@ -4,7 +4,7 @@
 	import LoadingBanner from '$lib/components/LoadingBanner.svelte';
 	import { gradebook, gradebookLoaded } from '$lib/stores';
 	import { Alert, Button } from 'flowbite-svelte';
-	import { changeReportPeriod, periodState } from './reportingPeriods.svelte';
+	import { periodOverrideState, resetPeriodOverride } from './reportingPeriods.svelte';
 
 	let { children } = $props();
 
@@ -13,19 +13,22 @@
 
 <LoadingBanner show={!$gradebookLoaded} loadingMsg="Loading grades..." />
 
-{#if periodState.new && periodState.original}
+{#if periodOverrideState.new}
 	<Alert class="m-4 flex items-center justify-between" color="light" border>
-		Temporarily viewing reporting period {periodState.new.name}
+		<span class="text-white">Viewing reporting period {periodOverrideState.new.period.name}</span>
 
-		<Button
-			onclick={async () => {
-				if (!periodState.original) return;
+		{#if periodOverrideState.original}
+			<Button
+				onclick={async () => {
+					if (!periodOverrideState.original) return;
 
-				await changeReportPeriod(periodState.original.period, periodState.original.index);
-				periodState.new = undefined;
-			}}
-			color="light">Return to {periodState.original.period.name}</Button
-		>
+					resetPeriodOverride();
+
+					loadGradebook();
+				}}
+				color="light">Return to {periodOverrideState.original.period.name}</Button
+			>
+		{/if}
 	</Alert>
 {/if}
 

src/routes/(authed)/grades/+page.svelte

@@ -8,12 +8,7 @@
 		CloseCircleOutline,
 		MapPinAltOutline
 	} from 'flowbite-svelte-icons';
-	import {
-		changeReportPeriod,
-		displayPeriodOverride,
-		periodState,
-		type Period
-	} from './reportingPeriods.svelte';
+	import { changeReportPeriod, periodOverrideState, type Period } from './reportingPeriods.svelte';
 
 	let dropdownOpen = $state(false);
 
@@ -51,7 +46,7 @@
 	async function setReportPeriodIndex(index: number) {
 		if (!allPeriods || !currentPeriod) return;
 
-		periodState.original ??= { period: currentPeriod, index: currentPeriodIndex };
+		periodOverrideState.original ??= { period: currentPeriod, index: currentPeriodIndex };
 
 		await changeReportPeriod(allPeriods[index], index);
 	}
@@ -65,7 +60,7 @@
 	<main class="m-4 space-y-4">
 		<div class="flex flex-col justify-center">
 			<Button color="light" class="mx-auto flex items-center">
-				{(displayPeriodOverride.period ?? currentPeriod).name}
+				{(periodOverrideState.new?.period ?? currentPeriod).name}
 
 				{#if dropdownOpen}
 					<ChevronUpOutline size="sm" class="ml-2 focus:outline-none" />
@@ -93,7 +88,7 @@
 			</Dropdown>
 		</div>
 
-		{#if $gradebook.Courses.Course.map((course) => course.Marks.Mark._CalculatedScoreString).every((score) => score === 'N/A') && !displayPeriodOverride.period}
+		{#if $gradebook.Courses.Course.map((course) => course.Marks.Mark._CalculatedScoreString).every((score) => score === 'N/A') && !periodOverrideState.new}
 			<Alert class="mx-auto flex w-fit items-center" color="dark">
 				<CloseCircleOutline />
 				It looks like you don't have any grades yet in this reporting period.

src/routes/(authed)/grades/reportingPeriods.svelte.ts

@@ -7,20 +7,21 @@ export interface Period {
 	endDate: Date;
 }
 
-export const periodState: {
+export interface PeriodOverrideState {
 	original?: {
 		period: Period;
 		index: number;
 	};
-	new?: Period;
-} = $state({});
+	new?: {
+		period: Period;
+		index: number;
+	};
+}
 
-export const displayPeriodOverride: { period?: Period } = $state({});
+export const periodOverrideState: PeriodOverrideState = $state({});
 
 export async function changeReportPeriod(newPeriod: Period, index: number) {
-	displayPeriodOverride.period = newPeriod;
-
-	periodState.new = undefined;
+	periodOverrideState.new = undefined;
 
 	gradebookLoaded.set(false);
 
@@ -37,16 +38,20 @@ export async function changeReportPeriod(newPeriod: Period, index: number) {
 		console.warn(
 			`Synergy returned reporting period ${newGradebook.ReportingPeriod._GradePeriod} when asked for ${newPeriod.name}`
 		);
+	}
 
-		if (newGradebook.ReportingPeriod._GradePeriod === periodState.original?.period.name) {
-			periodState.new = undefined;
-			periodState.original = undefined;
-			displayPeriodOverride.period = undefined;
-
-			return;
-		}
+	if (newGradebook.ReportingPeriod._GradePeriod === periodOverrideState.original?.period.name) {
+		resetPeriodOverride();
+		return;
 	}
 
-	periodState.new = newPeriod;
-	displayPeriodOverride.period = undefined;
+	periodOverrideState.new = { period: newPeriod, index: index };
+
+	localStorage.setItem('periodOverrideState', JSON.stringify(periodOverrideState));
+}
+
+export function resetPeriodOverride() {
+	periodOverrideState.new = undefined;
+	periodOverrideState.original = undefined;
+	localStorage.removeItem('periodOverrideState');
 }