feat(identity): use global store

10 files changed, 98 insertions, 156 deletions

diff --git a/src/lib/Home/LastActivity.svelte b/src/lib/Home/LastActivity.svelte
index ecad8d46..edb293d3 100644
--- a/src/lib/Home/LastActivity.svelte
+++ b/src/lib/Home/LastActivity.svelte
@@ -1,32 +1,18 @@
 <script lang="ts">
-	import userIdentity from '$stores/userIdentity';
+	import userIdentity from '$stores/identity';
 	import { onMount } from 'svelte';
-	import {
-		userIdentity as getUserIdentity,
-		type AniListAuthorisation
-	} from '$lib/AniList/identity';
+	import type { AniListAuthorisation } from '$lib/AniList/identity';
 	import { lastActivityDate } from '../AniList/activity';
 	import settings from '$stores/settings';
 
 	export let user: AniListAuthorisation;
 
-	let currentUserIdentity = {
-		name: '',
-		id: -1,
-		avatar: 'https://s4.anilist.co/file/anilistcdn/user/avatar/large/default.png'
-	};
 	let lastActivityWasToday = true;
 
 	onMount(async () => {
 		if (user !== undefined && !$settings.displayDisableLastActivityWarning) {
-			if ($userIdentity === '') {
-				userIdentity.set(JSON.stringify(await getUserIdentity(user)));
-			}
-
-			currentUserIdentity = JSON.parse($userIdentity);
-			currentUserIdentity.name = currentUserIdentity.name;
 			lastActivityWasToday =
-				(await lastActivityDate(currentUserIdentity, user)).date.toDateString() >=
+				(await lastActivityDate($userIdentity, user)).date.toDateString() >=
 				new Date().toDateString();
 
 			if (!lastActivityWasToday) {
diff --git a/src/lib/Tools/ActivityHistory/Grid.svelte b/src/lib/Tools/ActivityHistory/Grid.svelte
index 560ed50b..7f75c104 100644
--- a/src/lib/Tools/ActivityHistory/Grid.svelte
+++ b/src/lib/Tools/ActivityHistory/Grid.svelte
@@ -5,11 +5,8 @@
 		activityHistory
 	} from '$lib/AniList/activity';
 	import { onMount } from 'svelte';
-	import userIdentity from '$stores/userIdentity';
-	import {
-		userIdentity as getUserIdentity,
-		type AniListAuthorisation
-	} from '$lib/AniList/identity';
+	import userIdentity from '$stores/identity';
+	import type { AniListAuthorisation } from '$lib/AniList/identity';
 	import { clearAllParameters } from '../../Utility/parameters';
 
 	export let user: AniListAuthorisation;
@@ -17,23 +14,12 @@
 	export let currentYear = new Date().getFullYear();
 
 	let activityHistoryData: ActivityHistoryEntry[];
-	let currentUserIdentity = {
-		name: '',
-		id: -1,
-		avatar: 'https://s4.anilist.co/file/anilistcdn/user/avatar/large/default.png'
-	};
 	let baseHue = Math.floor(Math.random() * 360);
 
 	onMount(async () => {
 		clearAllParameters();
 
-		if (user !== undefined) {
-			if ($userIdentity === '') userIdentity.set(JSON.stringify(await getUserIdentity(user)));
-
-			currentUserIdentity = JSON.parse($userIdentity);
-			currentUserIdentity.name = currentUserIdentity.name;
-			activityHistoryData = activityData || (await activityHistory(currentUserIdentity));
-		}
+		activityHistoryData = activityData || (await activityHistory($userIdentity));
 	});
 
 	const gradientColour = (amount: number, maxAmount: number, baseHue: number) => {
diff --git a/src/lib/Tools/ActivityHistory/Tool.svelte b/src/lib/Tools/ActivityHistory/Tool.svelte
index 51f2ac82..6728f9c6 100644
--- a/src/lib/Tools/ActivityHistory/Tool.svelte
+++ b/src/lib/Tools/ActivityHistory/Tool.svelte
@@ -5,11 +5,8 @@
 		type ActivityHistoryEntry
 	} from '$lib/AniList/activity';
 	import { onMount } from 'svelte';
-	import userIdentity from '$stores/userIdentity';
-	import {
-		userIdentity as getUserIdentity,
-		type AniListAuthorisation
-	} from '$lib/AniList/identity';
+	import userIdentity from '$stores/identity';
+	import type { AniListAuthorisation } from '$lib/AniList/identity';
 	import { clearAllParameters } from '../../Utility/parameters';
 	import { domToBlob } from 'modern-screenshot';
 	import ActivityHistoryGrid from './Grid.svelte';
@@ -18,23 +15,12 @@
 	export let user: AniListAuthorisation;
 
 	let activityHistoryData: Promise<ActivityHistoryEntry[]>;
-	let currentUserIdentity = {
-		name: '',
-		id: -1,
-		avatar: 'https://s4.anilist.co/file/anilistcdn/user/avatar/large/default.png'
-	};
 	let generated = false;
 
 	onMount(async () => {
 		clearAllParameters();
 
-		if (user !== undefined) {
-			if ($userIdentity === '') userIdentity.set(JSON.stringify(await getUserIdentity(user)));
-
-			currentUserIdentity = JSON.parse($userIdentity);
-			currentUserIdentity.name = currentUserIdentity.name;
-			activityHistoryData = activityHistory(currentUserIdentity);
-		}
+		if (user !== undefined) activityHistoryData = activityHistory($userIdentity);
 	});
 
 	// const incrementDate = (date: Date): Date => {
diff --git a/src/lib/Tools/Wrapped/Tool.svelte b/src/lib/Tools/Wrapped/Tool.svelte
index b2f715cb..0a88fe3d 100644
--- a/src/lib/Tools/Wrapped/Tool.svelte
+++ b/src/lib/Tools/Wrapped/Tool.svelte
@@ -1,9 +1,6 @@
 <script lang="ts">
-	import userIdentity from '$stores/userIdentity';
-	import {
-		userIdentity as getUserIdentity,
-		type AniListAuthorisation
-	} from '$lib/AniList/identity';
+	import userIdentity from '$stores/identity';
+	import type { AniListAuthorisation } from '$lib/AniList/identity';
 	import { onMount } from 'svelte';
 	import { tops, wrapped, type TopMedia, SortOptions } from '$lib/AniList/wrapped';
 	import {
@@ -35,11 +32,6 @@
 
 	const currentYear = new Date(Date.now()).getFullYear();
 	let selectedYear = new Date(Date.now()).getFullYear();
-	let currentUserIdentity = {
-		name: '',
-		id: -1,
-		avatar: 'https://s4.anilist.co/file/anilistcdn/user/avatar/large/default.png'
-	};
 	let episodes = 0;
 	let chapters = 0;
 	let minutesWatched = 0;
@@ -274,22 +266,17 @@
 			includeOVAs = $page.url.searchParams.get('includeOVAs') === 'true';
 		}
 
-		if (user !== undefined) {
-			if ($userIdentity === '') userIdentity.set(JSON.stringify(await getUserIdentity(user)));
-
-			currentUserIdentity = JSON.parse($userIdentity);
-			currentUserIdentity.name = currentUserIdentity.name;
-		} else currentUserIdentity.id = -2;
+		if (user === undefined) $userIdentity.id = -2;
 
 		await update().then(() => (mounted = true));
 	});
 
 	const update = async () => {
-		if (currentUserIdentity.id === -1) return;
+		if ($userIdentity.id === -1) return;
 
 		let rawAnimeList = await mediaListCollection(
 			user,
-			currentUserIdentity,
+			$userIdentity,
 			Type.Anime,
 			$anime,
 			$lastPruneTimes.anime,
@@ -386,7 +373,7 @@
 
 		let rawMangaList = await mediaListCollection(
 			user,
-			currentUserIdentity,
+			$userIdentity,
 			Type.Manga,
 			$manga,
 			$lastPruneTimes.manga,
@@ -577,15 +564,15 @@
 	// };
 </script>
 
-{#if currentUserIdentity.id === -2}
+{#if $userIdentity.id === -2}
 	<div class="card">Please log in to view this page.</div>
-{:else if currentUserIdentity.id !== -1}
-	{#await selectedYear !== currentYear || useFullActivityHistory || new Date().getMonth() <= 6 ? fullActivityHistory(user, currentUserIdentity, selectedYear) : getActivityHistory(currentUserIdentity)}
+{:else if $userIdentity.id !== -1}
+	{#await selectedYear !== currentYear || useFullActivityHistory || new Date().getMonth() <= 6 ? fullActivityHistory(user, $userIdentity, selectedYear) : getActivityHistory($userIdentity)}
 		<Loading>
 			{@html nbsp(`Loading${useFullActivityHistory ? ' full-year' : ''} activity history ...`)}
 		</Loading>
 	{:then activities}
-		{#await wrapped(user, currentUserIdentity, selectedYear)}
+		{#await wrapped(user, $userIdentity, selectedYear)}
 			<Loading>
 				{@html nbsp('Loading user data ...')}
 			</Loading>
@@ -604,7 +591,6 @@
 						<div class="categories-grid" style="padding-bottom: 0;">
 							<Activity
 								{wrapped}
-								identity={currentUserIdentity}
 								year={selectedYear}
 								{activities}
 								{useFullActivityHistory}
diff --git a/src/lib/Tools/Wrapped/Top/Activity.svelte b/src/lib/Tools/Wrapped/Top/Activity.svelte
index a000389c..dab431c3 100644
--- a/src/lib/Tools/Wrapped/Top/Activity.svelte
+++ b/src/lib/Tools/Wrapped/Top/Activity.svelte
@@ -1,11 +1,10 @@
 <script lang="ts">
 	import type { ActivityHistoryEntry } from '$lib/AniList/activity';
-	import type { UserIdentity } from '$lib/AniList/identity';
+	import identity from '$stores/identity';
 	import type { Wrapped } from '$lib/AniList/wrapped';
 	import proxy from '$lib/Utility/proxy';
 
 	export let wrapped: Wrapped;
-	export let identity: UserIdentity;
 	export let year: number;
 	export let activities: ActivityHistoryEntry[];
 	export let useFullActivityHistory: boolean;
@@ -15,14 +14,14 @@
 </script>
 
 <div class="grid-item image-grid avatar-grid category top-category">
-	<a href={`https://anilist.co/user/${identity.name}`} target="_blank">
+	<a href={`https://anilist.co/user/${$identity.name}`} target="_blank">
 		<img src={proxy(wrapped.avatar.large)} alt="User Avatar" on:load={updateWidth} />
 	</a>
 	<div>
 		<div>
-			<a href={`https://anilist.co/user/${identity.name}`} target="_blank">
+			<a href={`https://anilist.co/user/${$identity.name}`} target="_blank">
 				<b>
-					{identity.name}
+					{$identity.name}
 				</b>
 			</a>
 		</div>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 5c01cb98..3b243232 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -2,7 +2,7 @@
 	import { env } from '$env/dynamic/public';
 	import { userIdentity as getUserIdentity } from '$lib/AniList/identity';
 	import { onMount } from 'svelte';
-	import userIdentity from '$stores/userIdentity';
+	import userIdentity from '$stores/identity';
 	import settings from '$stores/settings';
 	import { browser } from '$app/environment';
 	import HeadTitle from '$lib/Home/HeadTitle.svelte';
@@ -27,11 +27,6 @@
 
 	$: i18nLocale.set($settings.displayLanguage);
 
-	let currentUserIdentity = {
-		name: '',
-		id: -1,
-		avatar: 'https://s4.anilist.co/file/anilistcdn/user/avatar/large/default.png'
-	};
 	const navigationOrder = ['/', '/completed', '/schedule', '/updates', '/tools', '/settings'];
 	const previousPage: Readable<string | null> = readable(null, (set) => {
 		const unsubscribe = navigating.subscribe(($navigating) => {
@@ -59,12 +54,7 @@
 		settings.get();
 
 		if (data.user !== undefined) {
-			if ($userIdentity === '') {
-				userIdentity.set(JSON.stringify(await getUserIdentity(data.user)));
-			}
-
-			currentUserIdentity = JSON.parse($userIdentity);
-			currentUserIdentity.name = currentUserIdentity.name;
+			if ($userIdentity.id === -1) userIdentity.set(await getUserIdentity(data.user));
 		}
 	});
 </script>
@@ -88,7 +78,7 @@
 			<span style="opacity: 50%;" class="header-item">|</span>
 
 			{#if data.user}
-				<a href={root(`/user/${currentUserIdentity.name}`)} class="header-item">
+				<a href={root(`/user/${$userIdentity.name}`)} class="header-item">
 					{$locale().navigation.profile}
 				</a>
 			{/if}
@@ -111,8 +101,8 @@
 					{$locale().navigation.logOut}
 				</a>
 				{#if data.user}
-					<a href={root(`/user/${currentUserIdentity.name}`)} class="header-item">
-						<img id="avatar" src={currentUserIdentity.avatar} alt="Avatar" />
+					<a href={root(`/user/${$userIdentity.name}`)} class="header-item">
+						<img id="avatar" src={$userIdentity.avatar} alt="Avatar" />
 					</a>
 				{/if}
 			{/if}
@@ -122,7 +112,9 @@
 	<p />
 
 	<Notifications item={Notification} zIndex={5000}>
-		<Root {data} {way}><slot /></Root>
+		{#if $userIdentity.id !== -1}
+			<Root {data} {way}><slot /></Root>
+		{/if}
 	</Notifications>
 </div>
 
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 9d31b7a5..d3f7d5f9 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import { userIdentity as getUserIdentity } from '$lib/AniList/identity';
 	import AnimeList from '$lib/List/Anime/DueAnimeList.svelte';
 	import MangaListTemplate from '$lib/List/Manga/MangaListTemplate.svelte';
 	import UpcomingAnimeList from '$lib/List/Anime/UpcomingAnimeList.svelte';
-	import userIdentity from '$stores/userIdentity';
+	import userIdentity from '$stores/identity.js';
 	import settings from '$stores/settings';
 	import ListTitle from '$lib/List/ListTitle.svelte';
 	import HeadTitle from '$lib/Home/HeadTitle.svelte';
@@ -13,24 +12,7 @@
 
 	export let data;
 
-	let currentUserIdentity = {
-		name: '',
-		id: -1,
-		avatar: 'https://s4.anilist.co/file/anilistcdn/user/avatar/large/default.png'
-	};
-
-	onMount(async () => {
-		createHeightObserver();
-
-		if (data.user !== undefined) {
-			if ($userIdentity === '') {
-				userIdentity.set(JSON.stringify(await getUserIdentity(data.user)));
-			}
-
-			currentUserIdentity = JSON.parse($userIdentity);
-			currentUserIdentity.name = currentUserIdentity.name;
-		}
-	});
+	onMount(createHeightObserver);
 </script>
 
 <HeadTitle />
@@ -51,8 +33,8 @@
 	{:else}
 		{#if !$settings.disableUpcomingAnime}
 			<details open={!$settings.displayUpcomingAnimeCollapsed} class="list">
-				{#if currentUserIdentity.id != -1}
-					<UpcomingAnimeList user={data.user} identity={currentUserIdentity} />
+				{#if $userIdentity.id != -1}
+					<UpcomingAnimeList user={data.user} identity={$userIdentity} />
 				{:else}
 					<ListTitle custom="Upcoming Episodes" />
 
@@ -67,8 +49,8 @@
 
 		{#if !$settings.disableAnime}
 			<details open={!$settings.displayAnimeCollapsed} class="list">
-				{#if currentUserIdentity.id != -1}
-					<AnimeList user={data.user} identity={currentUserIdentity} />
+				{#if $userIdentity.id != -1}
+					<AnimeList user={data.user} identity={$userIdentity} />
 				{:else}
 					<ListTitle anime />
 
@@ -83,10 +65,10 @@
 
 		{#if !$settings.disableManga}
 			<details open={!$settings.displayMangaCollapsed} class="list">
-				{#if currentUserIdentity.id != -1}
+				{#if $userIdentity.id != -1}
 					<MangaListTemplate
 						user={data.user}
-						identity={currentUserIdentity}
+						identity={$userIdentity}
 						displayUnresolved={$settings.displayUnresolved}
 						due={true}
 					/>
diff --git a/src/routes/completed/+page.svelte b/src/routes/completed/+page.svelte
index 60549788..d1e0172f 100644
--- a/src/routes/completed/+page.svelte
+++ b/src/routes/completed/+page.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import { userIdentity as getUserIdentity } from '$lib/AniList/identity';
-	import userIdentity from '$stores/userIdentity';
+	import userIdentity from '$stores/identity.js';
 	import settings from '$stores/settings';
 	import WatchingAnimeList from '$lib/List/Anime/CompletedAnimeList.svelte';
 	import ListTitle from '$lib/List/ListTitle.svelte';
@@ -12,24 +11,7 @@
 
 	export let data;
 
-	let currentUserIdentity = {
-		name: '',
-		id: -1,
-		avatar: 'https://s4.anilist.co/file/anilistcdn/user/avatar/large/default.png'
-	};
-
-	onMount(async () => {
-		createHeightObserver();
-
-		if (data.user !== undefined) {
-			if ($userIdentity === '') {
-				userIdentity.set(JSON.stringify(await getUserIdentity(data.user)));
-			}
-
-			currentUserIdentity = JSON.parse($userIdentity);
-			currentUserIdentity.name = currentUserIdentity.name;
-		}
-	});
+	onMount(createHeightObserver);
 </script>
 
 <HeadTitle route="Completed" path="/completed" />
@@ -41,8 +23,8 @@
 		Please log in to view due media.
 	{:else}
 		<details open={!$settings.displayAnimeCollapsed} class="list">
-			{#if currentUserIdentity.id != -1}
-				<WatchingAnimeList user={data.user} identity={currentUserIdentity} />
+			{#if $userIdentity.id != -1}
+				<WatchingAnimeList user={data.user} identity={$userIdentity} />
 			{:else}
 				<ListTitle custom="Anime" />
 
@@ -51,10 +33,10 @@
 		</details>
 
 		<details open={!$settings.displayMangaCollapsed} class="list">
-			{#if currentUserIdentity.id != -1}
+			{#if $userIdentity.id != -1}
 				<MangaListTemplate
 					user={data.user}
-					identity={currentUserIdentity}
+					identity={$userIdentity}
 					displayUnresolved={$settings.displayUnresolved}
 					due={false}
 				/>
diff --git a/src/stores/identity.ts b/src/stores/identity.ts
new file mode 100644
index 00000000..765ce5b2
--- /dev/null
+++ b/src/stores/identity.ts
@@ -0,0 +1,53 @@
+import { browser } from '$app/environment';
+import type { UserIdentity } from '$lib/AniList/identity';
+import { writable } from 'svelte/store';
+
+const defaultIdentity: UserIdentity = {
+	name: '',
+	id: -1,
+	avatar: 'https://s4.anilist.co/file/anilistcdn/user/avatar/large/default.png'
+};
+
+const createStore = () => {
+	const { subscribe, set, update } = writable<UserIdentity>(
+		JSON.parse(
+			browser
+				? localStorage.getItem('identity') ?? JSON.stringify(defaultIdentity)
+				: JSON.stringify(defaultIdentity)
+		)
+	);
+	let state: UserIdentity;
+
+	subscribe((value) => (state = value));
+
+	return {
+		subscribe,
+		set,
+		update,
+		reset: () => set(defaultIdentity),
+		get: () => {
+			const keys = Object.keys(defaultIdentity);
+			const identityKeys = Object.keys(state);
+			const updatedIdentity = { ...state };
+
+			for (const key of keys)
+				if (!identityKeys.includes(key))
+					(updatedIdentity[key as keyof UserIdentity] as unknown) =
+						defaultIdentity[key as keyof UserIdentity];
+
+			if (browser) localStorage.setItem('identity', JSON.stringify(updatedIdentity));
+
+			return updatedIdentity;
+		},
+		setKey: (key: keyof UserIdentity, value: unknown) =>
+			update((identity) => ({ ...identity, [key]: value }))
+	};
+};
+
+const identity = createStore();
+
+identity.subscribe((value) => {
+	if (browser) localStorage.setItem('identity', JSON.stringify(value));
+});
+
+export default identity;
diff --git a/src/stores/userIdentity.ts b/src/stores/userIdentity.ts
deleted file mode 100644
index 4b90358d..00000000
--- a/src/stores/userIdentity.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { browser } from '$app/environment';
-import { writable } from 'svelte/store';
-
-const userIdentity = writable<string>(browser ? localStorage.getItem('userIdentity') ?? '' : '');
-
-userIdentity.subscribe((value) => {
-	if (browser) localStorage.setItem('userIdentity', value);
-});
-
-export default userIdentity;