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) {
+    if (results.get('accounts') && results.get('accounts').size > 0 && (isTop || showPeople)) {
-      count   += results.get('accounts').size;
+      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>
+          <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} />)}
-          {results.get('accounts').map(accountId => <AccountContainer key={accountId} id={accountId} />)}
         </div>
       );
     }
 
-    if (results.get('statuses') && results.get('statuses').size > 0) {
+    if (results.get('groups') && results.get('groups').size > 0 && (isTop || showGroups)) {
-      count   += results.get('statuses').size;
+      const size = isTop ? Math.min(results.get('groups').size, 5) : results.get('groups').size;
-      statuses = (
+      count += size;
+      groups = (
         <div className='search-results__section'>
-          <h5><Icon id='quote-right' fixedWidth /><FormattedMessage id='search_results.statuses' defaultMessage='Gabs' /></h5>
+          <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} />)}
-          {results.get('statuses').map(statusId => <StatusContainer key={statusId} id={statusId} />)}
         </div>
       );
     }
 
-    if (results.get('hashtags') && results.get('hashtags').size > 0) {
+    if (results.get('hashtags') && results.get('hashtags').size > 0 && (isTop || showHashtags)) {
-      count += results.get('hashtags').size;
+      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').slice(0, size).map(hashtag => <Hashtag key={hashtag.get('name')} hashtag={hashtag} />)}
-          {results.get('hashtags').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));

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

@@ -1,8 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import ImmutablePropTypes from 'react-immutable-proptypes';
+import { withRouter } from 'react-router-dom';
 import PropTypes from 'prop-types';
-import ImmutablePureComponent from 'react-immutable-pure-component';
 import { FormattedMessage } from 'react-intl';
 import { NavLink } from 'react-router-dom';
 
@@ -11,7 +10,10 @@ const mapStateToProps = state => ({
   submitted: state.getIn(['search', 'submitted']),
 });
 
-class Header extends ImmutablePureComponent {
+export default
+@withRouter
+@connect(mapStateToProps)
+class Header extends React.PureComponent {
 
   static propTypes = {
     value: PropTypes.string,
@@ -32,10 +34,6 @@ class Header extends ImmutablePureComponent {
   render () {
     const { submittedValue } = this.state;
 
-    if (!submittedValue) {
-      return null;
-    }
-
     return (
       <div className='search-header'>
         <div className='search-header__text-container'>
@@ -46,21 +44,18 @@ class Header extends ImmutablePureComponent {
         <div className='search-header__type-filters'>
           <div className='account__section-headline'>
             <div className='search-header__type-filters-tabs'>
-              <NavLink to='/search' activeClassName='active'>
+              <NavLink to='/search' exact activeClassName='active'>
                 <FormattedMessage id='search_results.top' defaultMessage='Top' />
               </NavLink>
-              {/*<NavLink to='/search/gabs' activeClassName='active'>
+              <NavLink to='/search/people' exact activeClassName='active'>
-                <FormattedMessage id='search_results.statuses' defaultMessage='Gabs' />
-              </NavLink>
-              <NavLink to='/search/people' activeClassName='active'>
                 <FormattedMessage id='search_results.accounts' defaultMessage='People' />
               </NavLink>
-              <NavLink to='/search/hashtags' activeClassName='active'>
+              <NavLink to='/search/hashtags' exact activeClassName='active'>
                 <FormattedMessage id='search_results.hashtags' defaultMessage='Hashtags' />
               </NavLink>
-              <NavLink to='/search/groups' activeClassName='active'>
+              <NavLink to='/search/groups' exact activeClassName='active'>
                 <FormattedMessage id='search_results.groups' defaultMessage='Groups' />
-              </NavLink>*/}
+              </NavLink>
             </div>
           </div>
         </div>
@@ -68,5 +63,3 @@ class Header extends ImmutablePureComponent {
     );
   }
 }
-
-export default connect(mapStateToProps)(Header);

app/javascript/gabsocial/features/ui/index.js

@@ -202,7 +202,10 @@ class SwitchingColumnsArea extends React.PureComponent {
 
         <WrappedRoute path='/notifications' layout={LAYOUT.DEFAULT} component={Notifications} content={children} />
 
-        <WrappedRoute path='/search' publicRoute page={SearchPage} component={Search} content={children} />
+        <WrappedRoute path='/search' exact publicRoute page={SearchPage} component={Search} content={children} />
+        <WrappedRoute path='/search/people' exact page={SearchPage} component={Search} content={children} />
+        <WrappedRoute path='/search/hashtags' exact page={SearchPage} component={Search} content={children} />
+        <WrappedRoute path='/search/groups' exact page={SearchPage} component={Search} content={children} />
 
         <WrappedRoute path='/follow_requests' layout={LAYOUT.DEFAULT} component={FollowRequests} content={children} />
         <WrappedRoute path='/blocks' layout={LAYOUT.DEFAULT} component={Blocks} content={children} />