From 79912cc5a36fc0c782741c798b8ae4e7e49478f1 Mon Sep 17 00:00:00 2001
From: TZGyn <ca538901d@mozmail.com>
Date: Sun, 19 Nov 2023 12:08:45 +0800
Subject: [PATCH] added update shortener

---
 src/lib/server/auth.ts                   | 28 +++++++++++
 src/routes/(app)/links/+page.svelte      | 64 +++++++++++++++++++++++-
 src/routes/api/shortener/[id]/+server.ts | 46 ++++++++++++++++-
 3 files changed, 135 insertions(+), 3 deletions(-)

diff --git a/src/lib/server/auth.ts b/src/lib/server/auth.ts
index b11c431..f899ed6 100644
--- a/src/lib/server/auth.ts
+++ b/src/lib/server/auth.ts
@@ -41,3 +41,31 @@ export const logoutUser = async (token: string) => {
 		.set({ expiresAt: now })
 		.where(eq(sessionSchema.token, token))
 }
+
+export const getUserFromEvent = async (event: RequestEvent) => {
+	const token = event.cookies.get('token')
+
+	if (!token) {
+		return {
+			success: false,
+			response: JSON.stringify({
+				success: false,
+				message: 'Invalid User',
+			}),
+		} as const
+	}
+
+	const user = await getUserFromSessionToken(token)
+
+	if (!user) {
+		return {
+			success: false,
+			response: JSON.stringify({
+				success: false,
+				message: 'Invalid User',
+			}),
+		} as const
+	}
+
+	return { success: true, user } as const
+}
diff --git a/src/routes/(app)/links/+page.svelte b/src/routes/(app)/links/+page.svelte
index dacd418..f3c357a 100644
--- a/src/routes/(app)/links/+page.svelte
+++ b/src/routes/(app)/links/+page.svelte
@@ -40,6 +40,30 @@
 		}
 	}
 
+	let editDialogOpen = false
+	let editShortenerCode = ''
+	let editShortenerLink = ''
+	let isEditLoading = false
+
+	const openEditDialog = (code: string, link: string) => {
+		editDialogOpen = true
+		editShortenerCode = code
+		editShortenerLink = link
+	}
+
+	const editShortener = async (code: string, link: string) => {
+		isEditLoading = true
+		await fetch(`/api/shortener/${code}`, {
+			method: 'put',
+			body: JSON.stringify({
+				link,
+			}),
+		})
+		await invalidateAll()
+		isEditLoading = false
+		editDialogOpen = false
+	}
+
 	const deleteShortener = async (code: string) => {
 		await fetch(`/api/shortener/${code}`, {
 			method: 'delete',
@@ -77,7 +101,8 @@
 					{#if isLoading}
 						<Loader2 class="animate-spin" />
 					{/if}
-					Add</Button>
+					Add
+				</Button>
 			</Dialog.Footer>
 		</Dialog.Content>
 	</Dialog.Root>
@@ -120,7 +145,11 @@
 							</DropdownMenu.Trigger>
 							<DropdownMenu.Content>
 								<DropdownMenu.Group>
-									<DropdownMenu.Item>Edit</DropdownMenu.Item>
+									<DropdownMenu.Item
+										on:click={() =>
+											openEditDialog(shortener.code, shortener.link)}>
+										Edit
+									</DropdownMenu.Item>
 									<DropdownMenu.Item
 										on:click={() => deleteShortener(shortener.code)}
 										class="text-destructive data-[highlighted]:bg-destructive">
@@ -137,3 +166,34 @@
 {:else}
 	<div>No Data</div>
 {/if}
+
+<Dialog.Root bind:open={editDialogOpen}>
+	<Dialog.Content class="sm:max-w-[425px]">
+		<Dialog.Header>
+			<Dialog.Title>Edit Shortener {editShortenerCode}</Dialog.Title>
+			<Dialog.Description>
+				Edit Shortner Here. Click Save To Update.
+			</Dialog.Description>
+		</Dialog.Header>
+		<div class="grid gap-4 py-4">
+			<div class="grid grid-cols-4 items-center gap-4">
+				<Label class="text-right">Link</Label>
+				<Input
+					id="name"
+					bind:value={editShortenerLink}
+					class="col-span-3" />
+			</div>
+		</div>
+		<Dialog.Footer>
+			<Button
+				on:click={() =>
+					editShortener(editShortenerCode, editShortenerLink)}
+				class="flex gap-2">
+				{#if isEditLoading}
+					<Loader2 class="animate-spin" />
+				{/if}
+				Save
+			</Button>
+		</Dialog.Footer>
+	</Dialog.Content>
+</Dialog.Root>
diff --git a/src/routes/api/shortener/[id]/+server.ts b/src/routes/api/shortener/[id]/+server.ts
index 2622f1a..17c91a5 100644
--- a/src/routes/api/shortener/[id]/+server.ts
+++ b/src/routes/api/shortener/[id]/+server.ts
@@ -1,13 +1,57 @@
 import { db } from '$lib/db'
 import { shortener } from '$lib/db/schema'
-import { getUserFromSessionToken } from '$lib/server/auth'
+import {
+	getUserFromEvent,
+	getUserFromSessionToken,
+} from '$lib/server/auth'
 import { and, eq } from 'drizzle-orm'
 import type { RequestHandler } from './$types'
+import { z } from 'zod'
 
 export const GET: RequestHandler = async () => {
 	return new Response()
 }
 
+const updateShortenerSchema = z.object({
+	link: z.string().url(),
+})
+
+export const PUT: RequestHandler = async (event) => {
+	const data = await getUserFromEvent(event)
+
+	if (!data.success) {
+		return new Response(data.response)
+	}
+
+	const user = data.user
+
+	const shortenerId = event.params.id
+	const body = await event.request.json()
+
+	const updateShortener = updateShortenerSchema.safeParse(body)
+
+	if (!updateShortener.success) {
+		return new Response(
+			JSON.stringify({
+				success: false,
+				message: 'Invalid Request',
+			}),
+		)
+	}
+
+	await db
+		.update(shortener)
+		.set({ link: updateShortener.data.link })
+		.where(
+			and(
+				eq(shortener.code, shortenerId),
+				eq(shortener.userId, user.id),
+			),
+		)
+
+	return new Response(JSON.stringify({ success: true }))
+}
+
 export const DELETE: RequestHandler = async (event) => {
 	const shortenerId = event.params.id
 	const token = event.cookies.get('token')