Add loading indicator and empty result message to advanced interface search (#30085)

app/javascript/mastodon/features/compose/components/search_results.jsx

@@ -1,16 +1,16 @@
-import PropTypes from 'prop-types';
+import { useCallback } from 'react';
 
 import { FormattedMessage } from 'react-intl';
 
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-
 import FindInPageIcon from '@/material-icons/400-24px/find_in_page.svg?react';
 import PeopleIcon from '@/material-icons/400-24px/group.svg?react';
 import TagIcon from '@/material-icons/400-24px/tag.svg?react';
+import { expandSearch } from 'mastodon/actions/search';
 import { Icon }  from 'mastodon/components/icon';
 import { LoadMore } from 'mastodon/components/load_more';
+import { LoadingIndicator } from 'mastodon/components/loading_indicator';
 import { SearchSection } from 'mastodon/features/explore/components/search_section';
+import { useAppDispatch, useAppSelector } from 'mastodon/store';
 
 import { ImmutableHashtag as Hashtag } from '../../../components/hashtag';
 import AccountContainer from '../../../containers/account_container';
@@ -26,62 +26,68 @@ const withoutLastResult = list => {
   }
 };
 
-class SearchResults extends ImmutablePureComponent {
+export const SearchResults = () => {
+  const results = useAppSelector((state) => state.getIn(['search', 'results']));
+  const isLoading = useAppSelector((state) => state.getIn(['search', 'isLoading']));
 
-  static propTypes = {
+  const dispatch = useAppDispatch();
-    results: ImmutablePropTypes.map.isRequired,
-    expandSearch: PropTypes.func.isRequired,
-    searchTerm: PropTypes.string,
-  };
 
-  handleLoadMoreAccounts = () => this.props.expandSearch('accounts');
+  const handleLoadMoreAccounts = useCallback(() => {
+    dispatch(expandSearch('accounts'));
+  }, [dispatch]);
 
-  handleLoadMoreStatuses = () => this.props.expandSearch('statuses');
+  const handleLoadMoreStatuses = useCallback(() => {
+    dispatch(expandSearch('statuses'));
+  }, [dispatch]);
 
-  handleLoadMoreHashtags = () => this.props.expandSearch('hashtags');
+  const handleLoadMoreHashtags = useCallback(() => {
+    dispatch(expandSearch('hashtags'));
+  }, [dispatch]);
 
-  render () {
+  let accounts, statuses, hashtags;
-    const { results } = this.props;
 
-    let accounts, statuses, hashtags;
+  if (results.get('accounts') && results.get('accounts').size > 0) {
-
+    accounts = (
-    if (results.get('accounts') && results.get('accounts').size > 0) {
+      <SearchSection title={<><Icon id='users' icon={PeopleIcon} /><FormattedMessage id='search_results.accounts' defaultMessage='Profiles' /></>}>
-      accounts = (
+        {withoutLastResult(results.get('accounts')).map(accountId => <AccountContainer key={accountId} id={accountId} />)}
-        <SearchSection title={<><Icon id='users' icon={PeopleIcon} /><FormattedMessage id='search_results.accounts' defaultMessage='Profiles' /></>}>
+        {(results.get('accounts').size > INITIAL_PAGE_LIMIT && results.get('accounts').size % INITIAL_PAGE_LIMIT === 1) && <LoadMore visible onClick={handleLoadMoreAccounts} />}
-          {withoutLastResult(results.get('accounts')).map(accountId => <AccountContainer key={accountId} id={accountId} />)}
+      </SearchSection>
-          {(results.get('accounts').size > INITIAL_PAGE_LIMIT && results.get('accounts').size % INITIAL_PAGE_LIMIT === 1) && <LoadMore visible onClick={this.handleLoadMoreAccounts} />}
-        </SearchSection>
-      );
-    }
-
-    if (results.get('hashtags') && results.get('hashtags').size > 0) {
-      hashtags = (
-        <SearchSection title={<><Icon id='hashtag' icon={TagIcon} /><FormattedMessage id='search_results.hashtags' defaultMessage='Hashtags' /></>}>
-          {withoutLastResult(results.get('hashtags')).map(hashtag => <Hashtag key={hashtag.get('name')} hashtag={hashtag} />)}
-          {(results.get('hashtags').size > INITIAL_PAGE_LIMIT && results.get('hashtags').size % INITIAL_PAGE_LIMIT === 1) && <LoadMore visible onClick={this.handleLoadMoreHashtags} />}
-        </SearchSection>
-      );
-    }
-
-    if (results.get('statuses') && results.get('statuses').size > 0) {
-      statuses = (
-        <SearchSection title={<><Icon id='quote-right' icon={FindInPageIcon} /><FormattedMessage id='search_results.statuses' defaultMessage='Posts' /></>}>
-          {withoutLastResult(results.get('statuses')).map(statusId => <StatusContainer key={statusId} id={statusId} />)}
-          {(results.get('statuses').size > INITIAL_PAGE_LIMIT && results.get('statuses').size % INITIAL_PAGE_LIMIT === 1) && <LoadMore visible onClick={this.handleLoadMoreStatuses} />}
-        </SearchSection>
-      );
-    }
-
-
-    return (
-      <div className='search-results'>
-        {accounts}
-        {hashtags}
-        {statuses}
-      </div>
     );
   }
 
-}
+  if (results.get('hashtags') && results.get('hashtags').size > 0) {
+    hashtags = (
+      <SearchSection title={<><Icon id='hashtag' icon={TagIcon} /><FormattedMessage id='search_results.hashtags' defaultMessage='Hashtags' /></>}>
+        {withoutLastResult(results.get('hashtags')).map(hashtag => <Hashtag key={hashtag.get('name')} hashtag={hashtag} />)}
+        {(results.get('hashtags').size > INITIAL_PAGE_LIMIT && results.get('hashtags').size % INITIAL_PAGE_LIMIT === 1) && <LoadMore visible onClick={handleLoadMoreHashtags} />}
+      </SearchSection>
+    );
+  }
 
-export default SearchResults;
+  if (results.get('statuses') && results.get('statuses').size > 0) {
+    statuses = (
+      <SearchSection title={<><Icon id='quote-right' icon={FindInPageIcon} /><FormattedMessage id='search_results.statuses' defaultMessage='Posts' /></>}>
+        {withoutLastResult(results.get('statuses')).map(statusId => <StatusContainer key={statusId} id={statusId} />)}
+        {(results.get('statuses').size > INITIAL_PAGE_LIMIT && results.get('statuses').size % INITIAL_PAGE_LIMIT === 1) && <LoadMore visible onClick={handleLoadMoreStatuses} />}
+      </SearchSection>
+    );
+  }
+
+  return (
+    <div className='search-results'>
+      {!accounts && !hashtags && !statuses && (
+        isLoading ? (
+          <LoadingIndicator />
+        ) : (
+          <div className='empty-column-indicator'>
+            <FormattedMessage id='search_results.nothing_found' defaultMessage='Could not find anything for these search terms' />
+          </div>
+        )
+      )}
+      {accounts}
+      {hashtags}
+      {statuses}
+    </div>
+  );
+
+};

app/javascript/mastodon/features/compose/containers/search_results_container.js

@@ -1,20 +0,0 @@
-import { connect } from 'react-redux';
-
-import { expandSearch } from 'mastodon/actions/search';
-import { fetchSuggestions, dismissSuggestion } from 'mastodon/actions/suggestions';
-
-import SearchResults from '../components/search_results';
-
-const mapStateToProps = state => ({
-  results: state.getIn(['search', 'results']),
-  suggestions: state.getIn(['suggestions', 'items']),
-  searchTerm: state.getIn(['search', 'searchTerm']),
-});
-
-const mapDispatchToProps = dispatch => ({
-  fetchSuggestions: () => dispatch(fetchSuggestions()),
-  expandSearch: type => dispatch(expandSearch(type)),
-  dismissSuggestion: account => dispatch(dismissSuggestion(account.get('id'))),
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(SearchResults);

app/javascript/mastodon/features/compose/index.jsx

@@ -29,9 +29,9 @@ import { mascot } from '../../initial_state';
 import { isMobile } from '../../is_mobile';
 import Motion from '../ui/util/optional_motion';
 
+import { SearchResults } from './components/search_results';
 import ComposeFormContainer from './containers/compose_form_container';
 import SearchContainer from './containers/search_container';
-import SearchResultsContainer from './containers/search_results_container';
 
 const messages = defineMessages({
   start: { id: 'getting_started.heading', defaultMessage: 'Getting started' },
@@ -138,7 +138,7 @@ class Compose extends PureComponent {
             <Motion defaultStyle={{ x: -100 }} style={{ x: spring(showSearch ? 0 : -100, { stiffness: 210, damping: 20 }) }}>
               {({ x }) => (
                 <div className='drawer__inner darker' style={{ transform: `translateX(${x}%)`, visibility: x === -100 ? 'hidden' : 'visible' }}>
-                  <SearchResultsContainer />
+                  <SearchResults />
                 </div>
               )}
             </Motion>

app/javascript/mastodon/reducers/search.js

@@ -50,6 +50,7 @@ export default function search(state = initialState, action) {
     return state.set('hidden', true);
   case SEARCH_FETCH_REQUEST:
     return state.withMutations(map => {
+      map.set('results', ImmutableMap());
       map.set('isLoading', true);
       map.set('submitted', true);
       map.set('type', action.searchType);