Use localstorage for the filters

Dlurak · Jun 5, 2024 · 2fe4842 · 2fe4842
1 parent 0676530
commit 2fe4842
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 36 deletions.
diff --git a/.github/workflows/format.yml b/.github/workflows/format.yml
@@ -2,7 +2,7 @@ name: Linting & formatting
 
 on:
   push:
-    branches: ["master", "actions"]
+    branches: ['master', 'actions']
   workflow_dispatch:
 
 jobs:
@@ -19,7 +19,7 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           node-version: 18.x
-          cache: "pnpm"
+          cache: 'pnpm'
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -2,7 +2,7 @@ name: Test using vitest
 
 on:
   push:
-    branches: "master"
+    branches: 'master'
   workflow_dispatch:
 
 jobs:
@@ -18,7 +18,7 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           node-version: 18.x
-          cache: "pnpm"
+          cache: 'pnpm'
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile

diff --git a/src/lib/components/assignment/AssignmentGrid/ReadAssignmentBox.svelte b/src/lib/components/assignment/AssignmentGrid/ReadAssignmentBox.svelte
@@ -8,7 +8,7 @@
 
 	export let assignment: Assignment;
 
-	$: icon = getSubjectIcon(assignment.subject)
+	$: icon = getSubjectIcon(assignment.subject);
 </script>
 
 <div class="flex items-center gap-2">

diff --git a/src/lib/components/assignment/SideMenu/Filter/Filter.svelte b/src/lib/components/assignment/SideMenu/Filter/Filter.svelte
@@ -8,6 +8,7 @@
 	import type { CustomDate } from '$lib/utils/dates/custom';
 	import School from '$lib/components/input/School.svelte';
 	import Classes from '$lib/components/input/Classes.svelte';
+	import SchoolAndClass from '$lib/components/filter/SchoolAndClass.svelte';
 
 	type Query<S> = {
 		school: S;
@@ -34,13 +35,20 @@
 	const dispatch = createEventDispatcher<{ filterApply: Query<string> }>();
 </script>
 
-<Collapseable id="homework-filter">
-	<h3 class="pb-3 pt-2" slot="heading">Filters</h3>
-
-	<div class="flex flex-col gap-3" slot="content">
-		<School bind:school />
-		<Classes {school} bind:classes />
-
+<div class="flex flex-col gap-3">
+	<SchoolAndClass
+		{query}
+		on:change={({ detail }) => {
+			dispatch('filterApply', {
+				classes: detail.classes,
+				school: detail.school,
+				dueStart,
+				dueEnd,
+				fromStart,
+				fromEnd
+			});
+		}}
+	>
 		<h4><Store store={i('assignments.filter.due')} /></h4>
 
 		<TimeRange bind:start={dueStart} bind:end={dueEnd}>
@@ -56,21 +64,5 @@
 
 			<span slot="end"><Store store={i('assignments.filter.from.latest')} /></span>
 		</TimeRange>
-
-		<PrimaryButton
-			disabled={classes.length === 0 || school === null}
-			on:click={() => {
-				dispatch('filterApply', {
-					classes: classes,
-					school: school ?? '',
-					dueStart,
-					dueEnd,
-					fromStart,
-					fromEnd
-				});
-			}}
-		>
-			<Store store={i('assignments.filter.apply')} />
-		</PrimaryButton>
-	</div>
-</Collapseable>
+	</SchoolAndClass>
+</div>
diff --git a/src/lib/components/filter/SchoolAndClass.svelte b/src/lib/components/filter/SchoolAndClass.svelte
@@ -5,7 +5,8 @@
 	import Collapseable from '$lib/components/utils/Collapseable.svelte';
 	import School from '../input/School.svelte';
 	import Classes from '../input/Classes.svelte';
-	import { createEventDispatcher } from 'svelte';
+	import { createEventDispatcher, onMount } from 'svelte';
+	import { svocalWithFallback } from '$lib/utils/store/svocal';
 
 	type Query<S> = {
 		school: string | S;
@@ -14,7 +15,12 @@
 
 	export let query: Query<null>;
 
-	let { school, classes } = query;
+	const school = svocalWithFallback('filter.school', query.school);
+	const classes = svocalWithFallback('filter.classes', query.classes);
+
+	onMount(() => {
+		dispatch('change', { school: $school ?? '', classes: $classes ?? [] });
+	});
 
 	const dispatch = createEventDispatcher<{
 		change: Query<string>;
@@ -25,15 +31,15 @@
 	<h3 class="pb-3 pt-2" slot="heading"><Store store={i('filter.filter')} /></h3>
 
 	<div class="flex flex-col gap-3" slot="content">
-		<School bind:school />
-		<Classes {school} bind:classes />
+		<School bind:school={$school} />
+		<Classes school={$school} bind:classes={$classes} />
 
 		<slot />
 
 		<PrimaryButton
-			disabled={!(school && classes.length >= 1)}
+			disabled={!($school && $classes.length >= 1)}
 			on:click={() => {
-				dispatch('change', { school: school ?? '', classes: classes ?? [] });
+				dispatch('change', { school: $school ?? '', classes: $classes ?? [] });
 			}}
 		>
 			<Store store={i('assignments.filter.apply')} />

diff --git a/src/lib/utils/store/svocal.ts b/src/lib/utils/store/svocal.ts
@@ -46,3 +46,16 @@ export const svocal = <T extends SvocalKey>(key: T) => {
 
 	return localstorage(svocalKey, fallback);
 };
+
+const svNoCallback = {
+	'filter.school': null as string | null,
+	'filter.classes': [] as string[]
+} as const;
+
+type SvocalNoFallback = keyof typeof svNoCallback;
+type SvocalFallback<T extends SvocalNoFallback> = (typeof svNoCallback)[T];
+
+export const svocalWithFallback = <T extends SvocalNoFallback, F extends SvocalFallback<T>>(
+	key: T,
+	fallback: F
+) => localstorage<F>(key, fallback);