Skip to content

Commit 90ce6c4

Browse files
author
Mariela Tihova
authored
Remote Paging Grid & HGrid: Refactoring with the new customers endpoint (#668)
1 parent 3f8c0d6 commit 90ce6c4

File tree

6 files changed

+150
-141
lines changed

6 files changed

+150
-141
lines changed

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export interface CustomersWithPageResponseModel {
2+
items: any[];
3+
totalRecordsCount: number;
4+
pageSize: number;
5+
pageNumber: number;
6+
totalPages: number;
7+
}

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

Lines changed: 18 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,28 @@
1-
const URL = `https://data-northwind.indigo.design/`;
1+
const CUSTOMERS_URL = `https://data-northwind.indigo.design/Customers/GetCustomersWithPage`;
22

33
export class RemoteService {
44

5-
public getData(dataState: any, index?: number, perPage?: number): any {
6-
return fetch(this.buildUrl(dataState, index, perPage))
5+
public static getDataWithPaging(pageIndex?: number, pageSize?: number) {
6+
return fetch(this.buildUrl(CUSTOMERS_URL, pageIndex, pageSize))
77
.then((result) => result.json());
8-
}
9-
10-
private buildUrl(dataState: any, index?: number, perPage?: number) {
11-
let qS = "";
12-
if (dataState) {
13-
qS += `${dataState.key}`;
148
}
159

16-
// Add index and perPage to the query string if they are defined
17-
if (index !== undefined) {
18-
qS += `?index=${index}`;
19-
if (perPage !== undefined) {
20-
qS += `&perPage=${perPage}`;
10+
private static buildUrl(baseUrl: string, pageIndex?: number, pageSize?: number) {
11+
let qS = "";
12+
if (baseUrl) {
13+
qS += `${baseUrl}`;
2114
}
22-
} else if (perPage !== undefined) {
23-
qS += `?perPage=${perPage}`;
24-
}
2515

26-
return `${URL}${qS}`;
27-
}
16+
// Add pageIndex and size to the query string if they are defined
17+
if (pageIndex !== undefined) {
18+
qS += `?pageIndex=${pageIndex}`;
19+
if (pageSize !== undefined) {
20+
qS += `&size=${pageSize}`;
21+
}
22+
} else if (pageSize !== undefined) {
23+
qS += `?perPage=${pageSize}`;
24+
}
2825

29-
public getDataLength(dataState: any): Promise<number> {
30-
return fetch(this.buildUrl(dataState))
31-
.then((result) => result.json())
32-
.then((data) => data.length);
33-
}
26+
return `${qS}`;
27+
}
3428
}

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

Lines changed: 39 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -3,77 +3,73 @@ import React, { useEffect, useRef, useState } from "react";
33
import ReactDOM from "react-dom/client";
44
import "./index.css";
55

6-
import { IgrGrid, IgrPaginator, IgrGridModule } from "igniteui-react-grids";
6+
import { IgrGrid, IgrPaginator, IgrGridModule, GridPagingMode } from "igniteui-react-grids";
77
import { IgrColumn } from "igniteui-react-grids";
88

99
import "igniteui-react-grids/grids/combined";
1010
import "igniteui-react-grids/grids/themes/light/bootstrap.css";
1111
import { RemoteService } from "./RemotePagingService";
12+
import { CustomersWithPageResponseModel } from "./CustomersWithPageResponseModel";
13+
import { IgrNumberEventArgs } from "igniteui-react";
1214

1315
IgrGridModule.register();
1416

1517
export default function App() {
16-
let data = [];
17-
const grid = useRef<IgrGrid>(null);
18-
const paginator = useRef<IgrPaginator>(null);
19-
const remoteServiceInstance = new RemoteService();
20-
let [page] = useState(0);
21-
let [perPage, setPerPage] = useState(15);
18+
const grid = useRef<IgrGrid>(null);
19+
const paginator = useRef<IgrPaginator>(null);
20+
const [data, setData] = useState([]);
21+
const [page, setPage] = useState(0);
22+
const [perPage, setPerPage] = useState(15);
2223

23-
useEffect(() => {
24-
if (paginator.current) {
25-
setPerPage(15);
26-
grid.current.isLoading = true;
27-
}
28-
29-
grid.current.isLoading = true;
30-
loadData('Customers');
31-
}, [page, 15]);
32-
33-
function loadData(dataKey: string) {
34-
const dataState = { key: dataKey };
24+
useEffect(() => {
25+
loadGridData(page, perPage);
26+
}, [page, perPage]);
3527

36-
// Set loading state
28+
function loadGridData(pageIndex?: number, pageSize?: number) {
29+
// Set loading
3730
grid.current.isLoading = true;
3831

39-
// Fetch data length
40-
remoteServiceInstance.getDataLength(dataState).then((length: number) => {
41-
paginator.current.totalRecords = length;
42-
});
43-
4432
// Fetch data
45-
remoteServiceInstance.getData(dataState).then((data: any[]) => {
46-
grid.current.isLoading = false;
47-
grid.current.data = data;
48-
grid.current.markForCheck();
49-
});
33+
RemoteService.getDataWithPaging(pageIndex, pageSize)
34+
.then((response: CustomersWithPageResponseModel) => {
35+
setData(response.items);
36+
// Stop loading when data is retrieved
37+
grid.current.isLoading = false;
38+
paginator.current.totalRecords = response.totalRecordsCount;
39+
})
40+
.catch((error) => {
41+
console.error(error.message);
42+
setData([]);
43+
// Stop loading even if error occurs. Prevents endless loading
44+
grid.current.isLoading = false;
45+
46+
})
5047
}
5148

52-
function paginate(pageArgs: number) {
53-
page = pageArgs;
54-
const skip = page * perPage;
55-
const top = perPage;
49+
function onPageNumberChange(paginator: IgrPaginator, args: IgrNumberEventArgs) {
50+
setPage(args.detail);
51+
}
5652

57-
remoteServiceInstance.getData({ key: 'Customers' }, skip, top).then((incData:any)=> {
58-
data = incData;
59-
grid.current.isLoading = false;
60-
grid.current.markForCheck();// Update the UI after receiving data
61-
});
62-
}
53+
function onPageSizeChange(paginator: IgrPaginator, args: IgrNumberEventArgs) {
54+
setPerPage(args.detail);
55+
}
6356

6457
return (
6558
<div className="container sample ig-typography">
6659
<div className="container fill">
6760
<IgrGrid
6861
ref={grid}
62+
data={data}
63+
pagingMode={GridPagingMode.Remote}
6964
primaryKey="customerId"
7065
height="600px"
7166
>
7267
<IgrPaginator
73-
perPage="15"
68+
perPage={perPage}
7469
ref={paginator}
75-
pageChange={(evt: { page: number }) => paginate(evt.page)}
76-
perPageChange={() => paginate(0)}></IgrPaginator>
70+
pageChange={onPageNumberChange}
71+
perPageChange={onPageSizeChange}>
72+
</IgrPaginator>
7773
<IgrColumn field="customerId" hidden={true}></IgrColumn>
7874
<IgrColumn field="companyName" header="Company Name"></IgrColumn>
7975
<IgrColumn field="contactName" header="Contact Name"></IgrColumn>

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export interface CustomersWithPageResponseModel {
2+
items: any[];
3+
totalRecordsCount: number;
4+
pageSize: number;
5+
pageNumber: number;
6+
totalPages: number;
7+
}

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

Lines changed: 23 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,34 @@
1-
const URL = `https://data-northwind.indigo.design/`;
1+
const BASE_URL = `https://data-northwind.indigo.design/`;
2+
const CUSTOMERS_URL = `${BASE_URL}Customers/GetCustomersWithPage`;
23

34
export class RemoteService {
45

5-
public getData(dataState: any, index?: number, perPage?: number): any {
6-
return fetch(this.buildUrl(dataState, index, perPage))
6+
public static getCustomersDataWithPaging(pageIndex?: number, pageSize?: number) {
7+
return fetch(this.buildUrl(CUSTOMERS_URL, pageIndex, pageSize))
78
.then((result) => result.json());
8-
}
9+
}
910

10-
private buildUrl(dataState: any, index?: number, perPage?: number) {
11-
let qS = "";
12-
if (dataState) {
13-
if (dataState.rootLevel) {
14-
qS += `${dataState.key}`;
15-
} else {
16-
qS += `${dataState.parentKey}/${dataState.parentID}/${dataState.key}`;
17-
}
11+
public static getHierarchyDataById(parentEntityName: string, parentId: string, childEntityName: string) {
12+
return fetch(`${BASE_URL}${parentEntityName}/${parentId}/${childEntityName}`)
13+
.then((result) => result.json());
1814
}
1915

20-
// Add index and perPage to the query string if they are defined
21-
if (index !== undefined) {
22-
qS += `?index=${index}`;
23-
if (perPage !== undefined) {
24-
qS += `&perPage=${perPage}`;
16+
private static buildUrl(baseUrl: string, pageIndex?: number, pageSize?: number) {
17+
let qS = "";
18+
if (baseUrl) {
19+
qS += `${baseUrl}`;
2520
}
26-
} else if (perPage !== undefined) {
27-
qS += `?perPage=${perPage}`;
28-
}
2921

30-
return `${URL}${qS}`;
31-
}
22+
// Add pageIndex and size to the query string if they are defined
23+
if (pageIndex !== undefined) {
24+
qS += `?pageIndex=${pageIndex}`;
25+
if (pageSize !== undefined) {
26+
qS += `&size=${pageSize}`;
27+
}
28+
} else if (pageSize !== undefined) {
29+
qS += `?perPage=${pageSize}`;
30+
}
3231

33-
public getDataLength(dataState: any): Promise<number> {
34-
return fetch(this.buildUrl(dataState))
35-
.then((result) => result.json())
36-
.then((data) => data.length);
37-
}
32+
return `${qS}`;
33+
}
3834
}

0 commit comments

Comments
 (0)