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: key, values: JSON.stringify(values) }), remove: (key) => this.sendRequest(`${URL}/DeleteOrder`, 'DELETE', { key: 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, data) { method = method || 'GET'; data = data || {}; this.logRequest(method, url, data); if(method === 'GET') { return fetch(url, { method: 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) => { return `${encodeURIComponent(key) }=${ encodeURIComponent(data[key])}`; }).join('&'); return fetch(url, { method: 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)); } else { return result.json().then(json => { throw json.Message; }); } }); } logRequest(method, url, data) { const args = Object.keys(data || {}).map(function(key) { return `${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) => { return { 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;