Updated Search to include checks for isLoading, isError and if no results found

• Updated:
- Search to include checks for isLoading, isError and if no results found

app/javascript/gabsocial/features/search.js

@@ -2,15 +2,20 @@ import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import { withRouter } from 'react-router-dom'
 import { me } from '../initial_state'
+import ResponsiveClassesComponent from '../features/ui/util/responsive_classes_component'
 import HashtagItem from '../components/hashtag_item'
 import GroupListItem from '../components/group_list_item'
 import Text from '../components/text'
 import Account from '../components/account'
 import PanelLayout from '../components/panel/panel_layout'
+import ColumnIndicator from '../components/column_indicator'
+import Block from '../components/block'
 
 const mapStateToProps = (state) => ({
+  isError: state.getIn(['search', 'isError']),
+  isLoading: state.getIn(['search', 'isLoading']),
   results: state.getIn(['search', 'results']),
-  suggestions: state.getIn(['suggestions', 'items']),
+  submitted: state.getIn(['search', 'submitted']),
 });
 
 export default
@@ -19,8 +24,11 @@ export default
 class Search extends ImmutablePureComponent {
 
   static propTypes = {
-    results: ImmutablePropTypes.map.isRequired,
+    isError: PropTypes.bool.isRequired,
+    isLoading: PropTypes.bool.isRequired,
     location: PropTypes.object,
+    results: ImmutablePropTypes.map.isRequired,
+    submitted: PropTypes.bool.isRequired,
   }
 
   state = {
@@ -28,11 +36,39 @@ class Search extends ImmutablePureComponent {
   }
 
   render() {
-    const { results, location } = this.props
+    const {
+      isError,
+      isLoading,
+      location,
+      results,
+      submitted,
+    } = this.props
     const { isSmallScreen } = this.state
 
-    if (results.isEmpty() && isSmallScreen) {
-      return null
+    if (isLoading) {
+      return <ColumnIndicator type='loading' />
+    }
+
+    if (isError) {
+      return (
+        <ResponsiveClassesComponent classNamesXS={_s.px10}>
+          <Block>
+            <ColumnIndicator type='error' message='Error fetching search results.' />
+          </Block>
+        </ResponsiveClassesComponent>
+      )
+    }
+
+    if ((results.isEmpty() && isSmallScreen) || (!submitted && results.isEmpty())) {
+      return (
+        <ResponsiveClassesComponent classNamesXS={_s.px10}>
+          <Block>
+            <div className={[_s.default, _s.py15, _s.px15].join(' ')}>
+              <Text>Type in the box above and submit to perform a search.</Text>
+            </div>
+          </Block>
+        </ResponsiveClassesComponent>
+      )
     }
 
     const pathname = location.pathname || ''
@@ -43,7 +79,7 @@ class Search extends ImmutablePureComponent {
     const theLimit = 4
 
     let accounts, statuses, hashtags, groups
-    
+
     // : todo : statuses
 
     if (results.get('accounts') && results.get('accounts').size > 0 && (isTop || showPeople)) {
@@ -133,6 +169,16 @@ class Search extends ImmutablePureComponent {
       )
     }
 
+    if (!accounts && !statuses && !hashtags && !groups) {
+      return (
+        <ResponsiveClassesComponent classNamesXS={_s.px10}>
+          <Block>
+            <ColumnIndicator type='missing' message='No search results.' />
+          </Block>
+        </ResponsiveClassesComponent>
+      )
+    }
+
     return (
       <div>
         {accounts}

app/javascript/gabsocial/reducers/search.js

@@ -1,6 +1,8 @@
 import {
   SEARCH_CHANGE,
   SEARCH_CLEAR,
+  SEARCH_FETCH_REQUEST,
+  SEARCH_FETCH_FAIL,
   SEARCH_FETCH_SUCCESS,
   SEARCH_SHOW,
 } from '../actions/search';
@@ -14,11 +16,23 @@ const initialState = ImmutableMap({
   value: '',
   submitted: false,
   hidden: false,
+  isLoading: false,
+  isError: false,
   results: ImmutableMap(),
 });
 
 export default function search(state = initialState, action) {
   switch(action.type) {
+  case SEARCH_FETCH_REQUEST:
+    return state.withMutations(map => {
+      map.set('isError', false);
+      map.set('isLoading', true);
+    });
+  case SEARCH_FETCH_FAIL:
+    return state.withMutations(map => {
+      map.set('isError', true);
+      map.set('isLoading', false);
+    });
   case SEARCH_CHANGE:
     return state.withMutations(map => {
       map.set('value', action.value);
@@ -30,6 +44,8 @@ export default function search(state = initialState, action) {
       map.set('results', ImmutableMap());
       map.set('submitted', false);
       map.set('hidden', false);
+      map.set('isLoading', false);
+      map.set('isError', false);
     });
   case SEARCH_SHOW:
     return state.set('hidden', false);
@@ -42,7 +58,7 @@ export default function search(state = initialState, action) {
       statuses: ImmutableList(action.results.statuses.map(item => item.id)),
       hashtags: fromJS(action.results.hashtags),
       groups: fromJS(action.results.groups),
-    })).set('submitted', true);
+    })).set('submitted', true).set('isLoading', false).set('isError', false);
   default:
     return state;
   }