feat(badges): use preferences graphql api

3 files changed, 55 insertions, 43 deletions

diff --git a/src/routes/user/[user]/badges/+page.gql b/src/routes/user/[user]/badges/+page.gql
index 44c35bd8..f7d3991e 100644
--- a/src/routes/user/[user]/badges/+page.gql
+++ b/src/routes/user/[user]/badges/+page.gql
@@ -1,4 +1,4 @@
-query UserBadges($id: Int!) {
+query BadgeWallUser($id: Int!) {
 	User(id: $id) {
 		badges {
 			post
@@ -13,5 +13,17 @@ query UserBadges($id: Int!) {
 			shadow_hidden
 			click_count
 		}
+
+		preferences {
+			created_at
+			updated_at
+			user_id
+			pinned_hololive_streams
+			hide_missing_badges
+			biography
+			badge_wall_css
+			hide_awc_badges
+			pinned_badge_wall_categories
+		}
 	}
 }
diff --git a/src/routes/user/[user]/badges/+page.svelte b/src/routes/user/[user]/badges/+page.svelte
index c4d48454..f17bb790 100644
--- a/src/routes/user/[user]/badges/+page.svelte
+++ b/src/routes/user/[user]/badges/+page.svelte
@@ -2,11 +2,10 @@
 	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/SB/User/badges';
+	import type { Badge } from '../../../../graphql/$types';
 	import { onDestroy, onMount } from 'svelte';
 	import HeadTitle from '$lib/Home/HeadTitle.svelte';
 	import { databaseTimeToDate, dateToInputTime, inputTimeToDatabaseTime } from '$lib/Utility/time';
-	import root from '$lib/Utility/root';
 	import proxy from '$lib/Utility/proxy';
 	import locale from '$stores/locale';
 	import Skeleton from '$lib/Loading/Skeleton.svelte';
@@ -17,7 +16,6 @@
 	import SettingHint from '$lib/Settings/SettingHint.svelte';
 	import Popup from '$lib/Layout/Popup.svelte';
 	import { page } from '$app/stores';
-	import type { UserPreferences } from '$lib/Database/SB/User/preferences';
 	import { browser } from '$app/environment';
 	import BadgePreview from '$lib/User/BadgeWall/BadgePreview.svelte';
 	import authorisedJson from '$lib/Data/Static/authorised.json';
@@ -26,10 +24,34 @@
 	import Badges from '$lib/User/BadgeWall/Badges.svelte';
 	import type { IndexedBadge } from '$lib/User/BadgeWall/badge';
 	import { graphql } from '$houdini';
+	import type { Preferences } from '../../../../graphql/user/$types';
 
 	export let data;
 
-	$: ({ UserBadges } = data);
+	$: ({ BadgeWallUser } = data);
+	$: preferences = $BadgeWallUser.fetching
+		? undefined
+		: ($BadgeWallUser.data?.User.preferences as Preferences);
+
+	$: if (browser && preferences && preferences.badge_wall_css) {
+		const sanitise = (css: string) =>
+			css
+				.replace(/\/\*[\s\S]*?\*\//g, '')
+				.replace(/<\/?[^>]+(>|$)/g, '')
+				.replace(
+					/(expression|javascript|vbscript|onerror|onload|onclick|onmouseover|onmouseout|onmouseup|onmousedown|onkeydown|onkeyup|onkeypress|onblur|onfocus|onsubmit|onreset|onselect|onchange|ondblclick):/gi,
+					''
+				)
+				.replace(/(behaviour|behavior|moz-binding|content):/gi, '')
+				.replace(/\s+/g, ' ')
+				.trim();
+		const style = document.createElement('style');
+
+		style.dataset.badgeWall = 'true';
+		style.innerHTML = sanitise(preferences.badge_wall_css);
+
+		document.head.appendChild(style);
+	}
 
 	const updateBadgeQuery = graphql(`
 		mutation UpdateBadge(
@@ -157,7 +179,6 @@
 	let badger: Partial<User>;
 	let migrateMode = false;
 	let hideMode = false;
-	let preferences: UserPreferences;
 	const authorised = authorisedJson.includes($identity.id);
 	let noticeDismissed = false;
 
@@ -189,27 +210,6 @@
 		}
 
 		awcPromise = fetch(proxy(`https://awc.moe/challenger/${badger.name}`));
-		preferences = await (await fetch(root(`/api/preferences?id=${badger.id}`))).json();
-
-		if (preferences && preferences.badge_wall_css) {
-			const sanitise = (css: string) =>
-				css
-					.replace(/\/\*[\s\S]*?\*\//g, '')
-					.replace(/<\/?[^>]+(>|$)/g, '')
-					.replace(
-						/(expression|javascript|vbscript|onerror|onload|onclick|onmouseover|onmouseout|onmouseup|onmousedown|onkeydown|onkeyup|onkeypress|onblur|onfocus|onsubmit|onreset|onselect|onchange|ondblclick):/gi,
-						''
-					)
-					.replace(/(behaviour|behavior|moz-binding|content):/gi, '')
-					.replace(/\s+/g, ' ')
-					.trim();
-			const style = document.createElement('style');
-
-			style.dataset.badgeWall = 'true';
-			style.innerHTML = sanitise(preferences.badge_wall_css);
-
-			document.head.appendChild(style);
-		}
 
 		if (data.user && !isId) {
 			currentUserIdentity = userIdentity(data.user);
@@ -561,12 +561,12 @@
 	{:then identity}
 		{@const isOwner = identity && (isId ? identity.id : identity.name) === data.username}
 
-		{#if $UserBadges.fetching || !$UserBadges.data}
+		{#if $BadgeWallUser.fetching || !$BadgeWallUser.data}
 			<Message message="Loading badges ..." />
 
 			<Skeleton grid={true} count={100} width="150px" height="170px" />
 		{:else}
-			{@const ungroupedBadges = castBadgesToIndexedBadges($UserBadges.data.User.badges)}
+			{@const ungroupedBadges = castBadgesToIndexedBadges($BadgeWallUser.data.User.badges)}
 			{@const isBadgeSelected =
 				selectedBadge &&
 				selectedBadge !== undefined &&
diff --git a/src/routes/user/[user]/badges/+page.ts b/src/routes/user/[user]/badges/+page.ts
index 8b7204ad..bd13fdc4 100644
--- a/src/routes/user/[user]/badges/+page.ts
+++ b/src/routes/user/[user]/badges/+page.ts
@@ -1,20 +1,20 @@
-import { load_UserBadges } from '$houdini';
+import { load_BadgeWallUser } from '$houdini';
 import { user } from '$lib/Data/AniList/user';
 import type { LoadEvent } from '@sveltejs/kit';
 
 export const load = async (event: LoadEvent) => {
-	const username = event.params.user as string;
-	const userData = await user(username, /^\d+$/.test(username));
+  const username = event.params.user as string;
+  const userData = await user(username, /^\d+$/.test(username));
 
-	return {
-		...(await load_UserBadges({
-			event,
-			variables: {
-				id: userData.id
-			}
-		})),
-		username,
-		userData,
-		event
-	};
+  return {
+    ...(await load_BadgeWallUser({
+      event,
+      variables: {
+        id: userData.id
+      }
+    })),
+    username,
+    userData,
+    event
+  };
 };