fix: Clear search query on unmount

client/src/components/search/searchBar/SearchSuggestion.js

@@ -4,7 +4,7 @@ import { Highlight } from 'react-instantsearch-dom';
 import { isEmpty } from 'lodash';
 
 const Suggestion = ({ handleSubmit, hit }) => {
-  return isEmpty(hit) ? null : (
+  return isEmpty(hit) || isEmpty(hit.objectID) ? null : (
     <div className='fcc_suggestion_item' onClickCapture={handleSubmit}>
       <span className='hit-name'>
         {hit.objectID.includes('default-hit-') ? (

client/src/pages/search.js

@@ -1,22 +1,45 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
 import { Index, PoweredBy } from 'react-instantsearch-dom';
+import { Grid, Row, Col } from '@freecodecamp/react-bootstrap';
 
+import { updateSearchQuery } from '../components/search/redux';
 import SearchPageHits from '../components/search/searchPage/SearchPageHits';
 
-function SearchPage() {
+const propTypes = { updateSearchQuery: PropTypes.func.isRequired };
+
+const mapDispatchToProps = { updateSearchQuery };
+
+class SearchPage extends Component {
+  componentWillUnmount() {
+    this.props.updateSearchQuery('');
+  }
+  render() {
     return (
       <Fragment>
         <Index indexName='challenges' />
         <Index indexName='guides' />
         <Index indexName='youtube' />
+        <Grid>
+          <Row>
+            <Col xs={12}>
               <main>
                 <SearchPageHits />
               </main>
               <PoweredBy />
+            </Col>
+          </Row>
+        </Grid>
       </Fragment>
     );
   }
+}
 
 SearchPage.displayName = 'SearchPage';
+SearchPage.propTypes = propTypes;
 
-export default SearchPage;
+export default connect(
+  null,
+  mapDispatchToProps
+)(SearchPage);