chore: update example

README.md

@@ -2,6 +2,7 @@ The start the application locally follow these steps:
 
 1. Clone or download the source code from GitHub.
 1. Install the required dependencies using `npm install --save`.
+1. Check and activate your license - https://www.telerik.com/kendo-react-ui/components/my-license/
 1. Run the application using `npm start`.
 1. To build it for production with the profiler active using the command `npm run build -- --profile`.
 1. Then serve the create production build with `serve -s build`.

package.json

@@ -5,26 +5,25 @@
   "dependencies": {
     "@progress/kendo-data-query": "^1.5.5",
     "@progress/kendo-drawing": "^1.16.0",
-    "@progress/kendo-licensing": "^1.2.1",
-    "@progress/kendo-react-animation": "^4.13.0",
-    "@progress/kendo-react-data-tools": "^4.13.0",
-    "@progress/kendo-react-dateinputs": "^4.13.0",
-    "@progress/kendo-react-dropdowns": "^4.13.0",
-    "@progress/kendo-react-excel-export": "^4.13.0",
-    "@progress/kendo-react-grid": "^4.13.0",
-    "@progress/kendo-react-inputs": "^4.13.0",
-    "@progress/kendo-react-intl": "^4.13.0",
-    "@progress/kendo-react-layout": "^4.13.0",
-    "@progress/kendo-react-progressbars": "^4.13.0",
-    "@progress/kendo-react-treeview": "^4.13.0",
-    "@progress/kendo-theme-default": "^4.43.0",
-    "@testing-library/jest-dom": "^5.16.1",
-    "@testing-library/react": "^12.1.2",
-    "@testing-library/user-event": "^13.5.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-scripts": "5.0.0",
-    "web-vitals": "^2.1.3"
+    "@progress/kendo-licensing": "^1.3.1",
+    "@progress/kendo-svg-icons": "1.8.0",
+    "@telerik/kendo-intl": "2.3.1",
+    "@progress/kendo-react-animation": "^5.16.1",
+    "@progress/kendo-react-data-tools": "^5.16.1",
+    "@progress/kendo-react-dateinputs": "^5.16.1",
+    "@progress/kendo-react-dropdowns": "^5.16.1",
+    "@progress/kendo-react-excel-export": "^5.16.1",
+    "@progress/kendo-react-grid": "^5.16.1",
+    "@progress/kendo-react-inputs": "^5.16.1",
+    "@progress/kendo-react-intl": "^5.16.1",
+    "@progress/kendo-react-layout": "^5.16.1",
+    "@progress/kendo-react-progressbars": "^5.16.1",
+    "@progress/kendo-react-treeview": "^5.16.1",
+    "@progress/kendo-theme-default": "^6.6.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "^5.0.1",
+    "web-vitals": "^3.4.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/DataService/index.jsx

@@ -61,7 +61,7 @@ export const DataProvider = (props) => {
 
     const onDataReset = React.useCallback(
         (volume) => {
-            console.log(volume, 'inside onDataReset')
+            // console.log(volume, 'inside onDataReset')
             clearInterval(intervalRef.current);
 
             const financialData = new FinancialData();
@@ -79,23 +79,21 @@ export const DataProvider = (props) => {
                 interval
             );
         },
-        [data]
+        []
     );
 
     const onStartLiveUpdateAll = React.useCallback(
         (interval) => {
-            console.log('here')
             clearInterval(intervalRef.current);
 
             intervalRef.current = setInterval(
                 () => {
-                    console.log(1);
                     setData(oldData => updateAllPrices(oldData))
                 },
                 interval
             );
         },
-        [data]
+        []
     );
 
     const onStopLiveUpdate = React.useCallback(

src/DataService/local-data/financial-data.js

@@ -332,12 +332,12 @@ export class FinancialData {
 
     updateRandomPrices(data) {
         const currData = data.slice(0, data.length + 1);
-        let y = 0;
+        // let y = 0;
         for (let i = Math.round(Math.random() * 10); i < data.length; i += Math.round(Math.random() * 10)) {
             const dataObj = Object.assign({}, data[i]);
             this.randomizeObjectData(dataObj);
             currData[i] = dataObj;
-            y++;
+            // y++;
         }
         // return {data: currData, recordsUpdated: y };
         return currData;

src/KendoGrid/index.jsx

@@ -43,7 +43,7 @@ const BUTTON_META = {
 
 export const KendoGrid = (props) => {
     const intl = useInternationalization();
-    const [_, setForceUpdate] = React.useState(false);
+    // const [_, setForceUpdate] = React.useState(false);
 
 
     const [realUpdate, setRealUpdate] = React.useState(false);
@@ -65,19 +65,19 @@ export const KendoGrid = (props) => {
     const frequencyRef = React.useRef(FREQUENCY_INITIAL);
     const [selectedButton, setSelectedButton] = React.useState("stop");
     const [liveUpdating, setLiveUpdating] = React.useState(false);
-    const lastSelectedIndexRef = React.useRef(0);
+    // const lastSelectedIndexRef = React.useRef(0);
     const debouncedDataReset = React.useMemo(
         () => debounce((currentVolume) => {
             props.onDataReset(currentVolume)
         }, DEBOUNCE_TIME),
-        [props.onDataReset]
+        [props]
     );
 
     React.useEffect(
         () => {
             props.onDataReset(volumeRef.current);
         },
-        []
+        [props]
     );
 
     React.useEffect(() => {
@@ -140,7 +140,7 @@ export const KendoGrid = (props) => {
                 default:
             }
         },
-        [debouncedDataReset, setLiveUpdating, setSelectedButton]
+        [props]
     );
 
     const onProfilerCallback = (
@@ -155,7 +155,7 @@ export const KendoGrid = (props) => {
         if (realUpdate) {
             let currentUpdateTime = [...updateTime];
             currentUpdateTime.push(actualDuration);
-            console.log(updateTime, 'update time')
+            // console.log(updateTime, 'update time')
             setRealUpdate(false);
             setUpdateTime(currentUpdateTime);
             const sum = updateTime.reduce((a, b) => a + b, 0);

src/index.js

@@ -1,14 +1,14 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('root'));
+root.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+  </React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function

src/utils/index.js

@@ -3,7 +3,7 @@ import { changeNegative, changePositive, negative, positive, strongNegative, str
 export function debounce(func, wait) {
     let timeoutID;
     return function (volume, ...args) {
-        console.log(volume, 'inside debounce', args)
+        // console.log(volume, 'inside debounce', args)
         clearTimeout(timeoutID);
         const context = this;