Untitled

import React, { useContext, useEffect, useState } from 'react';
import './Gant.css';
import { GanttComponent, TaskFieldsModel, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-gantt';
// import { projectData } from './data';
import { UIContext } from "provider/UIProvider";



function App() {
  const [dataset, setDataset] = useState(null)

    const {
        renderedBoard,
        setShowFooter,
        setRenderedBoard,
        setShowAllBoards,
        setOpenBackdrop,
    } = useContext(UIContext);

    useEffect(() => {
        setDataset(renderedBoard)

    }, []);
  const [data, setData] = useState([]);
  const taskValues: TaskFieldsModel = {
    id: "id",
    name: "title",
    startDate: "start",
    endDate: "deadline",
    duration: "Duration",
    progress: "Progress",
    child: "subtasks",
    dependency: "Predeceesor"
  }

  
  
  useEffect(() => {
    const mang_thu = [
      {
        "assigments": [
          "uBAnYHlAwmMN7s0lkSEWxWkZIPr1"
        ],
        "attachments": [
          {
            "fileType": "PNG",
            "fileUrl": "https://firebasestorage.googleapis.com/v0/b/trello4-1.appspot.com/o/-Mx4P5X45itr_JPGfMVJ%2FScreenshot%20from%202022-03-01%2019-11-23.png?alt=media&token=ad49f1f9-4796-44aa-b9f3-1f8dc21fd343",
            "id": "-Mx4P5X45itr_JPGfMVJ",
            "name": "Screenshot from 2022-03-01 19-11-23.png",
            "uploadDate": "March 1, 2022"
          }
        ],
        "comments": [
          {
            "id": "-Mx4P8cw7ZTW4kiEVaUa",
            "name": "a@gmail.com",
            "picture": "",
            "text": "good job",
            "time": "1 March at 19:15",
            "uid": "gpdkSbMayCVe12Ma3imruRrevjH3"
          }
        ],
        "deadline": "2022-03-12T12:35:25.000Z",
        "id": "task-1",
        "labels": [
          {
            "color": {
              "hex": "#EB5757",
              "name": "red"
            },
            "id": "-Mx4PJmR3BGKXb2zpz2g",
            "input": "cần gấp"
          }
        ],
        "start": "2022-03-10T07:15:11.000Z",
        "status": 2,
        "subtask": [
          {
            "id": "-Mx4OWEnwKgLJ_m3SJIp",
            "name": "a@gmail.com",
            "picture": "",
            "status": false,
            "text": "todo1",
            "time": "1 March at 19:13",
            "uid": "gpdkSbMayCVe12Ma3imruRrevjH3"
          },
          {
            "id": "-Mx4OXfWaW9Hl8k1ggph",
            "name": "a@gmail.com",
            "picture": "",
            "status": false,
            "text": " todo2",
            "time": "1 March at 19:13",
            "uid": "gpdkSbMayCVe12Ma3imruRrevjH3"
          },
          {
            "id": "-Mx4P4Bwz-FjBrJNfsN1",
            "name": "a@gmail.com",
            "picture": "",
            "status": false,
            "text": " Todo3",
            "time": "1 March at 19:13",
            "uid": "gpdkSbMayCVe12Ma3imruRrevjH3"
          }
        ],
        "title": "Hợp đồng thiết kế"
      },
      {
        "id": "task-10",
        "status": 1,
        "title": "phối cảnh đóng dấu logo",
        "start": null,
        "deadline": null
      },
      {
        "id": "task-11",
        "status": 1,
        "title": "Hồ sơ in bàn giao",
        "start": null,
        "deadline": null
      },
      {
        "id": "task-12",
        "status": 1,
        "title": "Bản duyệt vật liệu thi công",
        "start": null,
        "deadline": null
      },
      {
        "id": "task-13",
        "status": 1,
        "title": "Bản vẽ triển khai kĩ thuật lần 1",
        "start": null,
        "deadline": null
      },
      {
        "id": "task-14",
        "status": 1,
        "title": "Hồ sơ xin phép thi công",
        "start": null,
        "deadline": null
      },
      {
        "id": "task-15",
        "status": 1,
        "title": "Những thay đổi trước khi thi công ( từ bản vẽ so với hiện trạng)",
        "start": null,
        "deadline": null
      },
      {
        "id": "task-16",
        "status": 1,
        "title": "Công tác chuẩn bị thi công",
        "start": null,
        "deadline": null
      },
      {
        "id": "task-17",
        "status": 1,
        "title": "Nhật ký hình ảnh thi công ngày . . . ",
        "start": null,
        "deadline": null
      },
      {
        "assigments": [
          "uBAnYHlAwmMN7s0lkSEWxWkZIPr1"
        ],
        "deadline": "2022-03-19T12:36:11.000Z",
        "id": "task-2",
        "start": "2022-03-12T06:03:04.000Z",
        "status": 2,
        "title": "Khảo sát hiện trạng"
      },
      {
        "assigments": [
          "uBAnYHlAwmMN7s0lkSEWxWkZIPr1"
        ],
        "id": "task-3",
        "status": 3,
        "title": "Thiết kế 2D và concept lần 1",
        "start": null,
        "deadline": null
      },
      {
        "assigments": [
          "h2m3pA3wbSTIRIzJID10p8H0gEb2"
        ],
        "deadline": "2022-03-25T12:36:38.000Z",
        "id": "task-4",
        "start": "2022-03-26T12:36:24.000Z",
        "status": 2,
        "title": "Yêu cầu thiết kế từ chủ đầu tư"
      },
      {
        "assigments": [
          "h2m3pA3wbSTIRIzJID10p8H0gEb2"
        ],
        "id": "task-5",
        "status": 1,
        "title": "Báo cáo thi công",
        "start": null,
        "deadline": null
      },
      {
        "assigments": [
          "h2m3pA3wbSTIRIzJID10p8H0gEb2"
        ],
        "deadline": "2022-03-09T05:37:11.000Z",
        "id": "task-6",
        "start": "2022-03-03T12:35:04.000Z",
        "status": 2,
        "title": "Hợp đồng thi công"
      },
      {
        "assigments": [
          "h2m3pA3wbSTIRIzJID10p8H0gEb2"
        ],
        "id": "task-7",
        "status": 2,
        "title": "Thống nhất vật liệu thi công",
        "start": null,
        "deadline": null
      },
      {
        "id": "task-8",
        "status": 1,
        "title": "Phối cảnh 3D lần 1",
        "start": null,
        "deadline": null
      },
      {
        "id": "task-9",
        "status": 1,
        "title": "Phối cảnh hàng duyệt Ok",
        "start": null,
        "deadline": null
      }
    ]
    let mang = []
    console.log(renderedBoard)
    Object.keys(renderedBoard.tasks).forEach(it => {
      renderedBoard.tasks[it].start = new Date(renderedBoard.tasks[it].start);
      renderedBoard.tasks[it].deadline = new Date(renderedBoard.tasks[it].deadline);
      mang.push(renderedBoard.tasks[it]) })
      console.log(mang)
      
    setData(mang_thu)
  }, [])
  return (
    <div>
        {
            data.length ? (
                <GanttComponent dataSource={data}
              taskFields={taskValues}>
                <ColumnsDirective>
                  <ColumnDirective field="id" headerText="ID"></ColumnDirective>
                  <ColumnDirective field="title" headerText="Name"></ColumnDirective>
                  <ColumnDirective field="start" format="dd-MMM-yy"></ColumnDirective>
                  <ColumnDirective field="Duration" textAlign="Right"></ColumnDirective>
                </ColumnsDirective>
              </GanttComponent>
            ) : null
        }
      {/* To change timeline view add timelineSettings={{timelineViewMode: "Day"} in below tag} */}
      
    </div>
  );
}

export default App;