feat(wrapped): full-year activity history

1 files changed, 26 insertions, 37 deletions

diff --git a/src/lib/Tools/ActivityHistoryGrid.svelte b/src/lib/Tools/ActivityHistoryGrid.svelte
index b0f782b5..45d53342 100644
--- a/src/lib/Tools/ActivityHistoryGrid.svelte
+++ b/src/lib/Tools/ActivityHistoryGrid.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import {
-		activityHistory,
 		fillMissingDays,
-		type ActivityHistoryEntry
+		type ActivityHistoryEntry,
+		activityHistory
 	} from '$lib/AniList/activity.js';
 	import { onMount } from 'svelte';
 	import userIdentity from '../../stores/userIdentity.js';
@@ -13,8 +13,9 @@
 	import { clearAllParameters } from './tool.js';
 
 	export let user: AniListAuthorisation;
+	export let activityData: ActivityHistoryEntry[] | null = null;
 
-	let activityHistoryData: Promise<ActivityHistoryEntry[]>;
+	let activityHistoryData: ActivityHistoryEntry[];
 	let currentUserIdentity = { name: '', id: -1 };
 	let baseHue = Math.floor(Math.random() * 360);
 
@@ -26,16 +27,10 @@
 
 			currentUserIdentity = JSON.parse($userIdentity);
 			currentUserIdentity.name = currentUserIdentity.name;
-			activityHistoryData = activityHistory(currentUserIdentity);
+			activityHistoryData = activityData || (await activityHistory(currentUserIdentity));
 		}
 	});
 
-	// const incrementDate = (date: Date): Date => {
-	// 	date.setDate(date.getDate() + 1);
-
-	// 	return date;
-	// };
-
 	const gradientColour = (amount: number, maxAmount: number, baseHue: number) => {
 		const lightness = 100 - Math.round((amount / maxAmount) * 50);
 
@@ -45,35 +40,29 @@
 
 {#if user === undefined}
 	Please log in to view this page.
+{:else if activityHistoryData === undefined}
+	Loading ...
 {:else}
-	{#await activityHistoryData}
-		Loading ...
-	{:then activities}
-		{#if activities === undefined}
-			Loading ...
-		{:else}
-			{@const filledActivities = fillMissingDays(activities)}
-			{@const highestActivity = Math.max(...filledActivities.map((activity) => activity.amount))}
+	{@const filledActivities = fillMissingDays(activityHistoryData)}
+	{@const highestActivity = Math.max(...filledActivities.map((activity) => activity.amount))}
 
-			<div class="grid">
-				{#each filledActivities as activity}
-					<div
-						class="grid-item"
-						style="background-color: {gradientColour(activity.amount, highestActivity, baseHue)}"
-						on:click={() => (baseHue = Math.floor(Math.random() * 360))}
-						on:keydown={() => {
-							return;
-						}}
-						role="button"
-						tabindex="0"
-						title={`Date: ${new Date(activity.date * 1000).toLocaleDateString()}\nAmount: ${
-							activity.amount
-						}`}
-					/>
-				{/each}
-			</div>
-		{/if}
-	{/await}
+	<div class="grid">
+		{#each filledActivities as activity}
+			<div
+				class="grid-item"
+				style="background-color: {gradientColour(activity.amount, highestActivity, baseHue)}"
+				on:click={() => (baseHue = Math.floor(Math.random() * 360))}
+				on:keydown={() => {
+					return;
+				}}
+				role="button"
+				tabindex="0"
+				title={`Date: ${new Date(activity.date * 1000).toLocaleDateString()}\nAmount: ${
+					activity.amount
+				}`}
+			/>
+		{/each}
+	</div>
 {/if}
 
 <style>