Merge branch 'search-no-results' into 'develop'

Search results improvements

See merge request soapbox-pub/soapbox-fe!665

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,
@@ -24,7 +26,7 @@ export default class SearchResults extends ImmutablePureComponent {
   handleSelectFilter = newActiveFilter => this.props.selectFilter(newActiveFilter);
 
   render() {
-    const { results, submitted, selectedFilter } = this.props;
+    const { value, results, submitted, selectedFilter } = this.props;
 
     if (submitted && results.isEmpty()) {
       return (
@@ -37,33 +39,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, setFilter } 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/locales/pl.json

@@ -326,6 +326,9 @@
   "empty_column.public": "Tu nic nie ma! Napisz coś publicznie, lub dodaj ludzi z innych serwerów, aby to wyświetlić",
   "empty_column.remote": "Tu nic nie ma! Zaobserwuj użytkowników {instance}, aby wypełnić tę oś.",
   "empty_column.scheduled_statuses": "Nie masz żadnych zaplanowanych wpisów. Kiedy dodasz jakiś, pojawi się on tutaj.",
+  "empty_column.search.accounts": "Brak wyników wyszukiwania osób dla „{term}”",
+  "empty_column.search.hashtags": "Brak wyników wyszukiwania hashtagów dla „{term}”",
+  "empty_column.search.statuses": "Brak wyników wyszukiwania wpisów dla „{term}”",
   "federation_restriction.federated_timeline_removal": "Usunięcie z osi czasu Fediwersum",
   "federation_restriction.followers_only": "Ukryte z wyjątkiem obserwujących",
   "federation_restriction.full_media_removal": "Pełne usunięcie mediów",

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(),
       filter: 'accounts',

app/soapbox/reducers/search.js

@@ -17,6 +17,7 @@ import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable';
 const initialState = ImmutableMap({
   value: '',
   submitted: false,
+  submittedValue: '',
   hidden: false,
   results: ImmutableMap(),
   filter: 'accounts',
@@ -47,6 +48,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({
@@ -56,7 +58,13 @@ export default function search(state = initialState, action) {
       accountsHasMore: action.results.accounts.length >= 20,
       statusesHasMore: action.results.statuses.length >= 20,
       hashtagsHasMore: action.results.hashtags.length >= 20,
-    })).set('submitted', true).set('filter', 'accounts');
+    })).set('submitted', true).set('filter', action.results.accounts.length > 0
+      ? 'accounts'
+      : action.results.statuses.length > 0
+        ? 'statuses'
+        : action.results.hashtags.length > 0
+          ? 'hashtags'
+          : 'accounts');
   case SEARCH_FILTER_SET:
     return state.set('filter', action.value);
   case SEARCH_EXPAND_SUCCESS: