Refactor projects page's component and UI

2024-03-27 23:40:46 +09:00
parent ba33af949c
commit 348bca0b40
9 changed files with 408 additions and 291 deletions
--- a/frontend/app/projects/ProjectDialog.tsx
+++ b/frontend/app/projects/ProjectDialog.tsx
@@ -0,0 +1,140 @@
+"use client";
+import React from "react";
+import { useState, useEffect } from "react";
+import {
+  Button,
+  Input,
+  Textarea,
+  Modal,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+} from "@nextui-org/react";
+import { ProjectType } from "@/types/project";
+
+type Props = {
+  isOpen: boolean;
+  editingProject: ProjectType;
+  onCancel: () => void;
+  onSubmit: (name: string, detail: string) => void;
+};
+
+export default function ProjectDialog({
+  isOpen,
+  editingProject,
+  onCancel,
+  onSubmit,
+}: Props) {
+  const [projectName, setProjectName] = useState({
+    text: editingProject ? editingProject.name : "",
+    isValid: false,
+    errorMessage: "",
+  });
+
+  const [projectDetail, setProjectDetail] = useState({
+    text: editingProject ? editingProject.detail : "",
+    isValid: false,
+    errorMessage: "",
+  });
+
+  useEffect(() => {
+    if (editingProject) {
+      setProjectName({
+        ...projectName,
+        text: editingProject.name,
+      });
+
+      setProjectDetail({
+        ...projectDetail,
+        text: editingProject.detail ? editingProject.detail : "",
+      });
+    } else {
+      setProjectName({
+        ...projectName,
+        text: "",
+      });
+
+      setProjectDetail({
+        ...projectDetail,
+        text: "",
+      });
+    }
+  }, [editingProject]);
+
+  const clear = () => {
+    setProjectName({
+      isValid: false,
+      text: "",
+      errorMessage: "",
+    });
+    setProjectDetail({
+      isValid: false,
+      text: "",
+      errorMessage: "",
+    });
+  };
+
+  const validate = () => {
+    if (!projectName.text) {
+      setProjectName({
+        text: "",
+        isValid: false,
+        errorMessage: "Please enter project name",
+      });
+
+      return;
+    }
+
+    onSubmit(projectName.text, projectDetail.text);
+    clear();
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onOpenChange={() => {
+        onCancel();
+      }}
+    >
+      <ModalContent>
+        <ModalHeader className="flex flex-col gap-1">Project</ModalHeader>
+        <ModalBody>
+          <Input
+            type="text"
+            label="Project Name"
+            value={projectName.text}
+            isInvalid={projectName.isValid}
+            errorMessage={projectName.errorMessage}
+            onChange={(e) => {
+              setProjectName({
+                ...projectName,
+                text: e.target.value,
+              });
+            }}
+          />
+          <Textarea
+            label="Project Detail"
+            value={projectDetail.text}
+            isInvalid={projectDetail.isValid}
+            errorMessage={projectDetail.errorMessage}
+            onChange={(e) => {
+              setProjectDetail({
+                ...projectDetail,
+                text: e.target.value,
+              });
+            }}
+          />
+        </ModalBody>
+        <ModalFooter>
+          <Button variant="light" onPress={onCancel}>
+            Close
+          </Button>
+          <Button color="primary" onPress={validate}>
+            {editingProject ? "Update" : "Create"}
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+}