fix: adjust styles and search behavior when there are no hits (#38073)

fix search bar to show "No tutorials found" and not redirect to search page without hits. change styles to match news.
freeCodeCamp · Jan 20, 2020 · d29bfcd · d29bfcd
1 parent c408cb9
commit d29bfcd
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 23 deletions.
diff --git a/client/src/components/search/searchBar/SearchBar.js b/client/src/components/search/searchBar/SearchBar.js
@@ -112,8 +112,9 @@ export class SearchBar extends Component {
     // return navigate('/search');
 
     // Temporary redirect to News search results page
-    // when non-empty search input submitted
-    return query
+    // when non-empty search input submitted and there
+    // are hits besides the footer
+    return query && hits.length > 1
       ? window.location.assign(
           `https://www.freecodecamp.org/news/search/?query=${encodeURIComponent(
             query

diff --git a/client/src/components/search/searchBar/SearchHits.js b/client/src/components/search/searchBar/SearchHits.js
@@ -13,22 +13,29 @@ const CustomHits = connectHits(
     selectedIndex,
     handleHits
   }) => {
+    const noHits = isEmpty(hits);
     const footer = [
       {
-        objectID: `default-hit-${searchQuery}`,
+        objectID: `footer-${searchQuery}`,
         query: searchQuery,
-        url: `https://www.freecodecamp.org/news/search/?query=${encodeURIComponent(
-          searchQuery
-        )}`,
-        title: `See all results for ${searchQuery}`,
+        url: noHits
+          ? null
+          : `https://www.freecodecamp.org/news/search/?query=${encodeURIComponent(
+              searchQuery
+            )}`,
+        title: noHits
+          ? 'No tutorials found'
+          : `See all results for ${searchQuery}`,
         _highlightResult: {
           query: {
-            value: `
-            See all results for
-            <ais-highlight-0000000000>
-            ${searchQuery}
-            </ais-highlight-0000000000>
-          `
+            value: noHits
+              ? 'No tutorials found'
+              : `
+              <ais-highlight-0000000000>
+                See all results for
+                ${searchQuery}
+              </ais-highlight-0000000000>
+            `
           }
         }
       }

diff --git a/client/src/components/search/searchBar/SearchSuggestion.js b/client/src/components/search/searchBar/SearchSuggestion.js
@@ -1,11 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Highlight } from 'react-instantsearch-dom';
-import { isEmpty } from 'lodash';
 
 const Suggestion = ({ hit, handleMouseEnter, handleMouseLeave }) => {
-  const dropdownFooter = hit.objectID.includes('default-hit-');
-  return isEmpty(hit) || isEmpty(hit.objectID) ? null : (
+  const dropdownFooter = hit.objectID.includes('footer-');
+  const noHits = hit.title === 'No tutorials found';
+  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

diff --git a/client/src/components/search/searchBar/searchbar-base.css b/client/src/components/search/searchBar/searchbar-base.css
@@ -626,10 +626,6 @@ a[class^='ais-'] {
   -webkit-transform: translateY(-50%);
   transform: translateY(-50%);
 }
-.ais-SearchBox-submit {
-  left: 0.3rem;
-  top: 57%;
-}
 .ais-SearchBox-reset {
   right: 0.3rem;
 }

diff --git a/client/src/components/search/searchBar/searchbar.css b/client/src/components/search/searchBar/searchbar.css
@@ -15,13 +15,18 @@
 }
 
 .ais-SearchBox-input {
-  padding: 1px 10px 1px 30px;
+  padding: 0 10px 0 30px;
   font-size: 18px;
   display: inline-block;
   margin-top: 6px;
   height: 26px;
 }
 
+.ais-SearchBox-submit {
+  left: 0.3rem;
+  top: 59.5%;
+}
+
 .fcc_searchBar .ais-SearchBox-input,
 .fcc_searchBar .ais-Hits {
   z-index: 100;
@@ -61,7 +66,7 @@
 
 .fcc_suggestion_item {
   display: block;
-  padding: 8px;
+  padding: 5px;
   color: var(--gray-00) !important;
   text-decoration: none;
 }
@@ -104,13 +109,19 @@ and arrow keys */
 
 /* Dropdown footer */
 .fcc_suggestion_footer {
+  padding: 6.5px 8px 8px;
   border-top: 1.5px solid var(--gray-00);
 }
 
-.fcc_suggestion_footer .hit-name .ais-Highlight .ais-Highlight-nonHighlighted {
+.fcc_suggestion_footer .hit-name .ais-Highlight {
   font-weight: bold;
 }
 
+.no-hits-footer {
+  border-top: 0px;
+  font-weight: 300;
+}
+
 .ais-SearchBox-input {
   width: calc(100vw - 30px);
 }