Remote Paging Grid & HGrid: Refactoring with the new customers endpoint

samples/grids/grid/remote-paging-grid/src/CustomersWithPageResponseModel.ts

@@ -0,0 +1,7 @@
+export interface CustomersWithPageResponseModel {
+    items: any[];
+    totalRecordsCount: number;
+    pageSize: number;
+    pageNumber: number;
+    totalPages: number;
+}

samples/grids/grid/remote-paging-grid/src/RemotePagingService.ts

@@ -1,34 +1,28 @@
-const URL = `https://data-northwind.indigo.design/`;
+const CUSTOMERS_URL = `https://data-northwind.indigo.design/Customers/GetCustomersWithPage`;
 
 export class RemoteService {
 
-public getData(dataState: any, index?: number, perPage?: number): any {
-    return fetch(this.buildUrl(dataState, index, perPage))
+    public static getDataWithPaging(pageIndex?: number, pageSize?: number) {
+        return fetch(this.buildUrl(CUSTOMERS_URL, pageIndex, pageSize))
         .then((result) => result.json());
-}
-
-private buildUrl(dataState: any, index?: number, perPage?: number) {
-    let qS = "";
-    if (dataState) {
-            qS += `${dataState.key}`;
     }
 
-    // Add index and perPage to the query string if they are defined
-    if (index !== undefined) {
-        qS += `?index=${index}`;
-        if (perPage !== undefined) {
-            qS += `&perPage=${perPage}`;
+    private static buildUrl(baseUrl: string, pageIndex?: number, pageSize?: number) {
+        let qS = "";
+        if (baseUrl) {
+                qS += `${baseUrl}`;
         }
-    } else if (perPage !== undefined) {
-        qS += `?perPage=${perPage}`;
-    }
 
-    return `${URL}${qS}`;
-}
+        // Add pageIndex and size to the query string if they are defined
+        if (pageIndex !== undefined) {
+            qS += `?pageIndex=${pageIndex}`;
+            if (pageSize !== undefined) {
+                qS += `&size=${pageSize}`;
+            }
+        } else if (pageSize !== undefined) {
+            qS += `?perPage=${pageSize}`;
+        }
 
-public getDataLength(dataState: any): Promise<number> {
-    return fetch(this.buildUrl(dataState))
-        .then((result) => result.json())
-        .then((data) => data.length);
-}
+        return `${qS}`;
+    }
 }

samples/grids/grid/remote-paging-grid/src/index.tsx

@@ -3,77 +3,73 @@ import React, { useEffect, useRef, useState } from "react";
 import ReactDOM from "react-dom/client";
 import "./index.css";
 
-import { IgrGrid, IgrPaginator, IgrGridModule } from "igniteui-react-grids";
+import { IgrGrid, IgrPaginator, IgrGridModule, GridPagingMode } from "igniteui-react-grids";
 import { IgrColumn } from "igniteui-react-grids";
 
 import "igniteui-react-grids/grids/combined";
 import "igniteui-react-grids/grids/themes/light/bootstrap.css";
 import { RemoteService } from "./RemotePagingService";
+import { CustomersWithPageResponseModel } from "./CustomersWithPageResponseModel";
+import { IgrNumberEventArgs } from "igniteui-react";
 
 IgrGridModule.register();
 
 export default function App() {
-  let data = [];
-const grid = useRef<IgrGrid>(null);
-const paginator = useRef<IgrPaginator>(null);
-const remoteServiceInstance = new RemoteService();
-let [page] = useState(0);
-let [perPage, setPerPage] = useState(15);
+  const grid = useRef<IgrGrid>(null);
+  const paginator = useRef<IgrPaginator>(null);
+  const [data, setData] = useState([]);
+  const [page, setPage] = useState(0);
+  const [perPage, setPerPage] = useState(15);
 
-useEffect(() => {
-  if (paginator.current) {
-    setPerPage(15);
-    grid.current.isLoading = true;
-  }
-
-  grid.current.isLoading = true;
-  loadData('Customers');
-}, [page, 15]);
-
-function loadData(dataKey: string) {
-    const dataState = { key: dataKey };
+  useEffect(() => {
+    loadGridData(page, perPage);
+  }, [page, perPage]);
 
-    // Set loading state
+  function loadGridData(pageIndex?: number, pageSize?: number) {
+    // Set loading
     grid.current.isLoading = true;
 
-    // Fetch data length
-    remoteServiceInstance.getDataLength(dataState).then((length: number) => {
-        paginator.current.totalRecords = length;
-    });
-
     // Fetch data
-    remoteServiceInstance.getData(dataState).then((data: any[]) => {
-      grid.current.isLoading = false;
-      grid.current.data = data;
-      grid.current.markForCheck();
-    });
+    RemoteService.getDataWithPaging(pageIndex, pageSize)
+      .then((response: CustomersWithPageResponseModel) => {
+        setData(response.items);
+        // Stop loading when data is retrieved
+        grid.current.isLoading = false;
+        paginator.current.totalRecords = response.totalRecordsCount;
+      })
+      .catch((error) => {
+        console.error(error.message);
+        setData([]);
+        // Stop loading even if error occurs. Prevents endless loading
+        grid.current.isLoading = false;
+
+      })
   }
 
-  function paginate(pageArgs: number) {
-    page = pageArgs;
-    const skip = page * perPage;
-    const top = perPage;
+  function onPageNumberChange(paginator: IgrPaginator, args: IgrNumberEventArgs) {
+    setPage(args.detail);
+  }
 
-    remoteServiceInstance.getData({ key: 'Customers' }, skip, top).then((incData:any)=> {
-      data = incData; 
-      grid.current.isLoading = false;
-      grid.current.markForCheck();// Update the UI after receiving data
-    });
-}
+  function onPageSizeChange(paginator: IgrPaginator, args: IgrNumberEventArgs) {
+    setPerPage(args.detail);
+  }
 
   return (
     <div className="container sample ig-typography">
       <div className="container fill">
         <IgrGrid
           ref={grid}
+          data={data}
+          pagingMode={GridPagingMode.Remote}
           primaryKey="customerId"
           height="600px"
         >
         <IgrPaginator 
-          perPage="15"
+          perPage={perPage}
           ref={paginator}
-          pageChange={(evt: { page: number }) => paginate(evt.page)}
-          perPageChange={() => paginate(0)}></IgrPaginator>
+          pageChange={onPageNumberChange}
+          perPageChange={onPageSizeChange}>
+        </IgrPaginator>
           <IgrColumn field="customerId" hidden={true}></IgrColumn>
           <IgrColumn field="companyName" header="Company Name"></IgrColumn>
           <IgrColumn field="contactName" header="Contact Name"></IgrColumn>

samples/grids/hierarchical-grid/remote-paging-hgrid/src/CustomersWithPageResponseModel.ts

@@ -0,0 +1,7 @@
+export interface CustomersWithPageResponseModel {
+    items: any[];
+    totalRecordsCount: number;
+    pageSize: number;
+    pageNumber: number;
+    totalPages: number;
+}

samples/grids/hierarchical-grid/remote-paging-hgrid/src/RemoteService.ts

@@ -1,38 +1,34 @@
-const URL = `https://data-northwind.indigo.design/`;
+const BASE_URL = `https://data-northwind.indigo.design/`;
+const CUSTOMERS_URL = `${BASE_URL}Customers/GetCustomersWithPage`;
 
 export class RemoteService {
 
-public getData(dataState: any, index?: number, perPage?: number): any {
-    return fetch(this.buildUrl(dataState, index, perPage))
+    public static getCustomersDataWithPaging(pageIndex?: number, pageSize?: number) {
+        return fetch(this.buildUrl(CUSTOMERS_URL, pageIndex, pageSize))
         .then((result) => result.json());
-}
+    }
 
-private buildUrl(dataState: any, index?: number, perPage?: number) {
-    let qS = "";
-    if (dataState) {
-        if (dataState.rootLevel) {
-            qS += `${dataState.key}`;
-        } else {
-            qS += `${dataState.parentKey}/${dataState.parentID}/${dataState.key}`;
-        }
+    public static getHierarchyDataById(parentEntityName: string, parentId: string, childEntityName: string) {
+        return fetch(`${BASE_URL}${parentEntityName}/${parentId}/${childEntityName}`)
+        .then((result) => result.json());
     }
 
-    // Add index and perPage to the query string if they are defined
-    if (index !== undefined) {
-        qS += `?index=${index}`;
-        if (perPage !== undefined) {
-            qS += `&perPage=${perPage}`;
+    private static buildUrl(baseUrl: string, pageIndex?: number, pageSize?: number) {
+        let qS = "";
+        if (baseUrl) {
+                qS += `${baseUrl}`;
         }
-    } else if (perPage !== undefined) {
-        qS += `?perPage=${perPage}`;
-    }
 
-    return `${URL}${qS}`;
-}
+        // Add pageIndex and size to the query string if they are defined
+        if (pageIndex !== undefined) {
+            qS += `?pageIndex=${pageIndex}`;
+            if (pageSize !== undefined) {
+                qS += `&size=${pageSize}`;
+            }
+        } else if (pageSize !== undefined) {
+            qS += `?perPage=${pageSize}`;
+        }
 
-public getDataLength(dataState: any): Promise<number> {
-    return fetch(this.buildUrl(dataState))
-        .then((result) => result.json())
-        .then((data) => data.length);
-}
+        return `${qS}`;
+    }
 }