feat(user): use preferences graphl api

3 files changed, 90 insertions, 53 deletions

diff --git a/src/graphql/user/schema.graphql b/src/graphql/user/schema.graphql
index d68e7fd9..7c910015 100644
--- a/src/graphql/user/schema.graphql
+++ b/src/graphql/user/schema.graphql
@@ -52,10 +52,10 @@ type Preferences {
   created_at: String!
   updated_at: String!
   user_id: Int!
-  pinned_hololive_streams: [String]!
+  pinned_hololive_streams: [String!]!
   hide_missing_badges: Boolean!
   biography: String
   badge_wall_css: String!
   hide_awc_badges: Boolean!
-  pinned_badge_wall_categories: [String]!
+  pinned_badge_wall_categories: [String!]!
 }
diff --git a/src/routes/user/[user]/+page.gql b/src/routes/user/[user]/+page.gql
index a0ca87c1..aa9c86b0 100644
--- a/src/routes/user/[user]/+page.gql
+++ b/src/routes/user/[user]/+page.gql
@@ -3,5 +3,17 @@ query Profile($id: Int!) {
 		badges {
 			id
 		}
+
+		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]/+page.svelte b/src/routes/user/[user]/+page.svelte
index 14c304f3..08bfd978 100644
--- a/src/routes/user/[user]/+page.svelte
+++ b/src/routes/user/[user]/+page.svelte
@@ -2,7 +2,6 @@
 	import settings from '$stores/settings';
 	import ParallaxImage from '../../../lib/Image/ParallaxImage.svelte';
 	import { typeSchedule, type ParseResult } from '$lib/Hololive/hololive';
-	import type { User } from '$lib/Data/AniList/user';
 	import HeadTitle from '$lib/Home/HeadTitle.svelte';
 	import Message from '$lib/Loading/Message.svelte';
 	import { estimatedDayReading } from '$lib/Media/Manga/time';
@@ -17,17 +16,69 @@
 	import SettingHint from '$lib/Settings/SettingHint.svelte';
 	import proxy from '$lib/Utility/proxy';
 	import { parseScheduleHtml } from '$lib/Data/hololive';
-	import type { UserPreferences } from '$lib/Database/SB/User/preferences';
+	import type { Preferences } from '../../../graphql/$types';
 	import SvelteMarkdown from 'svelte-markdown';
 	import MarkdownLink from '$lib/MarkdownLink.svelte';
 	import LinkedTooltip from '$lib/Tooltip/LinkedTooltip.svelte';
+	import { graphql } from '$houdini';
 
 	export let data;
 
-	let userData: User | undefined = undefined;
+	$: ({ Profile } = data);
+	$: preferences = $Profile.fetching ? undefined : ($Profile.data?.User.preferences as Preferences);
+
+	const setCategoriesQuery = graphql(`
+		mutation SetCategories($categories: [String!]!) {
+			setPinnedBadgeWallCategories(categories: $categories) {
+				pinned_badge_wall_categories
+			}
+		}
+	`);
+
+	const toggleCategoryQuery = graphql(`
+		mutation ToggleCategory($category: String!) {
+			togglePinnedBadgeWallCategory(category: $category) {
+				pinned_badge_wall_categories
+			}
+		}
+	`);
+
+	const toggleHideMissingBadgesQuery = graphql(`
+		mutation ToggleHideMissingBadges {
+			toggleHideMissingBadges {
+				hide_missing_badges
+			}
+		}
+	`);
+
+	const toggleHideAWCBadgesQuery = graphql(`
+		mutation ToggleHideAWCBadges {
+			toggleHideAWCBadges {
+				hide_awc_badges
+			}
+		}
+	`);
+
+	const setBiographyQuery = graphql(`
+		mutation SetBiography($biography: String!) {
+			setBiography(biography: $biography) {
+				biography
+			}
+		}
+	`);
+
+	const setBadgeWallCSSQuery = graphql(`
+		mutation SetBadgeWallCSS($css: String!) {
+			setBadgeWallCSS(css: $css) {
+				badge_wall_css
+			}
+		}
+	`);
+
+	$: userData = data.userData;
+
 	let error = false;
 	let schedule: ParseResult | undefined = undefined;
-	let preferences: UserPreferences | undefined = undefined;
 	let draggedCategory: string | null = null;
 	let draggedOverCategory: string | null = null;
 
@@ -38,9 +89,6 @@
 				username
 			}
 		}).user.profile.badges;
-	$: ({ Profile } = data);
-
-	onMount(() => (userData = data.userData));
 
 	const handleDragStart = (
 		event: DragEvent & { currentTarget: EventTarget & HTMLDivElement },
@@ -99,15 +147,12 @@
 	const handleDrop = (event: { preventDefault: () => void }) => {
 		event.preventDefault();
 
-		if (userData && preferences) {
-			fetch(root(`/api/preferences?id=${userData.id}&setCategories`), {
-				method: 'PUT',
-				headers: {
-					'Content-Type': 'application/json'
-				},
-				body: JSON.stringify(preferences.pinned_badge_wall_categories)
-			}).then(refreshPreferences);
-		}
+		if (userData && preferences)
+			setCategoriesQuery
+				.mutate({
+					categories: preferences.pinned_badge_wall_categories
+				})
+				.then();
 
 		draggedCategory = null;
 		draggedOverCategory = null;
@@ -127,32 +172,19 @@
 		);
 	});
 
-	$: if (userData) {
-		fetch(root(`/api/preferences?id=${userData.id}`))
-			.then((rawPreferences) => rawPreferences.json())
-			.then((JSONpreferences) => (preferences = JSONpreferences));
-	}
-
 	const getBadgeWallCSS = () =>
 		(document.getElementById('badgeWallCSS') as HTMLTextAreaElement).value;
 
 	const getBiography = () =>
 		(document.getElementById('biography') as HTMLTextAreaElement).value.slice(0, 3000);
 
-	const refreshPreferences = () =>
-		fetch(root(`/api/preferences?id=${userData?.id}`))
-			.then((rawPreferences) => rawPreferences.json())
-			.then((JSONpreferences) => (preferences = JSONpreferences));
-
 	const toggleCategory = () => {
 		if (!userData) return;
 
 		const categoryElement = document.getElementById('category') as HTMLInputElement;
 		const category = categoryElement.value;
 
-		fetch(root(`/api/preferences?id=${userData.id}&toggleCategory=${category}`), {
-			method: 'PUT'
-		}).then(refreshPreferences);
+		toggleCategoryQuery.mutate({ category }).then();
 
 		categoryElement.value = '';
 	};
@@ -226,7 +258,7 @@
 							<a href={root(`/user/${userData.name}/badges`)}>Badge Wall</a>
 						</p>
 
-						{#if schedule && preferences && preferences.biography && preferences.biography.length > 0}
+						{#if preferences && preferences.biography && preferences.biography.length > 0}
 							<SvelteMarkdown
 								source={preferences.biography}
 								renderers={{
@@ -304,10 +336,7 @@
 			<input
 				type="checkbox"
 				on:change={() => {
-					if (userData)
-						fetch(root(`/api/preferences?id=${userData.id}&toggleHideMissingBadges`), {
-							method: 'PUT'
-						});
+					if (userData) toggleHideMissingBadgesQuery.mutate(null).then();
 				}}
 				checked={preferences.hide_missing_badges}
 			/>
@@ -319,10 +348,7 @@
 			<input
 				type="checkbox"
 				on:change={() => {
-					if (userData)
-						fetch(root(`/api/preferences?id=${userData.id}&toggleHideAWCBadges`), {
-							method: 'PUT'
-						});
+					if (userData) toggleHideAWCBadgesQuery.mutate(null).then();
 				}}
 				checked={preferences.hide_awc_badges}
 			/>
@@ -351,10 +377,7 @@
 
 						<button
 							on:click={() => {
-								if (userData)
-									fetch(root(`/api/preferences?id=${userData.id}&toggleCategory=${category}`), {
-										method: 'PUT'
-									}).then(refreshPreferences);
+								if (userData) toggleCategoryQuery.mutate({ category }).then();
 							}}>Remove</button
 						>
 					</div>
@@ -376,10 +399,11 @@
 			<button
 				on:click={() => {
 					if (userData)
-						fetch(root(`/api/preferences?id=${userData.id}&biography`), {
-							method: 'PUT',
-							body: getBiography()
-						}).then(refreshPreferences);
+						setBiographyQuery
+							.mutate({
+								biography: getBiography()
+							})
+							.then();
 				}}>Save</button
 			>
 			<textarea
@@ -397,10 +421,11 @@
 			<button
 				on:click={() => {
 					if (userData)
-						fetch(root(`/api/preferences?id=${userData.id}&badgeWallCSS`), {
-							method: 'PUT',
-							body: getBadgeWallCSS()
-						});
+						setBadgeWallCSSQuery
+							.mutate({
+								css: getBadgeWallCSS()
+							})
+							.then();
 				}}>Save</button
 			>
 			<textarea