feat(badges): individual badges shadow hiding

3 files changed, 213 insertions, 176 deletions

diff --git a/src/lib/Database/userBadges.ts b/src/lib/Database/userBadges.ts
index 0b2e2491..c29f06d5 100644
--- a/src/lib/Database/userBadges.ts
+++ b/src/lib/Database/userBadges.ts
@@ -2,94 +2,97 @@ import { databaseTimeToDate } from '$lib/Utility/time';
 import supabase from './supabase';
 
 export interface Badge {
-	post?: string;
-	image?: string;
-	description?: string | null;
-	id?: number;
-	time?: string;
-	category?: string | null;
-	hidden?: boolean;
-	source?: string | null;
-	designer?: string | null;
-	shadow_hidden?: boolean;
+  post?: string;
+  image?: string;
+  description?: string | null;
+  id?: number;
+  time?: string;
+  category?: string | null;
+  hidden?: boolean;
+  source?: string | null;
+  designer?: string | null;
+  shadow_hidden?: boolean;
 }
 
 export const getUserBadges = async (userId: number): Promise<Badge[]> => {
-	const { data, error } = await supabase.from('user_badges').select('*').eq('user_id', userId);
+  const { data, error } = await supabase.from('user_badges').select('*').eq('user_id', userId);
 
-	if (error) return [];
+  if (error) return [];
 
-	return data.sort((a, b) =>
-		databaseTimeToDate((a as Badge).time ?? '').getTime() >
-		databaseTimeToDate((b as Badge).time ?? '').getTime()
-			? -1
-			: 1
-	) as Badge[];
+  return data.sort((a, b) =>
+    databaseTimeToDate((a as Badge).time ?? '').getTime() >
+      databaseTimeToDate((b as Badge).time ?? '').getTime()
+      ? -1
+      : 1
+  ) as Badge[];
 };
 
 export const addUserBadge = async (userId: number, badge: Badge) => {
-	const { post, image, description, time, category, hidden, source, designer } = badge;
+  const { post, image, description, time, category, hidden, source, designer } = badge;
 
-	if (post === undefined || image === undefined) return;
+  if (post === undefined || image === undefined) return;
 
-	if (time) {
-		await supabase.from('user_badges').insert({
-			user_id: userId,
-			post,
-			image,
-			description,
-			time,
-			category,
-			hidden,
-			source,
-			designer
-		});
-	} else {
-		await supabase
-			.from('user_badges')
-			.insert({ user_id: userId, post, image, description, category, hidden, source, designer });
-	}
+  if (time) {
+    await supabase.from('user_badges').insert({
+      user_id: userId,
+      post,
+      image,
+      description,
+      time,
+      category,
+      hidden,
+      source,
+      designer
+    });
+  } else {
+    await supabase
+      .from('user_badges')
+      .insert({ user_id: userId, post, image, description, category, hidden, source, designer });
+  }
 };
 
 export const removeUserBadge = async (userId: number, id: number) => {
-	if (!isNaN(id)) await supabase.from('user_badges').delete().eq('id', id).eq('user_id', userId);
+  if (!isNaN(id)) await supabase.from('user_badges').delete().eq('id', id).eq('user_id', userId);
 };
 
 export const updateUserBadge = async (userId: number, id: number, badge: Badge) => {
-	if (badge.post === undefined || badge.image === undefined) return;
+  if (badge.post === undefined || badge.image === undefined) return;
 
-	await supabase
-		.from('user_badges')
-		.update({
-			post: badge.post,
-			image: badge.image,
-			description: badge.description,
-			category: badge.category,
-			time: badge.time,
-			hidden: badge.hidden,
-			source: badge.source,
-			designer: badge.designer
-		})
-		.eq('id', id)
-		.eq('user_id', userId);
+  await supabase
+    .from('user_badges')
+    .update({
+      post: badge.post,
+      image: badge.image,
+      description: badge.description,
+      category: badge.category,
+      time: badge.time,
+      hidden: badge.hidden,
+      source: badge.source,
+      designer: badge.designer
+    })
+    .eq('id', id)
+    .eq('user_id', userId);
 };
 
 export const renameCategory = async (userId: number, oldName: string, newName: string) =>
-	await supabase
-		.from('user_badges')
-		.update({ category: newName })
-		.eq('category', oldName)
-		.eq('user_id', userId);
+  await supabase
+    .from('user_badges')
+    .update({ category: newName })
+    .eq('category', oldName)
+    .eq('user_id', userId);
 
 export const removeAllUserBadges = async (userId: number) =>
-	await supabase.from('user_badges').delete().eq('user_id', userId);
+  await supabase.from('user_badges').delete().eq('user_id', userId);
 
 export const migrateCategory = async (userId: number, oldName: string, newName: string) =>
-	await supabase
-		.from('user_badges')
-		.update({ category: newName })
-		.eq('category', oldName)
-		.eq('user_id', userId);
+  await supabase
+    .from('user_badges')
+    .update({ category: newName })
+    .eq('category', oldName)
+    .eq('user_id', userId);
 
 export const setShadowHidden = async (userId: number, shadowHide: boolean) =>
-	await supabase.from('user_badges').update({ shadow_hidden: shadowHide }).eq('user_id', userId);
+  await supabase.from('user_badges').update({ shadow_hidden: shadowHide }).eq('user_id', userId);
+
+export const setShadowHiddenBadge = async (userId: number, id: number, shadowHide: boolean) =>
+  await supabase.from('user_badges').update({ shadow_hidden: shadowHide }).eq('id', id).eq('user_id', userId);
diff --git a/src/routes/api/badges/+server.ts b/src/routes/api/badges/+server.ts
index cbc27520..99ba588c 100644
--- a/src/routes/api/badges/+server.ts
+++ b/src/routes/api/badges/+server.ts
@@ -1,132 +1,142 @@
 import { userIdentity } from '$lib/Data/AniList/identity';
 import {
-	removeAllUserBadges,
-	removeUserBadge,
-	updateUserBadge,
-	getUserBadges,
-	addUserBadge,
-	type Badge,
-	migrateCategory,
-	setShadowHidden
+  removeAllUserBadges,
+  removeUserBadge,
+  updateUserBadge,
+  getUserBadges,
+  addUserBadge,
+  type Badge,
+  migrateCategory,
+  setShadowHidden,
+  setShadowHiddenBadge
 } from '$lib/Database/userBadges';
 import authorisedJson from '$lib/Data/Static/authorised.json';
 
 const unauthorised = new Response('Unauthorised', { status: 401 });
 
 const badges = async (id: number) =>
-	Response.json(await getUserBadges(id), {
-		headers: {
-			'Access-Control-Allow-Origin': 'https://due.moe'
-		}
-	});
+  Response.json(await getUserBadges(id), {
+    headers: {
+      'Access-Control-Allow-Origin': 'https://due.moe'
+    }
+  });
 
 export const GET = async ({ url }) => {
-	return await badges(Number(url.searchParams.get('id') || 0));
+  return await badges(Number(url.searchParams.get('id') || 0));
 };
 
 export const DELETE = async ({ url, cookies }) => {
-	const userCookie = cookies.get('user');
+  const userCookie = cookies.get('user');
 
-	if (!userCookie) return unauthorised;
+  if (!userCookie) return unauthorised;
 
-	const user = JSON.parse(userCookie);
-	const identity = await userIdentity({
-		tokenType: user['token_type'],
-		expiresIn: user['expires_in'],
-		accessToken: user['access_token'],
-		refreshToken: user['refresh_token']
-	});
+  const user = JSON.parse(userCookie);
+  const identity = await userIdentity({
+    tokenType: user['token_type'],
+    expiresIn: user['expires_in'],
+    accessToken: user['access_token'],
+    refreshToken: user['refresh_token']
+  });
 
-	if ((url.searchParams.get('prune') || 0) === 'true') {
-		await removeAllUserBadges(identity.id);
-	} else {
-		await removeUserBadge(identity.id, Number(url.searchParams.get('id')));
-	}
+  if ((url.searchParams.get('prune') || 0) === 'true') {
+    await removeAllUserBadges(identity.id);
+  } else {
+    await removeUserBadge(identity.id, Number(url.searchParams.get('id')));
+  }
 
-	return await badges(identity.id);
+  return await badges(identity.id);
 };
 
 export const PUT = async ({ cookies, url, request }) => {
-	const userCookie = cookies.get('user');
-
-	if (!userCookie) return unauthorised;
-
-	const user = JSON.parse(userCookie);
-	const identity = await userIdentity({
-		tokenType: user['token_type'],
-		expiresIn: user['expires_in'],
-		accessToken: user['access_token'],
-		refreshToken: user['refresh_token']
-	});
-
-	if (url.searchParams.get('shadowHide'))
-		setShadowHidden(
-			Number(url.searchParams.get('shadowHide')),
-			authorisedJson.includes(identity.id)
-		);
-
-	if (url.searchParams.get('import') || undefined) {
-		await Promise.all(
-			(await request.json()).map(async (badge: Badge) => await addUserBadge(identity.id, badge))
-		);
-
-		return await badges(identity.id);
-	} else if (url.searchParams.get('migrate') || undefined) {
-		await migrateCategory(
-			identity.id,
-			url.searchParams.get('original') || '',
-			url.searchParams.get('new') || ''
-		);
-
-		return await badges(identity.id);
-	}
-
-	if (url.searchParams.get('hide') || undefined) {
-		const allBadges = await getUserBadges(identity.id);
-
-		await Promise.all(
-			allBadges
-				.filter((badge) => badge.category === (url.searchParams.get('category') || ''))
-				.map(async (badge) => {
-					await updateUserBadge(identity.id, badge.id as number, {
-						...badge,
-						hidden:
-							allBadges
-								.filter((badge) => badge.category === (url.searchParams.get('category') || ''))
-								.filter((badge) => badge.hidden).length >
-							allBadges.filter(
-								(badge) => badge.category === (url.searchParams.get('category') || '')
-							).length /
-								2
-								? false
-								: true
-					});
-				})
-		);
-
-		return await badges(identity.id);
-	}
-
-	const badge = {
-		post: url.searchParams.get('post') || undefined,
-		image: url.searchParams.get('image') || undefined,
-		description: url.searchParams.get('description') || null,
-		time: url.searchParams.get('time') || undefined,
-		category: url.searchParams.get('category') || null,
-		hidden: url.searchParams.get('hidden') || false,
-		source: url.searchParams.get('source') || null,
-		designer: url.searchParams.get('designer') || null
-	};
-
-	if (
-		(await getUserBadges(identity.id)).find(
-			(badge) => Number(badge.id) === Number(url.searchParams.get('update'))
-		)
-	) {
-		await updateUserBadge(identity.id, Number(url.searchParams.get('update')), badge as Badge);
-	} else {
-		await addUserBadge(identity.id, badge as Badge);
-	}
-
-	return await badges(identity.id);
+  const userCookie = cookies.get('user');
+
+  if (!userCookie) return unauthorised;
+
+  const user = JSON.parse(userCookie);
+  const identity = await userIdentity({
+    tokenType: user['token_type'],
+    expiresIn: user['expires_in'],
+    accessToken: user['access_token'],
+    refreshToken: user['refresh_token']
+  });
+  const authorised = authorisedJson.includes(identity.id);
+
+  if (url.searchParams.get('shadowHide'))
+    setShadowHidden(
+      Number(url.searchParams.get('shadowHide')),
+      authorised
+    );
+
+  if (url.searchParams.get('import') || undefined) {
+    await Promise.all(
+      (await request.json()).map(async (badge: Badge) => await addUserBadge(identity.id, badge))
+    );
+
+    return await badges(identity.id);
+  } else if (url.searchParams.get('migrate') || undefined) {
+    await migrateCategory(
+      identity.id,
+      url.searchParams.get('original') || '',
+      url.searchParams.get('new') || ''
+    );
+
+    return await badges(identity.id);
+  }
+
+  if (url.searchParams.get('hide') || undefined) {
+    const allBadges = await getUserBadges(identity.id);
+
+    await Promise.all(
+      allBadges
+        .filter((badge) => badge.category === (url.searchParams.get('category') || ''))
+        .map(async (badge) => {
+          await updateUserBadge(identity.id, badge.id as number, {
+            ...badge,
+            hidden:
+              allBadges
+                .filter((badge) => badge.category === (url.searchParams.get('category') || ''))
+                .filter((badge) => badge.hidden).length >
+                allBadges.filter(
+                  (badge) => badge.category === (url.searchParams.get('category') || '')
+                ).length /
+                2
+                ? false
+                : true
+          });
+        })
+    );
+
+    return await badges(identity.id);
+  }
+
+  if (url.searchParams.get("shadowHideBadge") || undefined) {
+    if (!authorised) return unauthorised;
+
+    await setShadowHiddenBadge(identity.id, Number(url.searchParams.get("shadowHideBadge")), url.searchParams.get("status") == "true" ? false : true);
+
+    return await badges(identity.id);
+  }
+
+  const badge = {
+    post: url.searchParams.get('post') || undefined,
+    image: url.searchParams.get('image') || undefined,
+    description: url.searchParams.get('description') || null,
+    time: url.searchParams.get('time') || undefined,
+    category: url.searchParams.get('category') || null,
+    hidden: url.searchParams.get('hidden') || false,
+    source: url.searchParams.get('source') || null,
+    designer: url.searchParams.get('designer') || null
+  };
+
+  if (
+    (await getUserBadges(identity.id)).find(
+      (badge) => Number(badge.id) === Number(url.searchParams.get('update'))
+    )
+  ) {
+    await updateUserBadge(identity.id, Number(url.searchParams.get('update')), badge as Badge);
+  } else {
+    await addUserBadge(identity.id, badge as Badge);
+  }
+
+  return await badges(identity.id);
 };
diff --git a/src/routes/user/[user]/badges/+page.svelte b/src/routes/user/[user]/badges/+page.svelte
index d81cea28..6d34a204 100644
--- a/src/routes/user/[user]/badges/+page.svelte
+++ b/src/routes/user/[user]/badges/+page.svelte
@@ -451,6 +451,17 @@
 	const castAsStringArray = (array: any[]) => array as string[];
 
 	const castBadgesToIndexedBadges = (array: any[]) => array as IndexedBadge[];
+
+	const shadowHideBadge = () => {
+		if (!selectedBadge && !authorised) return;
+
+		badgesPromise = fetch(
+			`/api/badges?shadowHideBadge=${selectedBadge?.id}&status=${selectedBadge?.shadow_hidden}`,
+			{
+				method: 'PUT'
+			}
+		);
+	};
 </script>
 
 <HeadTitle route={`${data.username}'s Badge Wall`} path={`/user/${data.username}`} />
@@ -826,6 +837,19 @@
 									Next
 								</button>
 							{/if}
+
+							{#if authorised}
+								<br />
+								<br />
+
+								<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}