refactor(lastactivity): move info to component

3 files changed, 73 insertions, 88 deletions

diff --git a/src/lib/LastActivity.svelte b/src/lib/LastActivity.svelte
new file mode 100644
index 00000000..bd0d6fae
--- /dev/null
+++ b/src/lib/LastActivity.svelte
@@ -0,0 +1,69 @@
+<script lang="ts">
+	import userIdentity from '$stores/userIdentity';
+	import { onMount } from 'svelte';
+	import {
+		userIdentity as getUserIdentity,
+		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 };
+	let lastActivityWasToday = true;
+
+	onMount(async () => {
+		if (user !== undefined) {
+			if ($userIdentity === '') {
+				userIdentity.set(JSON.stringify(await getUserIdentity(user)));
+			}
+
+			currentUserIdentity = JSON.parse($userIdentity);
+			currentUserIdentity.name = currentUserIdentity.name;
+			lastActivityWasToday =
+				(await lastActivityDate(currentUserIdentity, user)).date.toDateString() >=
+				new Date().toDateString();
+
+			if (!lastActivityWasToday) {
+				if ($settings.displayLimitListHeight) {
+					document.querySelectorAll('.list').forEach((list) => {
+						(list as HTMLElement).style.maxHeight = `calc((100vh - ${
+							document.querySelector('#list-container')?.getBoundingClientRect().top
+						}px) - 5rem)`;
+					});
+				}
+			}
+		}
+	});
+
+	const timeLeftToday = () => {
+		const now = new Date();
+		const currentHour = now.getHours();
+		const currentMinute = now.getMinutes();
+		const hoursLeft = 24 - currentHour;
+		let minutesLeft = 0;
+		let timeLeft = '';
+
+		if (hoursLeft > 0) {
+			minutesLeft = hoursLeft * 60 - currentMinute;
+		} else {
+			minutesLeft = 24 * 60 - (currentHour * 60 + currentMinute);
+		}
+
+		if (minutesLeft > 60) {
+			timeLeft = `${Math.round(minutesLeft / 60)} hours`;
+		} else {
+			timeLeft = `${minutesLeft} minutes`;
+		}
+
+		return timeLeft;
+	};
+</script>
+
+{#if !lastActivityWasToday}
+	<p>
+		You don't have any new activity statuses from the past day! Create one within {timeLeftToday()}
+		to keep your streak!
+	</p>
+{/if}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index ec553c66..2809a649 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -6,14 +6,13 @@
 	import UpcomingAnimeList from '$lib/List/Anime/UpcomingAnimeList.svelte';
 	import userIdentity from '$stores/userIdentity';
 	import settings from '$stores/settings';
-	import { lastActivityDate } from '$lib/AniList/activity';
 	import ListTitle from '$lib/List/ListTitle.svelte';
 	import HeadTitle from '$lib/HeadTitle.svelte';
+	import LastActivity from '$lib/LastActivity.svelte';
 
 	export let data;
 
 	let currentUserIdentity = { name: '', id: -1 };
-	let lastActivityWasToday = true;
 
 	onMount(async () => {
 		if ($settings.displayLimitListHeight) {
@@ -31,54 +30,13 @@
 
 			currentUserIdentity = JSON.parse($userIdentity);
 			currentUserIdentity.name = currentUserIdentity.name;
-			lastActivityWasToday =
-				(await lastActivityDate(currentUserIdentity, data.user)).date.toDateString() >=
-				new Date().toDateString();
-
-			if (!lastActivityWasToday) {
-				if ($settings.displayLimitListHeight) {
-					document.querySelectorAll('.list').forEach((list) => {
-						(list as HTMLElement).style.maxHeight = `calc((100vh - ${
-							document.querySelector('#list-container')?.getBoundingClientRect().top
-						}px) - 5rem)`;
-					});
-				}
-			}
 		}
 	});
-
-	const timeLeftToday = () => {
-		const now = new Date();
-		const currentHour = now.getHours();
-		const currentMinute = now.getMinutes();
-		const hoursLeft = 24 - currentHour;
-		let minutesLeft = 0;
-		let timeLeft = '';
-
-		if (hoursLeft > 0) {
-			minutesLeft = hoursLeft * 60 - currentMinute;
-		} else {
-			minutesLeft = 24 * 60 - (currentHour * 60 + currentMinute);
-		}
-
-		if (minutesLeft > 60) {
-			timeLeft = `${Math.round(minutesLeft / 60)} hours`;
-		} else {
-			timeLeft = `${minutesLeft} minutes`;
-		}
-
-		return timeLeft;
-	};
 </script>
 
 <HeadTitle />
 
-{#if !lastActivityWasToday}
-	<p>
-		You don't have any new activity statuses from the past day! Create one within {timeLeftToday()}
-		to keep your streak!
-	</p>
-{/if}
+<LastActivity user={data.user} />
 
 <div
 	id="list-container"
diff --git a/src/routes/completed/+page.svelte b/src/routes/completed/+page.svelte
index ba9243bf..0ef8f10d 100644
--- a/src/routes/completed/+page.svelte
+++ b/src/routes/completed/+page.svelte
@@ -4,15 +4,14 @@
 	import userIdentity from '$stores/userIdentity';
 	import settings from '$stores/settings';
 	import WatchingAnimeList from '$lib/List/Anime/CompletedAnimeList.svelte';
-	import { lastActivityDate } from '$lib/AniList/activity';
 	import ListTitle from '$lib/List/ListTitle.svelte';
 	import MangaListTemplate from '$lib/List/Manga/MangaListTemplate.svelte';
 	import HeadTitle from '$lib/HeadTitle.svelte';
+	import LastActivity from '$lib/LastActivity.svelte';
 
 	export let data;
 
 	let currentUserIdentity = { name: '', id: -1 };
-	let lastActivityWasToday = true;
 
 	onMount(async () => {
 		if ($settings.displayLimitListHeight) {
@@ -30,54 +29,13 @@
 
 			currentUserIdentity = JSON.parse($userIdentity);
 			currentUserIdentity.name = currentUserIdentity.name;
-			lastActivityWasToday =
-				(await lastActivityDate(currentUserIdentity, data.user)).date.toDateString() >=
-				new Date().toDateString();
-
-			if (!lastActivityWasToday) {
-				if ($settings.displayLimitListHeight) {
-					document.querySelectorAll('.list').forEach((list) => {
-						(list as HTMLElement).style.maxHeight = `calc((100vh - ${
-							document.querySelector('#list-container')?.getBoundingClientRect().top
-						}px) - 5rem)`;
-					});
-				}
-			}
 		}
 	});
-
-	const timeLeftToday = () => {
-		const now = new Date();
-		const currentHour = now.getHours();
-		const currentMinute = now.getMinutes();
-		const hoursLeft = 24 - currentHour;
-		let minutesLeft = 0;
-		let timeLeft = '';
-
-		if (hoursLeft > 0) {
-			minutesLeft = hoursLeft * 60 - currentMinute;
-		} else {
-			minutesLeft = 24 * 60 - (currentHour * 60 + currentMinute);
-		}
-
-		if (minutesLeft > 60) {
-			timeLeft = `${Math.round(minutesLeft / 60)} hours`;
-		} else {
-			timeLeft = `${minutesLeft} minutes`;
-		}
-
-		return timeLeft;
-	};
 </script>
 
 <HeadTitle route="Completed" path="/completed" />
 
-{#if !lastActivityWasToday}
-	<p>
-		You don't have any new activity statuses from the past day! Create one within {timeLeftToday()}
-		to keep your streak!
-	</p>
-{/if}
+<LastActivity user={data.user} />
 
 <div id="list-container">
 	{#if data.user === undefined}