Search results improvements

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

app/soapbox/actions/search.js

@@ -37,7 +37,7 @@ export function submitSearch() {
       return;
     }
 
-    dispatch(fetchSearchRequest());
+    dispatch(fetchSearchRequest(value));
 
     api(getState).get('/api/v2/search', {
       params: {
@@ -62,9 +62,10 @@ export function submitSearch() {
   };
 };
 
-export function fetchSearchRequest() {
+export function fetchSearchRequest(value) {
   return {
     type: SEARCH_FETCH_REQUEST,
+    value,
   };
 };
 

app/soapbox/features/compose/components/search_results.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import AccountContainer from '../../../containers/account_container';
 import StatusContainer from '../../../containers/status_container';
@@ -13,6 +14,7 @@ import classNames from 'classnames';
 export default class SearchResults extends ImmutablePureComponent {
 
   static propTypes = {
+    value: ImmutablePropTypes.string,
     results: ImmutablePropTypes.map.isRequired,
     submitted: PropTypes.bool,
     expandSearch: PropTypes.func.isRequired,
@@ -29,7 +31,7 @@ export default class SearchResults extends ImmutablePureComponent {
   };
 
   render() {
-    const { results, submitted } = this.props;
+    const { value, results, submitted } = this.props;
     const { selectedFilter } = this.state;
 
     if (submitted && results.isEmpty()) {
@@ -43,33 +45,57 @@ export default class SearchResults extends ImmutablePureComponent {
     let searchResults;
     let hasMore = false;
 
-    if (selectedFilter === 'accounts' && results.get('accounts') && results.get('accounts').size > 0) {
+    if (selectedFilter === 'accounts' && results.get('accounts')) {
       hasMore = results.get('accountsHasMore');
 
-      searchResults = (
+      searchResults = results.get('accounts').size > 0 ? (
         <div className={classNames('search-results__section', { 'has-more': hasMore })}>
           {results.get('accounts').map(accountId => <AccountContainer key={accountId} id={accountId} />)}
         </div>
-      );
-    }
-
-    if (selectedFilter === 'statuses' && results.get('statuses') && results.get('statuses').size > 0) {
-      hasMore = results.get('statusesHasMore');
-
-      searchResults = (
-        <div className={classNames('search-results__section', { 'has-more': hasMore })}>
-          {results.get('statuses').map(statusId => <StatusContainer key={statusId} id={statusId} />)}
+      ) : (
+        <div className='empty-column-indicator'>
+          <FormattedMessage
+            id='empty_column.search.accounts'
+            defaultMessage='There are no people results for "{term}"'
+            values={{ term: value }}
+          />
         </div>
       );
     }
 
-    if (selectedFilter === 'hashtags' && results.get('hashtags') && results.get('hashtags').size > 0) {
+    if (selectedFilter === 'statuses' && results.get('statuses')) {
+      hasMore = results.get('statusesHasMore');
+
+      searchResults = results.get('statuses').size > 0 ? (
+        <div className={classNames('search-results__section', { 'has-more': hasMore })}>
+          {results.get('statuses').map(statusId => <StatusContainer key={statusId} id={statusId} />)}
+        </div>
+      ) : (
+        <div className='empty-column-indicator'>
+          <FormattedMessage
+            id='empty_column.search.statuses'
+            defaultMessage='There are no posts results for "{term}"'
+            values={{ term: value }}
+          />
+        </div>
+      );
+    }
+
+    if (selectedFilter === 'hashtags' && results.get('hashtags')) {
       hasMore = results.get('hashtagsHasMore');
 
-      searchResults = (
+      searchResults = results.get('hashtags').size > 0 ? (
         <div className={classNames('search-results__section', { 'has-more': hasMore })}>
           {results.get('hashtags').map(hashtag => <Hashtag key={hashtag.get('name')} hashtag={hashtag} />)}
         </div>
+      ) : (
+        <div className='empty-column-indicator'>
+          <FormattedMessage
+            id='empty_column.search.hashtags'
+            defaultMessage='There are no hashtags results for "{term}"'
+            values={{ term: value }}
+          />
+        </div>
       );
     }
 

app/soapbox/features/compose/containers/search_results_container.js

@@ -5,6 +5,7 @@ import { expandSearch } from '../../../actions/search';
 
 const mapStateToProps = state => {
   return {
+    value: state.getIn(['search', 'submittedValue']),
     results: state.getIn(['search', 'results']),
     suggestions: state.getIn(['suggestions', 'items']),
     submitted: state.getIn(['search', 'submitted']),

app/soapbox/reducers/__tests__/search-test.js

@@ -6,6 +6,7 @@ describe('search reducer', () => {
     expect(reducer(undefined, {})).toEqual(ImmutableMap({
       value: '',
       submitted: false,
+      submittedValue: '',
       hidden: false,
       results: ImmutableMap(),
     }));

app/soapbox/reducers/search.js

@@ -16,6 +16,7 @@ import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable';
 const initialState = ImmutableMap({
   value: '',
   submitted: false,
+  submittedValue: '',
   hidden: false,
   results: ImmutableMap(),
 });
@@ -44,6 +45,7 @@ export default function search(state = initialState, action) {
     return state.withMutations(map => {
       map.set('results', ImmutableMap());
       map.set('submitted', true);
+      map.set('submittedValue', action.value);
     });
   case SEARCH_FETCH_SUCCESS:
     return state.set('results', ImmutableMap({