From 49a26c77ac0d91fcb02a9f0cf4336f51755a4be2 Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Fri, 4 Jun 2021 15:53:56 +0300
Subject: [PATCH] Update DataViewLazyDemo.js

---
 src/showcase/dataview/DataViewLazyDemo.js | 24 +++++++++++++----------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/showcase/dataview/DataViewLazyDemo.js b/src/showcase/dataview/DataViewLazyDemo.js
index dfe31b7730..c73834b36c 100644
--- a/src/showcase/dataview/DataViewLazyDemo.js
+++ b/src/showcase/dataview/DataViewLazyDemo.js
@@ -48,11 +48,12 @@ export class DataViewLazyDemo extends Component {
         //imitate delay of a backend call
         setTimeout(() => {
             const startIndex = event.first;
-            const endIndex = event.first + this.rows;
+            const endIndex = Math.min(event.first + this.rows, this.state.totalRecords - 1);
+            const newProducts = startIndex === endIndex ? this.datasource.slice(startIndex) : this.datasource.slice(startIndex, endIndex);
 
             this.setState({
                 first: startIndex,
-                products: this.datasource.slice(startIndex, endIndex),
+                products: newProducts,
                 loading: false
             });
         }, 1000);
@@ -219,11 +220,12 @@ export class DataViewLazyDemo extends Component {
         //imitate delay of a backend call
         setTimeout(() => {
             const startIndex = event.first;
-            const endIndex = event.first + this.rows;
+            const endIndex = Math.min(event.first + this.rows, this.state.totalRecords - 1);
+            const newProducts = startIndex === endIndex ? this.datasource.slice(startIndex) : this.datasource.slice(startIndex, endIndex);
 
             this.setState({
                 first: startIndex,
-                products: this.datasource.slice(startIndex, endIndex),
+                products: newProducts,
                 loading: false
             });
         }, 1000);
@@ -362,7 +364,7 @@ const DataViewLazyDemo = () => {
                 setLoading(false);
             });
         }, 1000);
-    }
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
     const onPage = (event) => {
         setLoading(true);
@@ -370,10 +372,11 @@ const DataViewLazyDemo = () => {
         //imitate delay of a backend call
         setTimeout(() => {
             const startIndex = event.first;
-            const endIndex = event.first + this.rows;
+            const endIndex = Math.min(event.first + this.rows, this.state.totalRecords - 1);
+            const newProducts = startIndex === endIndex ? datasource.slice(startIndex) : datasource.slice(startIndex, endIndex);
 
             setFirst(startIndex);
-            setProducts(datasource.slice(startIndex, endIndex));
+            setProducts(newProducts);
             setLoading(false);
         }, 1000);
     }
@@ -502,7 +505,7 @@ const DataViewLazyDemo = () => {
                 setLoading(false);
             });
         }, 1000);
-    }
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
     const onPage = (event) => {
         setLoading(true);
@@ -510,10 +513,11 @@ const DataViewLazyDemo = () => {
         //imitate delay of a backend call
         setTimeout(() => {
             const startIndex = event.first;
-            const endIndex = event.first + this.rows;
+            const endIndex = Math.min(event.first + this.rows, this.state.totalRecords - 1);
+            const newProducts = startIndex === endIndex ? datasource.slice(startIndex) : datasource.slice(startIndex, endIndex);
 
             setFirst(startIndex);
-            setProducts(datasource.slice(startIndex, endIndex));
+            setProducts(newProducts);
             setLoading(false);
         }, 1000);
     }