Merge branch 'MarkosKon-highlight-clear-input' into develop

Author: lukewhitehouse

package.json

@@ -30,6 +30,7 @@
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-helmet": "^5.2.0",
+    "react-highlight-words": "^0.16.0",
     "react-typography": "^0.16.19",
     "typeface-merriweather": "0.0.72",
     "typeface-montserrat": "0.0.54",

src/components/searchResults.js

@@ -1,35 +1,45 @@
-import React from 'react';
+import React from "react"
+import Highlighter from "react-highlight-words"
 
 const SearchResults = ({ query, results }) => (
   <section aria-label="Search results for all posts">
-    {!!results.length && query && 
+    {!!results.length && query && (
       <h2
         className="search-results-count"
         id="search-results-count"
         aria-live="assertive"
-      >Found {results.length} posts on "{query}"</h2>
-    }
-    {!!results.length &&
+      >
+        Found {results.length} posts on "{query}"
+      </h2>
+    )}
+    {!!results.length && (
       <ol className="search-results-list">
-        {results.map(({
-          title,
-          url,
-          date,
-          description
-        }) => (
+        {results.map(({ title, url, date, description }) => (
           <li key={title}>
             <h3 className="search-results-list__heading">
               <a href={url} className="search-results-list__link">
-                {title}
+                <Highlighter
+                  searchWords={[query]}
+                  autoEscape={true}
+                  textToHighlight={title}
+                />
               </a>
             </h3>
-            <small>{(new Date(date).toLocaleString('en-GB'))}</small>
-            {description && <p>{description}</p>}
+            <small>{new Date(date).toLocaleString("en-GB")}</small>
+            {description && (
+              <p>
+                <Highlighter
+                  searchWords={[query]}
+                  autoEscape={true}
+                  textToHighlight={description}
+                />
+              </p>
+            )}
           </li>
         ))}
       </ol>
-    }
+    )}
   </section>
-);
+)
 
-export default SearchResults;
+export default SearchResults

src/pages/search.js

@@ -18,6 +18,7 @@ const Search = ({
         setResults(posts);
       });
     }
+    if (!searchQuery) setResults([])
   }, [location.search]);
 
   return (

yarn.lock

@@ -5628,6 +5628,11 @@ hex-color-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
   integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
 
+highlight-words-core@^1.2.0:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/highlight-words-core/-/highlight-words-core-1.2.2.tgz#1eff6d7d9f0a22f155042a00791237791b1eeaaa"
+  integrity sha512-BXUKIkUuh6cmmxzi5OIbUJxrG8OAk2MqoL1DtO3Wo9D2faJg2ph5ntyuQeLqaHJmzER6H5tllCDA9ZnNe9BVGg==
+
 hmac-drbg@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -7296,6 +7301,11 @@ mem@^4.0.0:
     mimic-fn "^2.0.0"
     p-is-promise "^2.0.0"
 
+memoize-one@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-4.1.0.tgz#a2387c58c03fff27ca390c31b764a79addf3f906"
+  integrity sha512-2GApq0yI/b22J2j9rhbrAlsHb0Qcz+7yWxeLG8h+95sl1XPUgeLimQSOdur4Vw7cUhrBHwaUZxWFZueojqNRzA==
+
 memory-fs@^0.4.0, memory-fs@^0.4.1, memory-fs@~0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
@@ -9088,7 +9098,7 @@ prompts@^2.0.4:
     kleur "^3.0.2"
     sisteransi "^1.0.0"
 
-prop-types@^15.5.4, prop-types@^15.6.1, prop-types@^15.6.2:
+prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.1, prop-types@^15.6.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -9320,6 +9330,15 @@ react-helmet@^5.2.0:
     prop-types "^15.5.4"
     react-side-effect "^1.1.0"
 
+react-highlight-words@^0.16.0:
+  version "0.16.0"
+  resolved "https://registry.yarnpkg.com/react-highlight-words/-/react-highlight-words-0.16.0.tgz#4b4b9824e3d2b98789d3e3b3aedb5e961ae1b7cf"
+  integrity sha512-q34TwCSJOL+5pVDv6LUj3amaoyXdNDwd7zRqVAvceOrO9g1haWLAglK6WkGLMNUa3PFN8EgGedLg/k8Gpndxqg==
+  dependencies:
+    highlight-words-core "^1.2.0"
+    memoize-one "^4.0.0"
+    prop-types "^15.5.8"
+
 react-hot-loader@^4.6.2:
   version "4.8.4"
   resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-4.8.4.tgz#357ba342e367fd42d6a870a9c0601c23fa0730c6"