Skip to main content

send()

Description​

Sends a necessary HTTP request to the server and returns a promise with or without data depending on the request

All requests to the server are made with the send() method which is a part of the RestDataProvider service.

Usage​

async function send(url, method, data = {}, headers = {}) {
  const response = await fetch(url, {
    method,
    headers: {
      'Content-Type': 'application/json',
      ...headers
    },
    body: JSON.stringify(data)
  });

  if (!response.ok) {
    throw new Error('Network response was not ok');
  }

  return await response.json();
}

Parameters​

NameTypeDescription
urlstringRequired. A path to the server where a request is sent to.
methodstringRequired. An HTTP method type (Get, Post, Put, Delete)
dataobjectOptional. Parameters that are sent to the server. By default, parameters of the fired event are sent. But you are free to add additional parameters with the custom object. See the examples below.
headersobjectOptional. A default header is the Content-Type header set to application/json. More optional headers can be added with the customHeaders parameter. See the examples below.

Response​

The method returns the promise object with or without data depending on the request.

A promise is returned in response to the success request status. In case of the failed request (response.status == 500), an exception with an error text is thrown.

Examples​

The following examples demonstrate how to add more headers to the send() method.

const customHeaders = {
    "Authorization": "Bearer",
    "Custom header": "some value",
};

api.intercept("add-task", obj => {
    restDataProvider.send("tasks", "POST", obj, customHeaders);
});

Or you can add headers in the way as below by redefining RestDataProvider, which can give you more control of the data you send to the server: 

import React, { useEffect, useRef, useState } from "react";
import { Gantt } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";
import { RestDataProvider } from "wx-gantt-data-provider";

const url = "https://some_backend_url";

class MyDataProvider extends RestDataProvider {
    send(url, method, data, headers) {
        headers = { ...headers, "SomeToken": "abc" };
        return super.send(url, method, data, headers);
    }
}

const server = new MyDataProvider(url);

const GanttComponent = () => {
    const [tasks, setTasks] = useState([]);
    const [links, setLinks] = useState([]);
    const apiRef = useRef(null);

    useEffect(() => {
        server.getData().then(data => {
            setTasks(data.tasks);
            setLinks(data.links);
        });
    }, []);

    useEffect(() => {
        if (apiRef.current) {
            apiRef.current.setNext(server);
        }
    }, [apiRef.current]);

    return (
        <Gantt
            tasks={tasks}
            links={links}
            apiRef={apiRef}
        />
    );
};

export default GanttComponent;

The example below shows how to add additional parameters to the request. You don't need to call the send() method manually here as it's called via the api.setNext() method. 

import React, { useEffect, useRef, useState } from "react";
import { Gantt } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";
import { RestDataProvider } from "wx-gantt-data-provider";

const url = "https://some_backend_url";

const server = new RestDataProvider(url);

const MyGanttComponent = () => {
    const [tasks, setTasks] = useState([]);
    const [links, setLinks] = useState([]);
    const apiRef = useRef(null);

    useEffect(() => {
        server.getData().then(data => {
            setTasks(data.tasks);
            setLinks(data.links);
        });

        if (apiRef.current) {
            apiRef.current.intercept("update-task", data => {
                data.custom = "custom event";
            });
            apiRef.current.setNext(server);
        }
    }, [apiRef]);

    return <Gantt tasks={tasks} links={links} api={apiRef} />;
};

export default MyGanttComponent;

If you send an arbitrary request that is not managed by the Gantt API, you can pass the parameters object into the send() method of the RestDataProvider manually:

const customEndpoint = `projects/1`;
const params = {
    lastModified: Date.now()
};
restProvider.send(customEndpoint, "PUT", params).then(data => {});

formatDate() method​

Description: when data is sent via the send() method, the Date objects are formatted to strings: "yyyy-MM-dd HH:mm:ss".

Usage:

function formatDate(date) {
  return new Intl.DateTimeFormat('en-US').format(date);
}

If you need to format dates to a different format, you can redefine it as in the example below: create a new class for RestDataProvider, set the required format with the formatDate() method, and then apply this new class for RestDataProvider.

class MyProvider extends RestDataProvider {
  formatDate(date) {
    const string = ...; // convert date to string
    return string;
  }
}

const restProvider = new MyProvider(serverUrl);

Related articles: