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

Search results: convert to TSX

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

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

@@ -0,0 +1,174 @@
+import classNames from 'classnames';
+import React, { useEffect } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
+
+import { expandSearch, setFilter } from 'soapbox/actions/search';
+import { fetchTrendingStatuses } from 'soapbox/actions/trending_statuses';
+import ScrollableList from 'soapbox/components/scrollable_list';
+import PlaceholderAccount from 'soapbox/features/placeholder/components/placeholder_account';
+import PlaceholderHashtag from 'soapbox/features/placeholder/components/placeholder_hashtag';
+import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder_status';
+import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
+
+import Hashtag from '../../../components/hashtag';
+import { Tabs } from '../../../components/ui';
+import AccountContainer from '../../../containers/account_container';
+import StatusContainer from '../../../containers/status_container';
+
+import type { Map as ImmutableMap } from 'immutable';
+
+const messages = defineMessages({
+  accounts: { id: 'search_results.accounts', defaultMessage: 'People' },
+  statuses: { id: 'search_results.statuses', defaultMessage: 'Posts' },
+  hashtags: { id: 'search_results.hashtags', defaultMessage: 'Hashtags' },
+});
+
+type SearchFilter = 'accounts' | 'statuses' | 'hashtags';
+
+/** Displays search results depending on the active tab. */
+const SearchResults: React.FC = () => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+
+  const value = useAppSelector(state => state.search.submittedValue);
+  const results = useAppSelector(state => state.search.results);
+  const suggestions = useAppSelector(state => state.suggestions.items);
+  const trendingStatuses = useAppSelector(state => state.trending_statuses.items);
+  const trends = useAppSelector(state => state.trends.items);
+  const submitted = useAppSelector(state => state.search.submitted);
+  const selectedFilter = useAppSelector(state => state.search.filter);
+
+  const handleLoadMore = () => dispatch(expandSearch(selectedFilter));
+  const handleSelectFilter = (newActiveFilter: SearchFilter) => dispatch(setFilter(newActiveFilter));
+
+  useEffect(() => {
+    dispatch(fetchTrendingStatuses());
+  }, []);
+
+  const renderFilterBar = () => {
+    const items = [
+      {
+        text: intl.formatMessage(messages.accounts),
+        action: () => handleSelectFilter('accounts'),
+        name: 'accounts',
+      },
+      {
+        text: intl.formatMessage(messages.statuses),
+        action: () => handleSelectFilter('statuses'),
+        name: 'statuses',
+      },
+      {
+        text: intl.formatMessage(messages.hashtags),
+        action: () => handleSelectFilter('hashtags'),
+        name: 'hashtags',
+      },
+    ];
+
+    return <Tabs items={items} activeItem={selectedFilter} />;
+  };
+
+  let searchResults;
+  let hasMore = false;
+  let loaded;
+  let noResultsMessage;
+  let placeholderComponent: React.ComponentType<any> = PlaceholderStatus;
+
+  if (selectedFilter === 'accounts') {
+    hasMore = results.get('accountsHasMore');
+    loaded = results.get('accountsLoaded');
+    placeholderComponent = PlaceholderAccount;
+
+    if (results.get('accounts') && results.get('accounts').size > 0) {
+      searchResults = results.get('accounts').map((accountId: string) => <AccountContainer key={accountId} id={accountId} />);
+    } else if (!submitted && suggestions && !suggestions.isEmpty()) {
+      searchResults = suggestions.map(suggestion => <AccountContainer key={suggestion.get('account')} id={suggestion.get('account')} />);
+    } else if (loaded) {
+      noResultsMessage = (
+        <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 === 'statuses') {
+    hasMore = results.get('statusesHasMore');
+    loaded = results.get('statusesLoaded');
+
+    if (results.get('statuses') && results.get('statuses').size > 0) {
+      searchResults = results.get('statuses').map((statusId: string) => (
+        // @ts-ignore
+        <StatusContainer key={statusId} id={statusId} />
+      ));
+    } else if (!submitted && trendingStatuses && !trendingStatuses.isEmpty()) {
+      searchResults = trendingStatuses.map(statusId => (
+        // @ts-ignore
+        <StatusContainer key={statusId} id={statusId} />
+      ));
+    } else if (loaded) {
+      noResultsMessage = (
+        <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') {
+    hasMore = results.get('hashtagsHasMore');
+    loaded = results.get('hashtagsLoaded');
+    placeholderComponent = PlaceholderHashtag;
+
+    if (results.get('hashtags') && results.get('hashtags').size > 0) {
+      searchResults = results.get('hashtags').map((hashtag: ImmutableMap<string, any>) => <Hashtag key={hashtag.get('name')} hashtag={hashtag} />);
+    } else if (!submitted && suggestions && !suggestions.isEmpty()) {
+      searchResults = trends.map(hashtag => <Hashtag key={hashtag.get('name')} hashtag={hashtag} />);
+    } else if (loaded) {
+      noResultsMessage = (
+        <div className='empty-column-indicator'>
+          <FormattedMessage
+            id='empty_column.search.hashtags'
+            defaultMessage='There are no hashtags results for "{term}"'
+            values={{ term: value }}
+          />
+        </div>
+      );
+    }
+  }
+
+  return (
+    <>
+      {renderFilterBar()}
+
+      {noResultsMessage || (
+        <ScrollableList
+          key={selectedFilter}
+          scrollKey={`${selectedFilter}:${value}`}
+          isLoading={submitted && !loaded}
+          showLoading={submitted && !loaded && results.isEmpty()}
+          hasMore={hasMore}
+          onLoadMore={handleLoadMore}
+          placeholderComponent={placeholderComponent}
+          placeholderCount={20}
+          className={classNames({
+            'divide-gray-200 dark:divide-slate-700 divide-solid divide-y': selectedFilter === 'statuses',
+          })}
+          itemClassName={classNames({ 'pb-4': selectedFilter === 'accounts' })}
+        >
+          {searchResults}
+        </ScrollableList>
+      )}
+    </>
+  );
+};
+
+export default SearchResults;

app/soapbox/features/follow_recommendations/components/follow_recommendations_list.tsx

@@ -31,8 +31,8 @@ const FollowRecommendationsList: React.FC = () => {
 
   return (
     <div className='column-list'>
-      {suggestions.size > 0 ? suggestions.map((suggestion: { account: string }) => (
-        <Account key={suggestion.account} id={suggestion.account} />
+      {suggestions.size > 0 ? suggestions.map(suggestion => (
+        <Account key={suggestion.get('account')} id={suggestion.get('account')} />
       )) : (
         <div className='column-list__empty-message'>
           <FormattedMessage id='empty_column.follow_recommendations' defaultMessage='Looks like no suggestions could be generated for you. You can try using search to look for people you might know or explore trending hashtags.' />

app/soapbox/features/search/index.tsx

@@ -3,7 +3,7 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import { Column } from 'soapbox/components/ui';
 import Search from 'soapbox/features/compose/components/search';
-import SearchResultsContainer from 'soapbox/features/compose/containers/search_results_container';
+import SearchResults from 'soapbox/features/compose/components/search_results';
 
 const messages = defineMessages({
   heading: { id: 'column.search', defaultMessage: 'Search' },
@@ -16,7 +16,7 @@ const SearchPage = () => {
     <Column label={intl.formatMessage(messages.heading)}>
       <div className='space-y-4'>
         <Search autoFocus autoSubmit />
-        <SearchResultsContainer />
+        <SearchResults />
       </div>
     </Column>
   );

app/soapbox/reducers/trending_statuses.ts

@@ -0,0 +1,37 @@
+import { Record as ImmutableRecord, OrderedSet as ImmutableOrderedSet } from 'immutable';
+
+import {
+  TRENDING_STATUSES_FETCH_REQUEST,
+  TRENDING_STATUSES_FETCH_SUCCESS,
+} from 'soapbox/actions/trending_statuses';
+
+import type { AnyAction } from 'redux';
+
+const ReducerRecord = ImmutableRecord({
+  items: ImmutableOrderedSet<string>(),
+  isLoading: false,
+});
+
+type State = ReturnType<typeof ReducerRecord>;
+
+type IdEntity = { id: string };
+
+const toIds = (items: IdEntity[]) => ImmutableOrderedSet(items.map(item => item.id));
+
+const importStatuses = (state: State, statuses: IdEntity[]): State => {
+  return state.withMutations(state => {
+    state.set('items', toIds(statuses));
+    state.set('isLoading', false);
+  });
+};
+
+export default function trending_statuses(state = ReducerRecord(), action: AnyAction) {
+  switch (action.type) {
+    case TRENDING_STATUSES_FETCH_REQUEST:
+      return state.set('isLoading', true);
+    case TRENDING_STATUSES_FETCH_SUCCESS:
+      return importStatuses(state, action.statuses);
+    default:
+      return state;
+  }
+}