feat: implement auth for folders

frontend/src/app/[locale]/projects/[projectId]/folders/FolderDialog.tsx

@@ -6,7 +6,7 @@ import { FolderType, FoldersMessages } from '@/types/folder';
 
 type Props = {
   isOpen: boolean;
-  editingFolder: FolderType;
+  editingFolder: FolderType | null;
   onCancel: () => void;
   onSubmit: (name: string, detail: string) => void;
   messages: FoldersMessages;
@@ -66,7 +66,7 @@ export default function FolderDialog({ isOpen, editingFolder, onCancel, onSubmit
     if (!folderName.text) {
       setFolderName({
         text: '',
-        isValid: false,
+        isValid: true,
         errorMessage: messages.pleaseEnter,
       });
 

frontend/src/app/[locale]/projects/[projectId]/folders/FolderEditMenu.tsx

@@ -5,7 +5,7 @@ import { FolderType, FoldersMessages } from '@/types/folder';
 type Props = {
   folder: FolderType;
   onEditClick: (folder: FolderType) => void;
-  onDeleteClick: (folder: FolderType) => void;
+  onDeleteClick: (deleteFolderId: number) => void;
   messages: FoldersMessages;
 };
 

frontend/src/app/[locale]/projects/[projectId]/folders/FoldersPane.tsx

@@ -1,14 +1,14 @@
 'use client';
-import React from 'react';
 import { FolderType, FoldersMessages } from '@/types/folder';
-import { useEffect, useState } from 'react';
+import { useState, useEffect, useContext } from 'react';
 import { Button, Listbox, ListboxItem } from '@nextui-org/react';
 import { Folder, Plus } from 'lucide-react';
 import { usePathname, useRouter } from '@/src/navigation';
+import { TokenContext } from '@/utils/TokenProvider';
 import useGetCurrentIds from '@/utils/useGetCurrentIds';
 import FolderDialog from './FolderDialog';
 import FolderEditMenu from './FolderEditMenu';
-
+import DeleteConfirmDialog from '@/components/DeleteConfirmDialog';
 import { fetchFolders, createFolder, updateFolder, deleteFolder } from './foldersControl';
 
 type Props = {
@@ -20,50 +20,20 @@ type Props = {
 export default function FoldersPane({ projectId, messages, locale }: Props) {
   const router = useRouter();
   const pathname = usePathname();
-  const [folders, setFolders] = useState([]);
-  const [selectedFolder, setSelectedFolder] = useState<FolderType>({});
-
+  const context = useContext(TokenContext);
+  const [folders, setFolders] = useState<FolderType[]>([]);
+  const [selectedFolder, setSelectedFolder] = useState<FolderType | null>(null);
   const { folderId } = useGetCurrentIds();
-
   const [isFolderDialogOpen, setIsFolderDialogOpen] = useState(false);
   const [editingFolder, setEditingProject] = useState<FolderType | null>(null);
 
-  const openDialogForCreate = () => {
-    setIsFolderDialogOpen(true);
-    setEditingProject(null);
-  };
-
-  const closeDialog = () => {
-    setIsFolderDialogOpen(false);
-    setEditingProject(null);
-  };
-
-  const onSubmit = async (name: string, detail: string) => {
-    if (editingFolder) {
-      const updatedProject = await updateFolder(editingFolder.id, name, detail, projectId, null);
-      const updatedProjects = folders.map((project) => (project.id === updatedProject.id ? updatedProject : project));
-      setFolders(updatedProjects);
-    } else {
-      const newProject = await createFolder(name, detail, projectId, null);
-      setFolders([...folders, newProject]);
-    }
-    closeDialog();
-  };
-
-  const onEditClick = (folder: FolderType) => {
-    setEditingProject(folder);
-    setIsFolderDialogOpen(true);
-  };
-
-  const onDeleteClick = async (folderId: number) => {
-    await deleteFolder(folderId);
-    router.push(`/projects/${projectId}/folders`, { locale: locale });
-  };
-
   useEffect(() => {
     async function fetchDataEffect() {
+      if (!context.isSignedIn()) {
+        return;
+      }
       try {
-        const data = await fetchFolders(projectId);
+        const data = await fetchFolders(context.token.access_token, projectId);
         setFolders(data);
 
         const selectedFolderFromUrl = data.find((folder) => folder.id === folderId);
@@ -80,7 +50,62 @@ export default function FoldersPane({ projectId, messages, locale }: Props) {
     }
 
     fetchDataEffect();
-  }, [folderId]);
+  }, [context, folderId]);
+
+  const openDialogForCreate = () => {
+    setIsFolderDialogOpen(true);
+    setEditingProject(null);
+  };
+
+  const closeDialog = () => {
+    setIsFolderDialogOpen(false);
+    setEditingProject(null);
+  };
+
+  const onSubmit = async (name: string, detail: string) => {
+    if (editingFolder) {
+      const updatedProject = await updateFolder(
+        context.token.access_token,
+        editingFolder.id,
+        name,
+        detail,
+        projectId,
+        null
+      );
+      const updatedProjects = folders.map((project) => (project.id === updatedProject.id ? updatedProject : project));
+      setFolders(updatedProjects);
+    } else {
+      const newProject = await createFolder(context.token.access_token, name, detail, projectId, null);
+      setFolders([...folders, newProject]);
+    }
+    closeDialog();
+  };
+
+  const onEditClick = (folder: FolderType) => {
+    setEditingProject(folder);
+    setIsFolderDialogOpen(true);
+  };
+
+  // Delete confirm dialog
+  const [isDeleteConfirmDialogOpen, setIsDeleteConfirmDialogOpen] = useState(false);
+  const [deleteFolderId, setDeleteFolderId] = useState<number | null>(null);
+  const closeDeleteConfirmDialog = () => {
+    setIsDeleteConfirmDialogOpen(false);
+    setDeleteFolderId(null);
+  };
+
+  const onDeleteClick = (deleteFolderId: number) => {
+    setDeleteFolderId(deleteFolderId);
+    setIsDeleteConfirmDialogOpen(true);
+  };
+
+  const onConfirm = async () => {
+    if (deleteFolderId) {
+      await deleteFolder(context.token.access_token, deleteFolderId);
+      router.push(`/projects/${projectId}/folders`, { locale: locale });
+      closeDeleteConfirmDialog();
+    }
+  };
 
   const baseClass = '';
   const selectedClass = `${baseClass} bg-neutral-200 dark:bg-neutral-700`;
@@ -126,6 +151,15 @@ export default function FoldersPane({ projectId, messages, locale }: Props) {
         onSubmit={onSubmit}
         messages={messages}
       />
+
+      <DeleteConfirmDialog
+        isOpen={isDeleteConfirmDialogOpen}
+        onCancel={closeDeleteConfirmDialog}
+        onConfirm={onConfirm}
+        closeText={messages.close}
+        confirmText={messages.areYouSure}
+        deleteText={messages.delete}
+      />
     </>
   );
 }

frontend/src/app/[locale]/projects/[projectId]/folders/foldersControl.ts

@@ -4,13 +4,14 @@ const apiServer = Config.apiServer;
 /**
  * fetch folder records
  */
-async function fetchFolders(projectId: string) {
+async function fetchFolders(jwt: string, projectId: string) {
   try {
     const url = `${apiServer}/folders?projectId=${projectId}`;
     const response = await fetch(url, {
       method: 'GET',
       headers: {
         'Content-Type': 'application/json',
+        Authorization: `Bearer ${jwt}`,
       },
     });
 
@@ -28,11 +29,16 @@ async function fetchFolders(projectId: string) {
 /**
  * Create project
  */
-async function createFolder(name: string, detail: string, projectId: strting, parentFolderId: number) {
+async function createFolder(
+  jwt: string,
+  name: string,
+  detail: string,
+  projectId: string,
+  parentFolderId: number | null
+) {
   const newFolderData = {
     name: name,
     detail: detail,
-    projectId: projectId,
     parentFolderId: parentFolderId,
   };
 
@@ -40,11 +46,12 @@ async function createFolder(name: string, detail: string, projectId: strting, pa
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
+      Authorization: `Bearer ${jwt}`,
     },
     body: JSON.stringify(newFolderData),
   };
 
-  const url = `${apiServer}/folders`;
+  const url = `${apiServer}/folders?projectId=${projectId}`;
 
   try {
     const response = await fetch(url, fetchOptions);
@@ -62,7 +69,14 @@ async function createFolder(name: string, detail: string, projectId: strting, pa
 /**
  * Update folder
  */
-async function updateFolder(folderId: number, name: string, detail: string, projectId: string, parentFolderId: number) {
+async function updateFolder(
+  jwt: string,
+  folderId: number,
+  name: string,
+  detail: string,
+  projectId: string,
+  parentFolderId: number | null
+) {
   const updateFolderData = {
     name: name,
     detail: detail,
@@ -74,6 +88,7 @@ async function updateFolder(folderId: number, name: string, detail: string, proj
     method: 'PUT',
     headers: {
       'Content-Type': 'application/json',
+      Authorization: `Bearer ${jwt}`,
     },
     body: JSON.stringify(updateFolderData),
   };
@@ -96,11 +111,12 @@ async function updateFolder(folderId: number, name: string, detail: string, proj
 /**
  * Delete folder
  */
-async function deleteFolder(folderId: number) {
+async function deleteFolder(jwt: string, folderId: number) {
   const fetchOptions = {
     method: 'DELETE',
     headers: {
       'Content-Type': 'application/json',
+      Authorization: `Bearer ${jwt}`,
     },
   };
 

frontend/src/app/[locale]/projects/[projectId]/folders/layout.tsx

@@ -20,6 +20,8 @@ export default function FoldersLayout({
     create: t('create'),
     update: t('update'),
     pleaseEnter: t('please_enter'),
+    delete: t('delete'),
+    areYouSure: t('are_you_sure'),
   };
 
   return (