feat: add space search bar in home and spaces nearby

Author: pyphilia

src/Home.js

@@ -14,6 +14,7 @@ import Styles from './Styles';
 import Loader from './components/common/Loader';
 import Main from './components/common/Main';
 import { HOME_MAIN_ID } from './config/selectors';
+import { searchSpacesByQuery } from './utils/search';
 
 class Home extends Component {
   static propTypes = {
@@ -39,15 +40,35 @@ class Home extends Component {
     activity: PropTypes.bool.isRequired,
     history: PropTypes.shape({ length: PropTypes.number.isRequired })
       .isRequired,
+    searchQuery: PropTypes.string.isRequired,
   };
 
-  componentDidMount() {
+  state = {
+    // eslint-disable-next-line react/destructuring-assignment
+    filteredSpaces: this.props.spaces,
+  };
+
+  async componentDidMount() {
     const { dispatchGetSpaces } = this.props;
-    dispatchGetSpaces();
+    await dispatchGetSpaces();
   }
 
+  componentDidUpdate({ spaces: prevSpaces, searchQuery: prevSearchQuery }) {
+    const { spaces, searchQuery } = this.props;
+    if (!spaces.equals(prevSpaces) || searchQuery !== prevSearchQuery) {
+      this.filterSpacesWithSearchQuery();
+    }
+  }
+
+  filterSpacesWithSearchQuery = () => {
+    const { spaces, searchQuery } = this.props;
+    const filteredSpaces = searchSpacesByQuery(spaces, searchQuery);
+    this.setState({ filteredSpaces });
+  };
+
   render() {
-    const { classes, spaces, activity } = this.props;
+    const { classes, activity } = this.props;
+    const { filteredSpaces } = this.state;
 
     if (activity) {
       return (
@@ -63,15 +84,16 @@ class Home extends Component {
       );
     }
     return (
-      <Main id={HOME_MAIN_ID}>
-        <SpaceGrid spaces={spaces} showActions saved />
+      <Main id={HOME_MAIN_ID} showSearch>
+        <SpaceGrid spaces={filteredSpaces} showActions saved />
       </Main>
     );
   }
 }
 
 const mapStateToProps = ({ Space }) => ({
   spaces: Space.get('saved'),
+  searchQuery: Space.get('searchQuery'),
   activity: Boolean(Space.getIn(['current', 'activity']).size),
 });
 

src/actions/space.js

@@ -16,6 +16,7 @@ import {
   FLAG_SYNCING_SPACE,
   SYNC_SPACE_SUCCEEDED,
   FLAG_CLEARING_USER_INPUT,
+  SET_SPACE_SEARCH_QUERY,
 } from '../types';
 import {
   ERROR_ZIP_CORRUPTED,
@@ -445,6 +446,13 @@ const getSpacesNearby = async ({
   }
 };
 
+const setSearchQuery = async ({ value }) => async dispatch => {
+  dispatch({
+    type: SET_SPACE_SEARCH_QUERY,
+    payload: value,
+  });
+};
+
 export {
   loadSpace,
   clearSpace,
@@ -460,4 +468,5 @@ export {
   clearUserInput,
   createGetLocalSpace,
   createGetRemoteSpace,
+  setSearchQuery,
 };

src/components/SpacesNearby.js

@@ -16,6 +16,7 @@ import GeolocationControl from './common/GeolocationControl';
 import { CONTROL_TYPES } from '../config/constants';
 import Main from './common/Main';
 import { SPACES_NEARBY_MAIN_ID } from '../config/selectors';
+import { searchSpacesByQuery } from '../utils/search';
 
 class SpacesNearby extends Component {
   static propTypes = {
@@ -42,23 +43,36 @@ class SpacesNearby extends Component {
     spaces: PropTypes.instanceOf(Set).isRequired,
     activity: PropTypes.bool,
     geolocationEnabled: PropTypes.bool.isRequired,
+    searchQuery: PropTypes.string.isRequired,
   };
 
   static defaultProps = {
     geolocation: Map(),
     activity: false,
   };
 
+  state = {
+    // eslint-disable-next-line react/destructuring-assignment
+    filteredSpaces: this.props.spaces,
+  };
+
   constructor(props) {
     super(props);
     this.getSpacesNearby();
   }
 
-  componentDidUpdate({ geolocation: prevGeolocation }) {
-    const { geolocation } = this.props;
+  componentDidUpdate({
+    geolocation: prevGeolocation,
+    spaces: prevSpaces,
+    searchQuery: prevSearchQuery,
+  }) {
+    const { geolocation, spaces, searchQuery } = this.props;
     if (!geolocation.equals(prevGeolocation)) {
       this.getSpacesNearby();
     }
+    if (!spaces.equals(prevSpaces) || searchQuery !== prevSearchQuery) {
+      this.filterSpacesWithSearchQuery();
+    }
   }
 
   getSpacesNearby = () => {
@@ -74,8 +88,15 @@ class SpacesNearby extends Component {
     }
   };
 
+  filterSpacesWithSearchQuery = () => {
+    const { spaces, searchQuery } = this.props;
+    const filteredSpaces = searchSpacesByQuery(spaces, searchQuery);
+    this.setState({ filteredSpaces });
+  };
+
   render() {
-    const { classes, spaces, activity, geolocationEnabled } = this.props;
+    const { classes, activity, geolocationEnabled } = this.props;
+    const { filteredSpaces } = this.state;
 
     if (activity) {
       return (
@@ -92,14 +113,18 @@ class SpacesNearby extends Component {
     }
 
     const geolocationContent = geolocationEnabled ? (
-      <SpaceGrid spaces={spaces} />
+      <SpaceGrid spaces={filteredSpaces} />
     ) : (
       <div className="Main">
         <GeolocationControl controlType={CONTROL_TYPES.BUTTON} />
       </div>
     );
 
-    return <Main id={SPACES_NEARBY_MAIN_ID}>{geolocationContent}</Main>;
+    return (
+      <Main showSearch id={SPACES_NEARBY_MAIN_ID}>
+        {geolocationContent}
+      </Main>
+    );
   }
 }
 
@@ -112,6 +137,7 @@ const mapStateToProps = ({ authentication, Space }) => ({
     'settings',
     'geolocationEnabled',
   ]),
+  searchQuery: Space.get('searchQuery'),
 });
 
 const mapDispatchToProps = {

src/components/common/Header.js

@@ -10,8 +10,19 @@ import { withTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import Styles from '../../Styles';
 import { DRAWER_BUTTON_ID } from '../../config/selectors';
+import SearchSpaceBar from './SearchSpaceBar';
 
-const Header = ({ classes, handleDrawerOpen, isSidebarOpen }) => {
+const styles = theme => ({
+  ...Styles(theme),
+});
+
+const Header = ({
+  classes,
+  handleDrawerOpen,
+  isSidebarOpen,
+  showSearch,
+  handleOnSearch,
+}) => {
   return (
     <AppBar
       position="fixed"
@@ -32,6 +43,9 @@ const Header = ({ classes, handleDrawerOpen, isSidebarOpen }) => {
         >
           <MenuIcon />
         </IconButton>
+        {showSearch ? (
+          <SearchSpaceBar handleOnInputChange={handleOnSearch} />
+        ) : null}
       </Toolbar>
     </AppBar>
   );
@@ -52,12 +66,20 @@ Header.propTypes = {
     formControl: PropTypes.string.isRequired,
     input: PropTypes.string.isRequired,
     button: PropTypes.string.isRequired,
+    toolbarRoot: PropTypes.string.isRequired,
   }).isRequired,
   theme: PropTypes.shape({
     direction: PropTypes.string.isRequired,
   }).isRequired,
   isSidebarOpen: PropTypes.bool.isRequired,
   handleDrawerOpen: PropTypes.func.isRequired,
+  handleOnSearch: PropTypes.func,
+  showSearch: PropTypes.bool,
+};
+
+Header.defaultProps = {
+  showSearch: false,
+  handleOnSearch: () => {},
 };
 
 const mapStateToProps = ({ authentication }) => ({
@@ -68,7 +90,7 @@ const mapDispatchToProps = {};
 
 const ConnectedComponent = connect(mapStateToProps, mapDispatchToProps)(Header);
 
-const StyledComponent = withStyles(Styles, { withTheme: true })(
+const StyledComponent = withStyles(styles, { withTheme: true })(
   ConnectedComponent
 );
 

src/components/common/Main.js

@@ -40,10 +40,14 @@ class Main extends Component {
     style: PropTypes.shape({
       background: PropTypes.string,
     }),
+    showSearch: PropTypes.bool,
+    handleOnSearch: PropTypes.func,
   };
 
   static defaultProps = {
     fullScreen: false,
+    showSearch: false,
+    handleOnSearch: () => {},
     id: null,
     style: {},
   };
@@ -57,13 +61,26 @@ class Main extends Component {
   };
 
   render() {
-    const { classes, children, fullScreen, id, style } = this.props;
+    const {
+      classes,
+      children,
+      fullScreen,
+      id,
+      style,
+      showSearch,
+      handleOnSearch,
+    } = this.props;
     const { open } = this.state;
 
     return (
       <div className={classes.root} style={style}>
         <CssBaseline />
-        <Header isSidebarOpen={open} handleDrawerOpen={this.handleDrawerOpen} />
+        <Header
+          showSearch={showSearch}
+          isSidebarOpen={open}
+          handleDrawerOpen={this.handleDrawerOpen}
+          handleOnSearch={handleOnSearch}
+        />
 
         <Sidebar
           isSidebarOpen={open}