v2.3.1

demos/cases/GanttBackend.jsx

@@ -0,0 +1,65 @@
+import { useState, useEffect, useCallback } from 'react';
+import { Gantt, ContextMenu, Editor } from '../../src';
+
+const parseDates = (data) => {
+  data.forEach((item) => {
+    item.start = new Date(item.start);
+    if (item.end) item.end = new Date(item.end);
+  });
+  return data;
+};
+
+
+export default function GanttBackend() {
+  const server = 'https://master--svar-gantt-go--dev.webix.io';
+
+  const [api, setApi] = useState();
+  const [tasks, setTasks] = useState([]);
+  const [links, setLinks] = useState([]);
+
+  useEffect(() => {
+    Promise.all([
+      fetch(server + '/tasks')
+        .then((res) => res.json())
+        .then((arr) => parseDates(arr)),
+      fetch(server + '/links').then((res) => res.json()),
+    ]).then(([t, l]) => {
+      setTasks(t);
+      setLinks(l);
+    });
+  }, []);
+
+  const init = useCallback(
+    (api) => {
+      setApi(api);
+
+      api.on('request-data', (ev) => {
+        Promise.all([
+          fetch(server + `/tasks/${ev.id}`)
+            .then((res) => res.json())
+            .then((arr) => parseDates(arr)),
+          fetch(server + `/links/${ev.id}`).then((res) => res.json()),
+        ]).then(([tasks, links]) => {
+          api.exec('provide-data', {
+            id: ev.id,
+            data: {
+              tasks,
+              links,
+            },
+          });
+        });
+      });
+    },
+    [],
+  );
+
+
+  return (
+    <>
+      <ContextMenu api={api}>
+        <Gantt init={init} tasks={tasks} links={links} />
+      </ContextMenu>
+      {api && <Editor api={api} />}
+    </>
+  );
+}