Skip to content

Commit 2adaad3

Browse files
LuisValgoiMarcusNotheis
LuisValgoi
authored and
MarcusNotheis
committed
Merge pull request #59 from LuisValgoi/issue-36
[ISSUE-36] Pagination Engines + Example
1 parent 7a4ec0c commit 2adaad3

File tree

22 files changed

+427
-63
lines changed

22 files changed

+427
-63
lines changed

‎packages/ui5-webcomponents-react-seed/README.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,8 @@ PS.: It is important to add the `--template ui5-webcomponents-react-seed` at the
6161

6262
- Permission Engine (w/ `RouteValidator` and `ComponentValidator`).
6363

64+
- Pagination Engine (w/ custom hook `usePaginatedGet`).
65+
6466
# Hooks Included
6567

6668
- `useRequest`: Which includes `get`, `post`, `patch`, `delete`, `put` HTTP helpers;
@@ -175,6 +177,10 @@ Used to identify the browsers culture and change the applications text according
175177

176178
Used to identify the device, browser, ratios and etc.
177179

180+
### `react-query-devtools``
181+
182+
Used to help developers during the React Query information flow.
183+
178184
### `commitlint`
179185

180186
Used to check the commits before actually commits.

‎packages/ui5-webcomponents-react-seed/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@
6565
"react-helmet": "^6.1.0",
6666
"react-i18next": "^11.7.2",
6767
"react-query": "^2.17.2",
68+
"react-query-devtools": "^2.5.0",
6869
"react-router-dom": "^5.2.0",
6970
"react-scripts": "3.4.3"
7071
},
@@ -73,7 +74,7 @@
7374
"mock": "env-cmd -f .env.development npm-run-all --parallel start:mock start:react",
7475
"start": "env-cmd -f .env.production npm-run-all --parallel start:react",
7576
"start:react": "react-scripts start",
76-
"start:mock": "nodemon --watch server/data --exec npx json-server --p 3001 server/mockserver.js --routes server/routes.json",
77+
"start:mock": "nodemon --watch server --exec npx json-server --p 3001 server/mockserver.js --routes server/routes.json",
7778
"test": "react-scripts test --silent --env=jest-environment-jsdom-sixteen",
7879
"test:ci": "npm run test -- --watchAll=false",
7980
"test:coverage": "npm run test -- --watchAll=false --coverage",

‎packages/ui5-webcomponents-react-seed/server/data/Todo/GET_TODO_LIST.js‎

Lines changed: 78 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,81 @@
11
module.exports = {
2-
data: {
3-
todos: [
4-
{
5-
id: 'UG9rZW1vbjowMDE=',
6-
number: '001',
7-
name: 'Task 1',
8-
completed: false,
9-
},
10-
{
11-
id: '2U9frg1Z1W1o1DE=',
12-
number: '002',
13-
name: 'Task 2',
14-
completed: false,
15-
},
16-
],
2+
content: [
3+
{
4+
id: 'UG9rZW1vbjowMDE=',
5+
number: '001',
6+
name: 'Task 1',
7+
completed: false,
8+
},
9+
{
10+
id: '2U9frg1Z1W1o1DE=',
11+
number: '002',
12+
name: 'Task 2',
13+
completed: false,
14+
},
15+
{
16+
id: '2Ug11Z1dv1W1og1DE=',
17+
number: '003',
18+
name: 'Task 3',
19+
completed: false,
20+
},
21+
{
22+
id: 'gxfas1cczg1ff1DE=',
23+
number: '004',
24+
name: 'Task 4',
25+
completed: false,
26+
},
27+
{
28+
id: '2Uxfg1ka1Zga1o1DE=',
29+
number: '005',
30+
name: 'Task 5',
31+
completed: false,
32+
},
33+
{
34+
id: '2z11Uxgfg1kaza1DE=',
35+
number: '006',
36+
name: 'Task 9',
37+
completed: false,
38+
},
39+
{
40+
id: '2Uxgfg1ka1Zga11DE=',
41+
number: '007',
42+
name: 'Task 7',
43+
completed: false,
44+
},
45+
{
46+
id: '2Uxfag3ka1Zga1o1DE=',
47+
number: '008',
48+
name: 'Task 8',
49+
completed: false,
50+
},
51+
{
52+
id: '2Uxfg7ka1Zga1o1DE=',
53+
number: '009',
54+
name: 'Task 9',
55+
completed: false,
56+
},
57+
{
58+
id: '2Ugg7ka1Zg31o1DE=',
59+
number: '010',
60+
name: 'Task 10',
61+
completed: false,
62+
},
63+
],
64+
pageable: {
65+
sort: { sorted: true, unsorted: false, empty: false },
66+
offset: 0,
67+
pageNumber: 0,
68+
pageSize: 10,
69+
unpaged: false,
70+
paged: true,
1771
},
72+
totalPages: 2,
73+
last: false,
74+
totalElements: 11,
75+
size: 10,
76+
number: 0,
77+
sort: { sorted: true, unsorted: false, empty: false },
78+
numberOfElements: 10,
79+
first: true,
80+
empty: false,
1881
};

‎packages/ui5-webcomponents-react-seed/server/data/Todo/GET_TODO_LIST_PAGE_1.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
module.exports = {
2+
content: [
3+
{
4+
id: '5Uxfhxka1Zga1o1DE=',
5+
number: '011',
6+
name: 'Task 11',
7+
completed: false,
8+
},
9+
],
10+
pageable: {
11+
sort: { sorted: true, unsorted: false, empty: false },
12+
offset: 0,
13+
pageNumber: 1,
14+
pageSize: 10,
15+
unpaged: false,
16+
paged: true,
17+
},
18+
totalPages: 2,
19+
last: true,
20+
totalElements: 11,
21+
size: 10,
22+
number: 1,
23+
sort: { sorted: true, unsorted: false, empty: false },
24+
numberOfElements: 1,
25+
first: false,
26+
empty: false,
27+
};

‎packages/ui5-webcomponents-react-seed/server/data/User/GET_USER_LOGGED.js‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
11
module.exports = {
2-
data: {
3-
user: {
4-
id: 'UG9rZW1vbjowMDE=',
5-
name: 'Luis Valgoi',
6-
permissions: ['canAccessTodoListPage', 'canAccessTodoEditPage', 'canAccessDropApplication'],
7-
},
8-
},
2+
id: 'UG9rZW1vbjowMDE=',
3+
name: 'Luis Valgoi',
4+
permissions: ['canAccessTodoListPage', 'canAccessTodoEditPage', 'canAccessDropApplication'],
95
};

‎packages/ui5-webcomponents-react-seed/server/mockserver.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
/* eslint-disable no-undef */
22
module.exports = () => ({
33
GET_USER_LOGGED: require('./data/User/GET_USER_LOGGED'),
4-
GET_TODO_LIST: require('./data/Todo/GET_TODO_LIST'),
54
GET_TODO_BY_ID: require('./data/Todo/GET_TODO_BY_ID'),
5+
GET_TODO_LIST: require('./data/Todo/GET_TODO_LIST'),
6+
GET_TODO_LIST_PAGE_1: require('./data/Todo/GET_TODO_LIST_PAGE_1'),
67
});

‎packages/ui5-webcomponents-react-seed/server/routes.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
{
22
"*/v1/user/logged": "/GET_USER_LOGGED",
3-
"*/v1/todo/all": "/GET_TODO_LIST",
4-
"*/v1/todo/:id": "/GET_TODO_BY_ID"
3+
"*/v1/todo/detail/:id": "/GET_TODO_BY_ID",
4+
"*/v1/todo/all\\?page=0": "/GET_TODO_LIST",
5+
"*/v1/todo/all\\?page=1": "/GET_TODO_LIST_PAGE_1"
56
}

‎packages/ui5-webcomponents-react-seed/src/App.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,5 +21,4 @@ code {
2121
height: 100%;
2222
display: flex;
2323
flex-direction: column;
24-
overflow-y: hidden;
2524
}

‎packages/ui5-webcomponents-react-seed/src/App.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from 'react';
22
import { useTranslation } from 'react-i18next';
33
import { BrowserRouter } from 'react-router-dom';
44
import { Helmet } from 'react-helmet';
5+
import { ReactQueryDevtools } from 'react-query-devtools';
56

67
import ErrorBoundary from './pages/Fallback/ErrorBoundary';
78
import Shell from './components/Shell/Shell';
@@ -21,6 +22,7 @@ function App() {
2122

2223
return (
2324
<BrowserRouter>
25+
<ReactQueryDevtools initialIsOpen={false} />
2426
<Helmet title={t('helmet.title.app')} />
2527
<Shell title={t('shell.title')} />
2628
<div style={style.emptySpace} />

‎packages/ui5-webcomponents-react-seed/src/auth/Components/Validator.test.js‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,16 @@ import React from 'react';
33
import '@testing-library/jest-dom/extend-expect';
44
import { render, waitFor, screen, serverCustom } from '../../util/TestSetup';
55
import ComponentValidator from './Validator';
6-
import Constants from '../../util/Constants';
76
import ApiURL from '../../util/ApiURL';
87

98
describe('Validator.js Test Suite', () => {
109
const GET_USER_LOGGED_RESPONSE = {
11-
user: {
12-
id: 'UG9rZW1vbjowMDE=',
13-
name: 'testeeeeeeeeeeeeeeeee',
14-
permissions: ['canAccessTodoListPage', 'canAccessTodoEditPage', 'canAccessDropApplication'],
15-
},
10+
id: 'UG9rZW1vbjowMDE=',
11+
name: 'testeeeeeeeeeeeeeeeee',
12+
permissions: ['canAccessTodoListPage', 'canAccessTodoEditPage', 'canAccessDropApplication'],
1613
};
1714

18-
const server = serverCustom(ApiURL.GET_USER_LOGGED, GET_USER_LOGGED_RESPONSE, Constants.REACT_QUERY.CODES.SUCCESS);
15+
const server = serverCustom(ApiURL.GET_USER_LOGGED, GET_USER_LOGGED_RESPONSE);
1916

2017
beforeAll(() => server.listen());
2118
afterEach(() => server.resetHandlers());

0 commit comments

Comments
 (0)