feat(badges): update and delete ui

3 files changed, 80 insertions, 11 deletions

diff --git a/src/lib/Database/badges.ts b/src/lib/Database/badges.ts
index d56fa27a..1f3267e9 100644
--- a/src/lib/Database/badges.ts
+++ b/src/lib/Database/badges.ts
@@ -63,3 +63,14 @@ export const removeUserBadge = (userId: number, id: number) => {
 			$id: id
 		});
 };
+
+export const updateUserBadge = (userId: number, id: number, badge: Badge) => {
+	if (badge.post === undefined || badge.image === undefined || badge.description === undefined)
+		return;
+
+	database
+		.query(
+			'UPDATE user_badges SET post = ?1, image = ?2, description = ?3 WHERE id = ?4 AND user_id = ?5'
+		)
+		.run(badge.post || null, badge.image || null, badge.description || null, id, userId);
+};
diff --git a/src/routes/api/badges/+server.ts b/src/routes/api/badges/+server.ts
index d06be6cd..fc5a4d0a 100644
--- a/src/routes/api/badges/+server.ts
+++ b/src/routes/api/badges/+server.ts
@@ -1,5 +1,5 @@
 import { userIdentity } from '$lib/AniList/identity';
-import { removeUserBadge } from '$lib/Database/badges';
+import { removeUserBadge, updateUserBadge } from '$lib/Database/badges';
 import { getUserBadges } from '$lib/Database/badges';
 import { addUserBadge } from '$lib/Database/badges';
 
@@ -42,7 +42,43 @@ export const PUT = async ({ cookies, url }) => {
 		refreshToken: user['refresh_token']
 	});
 
-	addUserBadge(identity.id, {
+	if (
+		getUserBadges(identity.id).find((badge) => badge.id === Number(url.searchParams.get('update')))
+	) {
+		updateUserBadge(identity.id, Number(url.searchParams.get('update')), {
+			post: url.searchParams.get('post') || undefined,
+			image: url.searchParams.get('image') || undefined,
+			description: url.searchParams.get('description') || undefined,
+			time: url.searchParams.get('time') || undefined
+		});
+	} else {
+		addUserBadge(identity.id, {
+			post: url.searchParams.get('post') || undefined,
+			image: url.searchParams.get('image') || undefined,
+			description: url.searchParams.get('description') || undefined,
+			time: url.searchParams.get('time') || undefined
+		});
+	}
+
+	return Response.json({});
+};
+
+export const PATCH = async ({ cookies, url }) => {
+	const userCookie = cookies.get('user');
+
+	if (!userCookie) {
+		return new Response('Unauthenticated', { status: 401 });
+	}
+
+	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']
+	});
+
+	updateUserBadge(identity.id, Number(url.searchParams.get('id')), {
 		post: url.searchParams.get('post') || undefined,
 		image: url.searchParams.get('image') || undefined,
 		description: url.searchParams.get('description') || undefined,
diff --git a/src/routes/user/[user]/badges/+page.svelte b/src/routes/user/[user]/badges/+page.svelte
index 0bea3111..07bb8542 100644
--- a/src/routes/user/[user]/badges/+page.svelte
+++ b/src/routes/user/[user]/badges/+page.svelte
@@ -19,6 +19,7 @@
 	let dark = true;
 	let transparent = false;
 	let confirmDelete = 0;
+	let selectedBadge: Badge | undefined = undefined;
 
 	onMount(async () => {
 		// socket.on('badges', (message) => (badges = message));
@@ -67,6 +68,8 @@
 				description.value.length > 0 ? `&description=${encodeURIComponent(description.value)}` : ''
 			}${
 				time.valueAsDate ? `&time=${encodeURIComponent(dateToDatabaseTime(time.valueAsDate))}` : ''
+			}${
+				selectedBadge && selectedBadge.id ? `&update=${encodeURIComponent(selectedBadge.id)}` : ''
 			}`,
 			{
 				method: 'PUT'
@@ -173,7 +176,14 @@
 		<p>
 			<a href={`/user/${data.username}`}>Back to Profile</a>
 			•
-			<a href={`#`} on:click={() => (editMode = !editMode)}>
+			<a
+				href={`#`}
+				on:click={() => {
+					if (editMode) selectedBadge = undefined;
+
+					editMode = !editMode;
+				}}
+			>
 				{editMode ? 'Disable' : 'Enable'} Edit Mode
 			</a>
 			•
@@ -185,11 +195,6 @@
 	{/if}
 
 	{#if editMode && isOwner}
-		<p>
-			Edit mode is enabled. Click on an image <b>twice</b> to delete it. There is no confirmation, so
-			be careful!
-		</p>
-
 		{#if error}
 			<p style="color: red;">{error}</p>
 		{/if}
@@ -202,6 +207,7 @@
 				minlength="1"
 				maxlength="1000"
 				size="11"
+				value={selectedBadge ? selectedBadge.image : ''}
 			/>
 			<input
 				type="text"
@@ -210,6 +216,7 @@
 				minlength="1"
 				maxlength="1000"
 				size="11"
+				value={selectedBadge ? (selectedBadge.post === '#' ? '' : selectedBadge.post) : ''}
 			/>
 			<input
 				type="text"
@@ -218,10 +225,25 @@
 				minlength="1"
 				maxlength="1000"
 				size="11"
+				value={selectedBadge ? selectedBadge.description : ''}
 			/>
-			<a href={`#`} on:click={submitBadge}>Add Badge</a>
+			<a href={`#`} on:click={submitBadge}>{selectedBadge ? 'Update' : 'Add'} Badge</a>
+			{#if selectedBadge}
+				or
+				<a
+					href={`#`}
+					on:click={() => {
+						if (selectedBadge) removeBadge(selectedBadge);
+					}}>Delete Badge (click twice)</a
+				>
+			{/if}
 			<span style="float: right;">
-				<input type="datetime-local" />
+				<input
+					type="datetime-local"
+					value={selectedBadge && selectedBadge.time
+						? databaseTimeToDate(selectedBadge.time).toISOString()
+						: ''}
+				/>
 				<small>Must be full date and time, defaults to now if any fields empty</small>
 			</span>
 		</p>
@@ -244,7 +266,7 @@
 							{#if editMode}
 								<a
 									href={`#`}
-									on:click={() => removeBadge(badge)}
+									on:click={() => (selectedBadge = badge)}
 									id={`badge-${badge.id}`}
 									title={`${databaseTimeToDate(badge.time).toLocaleString()}${
 										badge.description ? `\n${badge.description}` : ''