});
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: () =>
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 = () => {
},
handleFetchWorkflow
} = this.props;
-
- handleFetchWorkflow(sort, offset);
+ handleFetchWorkflow(sort, offset, this.state.searchValue);
};
goToOverviewPage = id => {
};
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
'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');
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);
});
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
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`;
* 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';
const data = yield call(
catalogApi.getWorkflows,
sort,
- limit,
+ LIMIT,
offset === undefined ? 0 : offset + limit,
searchNameFilter
);
}
}
+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;