From 819135cb2d65a9c589e0cf2249ef92fb36af600f Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Mon, 13 May 2024 02:21:55 -0700
Subject: refactor(badges): move awc to component

---
 src/lib/User/BadgeWall/AWC.svelte          |  97 ++++++++++++++++++++++++++
 src/lib/User/BadgeWall/badges.css          |  16 +++++
 src/routes/user/[user]/badges/+page.svelte | 107 +----------------------------
 3 files changed, 116 insertions(+), 104 deletions(-)
 create mode 100644 src/lib/User/BadgeWall/AWC.svelte
 create mode 100644 src/lib/User/BadgeWall/badges.css

diff --git a/src/lib/User/BadgeWall/AWC.svelte b/src/lib/User/BadgeWall/AWC.svelte
new file mode 100644
index 00000000..c42a13c5
--- /dev/null
+++ b/src/lib/User/BadgeWall/AWC.svelte
@@ -0,0 +1,97 @@
+<script lang="ts">
+	import type { AWCBadgesGroup } from '$lib/Data/AWC';
+	import type { UserPreferences } from '$lib/Database/userPreferences';
+	import { cdn, thumbnail } from '$lib/Utility/image';
+	import FallbackBadge from './FallbackBadge.svelte';
+	import './badges.css';
+
+	export let awcPromise: Promise<Response>;
+	export let categoryFilter: string | null;
+	export let isOwner: boolean;
+	export let preferences: UserPreferences;
+
+	const awcBadgesGrouped = (awcResponse: string): AWCBadgesGroup[] => {
+		return Array.from(
+			new DOMParser().parseFromString(awcResponse, 'text/html').querySelectorAll('.container')
+		)
+			.map((c) => {
+				const container = c as HTMLDivElement;
+				const header = container.querySelector('.container-header') as HTMLDivElement;
+
+				if (!header) return;
+
+				if (!['Anime', 'Manga', 'Special'].includes(header.innerText)) return;
+
+				if (header.innerText === 'Special') {
+					return {
+						group: header.innerText,
+						badges: Array.from(container.querySelectorAll('.badge-display img')).map((b) => {
+							const badge = b as HTMLImageElement;
+
+							return {
+								link: '#',
+								description: badge.alt,
+								image: badge.src.includes('placeholder')
+									? cdn('https://awc.moe/static/images/badge-placeholder.png')
+									: badge.src
+							};
+						})
+					};
+				}
+
+				return {
+					group: header.innerText,
+					badges: Array.from(container.querySelectorAll('.badge-display a')).map((b) => {
+						const badge = b as HTMLAnchorElement;
+						const image = badge.querySelector('img') as HTMLImageElement;
+
+						return {
+							link: badge.href,
+							description: image.alt,
+							image: image.src.includes('placeholder')
+								? cdn('https://awc.moe/static/images/badge-placeholder.png')
+								: image.src
+						};
+					})
+				};
+			})
+			.filter((b) => b !== undefined) as AWCBadgesGroup[];
+	};
+</script>
+
+{#await awcPromise then badges}
+	{#await badges.clone().text() then text}
+		{@const parsedBadges = awcBadgesGrouped(text)}
+
+		{#if parsedBadges.length > 0}
+			{#each parsedBadges as group}
+				<details open={categoryFilter || isOwner ? false : true}>
+					<summary>
+						Anime Watching Club <span class="opaque">|</span>
+						{group.group}
+					</summary>
+
+					<p />
+
+					<div class="badges">
+						{#each group.badges as badge, index}
+							<div id={`badge-${index}`}>
+								<FallbackBadge
+									{badge}
+									source={cdn(thumbnail(badge.image))}
+									alternative={badge.description}
+									fallback={thumbnail(badge.image)}
+									hideOnError={preferences.hide_missing_badges}
+									awc
+									{index}
+								/>
+							</div>
+						{/each}
+					</div>
+				</details>
+
+				<p />
+			{/each}
+		{/if}
+	{/await}
+{/await}
diff --git a/src/lib/User/BadgeWall/badges.css b/src/lib/User/BadgeWall/badges.css
new file mode 100644
index 00000000..19f8996f
--- /dev/null
+++ b/src/lib/User/BadgeWall/badges.css
@@ -0,0 +1,16 @@
+/* body {
+		margin: 0;
+		padding: 0;
+		text-align: center;
+		background-color: #151f2e;
+	} */
+
+.badges {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(8%, 1fr));
+	gap: 0.25rem;
+}
+
+.edit-row-2 {
+	margin-top: -1.25rem;
+}
diff --git a/src/routes/user/[user]/badges/+page.svelte b/src/routes/user/[user]/badges/+page.svelte
index 772cfdfe..eb895dbd 100644
--- a/src/routes/user/[user]/badges/+page.svelte
+++ b/src/routes/user/[user]/badges/+page.svelte
@@ -1,4 +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 '$lib/Database/userBadges';
@@ -29,7 +30,7 @@
 	import { thumbnail } from '$lib/Utility/image.js';
 	import authorisedJson from '$lib/Data/Static/authorised.json';
 	import identity from '$stores/identity';
-	import type { AWCBadgesGroup } from '$lib/Data/AWC.js';
+	import '$lib/User/BadgeWall/badges.css';
 
 	export let data;
 
@@ -160,54 +161,6 @@
 	// 	});
 	// };
 
-	const awcBadgesGrouped = (awcResponse: string): AWCBadgesGroup[] => {
-		return Array.from(
-			new DOMParser().parseFromString(awcResponse, 'text/html').querySelectorAll('.container')
-		)
-			.map((c) => {
-				const container = c as HTMLDivElement;
-				const header = container.querySelector('.container-header') as HTMLDivElement;
-
-				if (!header) return;
-
-				if (!['Anime', 'Manga', 'Special'].includes(header.innerText)) return;
-
-				if (header.innerText === 'Special') {
-					return {
-						group: header.innerText,
-						badges: Array.from(container.querySelectorAll('.badge-display img')).map((b) => {
-							const badge = b as HTMLImageElement;
-
-							return {
-								link: '#',
-								description: badge.alt,
-								image: badge.src.includes('placeholder')
-									? cdn('https://awc.moe/static/images/badge-placeholder.png')
-									: badge.src
-							};
-						})
-					};
-				}
-
-				return {
-					group: header.innerText,
-					badges: Array.from(container.querySelectorAll('.badge-display a')).map((b) => {
-						const badge = b as HTMLAnchorElement;
-						const image = badge.querySelector('img') as HTMLImageElement;
-
-						return {
-							link: badge.href,
-							description: image.alt,
-							image: image.src.includes('placeholder')
-								? cdn('https://awc.moe/static/images/badge-placeholder.png')
-								: image.src
-						};
-					})
-				};
-			})
-			.filter((b) => b !== undefined) as AWCBadgesGroup[];
-	};
-
 	const submitBadge = () => {
 		const imageURL = document.querySelector('input[name="image_url"]') as HTMLInputElement;
 		const activityURL = document.querySelector('input[name="activity_url"]') as HTMLInputElement;
@@ -537,42 +490,7 @@
 
 					<div id="badges">
 						{#if !preferences.hide_awc_badges}
-							{#await awcPromise then badges}
-								{#await badges.clone().text() then text}
-									{@const parsedBadges = awcBadgesGrouped(text)}
-
-									{#if parsedBadges.length > 0}
-										{#each parsedBadges as group}
-											<details open={categoryFilter || isOwner ? false : true}>
-												<summary>
-													Anime Watching Club <span class="opaque">|</span>
-													{group.group}
-												</summary>
-
-												<p />
-
-												<div class="badges">
-													{#each group.badges as badge, index}
-														<div id={`badge-${index}`}>
-															<FallbackBadge
-																{badge}
-																source={cdn(thumbnail(badge.image))}
-																alternative={badge.description}
-																fallback={thumbnail(badge.image)}
-																hideOnError={preferences.hide_missing_badges}
-																awc
-																{index}
-															/>
-														</div>
-													{/each}
-												</div>
-											</details>
-
-											<p />
-										{/each}
-									{/if}
-								{/await}
-							{/await}
+							<AWC {awcPromise} {categoryFilter} {isOwner} {preferences} />
 						{/if}
 
 						{#if ungroupedBadges === null}
@@ -1161,22 +1079,3 @@
 		>Toggle Visibility</button
 	>
 </Popup>
-
-<style>
-	/* body {
-		margin: 0;
-		padding: 0;
-		text-align: center;
-		background-color: #151f2e;
-	} */
-
-	.badges {
-		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(8%, 1fr));
-		gap: 0.25rem;
-	}
-
-	.edit-row-2 {
-		margin-top: -1.25rem;
-	}
-</style>
-- 
cgit v1.2.3