feat(badges): use array for pinned categories

3 files changed, 21 insertions, 29 deletions

diff --git a/src/lib/Database/userPreferences.ts b/src/lib/Database/userPreferences.ts
index c3ef5c04..ca2d62be 100644
--- a/src/lib/Database/userPreferences.ts
+++ b/src/lib/Database/userPreferences.ts
@@ -9,7 +9,7 @@ export interface UserPreferences {
 	biography: string | null;
 	badge_wall_css: string;
 	hide_awc_badges: boolean;
-	pinned_badge_wall_categories: string;
+	pinned_badge_wall_categories: string[];
 }
 
 interface NewUserPreferences {
@@ -19,7 +19,7 @@ interface NewUserPreferences {
 	badge_wall_css?: string;
 	biography?: string;
 	hide_awc_badges?: boolean;
-	pinned_badge_wall_categories?: string;
+	pinned_badge_wall_categories?: string[];
 }
 
 export const getUserPreferences = async (userId: number) => {
@@ -126,7 +126,7 @@ export const togglePinnedBadgeWallCategory = async (userId: number, category: st
 
 	if (!userPreferences) return null;
 
-	const pinnedCategories = userPreferences.pinned_badge_wall_categories.split(',');
+	const pinnedCategories = userPreferences.pinned_badge_wall_categories;
 	const index = pinnedCategories.indexOf(category);
 
 	if (index === -1) pinnedCategories.push(category);
@@ -137,11 +137,11 @@ export const togglePinnedBadgeWallCategory = async (userId: number, category: st
 		pinned_hololive_streams: userPreferences.pinned_hololive_streams,
 		hide_missing_badges: userPreferences.hide_missing_badges,
 		badge_wall_css: userPreferences.badge_wall_css,
-		pinned_badge_wall_categories: pinnedCategories.join(',')
+		pinned_badge_wall_categories: pinnedCategories
 	});
 };
 
-export const setPinnedBadgeWallCategories = async (userId: number, categories: string) => {
+export const setPinnedBadgeWallCategories = async (userId: number, categories: string[]) => {
 	const userPreferences = await getUserPreferences(userId);
 
 	if (!userPreferences) return null;
diff --git a/src/routes/api/preferences/+server.ts b/src/routes/api/preferences/+server.ts
index 0291dd0c..37e8af29 100644
--- a/src/routes/api/preferences/+server.ts
+++ b/src/routes/api/preferences/+server.ts
@@ -68,14 +68,11 @@ export const PUT = async ({ url, cookies, request }) => {
 		);
 
 	if (url.searchParams.get('setCategories') !== null)
-		return Response.json(
-			await setPinnedBadgeWallCategories(userId, url.searchParams.get('setCategories') || ''),
-			{
-				headers: {
-					'Access-Control-Allow-Origin': 'https://due.moe'
-				}
+		return Response.json(await setPinnedBadgeWallCategories(userId, await request.json()), {
+			headers: {
+				'Access-Control-Allow-Origin': 'https://due.moe'
 			}
-		);
+		});
 
 	if (url.searchParams.get('biography') !== null)
 		return Response.json(await setBiography(userId, (await request.text()).slice(0, 3000)), {
diff --git a/src/routes/user/[user]/+page.svelte b/src/routes/user/[user]/+page.svelte
index 3c443ae6..186b53c3 100644
--- a/src/routes/user/[user]/+page.svelte
+++ b/src/routes/user/[user]/+page.svelte
@@ -20,7 +20,6 @@
 	import SvelteMarkdown from 'svelte-markdown';
 	import MarkdownLink from '$lib/MarkdownLink.svelte';
 	import LinkedTooltip from '$lib/Tooltip/LinkedTooltip.svelte';
-	import type { DragEventHandler } from 'svelte/elements';
 
 	export let data;
 
@@ -69,14 +68,14 @@
 		if (draggedCategory !== category && preferences && draggedCategory) {
 			draggedOverCategory = category;
 
-			const categories = preferences.pinned_badge_wall_categories.split(',');
+			const categories = preferences.pinned_badge_wall_categories;
 			const draggedIndex = categories.indexOf(draggedCategory);
 			const targetIndex = categories.indexOf(category);
 
 			categories.splice(draggedIndex, 1);
 			categories.splice(targetIndex, 0, draggedCategory);
 
-			preferences.pinned_badge_wall_categories = categories.join(',');
+			preferences.pinned_badge_wall_categories = categories;
 		}
 	};
 
@@ -89,13 +88,13 @@
 		if (draggedOverCategory === category && preferences && draggedCategory) {
 			draggedOverCategory = null;
 
-			const categories = preferences.pinned_badge_wall_categories.split(',');
+			const categories = preferences.pinned_badge_wall_categories;
 			const draggedIndex = categories.indexOf(draggedCategory);
 
 			categories.splice(draggedIndex, 1);
 			categories.splice(categories.indexOf(category) + 1, 0, draggedCategory);
 
-			preferences.pinned_badge_wall_categories = categories.join(',');
+			preferences.pinned_badge_wall_categories = categories;
 		}
 	};
 
@@ -103,17 +102,13 @@
 		event.preventDefault();
 
 		if (userData && preferences) {
-			fetch(
-				root(
-					`/api/preferences?id=${userData.id}&setCategories=${preferences.pinned_badge_wall_categories}`
-				),
-				{
-					method: 'PUT',
-					headers: {
-						'Content-Type': 'application/json'
-					}
-				}
-			).then(refreshPreferences);
+			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);
 		}
 
 		draggedCategory = null;
@@ -325,7 +320,7 @@
 			Pinned Categories
 
 			<div class="pinned-categories">
-				{#each preferences.pinned_badge_wall_categories.split(',') as category}
+				{#each preferences.pinned_badge_wall_categories as category}
 					<div
 						class="card card-small pinned-category"
 						draggable="true"