Updated search UI header and results

Added groups with new items for filtering search results

app/javascript/gabsocial/features/compose/components/search.js

@@ -19,7 +19,7 @@ class SearchPopout extends React.PureComponent {
 
   render () {
     const { style } = this.props;
-    const extraInformation = searchEnabled ? <FormattedMessage id='search_popout.tips.full_text' defaultMessage='Simple text returns statuses you have written, favorited, reposted, or have been mentioned in, as well as matching usernames, display names, and hashtags.' /> : <FormattedMessage id='search_popout.tips.text' defaultMessage='Simple text returns matching display names, usernames and hashtags' />;
+    const extraInformation = searchEnabled ? <FormattedMessage id='search_popout.tips.full_text' defaultMessage='Simple text returns statuses you have written, favorited, reposted, or have been mentioned in, as well as matching usernames, display names, and hashtags.' /> : <FormattedMessage id='search_popout.tips.text' defaultMessage='Simple text returns matching display names, usernames, groups and hashtags' />;
     return (
       <div className='search-popout-container' style={{ ...style, position: 'absolute', zIndex: 1000 }}>
         <Motion defaultStyle={{ opacity: 0, scaleX: 1, scaleY: 1 }} style={{ opacity: spring(1, { damping: 35, stiffness: 400 }), scaleX: spring(1, { damping: 35, stiffness: 400 }), scaleY: spring(1, { damping: 35, stiffness: 400 }) }}>

app/javascript/gabsocial/features/compose/components/search_results.js

@@ -9,13 +9,16 @@ import Hashtag from '../../../components/hashtag';
 import Icon from 'gabsocial/components/icon';
 import WhoToFollowPanel from '../../ui/components/who_to_follow_panel';
 // import TrendsPanel from '../../ui/components/trends_panel';
+import GroupListItem from 'gabsocial/components/group_list_item';
 
-export default @injectIntl
+export default
+@injectIntl
 class SearchResults extends ImmutablePureComponent {
 
   static propTypes = {
     results: ImmutablePropTypes.map.isRequired,
     intl: PropTypes.object.isRequired,
+    location: PropTypes.object,
   };
 
   state = {
@@ -23,7 +26,7 @@ class SearchResults extends ImmutablePureComponent {
   }
 
   render () {
-    const { intl, results, dismissSuggestion } = this.props;
+    const { results, location } = this.props;
     const { isSmallScreen } = this.state;
 
     if (results.isEmpty() && isSmallScreen) {
@@ -35,38 +38,44 @@ class SearchResults extends ImmutablePureComponent {
       );
     }
 
-    let accounts, statuses, hashtags;
+    const pathname = location.pathname || '';
+    const showPeople = pathname === '/search/people';
+    const showHashtags = pathname === '/search/hashtags';
+    const showGroups = pathname === '/search/groups';
+    const isTop = !showPeople && !showHashtags && !showGroups;
+
+    let accounts, statuses, hashtags, groups;
     let count = 0;
 
-    if (results.get('accounts') && results.get('accounts').size > 0) {
-      count   += results.get('accounts').size;
+    if (results.get('accounts') && results.get('accounts').size > 0 && (isTop || showPeople)) {
+      const size = isTop ? Math.min(results.get('accounts').size, 5) : results.get('accounts').size;
+      count += size;
       accounts = (
         <div className='search-results__section'>
-          <h5><Icon id='users' fixedWidth /><FormattedMessage id='search_results.accounts' defaultMessage='People' /></h5>
-
-          {results.get('accounts').map(accountId => <AccountContainer key={accountId} id={accountId} />)}
+          <h5><Icon id='user' fixedWidth /><FormattedMessage id='search_results.accounts' defaultMessage='People' /></h5>
+          {results.get('accounts').slice(0, size).map(accountId => <AccountContainer key={accountId} id={accountId} />)}
         </div>
       );
     }
 
-    if (results.get('statuses') && results.get('statuses').size > 0) {
-      count   += results.get('statuses').size;
-      statuses = (
+    if (results.get('groups') && results.get('groups').size > 0 && (isTop || showGroups)) {
+      const size = isTop ? Math.min(results.get('groups').size, 5) : results.get('groups').size;
+      count += size;
+      groups = (
         <div className='search-results__section'>
-          <h5><Icon id='quote-right' fixedWidth /><FormattedMessage id='search_results.statuses' defaultMessage='Gabs' /></h5>
-
-          {results.get('statuses').map(statusId => <StatusContainer key={statusId} id={statusId} />)}
+          <h5><Icon id='users' fixedWidth /><FormattedMessage id='search_results.groups' defaultMessage='Groups' /></h5>
+          {results.get('groups').slice(0, size).map(group => <GroupListItem key={`search-${group.get('name')}`} group={group} />)}
         </div>
       );
     }
 
-    if (results.get('hashtags') && results.get('hashtags').size > 0) {
-      count += results.get('hashtags').size;
+    if (results.get('hashtags') && results.get('hashtags').size > 0 && (isTop || showHashtags)) {
+      const size = isTop ? Math.min(results.get('hashtags').size, 5) : results.get('hashtags').size;
+      count += size;
       hashtags = (
         <div className='search-results__section'>
           <h5><Icon id='hashtag' fixedWidth /><FormattedMessage id='search_results.hashtags' defaultMessage='Hashtags' /></h5>
-
-          {results.get('hashtags').map(hashtag => <Hashtag key={hashtag.get('name')} hashtag={hashtag} />)}
+          {results.get('hashtags').slice(0, size).map(hashtag => <Hashtag key={hashtag.get('name')} hashtag={hashtag} />)}
         </div>
       );
     }
@@ -79,6 +88,7 @@ class SearchResults extends ImmutablePureComponent {
         </div>
 
         {accounts}
+        {groups}
         {statuses}
         {hashtags}
       </div>

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

@@ -1,6 +1,7 @@
 import { connect } from 'react-redux';
 import SearchResults from '../components/search_results';
 import { fetchSuggestions, dismissSuggestion } from '../../../actions/suggestions';
+import { withRouter } from 'react-router-dom';
 
 const mapStateToProps = state => ({
   results: state.getIn(['search', 'results']),
@@ -12,4 +13,4 @@ const mapDispatchToProps = dispatch => ({
   dismissSuggestion: account => dispatch(dismissSuggestion(account.get('id'))),
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(SearchResults);
+export default withRouter(connect(mapStateToProps, mapDispatchToProps)(SearchResults));