Persist selected class

src/lib/selectedClass.ts

@@ -0,0 +1,48 @@
+import { get, writable } from "svelte/store";
+
+const key = "selectedClass";
+
+interface Class {
+    classNumber: string;
+    classLetter: string;
+}
+
+const selectedClass = writable<Class>({
+    classNumber: "-1",
+    classLetter: "0",
+});
+
+const { subscribe, set } = selectedClass;
+
+const isBrowser = () => typeof window != "undefined" && localStorage;
+
+if (isBrowser()) {
+    const selectedClassStored = localStorage.getItem(key);
+
+    if (selectedClassStored) {
+        selectedClass.set(JSON.parse(selectedClassStored));
+    }
+}
+
+const saveValue = (value) => {
+    if (value) {
+        if (isBrowser()) {
+            localStorage.setItem(key, JSON.stringify(value));
+        }
+
+        set(value);
+    }
+};
+
+const selectedClassStore = {
+    subscribe,
+    set: (value) => saveValue(value),
+    update: (updateFunction: (selectedClass) => Class) => {
+        const updatedStore = updateFunction(get(selectedClass));
+
+        saveValue(updatedStore);
+    },
+    get: () => get(selectedClass),
+};
+
+export { selectedClassStore };

src/routes/student/books/+page.svelte

@@ -6,6 +6,7 @@
 	import { env } from "$env/dynamic/public";
 	import BookPreview from "$lib/BookPreview.svelte";
 	import { onMount } from "svelte";
+	import { selectedClassStore } from "../../../lib/selectedClass";
 
 	setLayout(secondaryLayout)
 
@@ -22,6 +23,12 @@
 	const changeBooks = () => {
 		const className = classSelect.options[classSelect.selectedIndex].value
 
+		selectedClassStore.update((selectedClass) => {
+			selectedClass.classNumber = className
+
+			return selectedClass
+		})
+
 		const QUERY = `
 			query($className: String!) {
 				Books(where: {class: {like: $className}}, limit: 100) {
@@ -49,9 +56,17 @@
 	}
 
 	onMount(() => {
-		if (data.classNumber && classNumbers.indexOf(parseInt(data.classNumber)) !== -1) {
-			classSelect.selectedIndex = classNumbers.indexOf(parseInt(data.classNumber))
+		let classNumber
+		if (data.classNumber) {
+			classNumber = data.classNumber
+		} else {
+			classNumber = selectedClassStore.get().classNumber
 		}
+
+		if (classNumber && classNumbers.indexOf(classNumber) !== -1) {
+			classSelect.selectedIndex = classNumbers.indexOf(classNumber)
+		}
+
 		changeBooks()
 	})
 </script>

src/routes/student/weekly-schedule/+page.svelte

@@ -5,6 +5,7 @@
 	import { onMount } from "svelte";
 	import { env } from "$env/dynamic/public";
 	import { getClassNumberName } from "../../../lib/classNumberNames";
+	import { selectedClassStore } from "../../../lib/selectedClass";
 
 	setLayout(secondaryLayout)
 
@@ -14,6 +15,13 @@
 	const dateFormatOptions: Intl.DateTimeFormatOptions = {hour: '2-digit', minute: '2-digit', hour12: false}
 
 	const classes = data.WeeklySchedules.docs.map((val) => val.class)
+	const maxNumberOfLessons = data.Schedule.weeklySchedule.weeklySchedulesAutofill.maxNumberOfLessons
+
+	let classNumberSelect;
+	let classLetterSelect;
+	let currentClassNumber;
+	let currentClassLetter;
+	let days = [];
 
 	const classNumbers = [...new Set(classes.map((val) => {
 		return val.match(/\d+/)[0]
@@ -23,12 +31,19 @@
 		return val.match(/[A-Za-zА-Яа-я]/)[0]
 	}))].sort()
 
-	let classNumberSelect;
-	let classLetterSelect;
-	let currentClassNumber;
-	let currentClassLetter;
-	let days = [];
-	const maxNumberOfLessons = data.Schedule.weeklySchedule.weeklySchedulesAutofill.maxNumberOfLessons
+	const isLetterDisabled = (classNumber: string, classLetter: string) => {
+		return classNumberSelect && !classes.includes(classNumber + classLetter)
+	}
+
+	const validateClassNumber = (classNumber) => {
+		return classNumber && classNumbers.indexOf(classNumber) !== -1;
+	}
+
+	const validateClassLetter = (classNumber, classLetter) => {
+		return classLetter &&
+			classLetters.indexOf(classLetter) !== -1 &&
+			!isLetterDisabled(classNumber, classLetter)
+	}
 
 	const changeSchedule = () => {
 		currentClassNumber = classNumberSelect.value
@@ -40,11 +55,13 @@
 			currentClassLetter = classLetterSelect.value
 		}
 
-		setSchedule(currentClassNumber + currentClassLetter)
-	}
+		selectedClassStore.update((selectedClass) => {
+			selectedClass.classNumber = currentClassNumber
+			selectedClass.classLetter = currentClassLetter
 
-	const isLetterDisabled = (classNumber: string, classLetter: string) => {
-		return classNumberSelect && !classes.includes(classNumber + classLetter)
+			return selectedClass
+		})
+		setSchedule(currentClassNumber + currentClassLetter)
 	}
 
 	const hours = data.Schedule.dailySchedule.hours.slice(0)
@@ -73,18 +90,24 @@
 	}
 
 	onMount(() => {
+		let classLetter;
+		let classNumber;
+
 		if (data.className) {
-			let classNumber = data.className.match(/\d+/)[0]
-			if (classNumber && classNumbers.indexOf(classNumber) !== -1) {
-				classNumberSelect.value = classNumber
-				let classLetter = data.className.match(/[A-Za-zА-Яа-я]/)[0]
-				if (classLetter &&
-					classLetters.indexOf(classLetter) !== -1 &&
-					!isLetterDisabled(classNumber, classLetter)) {
-					classLetterSelect.value = classLetter
-				}
+			classNumber = data.className.match(/\d+/)[0]
+			classLetter = data.className.match(/[A-Za-zА-Яа-я]/)[0]
+		} else {
+			classNumber = selectedClassStore.get().classNumber
+			classLetter = selectedClassStore.get().classLetter
+		}
+
+		if (validateClassNumber(classNumber)) {
+			classNumberSelect.value = classNumber
+			if (validateClassLetter(classNumber, classLetter)) {
+				classLetterSelect.value = classLetter
 			}
 		}
+
 		changeSchedule()
 	})
 </script>