From 656f1610046c3aa1f53aaa240f25ad51f60bfc9b Mon Sep 17 00:00:00 2001 From: Malek Date: Wed, 1 Aug 2018 13:45:39 +0300 Subject: Fix pagination in UI Issue-ID: SDC-1585 Change-Id: I95e69beabc1a7d8845c96763543ae3bea3395a63 Signed-off-by: Malek --- .../main/frontend/src/features/catalog/Catalog.js | 3 +- .../frontend/src/features/catalog/CatalogView.jsx | 15 +++- .../catalog/__tests__/catalogActions-test.js | 22 +++--- .../catalog/__tests__/catalogReducer-test.js | 90 ++++++++++++++-------- .../catalog/__tests__/catalogSagas-test.js | 41 ++++++---- .../src/features/catalog/catalogActions.js | 8 +- .../frontend/src/features/catalog/catalogApi.js | 8 +- .../src/features/catalog/catalogConstants.js | 2 +- .../src/features/catalog/catalogReducer.js | 20 ++--- .../frontend/src/features/catalog/catalogSagas.js | 8 +- .../src/features/catalog/views/Workflows.jsx | 8 +- 11 files changed, 133 insertions(+), 92 deletions(-) (limited to 'workflow-designer-ui/src/main/frontend') diff --git a/workflow-designer-ui/src/main/frontend/src/features/catalog/Catalog.js b/workflow-designer-ui/src/main/frontend/src/features/catalog/Catalog.js index 5eeaaa23..8ff33bd8 100644 --- a/workflow-designer-ui/src/main/frontend/src/features/catalog/Catalog.js +++ b/workflow-designer-ui/src/main/frontend/src/features/catalog/Catalog.js @@ -28,7 +28,8 @@ const mapStateToProps = state => ({ }); const mapDispatchToProps = dispatch => ({ - handleFetchWorkflow: (sort, page) => dispatch(fetchWorkflow(sort, page)), + handleFetchWorkflow: (sort, offset) => + dispatch(fetchWorkflow(sort, offset)), handleResetWorkflow: () => dispatch(resetWorkflow()), clearWorkflow: () => dispatch(clearWorkflowAction), showNewWorkflowModal: () => diff --git a/workflow-designer-ui/src/main/frontend/src/features/catalog/CatalogView.jsx b/workflow-designer-ui/src/main/frontend/src/features/catalog/CatalogView.jsx index 99cee755..78824341 100644 --- a/workflow-designer-ui/src/main/frontend/src/features/catalog/CatalogView.jsx +++ b/workflow-designer-ui/src/main/frontend/src/features/catalog/CatalogView.jsx @@ -53,11 +53,14 @@ class CatalogView extends React.Component { handleScroll = () => { const { - catalog: { page, sort }, + catalog: { + paging: { offset }, + sort + }, handleFetchWorkflow } = this.props; - handleFetchWorkflow(sort, page); + handleFetchWorkflow(sort, offset); }; goToOverviewPage = id => { @@ -67,7 +70,11 @@ class CatalogView extends React.Component { render() { const { catalog, showNewWorkflowModal } = this.props; - const { sort, hasMore, total, results } = catalog; + const { + sort, + paging: { hasMore, total }, + items + } = catalog; const alphabeticalOrder = sort[NAME]; return ( @@ -85,7 +92,7 @@ class CatalogView extends React.Component {
diff --git a/workflow-designer-ui/src/main/frontend/src/features/catalog/__tests__/catalogActions-test.js b/workflow-designer-ui/src/main/frontend/src/features/catalog/__tests__/catalogActions-test.js index f49c2fdc..43c38e0b 100644 --- a/workflow-designer-ui/src/main/frontend/src/features/catalog/__tests__/catalogActions-test.js +++ b/workflow-designer-ui/src/main/frontend/src/features/catalog/__tests__/catalogActions-test.js @@ -20,7 +20,7 @@ import { FETCH_WORKFLOW, UPDATE_WORKFLOW, RESET_WORKFLOW, - PAGE_SIZE, + LIMIT, NAME, ASC } from 'features/catalog/catalogConstants'; @@ -33,24 +33,28 @@ import { describe('Catalog Actions', () => { it('should have `fetchWorkflow` action', () => { const sort = { [NAME]: ASC }; - const page = 0; + const offset = 0; - expect(fetchWorkflow(sort, page)).toEqual({ + expect(fetchWorkflow(sort, offset)).toEqual({ type: FETCH_WORKFLOW, payload: { sort, - size: PAGE_SIZE, - page + limit: LIMIT, + offset } }); }); it('should have `updateWorkflow` action', () => { const payload = { - results: [], - total: 0, - page: 0, - size: 0, + paging: { + offset: 1, + limit: 1, + count: 1, + hasMore: false, + total: 2 + }, + items: [], sort: { name: 'asc' } diff --git a/workflow-designer-ui/src/main/frontend/src/features/catalog/__tests__/catalogReducer-test.js b/workflow-designer-ui/src/main/frontend/src/features/catalog/__tests__/catalogReducer-test.js index c4f34e7f..5444bf94 100644 --- a/workflow-designer-ui/src/main/frontend/src/features/catalog/__tests__/catalogReducer-test.js +++ b/workflow-designer-ui/src/main/frontend/src/features/catalog/__tests__/catalogReducer-test.js @@ -22,43 +22,62 @@ import { updateWorkflow, resetWorkflow } from 'features/catalog/catalogActions'; describe('Catalog Reducer', () => { const state = { - hasMore: true, - results: [ + paging: { + offset: 1, + limit: 1, + count: 1, + hasMore: false, + total: 2 + }, + sort: { + [NAME]: ASC + }, + items: [ { - id: '755eab7752374a2380544065b59b082d', - name: 'Workflow 1', - description: 'description description 1' + id: 'c5b7ca1a0f7944bfa948b85b32c5f314', + name: 'Workflow_2', + description: null, + versionStates: ['DRAFT'], + versions: null }, { - id: 'ef8159204dac4c10a85b29ec30b4bd56', - name: 'Workflow 2', - description: 'description description 2' + id: '221336ef3f1645c686bc81899368ac27', + name: 'Workflow_1', + description: null, + versionStates: ['DRAFT'], + versions: null } - ], - total: 0, - sort: { - [NAME]: ASC - } + ] }; + const sort = { [NAME]: DESC }; - const page = 0; - const data = { - total: 20, - size: 100, - page, - sort, - results: [ + + const offset = 0; + + const dataPayload = { + paging: { + offset, + limit: 10, + count: 2, + hasMore: false, + total: 2 + }, + items: [ { - id: '755eab7752374a2380544065b59b082d', - name: 'Workflow 11', - description: 'description description 11' + id: 'c5b7ca1a0f7944bfa948b85b32c5f314', + name: 'Workflow_2', + description: null, + versionStates: ['DRAFT'], + versions: null }, { - id: 'ef8159204dac4c10a85b29ec30b4bd56', - name: 'Workflow 22', - description: 'description description 22' + id: '221336ef3f1645c686bc81899368ac27', + name: 'Workflow_1', + description: null, + versionStates: ['DRAFT'], + versions: null } ] }; @@ -68,19 +87,24 @@ describe('Catalog Reducer', () => { }); it('should replace results when page is first', () => { - expect(catalogReducer(state, updateWorkflow({ ...data }))).toEqual({ + expect( + catalogReducer(state, updateWorkflow({ sort, ...dataPayload })) + ).toEqual({ ...initialState, - ...data, - hasMore: data.results.length < data.total, - page, - sort + sort, + ...dataPayload }); }); it('should add results when page is not first', () => { expect( - catalogReducer(state, updateWorkflow({ ...data, page: 1 })).results - ).toEqual(expect.arrayContaining([...data.results, ...state.results])); + catalogReducer( + state, + updateWorkflow({ sort, ...{ ...dataPayload, offset: 2 } }) + ).items + ).toEqual( + expect.arrayContaining([...dataPayload.items, ...state.items]) + ); }); it('should reset state', () => { diff --git a/workflow-designer-ui/src/main/frontend/src/features/catalog/__tests__/catalogSagas-test.js b/workflow-designer-ui/src/main/frontend/src/features/catalog/__tests__/catalogSagas-test.js index cdea344c..dd89c183 100644 --- a/workflow-designer-ui/src/main/frontend/src/features/catalog/__tests__/catalogSagas-test.js +++ b/workflow-designer-ui/src/main/frontend/src/features/catalog/__tests__/catalogSagas-test.js @@ -19,7 +19,7 @@ import { runSaga } from 'redux-saga'; import { takeLatest } from 'redux-saga/effects'; -import { NAME, DESC, PAGE_SIZE } from 'features/catalog/catalogConstants'; +import { NAME, DESC, LIMIT } from 'features/catalog/catalogConstants'; import catalogApi from '../catalogApi'; import { fetchWorkflow, updateWorkflow } from 'features/catalog/catalogActions'; import catalogSaga, { fetchWorkflowSaga } from 'features/catalog/catalogSagas'; @@ -41,21 +41,29 @@ describe('Catalog Sagas', () => { const sort = { [NAME]: DESC }; - const page = 0; + const offset = 0; const data = { - total: 2, - size: 100, - page, - results: [ + paging: { + offset, + limit: 10, + count: 2, + hasMore: false, + total: 2 + }, + items: [ { - id: '755eab7752374a2380544065b59b082d', - name: 'Workflow 11', - description: 'description description 11' + id: 'c5b7ca1a0f7944bfa948b85b32c5f314', + name: 'Workflow_2', + description: null, + versionStates: ['DRAFT'], + versions: null }, { - id: 'ef8159204dac4c10a85b29ec30b4bd56', - name: 'Workflow 22', - description: 'description description 22' + id: '221336ef3f1645c686bc81899368ac27', + name: 'Workflow_1', + description: null, + versionStates: ['DRAFT'], + versions: null } ] }; @@ -68,16 +76,17 @@ describe('Catalog Sagas', () => { dispatch: action => dispatched.push(action) }, fetchWorkflowSaga, - fetchWorkflow(sort, page) + fetchWorkflow(sort, offset) ).done; expect(dispatched).toEqual( - expect.arrayContaining([updateWorkflow({ ...data, sort })]) + expect.arrayContaining([updateWorkflow({ sort, ...data })]) ); + expect(catalogApi.getWorkflows).toBeCalledWith( sort, - PAGE_SIZE, - page + 1 + LIMIT, + offset + LIMIT ); }); }); diff --git a/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogActions.js b/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogActions.js index 89f53e4c..13e43a07 100644 --- a/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogActions.js +++ b/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogActions.js @@ -16,16 +16,16 @@ import { createActions } from 'redux-actions'; -import { NAMESPACE, PAGE_SIZE } from 'features/catalog/catalogConstants'; +import { NAMESPACE, LIMIT } from 'features/catalog/catalogConstants'; export const { [NAMESPACE]: { fetchWorkflow, updateWorkflow, resetWorkflow } } = createActions({ [NAMESPACE]: { - FETCH_WORKFLOW: (sort, page) => ({ + FETCH_WORKFLOW: (sort, offset) => ({ sort, - size: PAGE_SIZE, - page + limit: LIMIT, + offset }), UPDATE_WORKFLOW: undefined, RESET_WORKFLOW: undefined diff --git a/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogApi.js b/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogApi.js index 79b271ce..622c5234 100644 --- a/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogApi.js +++ b/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogApi.js @@ -25,12 +25,12 @@ function baseUrl() { } const Api = { - getWorkflows: (sort, size, page) => { + getWorkflows: (sort, limit, offset) => { const queryString = qs.stringify( { - sort: Object.keys(sort).map(key => `${key},${sort[key]}`), - size, - page + sort: Object.keys(sort).map(key => `${key}:${sort[key]}`), + limit, + offset }, { indices: false, diff --git a/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogConstants.js b/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogConstants.js index 3120ad73..8c2fe2ae 100644 --- a/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogConstants.js +++ b/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogConstants.js @@ -20,7 +20,7 @@ export const NAME = 'name'; export const ASC = 'asc'; export const DESC = 'desc'; -export const PAGE_SIZE = 1000; +export const LIMIT = 100; export const FETCH_WORKFLOW = `${NAMESPACE}/FETCH_WORKFLOW`; export const UPDATE_WORKFLOW = `${NAMESPACE}/UPDATE_WORKFLOW`; diff --git a/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogReducer.js b/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogReducer.js index cbd7ab70..78d8e529 100644 --- a/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogReducer.js +++ b/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogReducer.js @@ -22,9 +22,10 @@ import { } from 'features/catalog/catalogConstants'; export const initialState = { - hasMore: true, - results: [], - total: 0, + paging: { + hasMore: true, + total: 0 + }, sort: { [NAME]: ASC } @@ -33,23 +34,18 @@ export const initialState = { const catalogReducer = (state = initialState, action) => { const { type, payload } = action; - let results; - switch (type) { case RESET_WORKFLOW: return { ...initialState, sort: state.sort }; case UPDATE_WORKFLOW: - results = - payload.page === 0 - ? [...payload.results] - : [...state.results, ...payload.results]; - return { ...state, ...payload, - results, - hasMore: results.length < payload.total + items: + payload.paging.offset === 0 + ? [...payload.items] + : [...state.items, ...payload.items] }; default: diff --git a/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogSagas.js b/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogSagas.js index 8dcfc610..bf56c617 100644 --- a/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogSagas.js +++ b/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogSagas.js @@ -22,17 +22,17 @@ import { fetchWorkflow, updateWorkflow } from 'features/catalog/catalogActions'; const noOp = () => {}; export function* fetchWorkflowSaga({ payload }) { - const { sort, size, page } = payload; + const { sort, limit, offset } = payload; try { const data = yield call( catalogApi.getWorkflows, sort, - size, - page === undefined ? 0 : page + 1 + limit, + offset === undefined ? 0 : offset + limit ); - yield put(updateWorkflow({ ...data, sort })); + yield put(updateWorkflow({ sort, ...data })); } catch (e) { noOp(); } diff --git a/workflow-designer-ui/src/main/frontend/src/features/catalog/views/Workflows.jsx b/workflow-designer-ui/src/main/frontend/src/features/catalog/views/Workflows.jsx index 83c226ff..a94e4541 100644 --- a/workflow-designer-ui/src/main/frontend/src/features/catalog/views/Workflows.jsx +++ b/workflow-designer-ui/src/main/frontend/src/features/catalog/views/Workflows.jsx @@ -19,8 +19,8 @@ import PropTypes from 'prop-types'; import { Tile, TileInfo, TileInfoLine } from 'sdc-ui/lib/react'; -const Workflows = ({ results, onWorkflowClick }) => - results.map((workflow, index) => ( +const Workflows = ({ items, onWorkflowClick }) => + items.map((workflow, index) => ( )); Workflows.propTypes = { - results: PropTypes.array, + items: PropTypes.array, onWorkflowClick: PropTypes.func }; Workflows.defaultProps = { - results: [] + items: [] }; export default Workflows; -- cgit 1.2.3-korg