Refactor folders pane's component and UI

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

@@ -1,19 +1,5 @@
-"use client";
-import { useEffect, useState } from "react";
-import { useRouter, usePathname } from "next/navigation";
-import useGetCurrentIds from "@/utils/useGetCurrentIds";
 import FoldersPane from "./FoldersPane";
 
-export type FolderType = {
-  id: number;
-  name: string;
-  detail: string;
-  projectId: number;
-  parentFolderId: number | null;
-  createdAt: string;
-  updatedAt: string;
-};
-
 export default function FoldersLayout({
   children,
   params,
@@ -21,87 +7,6 @@ export default function FoldersLayout({
   children: React.ReactNode;
   params: { projectId: string };
 }) {
-  const router = useRouter();
-  const pathname = usePathname();
-  const [folders, setFolders] = useState([]);
-  const [selectedFolder, setSelectedFolder] = useState<FolderType>({});
-
-  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,
-        params.projectId,
-        null
-      );
-      const updatedProjects = folders.map((project) =>
-        project.id === updatedProject.id ? updatedProject : project
-      );
-      setFolders(updatedProjects);
-    } else {
-      const newProject = await createFolder(
-        name,
-        detail,
-        params.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/${params.projectId}/folders`);
-  };
-
-  useEffect(() => {
-    async function fetchDataEffect() {
-      try {
-        const data = await fetchFolders(params.projectId);
-        setFolders(data);
-
-        const selectedFolderFromUrl = data.find(
-          (folder) => folder.id === folderId
-        );
-        setSelectedFolder(selectedFolderFromUrl);
-
-        // Redirect to the smallest folder ID page if the path is "projects/[projectId]/folders
-        if (pathname === `/projects/${params.projectId}/folders`) {
-          const smallestFolderId = Math.min(...data.map((folder) => folder.id));
-          router.push(
-            `/projects/${params.projectId}/folders/${smallestFolderId}/cases`
-          );
-        }
-      } catch (error) {
-        console.error("Error in effect:", error.message);
-      }
-    }
-
-    fetchDataEffect();
-  }, [folderId]);
-
   return (
     <div className="flex w-full">
       <FoldersPane projectId={params.projectId} />