CRUD Operations

import React from 'react'; import { DataGrid, Column, Editing, Scrolling, Lookup, Summary, TotalItem, } from 'devextreme-react/data-grid'; import { Button } from 'devextreme-react/button'; import { SelectBox } from 'devextreme-react/select-box'; import CustomStore from 'devextreme/data/custom_store'; import { formatDate } from 'devextreme/localization'; import 'whatwg-fetch'; const URL = 'https://js.devexpress.com/Demos/Mvc/api/DataGridWebApi'; const REFRESH_MODES = ['full', 'reshape', 'repaint']; class App extends React.Component { constructor(props) { super(props); this.state = { ordersData: new CustomStore({ key: 'OrderID', load: () => this.sendRequest(`${URL}/Orders`), insert: (values) => this.sendRequest(`${URL}/InsertOrder`, 'POST', { values: JSON.stringify(values), }), update: (key, values) => this.sendRequest(`${URL}/UpdateOrder`, 'PUT', { key, values: JSON.stringify(values), }), remove: (key) => this.sendRequest(`${URL}/DeleteOrder`, 'DELETE', { key, }), }), customersData: new CustomStore({ key: 'Value', loadMode: 'raw', load: () => this.sendRequest(`${URL}/CustomersLookup`), }), shippersData: new CustomStore({ key: 'Value', loadMode: 'raw', load: () => this.sendRequest(`${URL}/ShippersLookup`), }), requests: [], refreshMode: 'reshape', }; this.clearRequests = this.clearRequests.bind(this); this.handleRefreshModeChange = this.handleRefreshModeChange.bind(this); } sendRequest(url, method = 'GET', data = {}) { this.logRequest(method, url, data); if (method === 'GET') { return fetch(url, { method, credentials: 'include', }).then((result) => result.json().then((json) => { if (result.ok) return json.data; throw json.Message; })); } const params = Object.keys(data).map((key) => `${encodeURIComponent(key)}=${encodeURIComponent(data[key])}`).join('&'); return fetch(url, { method, body: params, headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8', }, credentials: 'include', }).then((result) => { if (result.ok) { return result.text().then((text) => text && JSON.parse(text)); } return result.json().then((json) => { throw json.Message; }); }); } logRequest(method, url, data) { const args = Object.keys(data || {}).map((key) => `${key}=${data[key]}`).join(' '); const time = formatDate(new Date(), 'HH:mm:ss'); const request = [time, method, url.slice(URL.length), args].join(' '); this.setState((state) => ({ requests: [request].concat(state.requests) })); } clearRequests() { this.setState({ requests: [] }); } handleRefreshModeChange(e) { this.setState({ refreshMode: e.value }); } render() { const { refreshMode, ordersData, customersData, shippersData, } = this.state; return ( <React.Fragment> <DataGrid id="grid" showBorders={true} dataSource={ordersData} repaintChangesOnly={true} > <Editing refreshMode={refreshMode} mode="cell" allowAdding={true} allowDeleting={true} allowUpdating={true} /> <Scrolling mode="virtual" /> <Column dataField="CustomerID" caption="Customer"> <Lookup dataSource={customersData} valueExpr="Value" displayExpr="Text" /> </Column> <Column dataField="OrderDate" dataType="date"> </Column> <Column dataField="Freight"> </Column> <Column dataField="ShipCountry"> </Column> <Column dataField="ShipVia" caption="Shipping Company" dataType="number" > <Lookup dataSource={shippersData} valueExpr="Value" displayExpr="Text" /> </Column> <Summary> <TotalItem column="CustomerID" summaryType="count" /> <TotalItem column="Freight" summaryType="sum" valueFormat="#0.00" /> </Summary> </DataGrid> <div className="options"> <div className="caption">Options</div> <div className="option"> <span>Refresh Mode: </span> <SelectBox value={refreshMode} items={REFRESH_MODES} onValueChanged={this.handleRefreshModeChange} /> </div> <div id="requests"> <div> <div className="caption">Network Requests</div> <Button id="clear" text="Clear" onClick={this.clearRequests} /> </div> <ul> {this.state.requests.map((request, index) => <li key={index}>{request}</li>)} </ul> </div> </div> </React.Fragment> ); } } export default App;