refactor(SequelSpy): move prequel list to component

1 files changed, 62 insertions, 0 deletions

diff --git a/src/lib/Tools/SequelSpy/Tool.svelte b/src/lib/Tools/SequelSpy/Tool.svelte
new file mode 100644
index 00000000..8956e00a
--- /dev/null
+++ b/src/lib/Tools/SequelSpy/Tool.svelte
@@ -0,0 +1,62 @@
+<script lang="ts">
+	import type { AniListAuthorisation } from '$lib/Data/AniList/identity';
+	import { prequels, type MediaPrequel } from '$lib/Data/AniList/prequels';
+	import { onMount } from 'svelte';
+	import { clearAllParameters, parseOrDefault } from '../../Utility/parameters';
+	import { page } from '$app/stores';
+	import { browser } from '$app/environment';
+	import { season as getSeason } from '$lib/Media/Anime/season';
+	import Skeleton from '$lib/Loading/Skeleton.svelte';
+	import identity from '$stores/identity';
+	import LogInRestricted from '$lib/Error/LogInRestricted.svelte';
+	import Prequels from './Prequels.svelte';
+
+	export let user: AniListAuthorisation;
+
+	let currentPrequels: Promise<MediaPrequel[]> = Promise.resolve([]) as Promise<MediaPrequel[]>;
+	const urlParameters = browser ? new URLSearchParams(window.location.search) : null;
+	let year = parseOrDefault(urlParameters, 'year', new Date().getFullYear());
+	let season = parseOrDefault(urlParameters, 'season', getSeason());
+
+	$: {
+		if (year.toString().length === 4 && $identity.id !== -2 && user)
+			currentPrequels = prequels(user, year, season);
+	}
+	$: {
+		if (browser) {
+			$page.url.searchParams.set('year', year.toString());
+			$page.url.searchParams.set('season', season.toString());
+			clearAllParameters(['year', 'season']);
+			history.replaceState(null, '', `?${$page.url.searchParams.toString()}`);
+		}
+	}
+
+	onMount(() => clearAllParameters(['year', 'season']));
+</script>
+
+{#if user === undefined || $identity.id === -2}
+	<LogInRestricted />
+{:else}
+	<div class="card">
+		<p>
+			<select bind:value={season}>
+				<option value="WINTER">Winter</option>
+				<option value="SPRING">Spring</option>
+				<option value="SUMMER">Summer</option>
+				<option value="FALL">Fall</option>
+			</select>
+			<input type="number" bind:value={year} />
+		</p>
+
+		{#await currentPrequels}
+			<Skeleton card={false} count={5} height="0.9rem" list />
+		{:then currentPrequels}
+			<Prequels {currentPrequels} />
+		{/await}
+
+		<p />
+
+		The count ratio is the number of episodes you've seen of any direct prequels, and the total
+		number of episodes of all direct prequels.
+	</div>
+{/if}