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,22 +26,23 @@ 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 = {
-    results: ImmutablePropTypes.map.isRequired,
-    expandSearch: PropTypes.func.isRequired,
-    searchTerm: PropTypes.string,
-  };
+  const dispatch = useAppDispatch();
 
-  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');
-
-  render () {
-    const { results } = this.props;
+  const handleLoadMoreHashtags = useCallback(() => {
+    dispatch(expandSearch('hashtags'));
+  }, [dispatch]);
 
   let accounts, statuses, hashtags;
 
@@ -49,7 +50,7 @@ class SearchResults extends ImmutablePureComponent {
     accounts = (
       <SearchSection title={<><Icon id='users' icon={PeopleIcon} /><FormattedMessage id='search_results.accounts' defaultMessage='Profiles' /></>}>
         {withoutLastResult(results.get('accounts')).map(accountId => <AccountContainer key={accountId} id={accountId} />)}
-          {(results.get('accounts').size > INITIAL_PAGE_LIMIT && results.get('accounts').size % INITIAL_PAGE_LIMIT === 1) && <LoadMore visible onClick={this.handleLoadMoreAccounts} />}
+        {(results.get('accounts').size > INITIAL_PAGE_LIMIT && results.get('accounts').size % INITIAL_PAGE_LIMIT === 1) && <LoadMore visible onClick={handleLoadMoreAccounts} />}
       </SearchSection>
     );
   }
@@ -58,7 +59,7 @@ class SearchResults extends ImmutablePureComponent {
     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} />}
+        {(results.get('hashtags').size > INITIAL_PAGE_LIMIT && results.get('hashtags').size % INITIAL_PAGE_LIMIT === 1) && <LoadMore visible onClick={handleLoadMoreHashtags} />}
       </SearchSection>
     );
   }
@@ -67,21 +68,26 @@ class SearchResults extends ImmutablePureComponent {
     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} />}
+        {(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>
   );
-  }
 
-}
-
-export default SearchResults;
+};

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);