From 63cf9d516fc1dd77c339d188fa9852bb6a42f525 Mon Sep 17 00:00:00 2001 From: Yarin Dekel Date: Sun, 26 Aug 2018 12:01:16 +0300 Subject: [PATCH] debounce search input catalog Issue-ID: SDC-1671 Change-Id: I5bb97e188bb42be1f51dabd49ae53d8a43f35d22 Signed-off-by: Yarin Dekel --- .../main/frontend/src/features/catalog/Catalog.js | 4 ++-- .../frontend/src/features/catalog/CatalogView.jsx | 17 ++++++++++------- .../features/catalog/__tests__/catalogSagas-test.js | 13 +++++++------ .../frontend/src/features/catalog/catalogActions.js | 20 +++++++++++++------- .../src/features/catalog/catalogConstants.js | 4 +++- .../frontend/src/features/catalog/catalogSagas.js | 13 ++++++++++--- 6 files changed, 45 insertions(+), 26 deletions(-) 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 dbbdbb1d..6ac90687 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 @@ -32,8 +32,8 @@ const mapStateToProps = state => ({ }); const mapDispatchToProps = dispatch => ({ - handleFetchWorkflow: (sort, offset) => - dispatch(fetchWorkflow(sort, offset)), + handleFetchWorkflow: (sort, offset, searchNameFilter) => + dispatch(fetchWorkflow(sort, offset, searchNameFilter)), 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 05a79e96..4fdcc786 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 @@ -50,11 +50,11 @@ class CatalogView extends Component { catalog: { sort } } = this.props; - const payload = { ...sort }; - + const payload = { + ...sort + }; payload[NAME] = payload[NAME] === ASC ? DESC : ASC; - - handleFetchWorkflow(payload); + handleFetchWorkflow(payload, undefined, this.state.searchValue); }; handleScroll = () => { @@ -65,8 +65,7 @@ class CatalogView extends Component { }, handleFetchWorkflow } = this.props; - - handleFetchWorkflow(sort, offset); + handleFetchWorkflow(sort, offset, this.state.searchValue); }; goToOverviewPage = id => { @@ -75,8 +74,12 @@ class CatalogView extends Component { }; searchChange = searchValue => { - const { searchInputChanged, catalog } = this.props; this.setState({ searchValue: searchValue }); + this.dispatchChange(searchValue); + }; + + dispatchChange = searchValue => { + const { searchInputChanged, catalog } = this.props; searchInputChanged({ ...catalog, searchNameFilter: searchValue 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 b747e97c..99a56508 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 @@ -17,18 +17,20 @@ 'use strict'; import { runSaga } from 'redux-saga'; -import { takeLatest, throttle } from 'redux-saga/effects'; +import { takeLatest } from 'redux-saga/effects'; import { NAME, DESC, LIMIT, - SEARCH_CHANGED, - SEARCH_BUFFER + SEARCH_CHANGED } from 'features/catalog/catalogConstants'; import catalogApi from '../catalogApi'; import { fetchWorkflow, updateWorkflow } from 'features/catalog/catalogActions'; -import catalogSaga, { fetchWorkflowSaga } from 'features/catalog/catalogSagas'; +import catalogSaga, { + fetchWorkflowSaga, + debounceSearchChanged +} from 'features/catalog/catalogSagas'; jest.mock('../catalogApi'); @@ -39,9 +41,8 @@ describe('Catalog Sagas', () => { expect(gen.next().value).toEqual( takeLatest(fetchWorkflow, fetchWorkflowSaga) ); - expect(gen.next().value).toEqual( - throttle(SEARCH_BUFFER, SEARCH_CHANGED, fetchWorkflowSaga) + takeLatest(SEARCH_CHANGED, debounceSearchChanged) ); expect(gen.next().done).toBe(true); }); 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 eed8b9cd..6262da0d 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 @@ -19,23 +19,29 @@ import { createActions, createAction } from 'redux-actions'; import { NAMESPACE, LIMIT, - SEARCH_CHANGED + SEARCH_CHANGED, + FETCH_WORKFLOW } from 'features/catalog/catalogConstants'; export const { - [NAMESPACE]: { fetchWorkflow, updateWorkflow, resetWorkflow } + [NAMESPACE]: { updateWorkflow, resetWorkflow } } = createActions({ [NAMESPACE]: { - FETCH_WORKFLOW: (sort, offset) => ({ - sort, - limit: LIMIT, - offset - }), UPDATE_WORKFLOW: undefined, RESET_WORKFLOW: undefined } }); +export const fetchWorkflow = createAction( + FETCH_WORKFLOW, + (sort, offset, searchNameFilter) => ({ + sort, + limit: LIMIT, + offset, + searchNameFilter + }) +); + export const searchChangedAction = createAction( SEARCH_CHANGED, payload => payload 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 1306937a..44bdc6bb 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,9 @@ export const NAME = 'name'; export const ASC = 'asc'; export const DESC = 'desc'; -export const LIMIT = 20; +//Limit = max tiles in a standard screen +export const LIMIT = 31; + export const SEARCH_BUFFER = 1000; export const SEARCH_CHANGED = `catalog/SEARCH_CHANGED`; 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 fc8d349f..f1770560 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 @@ -14,12 +14,14 @@ * limitations under the License. */ -import { call, put, takeLatest, throttle } from 'redux-saga/effects'; +import { call, put, takeLatest } from 'redux-saga/effects'; +import { delay } from 'redux-saga'; import catalogApi from 'features/catalog/catalogApi'; import { fetchWorkflow, updateWorkflow } from 'features/catalog/catalogActions'; import { SEARCH_CHANGED, + LIMIT, SEARCH_BUFFER } from 'features/catalog/catalogConstants'; @@ -31,7 +33,7 @@ export function* fetchWorkflowSaga({ payload }) { const data = yield call( catalogApi.getWorkflows, sort, - limit, + LIMIT, offset === undefined ? 0 : offset + limit, searchNameFilter ); @@ -41,9 +43,14 @@ export function* fetchWorkflowSaga({ payload }) { } } +export function* debounceSearchChanged({ payload }) { + yield call(delay, SEARCH_BUFFER); + yield call(fetchWorkflowSaga, { payload }); +} + function* catalogSaga() { yield takeLatest(fetchWorkflow, fetchWorkflowSaga); - yield throttle(SEARCH_BUFFER, SEARCH_CHANGED, fetchWorkflowSaga); + yield takeLatest(SEARCH_CHANGED, debounceSearchChanged); } export default catalogSaga; -- 2.16.6