refactor: move no hits case into own component

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const NoHitsSuggestion = ({ title, handleMouseEnter, handleMouseLeave }) => {
+  return (
+    <div
+      className={'no-hits-footer fcc_suggestion_item'}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      <span className='hit-name'>{title}</span>
+    </div>
+  );
+};
+
+NoHitsSuggestion.propTypes = {
+  handleMouseEnter: PropTypes.func.isRequired,
+  handleMouseLeave: PropTypes.func.isRequired,
+  title: PropTypes.string
+};
+
+export default NoHitsSuggestion;

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

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { connectStateResults, connectHits } from 'react-instantsearch-dom';
 import isEmpty from 'lodash/isEmpty';
 import Suggestion from './SearchSuggestion';
+import NoHitsSuggestion from './NoHitsSuggestion';
 
 const CustomHits = connectHits(
   ({
@@ -14,6 +15,7 @@ const CustomHits = connectHits(
     handleHits
   }) => {
     const noHits = isEmpty(hits);
+    const noHitsTitle = 'No tutorials found';
     const footer = [
       {
         objectID: `footer-${searchQuery}`,
@@ -23,13 +25,11 @@ const CustomHits = connectHits(
           : `https://www.freecodecamp.org/news/search/?query=${encodeURIComponent(
               searchQuery
             )}`,
-        title: noHits
+        title: noHits ? noHitsTitle : `See all results for ${searchQuery}`,
-          ? 'No tutorials found'
-          : `See all results for ${searchQuery}`,
         _highlightResult: {
           query: {
             value: noHits
-              ? 'No tutorials found'
+              ? noHitsTitle
               : `
               <ais-highlight-0000000000>
                 See all results for
@@ -56,11 +56,19 @@ const CustomHits = connectHits(
               data-fccobjectid={hit.objectID}
               key={hit.objectID}
             >
+              {noHits ? (
+                <NoHitsSuggestion
+                  handleMouseEnter={handleMouseEnter}
+                  handleMouseLeave={handleMouseLeave}
+                  title={noHitsTitle}
+                />
+              ) : (
                 <Suggestion
                   handleMouseEnter={handleMouseEnter}
                   handleMouseLeave={handleMouseLeave}
                   hit={hit}
                 />
+              )}
             </li>
           ))}
         </ul>

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

@@ -4,16 +4,7 @@ import { Highlight } from 'react-instantsearch-dom';
 
 const Suggestion = ({ hit, handleMouseEnter, handleMouseLeave }) => {
   const dropdownFooter = hit.objectID.includes('footer-');
-  const noHits = hit.title === 'No tutorials found';
+  return (
-  return noHits ? (
-    <div
-      className={'no-hits-footer fcc_suggestion_item'}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-    >
-      <span className='hit-name'>{hit.title}</span>
-    </div>
-  ) : (
     <a
       className={
         dropdownFooter