Refactor projects page's component and UI

frontend/app/projects/ProjectsPage.tsx

@@ -0,0 +1,108 @@
+"use client";
+import { useEffect, useState } from "react";
+import { Button } from "@nextui-org/react";
+import { Plus } from "lucide-react";
+import { ProjectType } from "@/types/project";
+import ProjectsTable from "./ProjectsTable";
+import ProjectDialog from "./ProjectDialog";
+import {
+  fetchProjects,
+  createProject,
+  updateProject,
+  deleteProject,
+} from "./projectsControl";
+
+export default function ProjectsPage() {
+  const [projects, setProjects] = useState([]);
+
+  useEffect(() => {
+    async function fetchDataEffect() {
+      try {
+        const data = await fetchProjects();
+        setProjects(data);
+      } catch (error) {
+        console.error("Error in effect:", error.message);
+      }
+    }
+
+    fetchDataEffect();
+  }, []);
+
+  // dialog
+  const [isProjectDialogOpen, setIsProjectDialogOpen] = useState(false);
+  const [editingProject, setEditingProject] = useState<ProjectType | null>(
+    null
+  );
+  const openDialogForCreate = () => {
+    setIsProjectDialogOpen(true);
+    setEditingProject(null);
+  };
+
+  const closeDialog = () => {
+    setIsProjectDialogOpen(false);
+    setEditingProject(null);
+  };
+
+  const onSubmit = async (name: string, detail: string) => {
+    if (editingProject) {
+      const updatedProject = await updateProject(
+        editingProject.id,
+        name,
+        detail
+      );
+      const updatedProjects = projects.map((project) =>
+        project.id === updatedProject.id ? updatedProject : project
+      );
+      setProjects(updatedProjects);
+    } else {
+      const newProject = await createProject(name, detail);
+      setProjects([...projects, newProject]);
+    }
+    closeDialog();
+  };
+
+  const onEditClick = (project: ProjectType) => {
+    setEditingProject(project);
+    setIsProjectDialogOpen(true);
+  };
+
+  const onDeleteClick = async (projectId: number) => {
+    try {
+      await deleteProject(projectId);
+      setProjects(projects.filter((project) => project.id !== projectId));
+    } catch (error) {
+      console.error("Error deleting project:", error);
+    }
+  };
+
+  return (
+    <div className="container mx-auto max-w-3xl pt-16 px-6 flex-grow">
+      <div className="w-full p-3 flex items-center justify-between">
+        <h3 className="font-bold">Projects</h3>
+        <div>
+          <Button
+            startContent={<Plus size={16} />}
+            size="sm"
+            color="primary"
+            onClick={openDialogForCreate}
+          >
+            New Project
+          </Button>
+        </div>
+      </div>
+
+      <ProjectsTable
+        projects={projects}
+        onEditProject={onEditClick}
+        onDeleteProject={onDeleteClick}
+      />
+
+      <ProjectDialog
+        isOpen={isProjectDialogOpen}
+        editingProject={editingProject}
+        onCancel={closeDialog}
+        onSubmit={onSubmit}
+      />
+    </div>
+  );
+}