fix: warnings and errors

kendo-react-grid-crud/ClientApp/src/App.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Route } from 'react-router';
+import { Route, Routes } from 'react-router';
 import { Layout } from './components/Layout';
 import { Home } from './components/Home';
 import { Counter } from './components/Counter';
@@ -9,11 +9,14 @@ import './custom.css'
 export default class App extends Component {
   static displayName = App.name;
 
-  render () {
+  render() {
     return (
       <Layout>
-        <Route exact path='/' component={Home} />
-        <Route path='/counter' component={Counter} />
+        <Routes>
+          <Route exact path='/' element={<Home />} />
+          <Route path='/counter' element={<Counter />} />
+          <Route path='/fetch-data' element={null} />
+        </Routes>
       </Layout>
     );
   }

kendo-react-grid-crud/ClientApp/src/components/Counter.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import { Button } from "@progress/kendo-react-buttons";
 
 export class Counter extends Component {
   static displayName = Counter.name;
@@ -24,7 +25,7 @@ export class Counter extends Component {
 
         <p aria-live="polite">Current count: <strong>{this.state.currentCount}</strong></p>
 
-        <button className="k-button" onClick={this.incrementCounter}>Increment</button>
+        <Button onClick={this.incrementCounter}>Increment</Button>
       </div>
     );
   }

kendo-react-grid-crud/ClientApp/src/components/Home.js

@@ -3,6 +3,7 @@ import '@progress/kendo-theme-default/dist/all.css'
 import { useState, useEffect } from "react";
 
 import { Grid, GridColumn, GridToolbar } from '@progress/kendo-react-grid';
+import { Button } from "@progress/kendo-react-buttons";
 import { mapTree } from "@progress/kendo-react-treelist";
 import { clone } from '@progress/kendo-react-common';
 
@@ -60,7 +61,15 @@ const Home = (props) => {
         let dateWitnNotimeZone = new Date(
             myToday.getTime() - offsetMiliseconds
         );
-        let newRecord = { productID: null, firstOrderedOn: dateWitnNotimeZone, category: { categoryID: 1, categoryName: "Beverages"}, inEdit: true }
+        let newRecord = {
+            productID: null,
+            firstOrderedOn: dateWitnNotimeZone,
+            category: { categoryID: 1, categoryName: "Beverages" },
+            inEdit: true,
+            ProductName: 'New Product',
+            Discontinued: false,
+            UnitsInStock: 1
+        }
         let newData = [...data];
         newData.unshift(newRecord);
         setData(newData)
@@ -104,7 +113,7 @@ const Home = (props) => {
             take: dataState.take,
             skip: dataState.skip
         }
-        Axios.delete("https://localhost:44487/products", { data: { ...data, product: dataItem }}).then(
+        Axios.delete("https://localhost:44487/products", { data: { ...data, product: dataItem } }).then(
             (response) => {
                 let parsedDataNew = mapTree(response.data.data, 'items', item => {
                     item.firstOrderedOn = new Date(item.firstOrderedOn);
@@ -224,45 +233,45 @@ const Home = (props) => {
                 cancel: cancel
             }}
         >
-        <Grid
-            style={{
-                height: "520px",
-            }}
-            data={data}
-            editField="inEdit"
-            onItemChange={handleItemChange}
-            onDataStateChange={handleDataStateChange}
-            {...dataState}
-            pageable
-            sortable
-            filterable
-            groupable
-            total={total}
-        >
-            <GridToolbar>
-                <div>
-                    <button
+            <Grid
+                style={{
+                    height: "520px",
+                }}
+                data={data}
+                editField="inEdit"
+                onItemChange={handleItemChange}
+                onDataStateChange={handleDataStateChange}
+                {...dataState}
+                pageable
+                sortable
+                filterable
+                groupable
+                total={total}
+            >
+                <GridToolbar>
+                    <div>
+                        <Button
                             title="Add new"
-                            className="k-button k-primary"
+                            themeColor="primary"
                             onClick={addRecord}
-                    >
-                        Add new
-                    </button>
-                </div>
-            </GridToolbar>
-            <GridColumn field="productID" title="Id" width="100px" editable={false} filterable={false} />
+                        >
+                            Add new
+                        </Button>
+                    </div>
+                </GridToolbar>
+                <GridColumn field="productID" title="Id" width="100px" editable={false} filterable={false} />
                 <GridColumn field="productName" title="Name" />
                 <GridColumn field="category.categoryName" title="Category" cell={DropDownCell} />
-            <GridColumn field="firstOrderedOn" title="First Ordered On" editor="date" filter='date' format={'{0:d}'} />
-            <GridColumn
-                field="unitsInStock"
-                title="Units"
-                width="150px"
-                editor="numeric"
-                filter="numeric"
-            />
-            <GridColumn field="discontinued" title="Discontinued" editor="boolean" filter="boolean" />
-            <GridColumn width="200px" cell={MyCommandCell} />
+                <GridColumn field="firstOrderedOn" title="First Ordered On" editor="date" filter='date' format={'{0:d}'} />
+                <GridColumn
+                    field="unitsInStock"
+                    title="Units"
+                    width="150px"
+                    editor="numeric"
+                    filter="numeric"
+                />
+                <GridColumn field="discontinued" title="Discontinued" editor="boolean" filter="boolean" />
+                <GridColumn width="200px" cell={MyCommandCell} />
             </Grid>
         </DataContext.Provider>
     )

kendo-react-grid-crud/ClientApp/src/components/cells/CommandCell.jsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { Button } from "@progress/kendo-react-buttons";
 import DataContext from '../../contexts/data-context';
 
 const MyCommandCell = props => {
@@ -37,20 +38,20 @@ const MyCommandCell = props => {
 
     return inEdit ?
             (<td className="k-command-cell">
-                <button className="k-button k-grid-save-command" onClick={handleAddUpdate}>
+                <Button onClick={handleAddUpdate}>
                     {isNewItem ? "Add" : "Update"}
-                </button>
-                <button className="k-button k-grid-cancel-command" onClick={handleDiscardCancel}>
+                </Button>
+                <Button onClick={handleDiscardCancel}>
                     {isNewItem ? "Discard" : "Cancel"}
-                </button>
+                </Button>
             </td>) :   
             (<td className="k-command-cell">
-                <button className="k-primary k-button k-grid-edit-command" onClick={handleEdit}>
+                <Button themeColor="primary" onClick={handleEdit}>
                     Edit
-                </button>
-                <button className="k-button k-grid-remove-command" onClick={handleDelete}>
+                </Button>
+                <Button onClick={handleDelete}>
                     Remove
-                </button>
+                </Button>
             </td>);
 };
 

kendo-react-grid-crud/ClientApp/src/index.js

@@ -1,6 +1,6 @@
 import 'bootstrap/dist/css/bootstrap.css';
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
 import App from './App';
 import * as serviceWorkerRegistration from './serviceWorkerRegistration';
@@ -9,11 +9,11 @@ import reportWebVitals from './reportWebVitals';
 const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href');
 const rootElement = document.getElementById('root');
 
-ReactDOM.render(
+createRoot(rootElement).render(
   <BrowserRouter basename={baseUrl}>
     <App />
-  </BrowserRouter>,
-  rootElement);
+  </BrowserRouter>
+);
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.

kendo-react-grid-crud/ClientApp/src/setupProxy.js

@@ -1,4 +1,4 @@
-const createProxyMiddleware = require('http-proxy-middleware');
+const { createProxyMiddleware } = require("http-proxy-middleware");
 const { env } = require('process');
 
 const target = env.ASPNETCORE_HTTPS_PORT ? `https://localhost:${env.ASPNETCORE_HTTPS_PORT}` :