From 93f5a52da8ab2fa671c346b39e5ae17d9d2044c5 Mon Sep 17 00:00:00 2001
From: masaditya <aeka489@gmail.com>
Date: Mon, 20 Jul 2020 16:22:08 +0700
Subject: [PATCH] feat(project) : implement update project

---
 src/modules/LoggedIn/Project/ProjectForm.tsx  | 100 ++++++++++--------
 src/modules/LoggedIn/Project/ProjectList.tsx  |  66 +++++++-----
 src/modules/LoggedIn/Project/ProjectPage.tsx  |  31 ++++--
 .../LoggedIn/Project/useProjectSync.ts        |   2 +-
 4 files changed, 117 insertions(+), 82 deletions(-)

diff --git a/src/modules/LoggedIn/Project/ProjectForm.tsx b/src/modules/LoggedIn/Project/ProjectForm.tsx
index 1b89a52..798d8e5 100644
--- a/src/modules/LoggedIn/Project/ProjectForm.tsx
+++ b/src/modules/LoggedIn/Project/ProjectForm.tsx
@@ -1,38 +1,49 @@
-import React, { ChangeEvent } from 'react'
-import { Button, Modal } from 'antd'
-import { useProjectSync, ProjectRequest } from './useProjectSync'
-const ProjectForm = () => {
-  const projectSync = useProjectSync()
-  const [visible, setVisible] = React.useState<boolean>(false)
-  const [newData, setNewData] = React.useState<ProjectRequest>(
-    {
-      name: '',
-      description: ''
-    }
-  )
-  const toggleModal = React.useCallback(() => {
-    setVisible((prev) => !prev)
-  }, [])
+import React, { ChangeEvent } from "react";
+import { Button, Modal } from "antd";
+import { useProjectSync, ProjectRequest, Project } from "./useProjectSync";
 
-  const handleChange = React.useCallback((event: ChangeEvent<HTMLInputElement>) => {
-    setNewData({ ...newData, [event.target.name]: event.target.value })
-  }, [newData])
+type FormProps = {
+  visible: boolean;
+  toggleModal: () => void;
+  project?: Project;
+};
+
+const ProjectForm = (props: FormProps) => {
+  const projectSync = useProjectSync();
+  const [newData, setNewData] = React.useState<ProjectRequest>({
+    name: "",
+    description: "",
+  });
+
+  React.useEffect(() => {
+    setNewData({
+      name: props.project ? props.project.name : "",
+      description: props.project ? props.project.description : "",
+    });
+  }, [props.project]);
+
+  const handleChange = React.useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      setNewData({ ...newData, [event.target.name]: event.target.value });
+    },
+    [newData]
+  );
 
   const handleSubmit = React.useCallback(async () => {
-    await projectSync.createProject(
-      newData
-    )
-    toggleModal()
-  }, [projectSync, toggleModal, newData])
+    if (props.project)
+      await projectSync.updateProject(newData, props.project._id);
+    else await projectSync.createProject(newData);
+    props.toggleModal();
+  }, [projectSync, props, newData]);
 
   return (
     <>
       <Modal
-        title="Create Project"
-        visible={visible}
-        onCancel={toggleModal}
+        title={props.project ? "Update Project" : "Create Project"}
+        visible={props.visible}
+        onCancel={props.toggleModal}
         footer={[
-          <Button key="back" onClick={toggleModal}>
+          <Button key="back" onClick={props.toggleModal}>
             Cancel
           </Button>,
           <Button
@@ -41,27 +52,27 @@ const ProjectForm = () => {
             onClick={handleSubmit}
             loading={projectSync.isMutating}
           >
-            Create Project
+            {props.project ? "Update Project" : "Create Project"}
           </Button>,
         ]}
       >
         <div style={{ marginBottom: 22 }}>
-          <p style={{ color: 'rgba(0, 0, 0, 0.65)', fontSize: 14 }}>
+          <p style={{ color: "rgba(0, 0, 0, 0.65)", fontSize: 14 }}>
             Project Name
           </p>
           <input
             type="text"
             placeholder="Jawa Timur Park"
-            name='name'
-            value={newData.name}
+            name="name"
+            value={props.project ? props.project.name : ""}
             onChange={handleChange}
             style={{
-              border: '1px solid #D9D9D9',
-              outline: 'none',
+              border: "1px solid #D9D9D9",
+              outline: "none",
               borderRadius: 4,
               fontSize: 14,
-              minWidth: '100%',
-              padding: '5px 12px',
+              minWidth: "100%",
+              padding: "5px 12px",
             }}
           />
         </div>
@@ -70,25 +81,22 @@ const ProjectForm = () => {
           <input
             type="text"
             placeholder="Interactive jawa timur park map for visitor"
-            name='description'
+            name="description"
             value={newData.description}
             onChange={handleChange}
             style={{
-              border: '1px solid #D9D9D9',
-              outline: 'none',
+              border: "1px solid #D9D9D9",
+              outline: "none",
               borderRadius: 4,
               fontSize: 14,
-              minWidth: '100%',
-              padding: '5px 12px',
+              minWidth: "100%",
+              padding: "5px 12px",
             }}
           />
         </div>
       </Modal>
-      <Button type="primary" onClick={toggleModal}>
-        Create New Project
-      </Button>
     </>
-  )
-}
+  );
+};
 
-export default ProjectForm
+export default ProjectForm;
diff --git a/src/modules/LoggedIn/Project/ProjectList.tsx b/src/modules/LoggedIn/Project/ProjectList.tsx
index cffbda8..a9125ff 100644
--- a/src/modules/LoggedIn/Project/ProjectList.tsx
+++ b/src/modules/LoggedIn/Project/ProjectList.tsx
@@ -1,19 +1,27 @@
-import React from 'react'
-import { Card, Row, Col, message } from 'antd'
-import { useProjectSync } from './useProjectSync'
-import { Popconfirm } from 'antd';
-import { DeleteOutlined } from '@ant-design/icons';
+import React from "react";
+import { Card, Row, Col, message } from "antd";
+import { useProjectSync, Project } from "./useProjectSync";
+import { Popconfirm } from "antd";
+import { DeleteOutlined, EditOutlined } from "@ant-design/icons";
+import ProjectForm from "./ProjectForm";
 
 const ProjectList = () => {
+  const [visible, setVisible] = React.useState<boolean>(false);
+  const [projectProps, setProjectProps] = React.useState<Project>();
+
+  const toggleModal = React.useCallback(() => {
+    setVisible((prev) => !prev);
+  }, []);
+
   const confirm = React.useCallback(() => {
-    message.success('Task Deleted');
-  }, [])
+    message.success("Task Deleted");
+  }, []);
 
   const cancel = React.useCallback(() => {
-    message.error('Canceled');
-  }, [])
+    message.error("Canceled");
+  }, []);
 
-  const projectSync = useProjectSync()
+  const projectSync = useProjectSync();
   return (
     <Row style={{ marginTop: 16 }} gutter={[24, 16]}>
       {projectSync.isValidating ? (
@@ -32,10 +40,11 @@ const ProjectList = () => {
           </Col>
         </>
       ) : (
-        projectSync.projects.map((project) => {
+        projectSync.projects.map((project: Project) => {
           return (
             <Col span={6} key={project._id}>
-              <Card hoverable
+              <Card
+                hoverable
                 actions={[
                   <Popconfirm
                     title="Are you sure delete this project ?"
@@ -44,27 +53,36 @@ const ProjectList = () => {
                     okText="Yes"
                     cancelText="No"
                   >
-                    <a href="#">
-                      <DeleteOutlined
-                        style={{
-                          fontSize: 20
-                        }}
-                      />
-                    </a>
-                  </Popconfirm>
+                    <DeleteOutlined
+                      style={{
+                        fontSize: 20,
+                      }}
+                    />
+                  </Popconfirm>,
+                  <EditOutlined
+                    onClick={() => {
+                      setProjectProps(project);
+                      toggleModal();
+                    }}
+                  />,
                 ]}
               >
                 <Card.Meta
                   title={project.name}
                   description={project.description}
                 />
+                <ProjectForm
+                  visible={visible}
+                  toggleModal={toggleModal}
+                  project={projectProps}
+                />
               </Card>
             </Col>
-          )
+          );
         })
       )}
     </Row>
-  )
-}
+  );
+};
 
-export default ProjectList
+export default ProjectList;
diff --git a/src/modules/LoggedIn/Project/ProjectPage.tsx b/src/modules/LoggedIn/Project/ProjectPage.tsx
index cc31a75..e6f6651 100644
--- a/src/modules/LoggedIn/Project/ProjectPage.tsx
+++ b/src/modules/LoggedIn/Project/ProjectPage.tsx
@@ -1,13 +1,18 @@
-import React from 'react'
-import { Layout, Typography, Row, Col } from 'antd'
-import { UserOutlined } from '@ant-design/icons'
-import ProjectForm from './ProjectForm'
-import ProjectList from './ProjectList'
+import React from "react";
+import { Layout, Typography, Row, Col, Button } from "antd";
+import { UserOutlined } from "@ant-design/icons";
+import ProjectForm from "./ProjectForm";
+import ProjectList from "./ProjectList";
 
 const ProjectPage = () => {
+  const [visible, setVisible] = React.useState<boolean>(false);
+  const toggleModal = React.useCallback(() => {
+    setVisible((prev) => !prev);
+  }, []);
+
   return (
-    <Layout style={{ height: '100vh' }}>
-      <Layout.Header style={{ backgroundColor: '#fff' }}>
+    <Layout style={{ height: "100vh" }}>
+      <Layout.Header style={{ backgroundColor: "#fff" }}>
         <Row align="middle" justify="space-between">
           <Col>
             <Typography.Title level={4}>Blueprint</Typography.Title>
@@ -21,12 +26,16 @@ const ProjectPage = () => {
       <Layout.Content style={{ padding: 50 }}>
         <Row align="middle" justify="space-between">
           <Typography.Title level={4}>Project Workspace</Typography.Title>
-          <ProjectForm />
+          {/* <ProjectForm /> */}
+          <Button type="primary" onClick={toggleModal}>
+            Create New Project
+          </Button>
+          <ProjectForm visible={visible} toggleModal={toggleModal} />
         </Row>
         <ProjectList />
       </Layout.Content>
     </Layout>
-  )
-}
+  );
+};
 
-export default ProjectPage
+export default ProjectPage;
diff --git a/src/modules/LoggedIn/Project/useProjectSync.ts b/src/modules/LoggedIn/Project/useProjectSync.ts
index 8eefeee..7fb6cc4 100644
--- a/src/modules/LoggedIn/Project/useProjectSync.ts
+++ b/src/modules/LoggedIn/Project/useProjectSync.ts
@@ -2,7 +2,7 @@ import React from 'react'
 import { useRequest, request } from '../../../utils/request'
 import { notification } from 'antd'
 
-type Project = {
+export type Project = {
   _id: string
   name: string
   description: string