From 71f12c942b2564142edec85e0136d713e04ab10f Mon Sep 17 00:00:00 2001
From: static <kmc7468@naver.com>
Date: Mon, 6 Jan 2025 14:30:00 +0900
Subject: [PATCH] =?UTF-8?q?=ED=8C=8C=EC=9D=BC/=ED=8F=B4=EB=8D=94=20?=
 =?UTF-8?q?=EC=82=AD=EC=A0=9C=20=EB=B0=8F=20=EC=9D=B4=EB=A6=84=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD=20=EA=B5=AC=ED=98=84=20=EC=99=84=EB=A3=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/hooks/callApi.ts                      |  4 +-
 .../(main)/directory/[[id]]/+page.svelte      | 37 ++++++++++++-------
 .../[[id]]/DeleteDirectoryEntryModal.svelte   | 13 ++++---
 .../DirectoryEntryMenuBottomSheet.svelte      |  2 +-
 .../[[id]]/RenameDirectoryEntryModal.svelte   | 13 ++++---
 src/routes/(main)/directory/[[id]]/service.ts | 33 +++++++++++++++++
 6 files changed, 75 insertions(+), 27 deletions(-)

diff --git a/src/lib/hooks/callApi.ts b/src/lib/hooks/callApi.ts
index d2987a9..c08b97d 100644
--- a/src/lib/hooks/callApi.ts
+++ b/src/lib/hooks/callApi.ts
@@ -20,7 +20,7 @@ export const callGetApi = async (input: RequestInfo, fetchInternal?: typeof fetc
 
 export const callPostApi = async <T>(
   input: RequestInfo,
-  payload: T,
+  payload?: T,
   fetchInternal?: typeof fetch,
 ) => {
   return await callApi(
@@ -28,7 +28,7 @@ export const callPostApi = async <T>(
     {
       method: "POST",
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(payload),
+      body: payload ? JSON.stringify(payload) : undefined,
     },
     fetchInternal,
   );
diff --git a/src/routes/(main)/directory/[[id]]/+page.svelte b/src/routes/(main)/directory/[[id]]/+page.svelte
index 7e4eafa..da91160 100644
--- a/src/routes/(main)/directory/[[id]]/+page.svelte
+++ b/src/routes/(main)/directory/[[id]]/+page.svelte
@@ -1,11 +1,3 @@
-<script module lang="ts">
-  export interface SelectedDirectoryEntry {
-    type: "directory" | "file";
-    id: number;
-    name: string;
-  }
-</script>
-
 <script lang="ts">
   import { goto } from "$app/navigation";
   import { TopBar } from "$lib/components";
@@ -22,6 +14,9 @@
     decryptFileMetadata,
     requestDirectoryCreation,
     requestFileUpload,
+    requestDirectoryEntryRename,
+    requestDirectoryEntryDeletion,
+    type SelectedDirectoryEntry,
   } from "./service";
 
   import IconAdd from "~icons/material-symbols/add";
@@ -114,12 +109,12 @@
   <div class="my-4 pb-[4.5rem]">
     {#if subDirectories}
       {#await subDirectories then subDirectories}
-        {#each subDirectories as { id, name }}
+        {#each subDirectories as { id, dataKey, name }}
           <DirectoryEntry
             {name}
             onclick={() => goto(`/directory/${id}`)}
             onOpenMenuClick={() => {
-              selectedEntry = { type: "directory", id, name };
+              selectedEntry = { type: "directory", id, dataKey, name };
               isDirectoryEntryMenuBottomSheetOpen = true;
             }}
             type="directory"
@@ -129,12 +124,12 @@
     {/if}
     {#if files}
       {#await files then files}
-        {#each files as { id, name }}
+        {#each files as { id, dataKey, name }}
           <DirectoryEntry
             {name}
             onclick={() => goto(`/file/${id}`)}
             onOpenMenuClick={() => {
-              selectedEntry = { type: "file", id, name };
+              selectedEntry = { type: "file", id, dataKey, name };
               isDirectoryEntryMenuBottomSheetOpen = true;
             }}
             type="file"
@@ -177,5 +172,19 @@
     isDeleteDirectoryEntryModalOpen = true;
   }}
 />
-<RenameDirectoryEntryModal bind:isOpen={isRenameDirectoryEntryModalOpen} bind:selectedEntry />
-<DeleteDirectoryEntryModal bind:isOpen={isDeleteDirectoryEntryModalOpen} bind:selectedEntry />
+<RenameDirectoryEntryModal
+  bind:isOpen={isRenameDirectoryEntryModalOpen}
+  bind:selectedEntry
+  onRenameClick={async (newName) => {
+    await requestDirectoryEntryRename(selectedEntry!, newName);
+    return true;
+  }}
+/>
+<DeleteDirectoryEntryModal
+  bind:isOpen={isDeleteDirectoryEntryModalOpen}
+  bind:selectedEntry
+  onDeleteClick={async () => {
+    await requestDirectoryEntryDeletion(selectedEntry!);
+    return true;
+  }}
+/>
diff --git a/src/routes/(main)/directory/[[id]]/DeleteDirectoryEntryModal.svelte b/src/routes/(main)/directory/[[id]]/DeleteDirectoryEntryModal.svelte
index 973dc18..990114e 100644
--- a/src/routes/(main)/directory/[[id]]/DeleteDirectoryEntryModal.svelte
+++ b/src/routes/(main)/directory/[[id]]/DeleteDirectoryEntryModal.svelte
@@ -1,24 +1,27 @@
 <script lang="ts">
   import { Modal } from "$lib/components";
   import { Button } from "$lib/components/buttons";
-  import type { SelectedDirectoryEntry } from "./+page.svelte";
+  import type { SelectedDirectoryEntry } from "./service";
 
   interface Props {
+    onDeleteClick: () => Promise<boolean>;
     isOpen: boolean;
     selectedEntry: SelectedDirectoryEntry | undefined;
   }
 
-  let { isOpen = $bindable(), selectedEntry = $bindable() }: Props = $props();
+  let { onDeleteClick, isOpen = $bindable(), selectedEntry = $bindable() }: Props = $props();
 
   const closeModal = () => {
     isOpen = false;
     selectedEntry = undefined;
   };
 
-  const deleteEntry = () => {
-    // TODO
+  const deleteEntry = async () => {
+    // TODO: Validation
 
-    closeModal();
+    if (await onDeleteClick()) {
+      closeModal();
+    }
   };
 </script>
 
diff --git a/src/routes/(main)/directory/[[id]]/DirectoryEntryMenuBottomSheet.svelte b/src/routes/(main)/directory/[[id]]/DirectoryEntryMenuBottomSheet.svelte
index 5e01939..182f494 100644
--- a/src/routes/(main)/directory/[[id]]/DirectoryEntryMenuBottomSheet.svelte
+++ b/src/routes/(main)/directory/[[id]]/DirectoryEntryMenuBottomSheet.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { BottomSheet } from "$lib/components";
   import { EntryButton } from "$lib/components/buttons";
-  import type { SelectedDirectoryEntry } from "./+page.svelte";
+  import type { SelectedDirectoryEntry } from "./service";
 
   import IconFolder from "~icons/material-symbols/folder";
   import IconDraft from "~icons/material-symbols/draft";
diff --git a/src/routes/(main)/directory/[[id]]/RenameDirectoryEntryModal.svelte b/src/routes/(main)/directory/[[id]]/RenameDirectoryEntryModal.svelte
index 542ba9d..edcfe1a 100644
--- a/src/routes/(main)/directory/[[id]]/RenameDirectoryEntryModal.svelte
+++ b/src/routes/(main)/directory/[[id]]/RenameDirectoryEntryModal.svelte
@@ -2,14 +2,15 @@
   import { Modal } from "$lib/components";
   import { Button } from "$lib/components/buttons";
   import { TextInput } from "$lib/components/inputs";
-  import type { SelectedDirectoryEntry } from "./+page.svelte";
+  import type { SelectedDirectoryEntry } from "./service";
 
   interface Props {
+    onRenameClick: (newName: string) => Promise<boolean>;
     isOpen: boolean;
     selectedEntry: SelectedDirectoryEntry | undefined;
   }
 
-  let { isOpen = $bindable(), selectedEntry = $bindable() }: Props = $props();
+  let { onRenameClick, isOpen = $bindable(), selectedEntry = $bindable() }: Props = $props();
 
   let name = $state("");
 
@@ -19,10 +20,12 @@
     selectedEntry = undefined;
   };
 
-  const renameEntry = () => {
-    // TODO
+  const renameEntry = async () => {
+    // TODO: Validation
 
-    closeModal();
+    if (await onRenameClick(name)) {
+      closeModal();
+    }
   };
 
   $effect(() => {
diff --git a/src/routes/(main)/directory/[[id]]/service.ts b/src/routes/(main)/directory/[[id]]/service.ts
index 0378b06..c549575 100644
--- a/src/routes/(main)/directory/[[id]]/service.ts
+++ b/src/routes/(main)/directory/[[id]]/service.ts
@@ -9,20 +9,30 @@ import {
   decryptString,
 } from "$lib/modules/crypto";
 import type {
+  DirectoryRenameRequest,
   DirectoryInfoResponse,
   DirectoryCreateRequest,
+  FileRenameRequest,
   FileUploadRequest,
 } from "$lib/server/schemas";
 import type { MasterKey } from "$lib/stores";
 
 export { decryptFileMetadata } from "$lib/services/file";
 
+export interface SelectedDirectoryEntry {
+  type: "directory" | "file";
+  id: number;
+  dataKey: CryptoKey;
+  name: string;
+}
+
 export const decryptDirectoryMetadata = async (
   metadata: NonNullable<DirectoryInfoResponse["metadata"]>,
   masterKey: CryptoKey,
 ) => {
   const { dataKey } = await unwrapDataKey(metadata.dek, masterKey);
   return {
+    dataKey,
     name: await decryptString(metadata.name, metadata.nameIv, dataKey),
   };
 };
@@ -71,3 +81,26 @@ export const requestFileUpload = async (
   xhr.open("POST", "/api/file/upload");
   xhr.send(form);
 };
+
+export const requestDirectoryEntryRename = async (
+  entry: SelectedDirectoryEntry,
+  newName: string,
+) => {
+  const newNameEncrypted = await encryptString(newName, entry.dataKey);
+
+  if (entry.type === "directory") {
+    await callPostApi<DirectoryRenameRequest>(`/api/directory/${entry.id}/rename`, {
+      name: newNameEncrypted.ciphertext,
+      nameIv: newNameEncrypted.iv,
+    });
+  } else {
+    await callPostApi<FileRenameRequest>(`/api/file/${entry.id}/rename`, {
+      name: newNameEncrypted.ciphertext,
+      nameIv: newNameEncrypted.iv,
+    });
+  }
+};
+
+export const requestDirectoryEntryDeletion = async (entry: SelectedDirectoryEntry) => {
+  await callPostApi(`/api/${entry.type}/${entry.id}/delete`);
+};