Adding paging for elasticsearch results. (#1759)

actions/views/rhs.js

@@ -72,7 +72,7 @@ export function performSearch(terms, isMentionSearch) {
  const userTimezone = getUserTimezone(getState(), userId);
  const userCurrentTimezone = getUserCurrentTimezone(userTimezone);
  const timezoneOffset = (userCurrentTimezone.length > 0 ? getUtcOffsetForTimeZone(userCurrentTimezone) : getBrowserUtcOffset()) * 60;
- return dispatch(searchPostsWithParams(teamId, {terms, is_or_search: isMentionSearch, time_zone_offset: timezoneOffset}, true));
+ return dispatch(searchPostsWithParams(teamId, {terms, is_or_search: isMentionSearch, time_zone_offset: timezoneOffset, page: 0, per_page: 20}, true));
  };
 }
 

components/search_results/index.jsx

@@ -2,16 +2,20 @@
 // See LICENSE.txt for license information.
 
 import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
 import {getChannel} from 'mattermost-redux/selectors/entities/channels';
 import {getSearchMatches, getSearchResults} from 'mattermost-redux/selectors/entities/posts';
 import * as PreferenceSelectors from 'mattermost-redux/selectors/entities/preferences';
 import {getConfig} from 'mattermost-redux/selectors/entities/general';
 
+import {getMorePostsForSearch} from 'mattermost-redux/actions/search';
+
 import {
  getSearchResultsTerms,
  getIsSearchingTerm,
  getIsSearchingFlaggedPost,
  getIsSearchingPinnedPost,
+ getIsSearchGettingMore,
 } from 'selectors/rhs';
 import {Preferences} from 'utils/constants.jsx';
 
@@ -85,11 +89,20 @@ function makeMapStateToProps() {
  isSearchingTerm: getIsSearchingTerm(state),
  isSearchingFlaggedPost: getIsSearchingFlaggedPost(state),
  isSearchingPinnedPost: getIsSearchingPinnedPost(state),
+ isSearchGettingMore: getIsSearchGettingMore(state),
  compactDisplay: PreferenceSelectors.get(state, Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.MESSAGE_DISPLAY, Preferences.MESSAGE_DISPLAY_DEFAULT) === Preferences.MESSAGE_DISPLAY_COMPACT,
  dataRetentionEnableMessageDeletion,
  dataRetentionMessageRetentionDays,
  };
  };
 }
 
-export default connect(makeMapStateToProps)(SearchResults);
+function mapDispatchToProps(dispatch) {
+ return {
+ actions: bindActionCreators({
+ getMorePostsForSearch,
+ }, dispatch),
+ };
+}
+
+export default connect(makeMapStateToProps, mapDispatchToProps)(SearchResults);

components/search_results/search_results.jsx

@@ -1,12 +1,13 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import $ from 'jquery';
 import PropTypes from 'prop-types';
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 import Scrollbars from 'react-custom-scrollbars';
 
+import {debounce} from 'mattermost-redux/actions/helpers';
+
 import UserStore from 'stores/user_store.jsx';
 import WebrtcStore from 'stores/webrtc_store.jsx';
 
@@ -20,6 +21,8 @@ import FlagPostSearchHint from 'components/search_hint/flag_post_search_hint';
 import NoResultSearchHint from 'components/search_hint/no_result_search_hint';
 import PinPostSearchHint from 'components/search_hint/pin_post_search_hint';
 
+const GET_MORE_BUFFER = 30;
+
 export function renderView(props) {
  return (
  <div
@@ -54,13 +57,17 @@ export default class SearchResults extends React.PureComponent {
  isSearchingTerm: PropTypes.bool,
  isSearchingFlaggedPost: PropTypes.bool,
  isSearchingPinnedPost: PropTypes.bool,
+ isSearchGettingMore: PropTypes.bool,
  compactDisplay: PropTypes.bool,
  isMentionSearch: PropTypes.bool,
  isFlaggedPosts: PropTypes.bool,
  isPinnedPosts: PropTypes.bool,
  channelDisplayName: PropTypes.string.isRequired,
  dataRetentionEnableMessageDeletion: PropTypes.bool.isRequired,
  dataRetentionMessageRetentionDays: PropTypes.string,
+ actions: PropTypes.shape({
+ getMorePostsForSearch: PropTypes.func.isRequired,
+ }),
  };
 
  static defaultProps = {
@@ -122,9 +129,22 @@ export default class SearchResults extends React.PureComponent {
  }
 
  scrollToTop = () => {
- $('#search-items-container').scrollTop(0);
+ this.refs.scrollbars.scrollToTop();
+ }
+
+ handleScroll = () => {
+ const scrollHeight = this.refs.scrollbars.getScrollHeight();
+ const scrollTop = this.refs.scrollbars.getScrollTop();
+ const clientHeight = this.refs.scrollbars.getClientHeight();
+ if ((scrollTop + clientHeight + GET_MORE_BUFFER) >= scrollHeight) {
+ this.loadMorePosts();
+ }
  }
 
+ loadMorePosts = debounce(() => {
+ this.props.actions.getMorePostsForSearch();
+ }, 100);
+
  render() {
  const results = this.props.results;
  const noResults = (!results || results.length === 0);
@@ -243,6 +263,7 @@ export default class SearchResults extends React.PureComponent {
  isLoading={this.props.isSearchingTerm}
  />
  <Scrollbars
+ ref='scrollbars'
  autoHide={true}
  autoHideTimeout={500}
  autoHideDuration={500}

package.json

@@ -26,7 +26,7 @@
  "localforage": "1.7.2",
  "localforage-observable": "1.4.0",
  "marked": "github:mattermost/marked#ed33baecd7d7fa97d479ba22dde9d226b083d67d",
- "mattermost-redux": "github:mattermost/mattermost-redux#22574ae5dffbb4ca533cb48d569d4a6beffca861",
+ "mattermost-redux": "github:mattermost/mattermost-redux#070adc899cd3321d9370a194000aa5a009606288",
  "moment-timezone": "0.5.21",
  "pdfjs-dist": "2.0.489",
  "perfect-scrollbar": "0.8.1",

reducers/views/rhs.js

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import {combineReducers} from 'redux';
-import {PostTypes, SearchTypes, TeamTypes} from 'mattermost-redux/action_types';
+import {PostTypes, TeamTypes} from 'mattermost-redux/action_types';
 
 import {ActionTypes, RHSStates} from 'utils/constants.jsx';
 
@@ -77,18 +77,6 @@ function searchResultsTerms(state = '', action) {
  }
 }
 
-function isSearchingTerm(state = false, action) {
- switch (action.type) {
- case SearchTypes.SEARCH_POSTS_REQUEST:
- return true;
- case SearchTypes.SEARCH_POSTS_FAILURE:
- case SearchTypes.SEARCH_POSTS_SUCCESS:
- return false;
- default:
- return state;
- }
-}
-
 function isSearchingFlaggedPost(state = false, action) {
  switch (action.type) {
  case ActionTypes.SEARCH_FLAGGED_POSTS_REQUEST:
@@ -185,7 +173,6 @@ export default combineReducers({
  rhsState,
  searchTerms,
  searchResultsTerms,
- isSearchingTerm,
  isSearchingFlaggedPost,
  isSearchingPinnedPost,
  isSidebarOpen,

selectors/rhs.jsx

@@ -59,7 +59,7 @@ export function getSearchResultsTerms(state) {
 }
 
 export function getIsSearchingTerm(state) {
- return state.views.rhs.isSearchingTerm;
+ return state.entities.search.isSearchingTerm;
 }
 
 export function getIsSearchingFlaggedPost(state) {
@@ -70,6 +70,10 @@ export function getIsSearchingPinnedPost(state) {
  return state.views.rhs.isSearchingPinnedPost;
 }
 
+export function getIsSearchGettingMore(state) {
+ return state.entities.search.isSearchGettingMore;
+}
+
 export function getPostDraft(state, prefixId, suffixId) {
  const defaultDraft = {message: '', fileInfos: [], uploadsInProgress: []};
  const draft = makeGetGlobalItem(prefixId + suffixId, defaultDraft)(state);

tests/redux/actions/views/rhs.test.js

@@ -183,12 +183,12 @@ describe('rhs view actions', () => {
  const timeZoneOffset = getBrowserUtcOffset() * 60;
 
  const compareStore = mockStore(initialState);
- compareStore.dispatch(searchPostsWithParams(currentTeamId, {terms, is_or_search: false, time_zone_offset: timeZoneOffset}, true));
+ compareStore.dispatch(searchPostsWithParams(currentTeamId, {terms, is_or_search: false, time_zone_offset: timeZoneOffset, page: 0, per_page: 20}, true));
 
  expect(store.getActions()).toEqual(compareStore.getActions());
 
  store.dispatch(performSearch(terms, true));
- compareStore.dispatch(searchPostsWithParams(currentTeamId, {terms, is_or_search: true, time_zone_offset: timeZoneOffset}, true));
+ compareStore.dispatch(searchPostsWithParams(currentTeamId, {terms, is_or_search: true, time_zone_offset: timeZoneOffset, page: 0, per_page: 20}, true));
 
  expect(store.getActions()).toEqual(compareStore.getActions());
  });

tests/redux/reducers/views/rhs.test.js

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {SearchTypes, TeamTypes} from 'mattermost-redux/action_types';
+import {TeamTypes} from 'mattermost-redux/action_types';
 
 import rhsReducer from 'reducers/views/rhs';
 import {ActionTypes, RHSStates} from 'utils/constants.jsx';
@@ -14,7 +14,6 @@ describe('Reducers.RHS', () => {
  rhsState: null,
  searchTerms: '',
  searchResultsTerms: '',
- isSearchingTerm: false,
  isSearchingFlaggedPost: false,
  isSearchingPinnedPost: false,
  isMenuOpen: false,
@@ -68,52 +67,6 @@ describe('Reducers.RHS', () => {
  });
  });
 
- test('should match isSearchingTerm state to true', () => {
- const nextState = rhsReducer(
- {},
- {
- type: SearchTypes.SEARCH_POSTS_REQUEST,
- }
- );
-
- expect(nextState).toEqual({
- ...initialState,
- isSearchingTerm: true,
- });
- });
-
- test('should match isSearchingTerm state to false', () => {
- const nextState = rhsReducer(
- {
- isSearchingTerm: true,
- },
- {
- type: SearchTypes.SEARCH_POSTS_FAILURE,
- }
- );
-
- expect(nextState).toEqual({
- ...initialState,
- isSearchingTerm: false,
- });
- });
-
- test('should match isSearchingTerm state to false', () => {
- const nextState = rhsReducer(
- {
- isSearchingTerm: true,
- },
- {
- type: SearchTypes.SEARCH_POSTS_SUCCESS,
- }
- );
-
- expect(nextState).toEqual({
- ...initialState,
- isSearchingTerm: false,
- });
- });
-
  test('should match isSearchingFlaggedPost state to true', () => {
  const nextState = rhsReducer(
  {},