From 9539a2d9e75aadc0bf8498f9eb8fa53f282f8027 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Sun, 6 Oct 2024 07:25:41 -0700
Subject: feat(badges): use locally cached identity

---
 src/routes/user/[user]/badges/+page.svelte | 628 ++++++++++++++---------------
 1 file changed, 301 insertions(+), 327 deletions(-)

(limited to 'src/routes')

diff --git a/src/routes/user/[user]/badges/+page.svelte b/src/routes/user/[user]/badges/+page.svelte
index f2a97bbb..e5b5fe5f 100644
--- a/src/routes/user/[user]/badges/+page.svelte
+++ b/src/routes/user/[user]/badges/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import AWC from './../../../../lib/User/BadgeWall/AWC.svelte';
-	import { userIdentity } from '$lib/Data/AniList/identity';
 	import { user, type User } from '$lib/Data/AniList/user';
 	import type { Badge } from '../../../../graphql/$types';
 	import { onDestroy, onMount } from 'svelte';
@@ -11,7 +10,6 @@
 	import Skeleton from '$lib/Loading/Skeleton.svelte';
 	import Message from '$lib/Loading/Message.svelte';
 	import Dropdown from '$lib/Layout/Dropdown.svelte';
-	import AnimeRateLimited from '$lib/Error/AnimeRateLimited.svelte';
 	import { activityText } from '$lib/Data/AniList/activity';
 	import SettingHint from '$lib/Settings/SettingHint.svelte';
 	import Popup from '$lib/Layout/Popup.svelte';
@@ -180,9 +178,7 @@
 
 	let editMode = false;
 	let importMode = false;
-	let currentUserIdentity: ReturnType<typeof userIdentity>;
 	let error: null | string;
-	// const socket = io();
 	let awcPromise: Promise<Response>;
 	// let dark = true;
 	// let transparent = false;
@@ -230,18 +226,6 @@
 		}
 
 		awcPromise = fetch(proxy(`https://awc.moe/challenger/${badger.name}`));
-
-		if (data.user && !isId) {
-			currentUserIdentity = userIdentity(data.user);
-		} else {
-			currentUserIdentity = new Promise((resolve) =>
-				resolve({
-					name: 'Guest',
-					id: -1,
-					avatar: 'https://s4.anilist.co/file/anilistcdn/user/avatar/large/default.png'
-				})
-			);
-		}
 	});
 
 	onDestroy(() => {
@@ -574,198 +558,244 @@
 		{loadError}
 	</Popup>
 {:else}
-	{#await currentUserIdentity}
-		<Message message="Loading user ..." />
+	{@const isOwner = $identity && (isId ? $identity.id : $identity.name) === data.username}
+
+	{#if $BadgeWallUser.fetching || !$BadgeWallUser.data}
+		<Message message="Loading badges ..." />
 
 		<Skeleton grid={true} count={100} width="150px" height="170px" />
-	{:then identity}
-		{@const isOwner = identity && (isId ? identity.id : identity.name) === data.username}
-
-		{#if $BadgeWallUser.fetching || !$BadgeWallUser.data}
-			<Message message="Loading badges ..." />
-
-			<Skeleton grid={true} count={100} width="150px" height="170px" />
-		{:else}
-			{@const ungroupedBadges = castBadgesToIndexedBadges($BadgeWallUser.data.User.badges)}
-			{@const isBadgeSelected =
-				selectedBadge &&
-				selectedBadge !== undefined &&
-				selectedBadge.image &&
-				selectedBadge.image !== undefined &&
-				!editMode}
-
-			<div id="badges">
-				{#if preferences && !preferences.hide_awc_badges}
-					<AWC {awcPromise} {categoryFilter} {isOwner} {preferences} />
-				{/if}
+	{:else}
+		{@const ungroupedBadges = castBadgesToIndexedBadges($BadgeWallUser.data.User.badges)}
+		{@const isBadgeSelected =
+			selectedBadge &&
+			selectedBadge !== undefined &&
+			selectedBadge.image &&
+			selectedBadge.image !== undefined &&
+			!editMode}
+
+		<div id="badges">
+			{#if preferences && !preferences.hide_awc_badges}
+				<AWC {awcPromise} {categoryFilter} {isOwner} {preferences} />
+			{/if}
 
-				{#if ungroupedBadges === null}
-					<Message message="Loading badges ..." />
-
-					<Skeleton grid={true} count={10} width="150px" height="170px" />
-				{:else}
-					{@const groupedBadges = Object.entries(
-						groupBadges(removeHiddenBadges(isOwner, ungroupedBadges))
-					)}
-
-					{#if isOwner || authorised}
-						{@const shadowHiddenCount = ungroupedBadges.filter(
-							(badge) => badge.shadow_hidden
-						).length}
-						{@const shadowHidden = shadowHiddenCount > 0}
-
-						{#if shadowHidden}
-							<div class="card">
-								<b>Notice:</b> The Badge Wall overseer system has detected badges containing
-								AI-generated material on your wall. {shadowHiddenCount} of your badges have been shadow
-								hidden.
-								<p />
-								You may use the "Un-shadow Hide Badges" button to unhide these badges, from where you
-								will be required to use the hide feature to hide these badges from the public, while
-								allowing them to stay visible to you as the account holder.
-							</div>
-						{:else if !noticeDismissed}
-							<div class="card">
-								<b>Notice:</b> AniList has begun purging outbound links which contain AI-generated
-								material, this includes Badge Wall. If you have collected badges with AI-generated
-								elements, kindly use the hide feature to hide these badges from the public, while
-								allowing them to stay visible to you as the account holder.
-								<p />
-								Failure to comply with this request at your earliest convenience will result in the hiding
-								of all badges from your Badge Wall.
-								<p />
-								<button
-									on:click={() => {
-										noticeDismissed = true;
+			{#if ungroupedBadges === null}
+				<Message message="Loading badges ..." />
 
-										localStorage.setItem('badgeWallNoticeDismissed', 'true');
-									}}
-								>
-									Dismiss
-								</button>
-							</div>
-						{/if}
+				<Skeleton grid={true} count={10} width="150px" height="170px" />
+			{:else}
+				{@const groupedBadges = Object.entries(
+					groupBadges(removeHiddenBadges(isOwner, ungroupedBadges))
+				)}
 
-						<p />
+				{#if isOwner || authorised}
+					{@const shadowHiddenCount = ungroupedBadges.filter((badge) => badge.shadow_hidden).length}
+					{@const shadowHidden = shadowHiddenCount > 0}
 
+					{#if shadowHidden}
 						<div class="card">
-							{#if authorised}
-								<button on:click={setShadowHide}>Shadow Hide Badges</button>
-							{/if}
+							<b>Notice:</b> The Badge Wall overseer system has detected badges containing
+							AI-generated material on your wall. {shadowHiddenCount} of your badges have been shadow
+							hidden.
+							<p />
+							You may use the "Un-shadow Hide Badges" button to unhide these badges, from where you will
+							be required to use the hide feature to hide these badges from the public, while allowing
+							them to stay visible to you as the account holder.
+						</div>
+					{:else if !noticeDismissed}
+						<div class="card">
+							<b>Notice:</b> AniList has begun purging outbound links which contain AI-generated
+							material, this includes Badge Wall. If you have collected badges with AI-generated
+							elements, kindly use the hide feature to hide these badges from the public, while
+							allowing them to stay visible to you as the account holder.
+							<p />
+							Failure to comply with this request at your earliest convenience will result in the hiding
+							of all badges from your Badge Wall.
+							<p />
+							<button
+								on:click={() => {
+									noticeDismissed = true;
+
+									localStorage.setItem('badgeWallNoticeDismissed', 'true');
+								}}
+							>
+								Dismiss
+							</button>
+						</div>
+					{/if}
+
+					<p />
 
-							{#if isOwner && authorised}
+					<div class="card">
+						{#if authorised}
+							<button on:click={setShadowHide}>Shadow Hide Badges</button>
+						{/if}
+
+						{#if isOwner && authorised}
+							<span style="margin: 0 0.625rem;">•</span>
+						{/if}
+
+						{#if isOwner}
+							<button
+								on:click={() => {
+									selectedBadge = undefined;
+									editMode = !editMode;
+								}}
+							>
+								{editMode
+									? $locale().user.badges.editMode.disable
+									: $locale().user.badges.editMode.enable}
+							</button>
+							<span style="margin: 0 0.625rem;">•</span>
+							<button
+								on:click={() => {
+									selectedBadge = undefined;
+									importMode = !importMode;
+								}}
+							>
+								{importMode
+									? $locale().user.badges.importMode.disable
+									: $locale().user.badges.importMode.enable}
+							</button>
+							<span style="margin: 0 0.625rem;">•</span>
+							<button
+								on:click={() => {
+									selectedBadge = undefined;
+									migrateMode = !migrateMode;
+								}}
+							>
+								Migrate Category
+							</button>
+							<span style="margin: 0 0.625rem;">•</span>
+							<button
+								on:click={() => {
+									selectedBadge = undefined;
+									hideMode = !hideMode;
+								}}
+							>
+								Hide Category
+							</button>
+							<!-- <!-- <span style="margin: 0 0.625rem;">•</span> -->
+							<!-- <button on:click={() => exportBadges(groupedBadges)}>Export Badges</button> -->
+
+							{#if shadowHidden}
 								<span style="margin: 0 0.625rem;">•</span>
+								<button on:click={setShadowHide}>Un-shadow Hide Badges</button>
 							{/if}
 
-							{#if isOwner}
-								<button
-									on:click={() => {
-										selectedBadge = undefined;
-										editMode = !editMode;
-									}}
-								>
-									{editMode
-										? $locale().user.badges.editMode.disable
-										: $locale().user.badges.editMode.enable}
-								</button>
-								<span style="margin: 0 0.625rem;">•</span>
-								<button
-									on:click={() => {
-										selectedBadge = undefined;
-										importMode = !importMode;
-									}}
-								>
-									{importMode
-										? $locale().user.badges.importMode.disable
-										: $locale().user.badges.importMode.enable}
-								</button>
-								<span style="margin: 0 0.625rem;">•</span>
-								<button
-									on:click={() => {
-										selectedBadge = undefined;
-										migrateMode = !migrateMode;
-									}}
-								>
-									Migrate Category
-								</button>
-								<span style="margin: 0 0.625rem;">•</span>
-								<button
-									on:click={() => {
-										selectedBadge = undefined;
-										hideMode = !hideMode;
-									}}
-								>
-									Hide Category
-								</button>
-								<!-- <!-- <span style="margin: 0 0.625rem;">•</span> -->
-								<!-- <button on:click={() => exportBadges(groupedBadges)}>Export Badges</button> -->
-
-								{#if shadowHidden}
-									<span style="margin: 0 0.625rem;">•</span>
-									<button on:click={setShadowHide}>Un-shadow Hide Badges</button>
-								{/if}
+							{#if editMode && isOwner}
+								{@const groups = groupedBadges
+									.map((group) => group[0])
+									.filter((group) => group !== 'Uncategorised')}
+								{@const designers = castAsStringArray([
+									...new Set(
+										ungroupedBadges
+											.map((badge) => badge.designer)
+											.filter((designer) => designer !== undefined && designer !== null)
+											.filter(
+												(designer, index, array) =>
+													array.indexOf(designer) === index && !array.includes(`@${designer}`)
+											)
+									)
+								])}
 
-								{#if editMode && isOwner}
-									{@const groups = groupedBadges
-										.map((group) => group[0])
-										.filter((group) => group !== 'Uncategorised')}
-									{@const designers = castAsStringArray([
-										...new Set(
-											ungroupedBadges
-												.map((badge) => badge.designer)
-												.filter((designer) => designer !== undefined && designer !== null)
-												.filter(
-													(designer, index, array) =>
-														array.indexOf(designer) === index && !array.includes(`@${designer}`)
-												)
-										)
-									])}
-
-									<p />
-
-									{#if error}
-										<p style="color: red;">{error}</p>
-									{/if}
+								<p />
 
+								{#if error}
+									<p style="color: red;">{error}</p>
+								{/if}
+
+								<input
+									type="text"
+									placeholder={$locale().user.badges.editMode.imageURL}
+									name="image_url"
+									minlength="1"
+									maxlength="1000"
+									size="15"
+									value={selectedBadge ? selectedBadge.image : ''}
+								/>
+								<input
+									type="text"
+									placeholder={$locale().user.badges.editMode.activityURL}
+									name="activity_url"
+									minlength="1"
+									maxlength="1000"
+									size="15"
+									value={selectedBadge
+										? selectedBadge.post === '#'
+											? ''
+											: selectedBadge.post
+										: ''}
+								/>
+								<input
+									type="text"
+									placeholder={$locale().user.badges.editMode.description}
+									name="description"
+									minlength="1"
+									maxlength="1000"
+									size="15"
+									value={selectedBadge ? selectedBadge.description : ''}
+								/>
+								<Dropdown
+									items={groups.map((group) => ({
+										name: group,
+										url: '#',
+										onClick: () => {
+											const category = document.querySelector('input[name="category"]');
+
+											if (category instanceof HTMLInputElement) category.value = group;
+										}
+									}))}
+									header={false}
+									center={false}
+								>
+									<span slot="title">
+										<input
+											type="text"
+											placeholder={$locale().user.badges.editMode.category}
+											name="category"
+											minlength="1"
+											maxlength="1000"
+											size="15"
+											value={selectedBadge
+												? selectedBadge.category === 'Uncategorised'
+													? ''
+													: selectedBadge.category
+												: ''}
+											list="categories"
+										/>
+									</span>
+								</Dropdown>
+								<span style="float: right;">
 									<input
-										type="text"
-										placeholder={$locale().user.badges.editMode.imageURL}
-										name="image_url"
-										minlength="1"
-										maxlength="1000"
-										size="15"
-										value={selectedBadge ? selectedBadge.image : ''}
-									/>
-									<input
-										type="text"
-										placeholder={$locale().user.badges.editMode.activityURL}
-										name="activity_url"
-										minlength="1"
-										maxlength="1000"
-										size="15"
-										value={selectedBadge
-											? selectedBadge.post === '#'
-												? ''
-												: selectedBadge.post
+										type="datetime-local"
+										value={selectedBadge && selectedBadge.time
+											? dateToInputTime(databaseTimeToDate(selectedBadge.time))
 											: ''}
 									/>
+									<small>Must be full date and time, defaults to now if any fields empty</small>
+								</span>
+
+								<p />
+
+								<div class="edit-row-2">
 									<input
 										type="text"
-										placeholder={$locale().user.badges.editMode.description}
-										name="description"
+										placeholder={$locale().user.badges.editMode.source}
+										name="source"
 										minlength="1"
 										maxlength="1000"
-										size="15"
-										value={selectedBadge ? selectedBadge.description : ''}
+										size="16"
+										value={selectedBadge ? selectedBadge.source : ''}
 									/>
 									<Dropdown
-										items={groups.map((group) => ({
-											name: group,
+										items={designers.map((designer) => ({
+											name: designer,
 											url: '#',
 											onClick: () => {
-												const category = document.querySelector('input[name="category"]');
+												const designerField = document.querySelector('input[name="designer"]');
 
-												if (category instanceof HTMLInputElement) category.value = group;
+												if (designerField instanceof HTMLInputElement)
+													designerField.value = designer;
 											}
 										}))}
 										header={false}
@@ -774,166 +804,110 @@
 										<span slot="title">
 											<input
 												type="text"
-												placeholder={$locale().user.badges.editMode.category}
-												name="category"
+												placeholder={$locale().user.badges.editMode.designer}
+												name="designer"
+												minlength="1"
+												maxlength="1000"
+												size="17"
+												value={selectedBadge ? selectedBadge.designer : ''}
+											/>
+										</span>
+									</Dropdown>
+									<Dropdown
+										items={[false, true].map((hidden) => ({
+											name: hidden ? 'Hidden' : 'Shown',
+											url: '#',
+											onClick: () => {
+												const hiddenInput = document.querySelector('input[name="hidden"]');
+
+												if (hiddenInput instanceof HTMLInputElement)
+													hiddenInput.value = hidden ? 'Hidden' : 'Shown';
+											}
+										}))}
+										header={false}
+										center={false}
+									>
+										<span slot="title">
+											<input
+												type="text"
+												placeholder="Shown"
+												name="hidden"
 												minlength="1"
 												maxlength="1000"
 												size="15"
 												value={selectedBadge
-													? selectedBadge.category === 'Uncategorised'
-														? ''
-														: selectedBadge.category
-													: ''}
-												list="categories"
+													? selectedBadge.hidden
+														? 'Hidden'
+														: 'Shown'
+													: 'Shown'}
 											/>
 										</span>
 									</Dropdown>
-									<span style="float: right;">
-										<input
-											type="datetime-local"
-											value={selectedBadge && selectedBadge.time
-												? dateToInputTime(databaseTimeToDate(selectedBadge.time))
-												: ''}
-										/>
-										<small>Must be full date and time, defaults to now if any fields empty</small>
-									</span>
-
-									<p />
-
-									<div class="edit-row-2">
-										<input
-											type="text"
-											placeholder={$locale().user.badges.editMode.source}
-											name="source"
-											minlength="1"
-											maxlength="1000"
-											size="16"
-											value={selectedBadge ? selectedBadge.source : ''}
-										/>
-										<Dropdown
-											items={designers.map((designer) => ({
-												name: designer,
-												url: '#',
-												onClick: () => {
-													const designerField = document.querySelector('input[name="designer"]');
-
-													if (designerField instanceof HTMLInputElement)
-														designerField.value = designer;
-												}
-											}))}
-											header={false}
-											center={false}
-										>
-											<span slot="title">
-												<input
-													type="text"
-													placeholder={$locale().user.badges.editMode.designer}
-													name="designer"
-													minlength="1"
-													maxlength="1000"
-													size="17"
-													value={selectedBadge ? selectedBadge.designer : ''}
-												/>
-											</span>
-										</Dropdown>
-										<Dropdown
-											items={[false, true].map((hidden) => ({
-												name: hidden ? 'Hidden' : 'Shown',
-												url: '#',
-												onClick: () => {
-													const hiddenInput = document.querySelector('input[name="hidden"]');
-
-													if (hiddenInput instanceof HTMLInputElement)
-														hiddenInput.value = hidden ? 'Hidden' : 'Shown';
-												}
-											}))}
-											header={false}
-											center={false}
-										>
-											<span slot="title">
-												<input
-													type="text"
-													placeholder="Shown"
-													name="hidden"
-													minlength="1"
-													maxlength="1000"
-													size="15"
-													value={selectedBadge
-														? selectedBadge.hidden
-															? 'Hidden'
-															: 'Shown'
-														: 'Shown'}
-												/>
-											</span>
-										</Dropdown>
-										<button class="button-lined" on:click={submitBadge}
-											>{selectedBadge
-												? $locale().user.badges.editMode.update
-												: $locale().user.badges.editMode.add}</button
+									<button class="button-lined" on:click={submitBadge}
+										>{selectedBadge
+											? $locale().user.badges.editMode.update
+											: $locale().user.badges.editMode.add}</button
+									>
+									{#if selectedBadge}
+										{$locale().user.badges.editMode.or}
+										<button
+											class="button-lined"
+											on:click={() => {
+												if (selectedBadge) removeBadge(selectedBadge);
+											}}>{$locale().user.badges.editMode.delete}</button
 										>
-										{#if selectedBadge}
-											{$locale().user.badges.editMode.or}
-											<button
-												class="button-lined"
-												on:click={() => {
-													if (selectedBadge) removeBadge(selectedBadge);
-												}}>{$locale().user.badges.editMode.delete}</button
-											>
-										{/if}
-									</div>
-								{/if}
+									{/if}
+								</div>
 							{/if}
-						</div>
-					{/if}
+						{/if}
+					</div>
+				{/if}
 
-					<p />
+				<p />
 
-					<Badges
-						{ungroupedBadges}
-						{groupedBadges}
-						{categoryFilter}
-						{editMode}
-						{preferences}
-						bind:selectedBadge
-					/>
-				{/if}
-			</div>
+				<Badges
+					{ungroupedBadges}
+					{groupedBadges}
+					{categoryFilter}
+					{editMode}
+					{preferences}
+					bind:selectedBadge
+				/>
+			{/if}
+		</div>
 
-			{#if isBadgeSelected}
-				<!-- {@const anyAdjacentBadgeExists =
+		{#if isBadgeSelected}
+			<!-- {@const anyAdjacentBadgeExists =
 							adjacentBadgeExists(selectedBadge, ungroupedBadges, -1) ||
 							adjacentBadgeExists(selectedBadge, ungroupedBadges, 1)} -->
 
-				<Popup
-					fullscreen
-					show={isBadgeSelected}
-					onLeave={() => {
-						selectedBadge = undefined;
-					}}
-				>
-					<BadgePreview
-						bind:selectedBadge
-						onNext={() => setAdjacentCursor(ungroupedBadges, 1)}
-						onPrevious={() => setAdjacentCursor(ungroupedBadges, -1)}
-						hasNext={adjacentBadgeExists(selectedBadge, ungroupedBadges, 1) !== undefined}
-						hasPrevious={adjacentBadgeExists(selectedBadge, ungroupedBadges, -1) !== undefined}
-					/>
-
-					{#if authorised}
-						<button on:click={shadowHideBadge}>
-							{#if selectedBadge && selectedBadge.shadow_hidden}
-								Un-shadow
-							{:else}
-								Shadow
-							{/if} Hide Badge ({selectedBadge ? selectedBadge.id : 0})
-						</button>
-					{/if}
-				</Popup>
-			{/if}
+			<Popup
+				fullscreen
+				show={isBadgeSelected}
+				onLeave={() => {
+					selectedBadge = undefined;
+				}}
+			>
+				<BadgePreview
+					bind:selectedBadge
+					onNext={() => setAdjacentCursor(ungroupedBadges, 1)}
+					onPrevious={() => setAdjacentCursor(ungroupedBadges, -1)}
+					hasNext={adjacentBadgeExists(selectedBadge, ungroupedBadges, 1) !== undefined}
+					hasPrevious={adjacentBadgeExists(selectedBadge, ungroupedBadges, -1) !== undefined}
+				/>
+
+				{#if authorised}
+					<button on:click={shadowHideBadge}>
+						{#if selectedBadge && selectedBadge.shadow_hidden}
+							Un-shadow
+						{:else}
+							Shadow
+						{/if} Hide Badge ({selectedBadge ? selectedBadge.id : 0})
+					</button>
+				{/if}
+			</Popup>
 		{/if}
-	{:catch}
-		<AnimeRateLimited>This user's badges could not be loaded.</AnimeRateLimited>
-	{/await}
+	{/if}
 {/if}
 
 {#if true}
-- 
cgit v1.2.3