112 lines
2.9 KiB
TypeScript
112 lines
2.9 KiB
TypeScript
"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,
|
|
}: {
|
|
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}/>
|
|
<div className="flex-grow w-full">{children}</div>
|
|
</div>
|
|
);
|
|
}
|