WIP first raw of fix on search

sites/platform/static/scripts/xss/src/components/Suggestions.js

@@ -10,22 +10,25 @@ import DOMPurify from 'dompurify';
 const Suggestions = ({ hits }) => {
   const results = hits.map((r) => (
     <li className="mb-4 border-b border-grey-dark" key={r.relurl}>
-      <h3 className="my-2" dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(r.section) }} />
+      <h3 className="my-2">
+        {DOMPurify.sanitize(r.section)}
+      </h3>
       <p className="mb-4">
         <a className="text-skye-dark hover:underline" href={r.url}>
-          <span dangerouslySetInnerHTML={{ __html: `${DOMPurify.sanitize(r.title)}` }} />
+          <span>{DOMPurify.sanitize(r.title)}</span>
         </a>
       </p>
     </li>
-  ))
+  ));
 
   return (
     <div>
-      <div className="hits"><ul>{results}</ul></div>
-      {' '}
+      <div className="hits">
+        <ul>{results}</ul>
+      </div>
     </div>
-  )
-}
+  );
+};
 
 Suggestions.propTypes = {
   hits: PropTypes.arrayOf(

sites/platform/static/scripts/xss/src/containers/Search.js

@@ -38,7 +38,7 @@ const Search = ({ fullPage }) => {
     const url = new URL(window.location.href)
     urlQuery = url.pathname.replace('.html', '').replaceAll('/', ' ').replaceAll('-', ' ')
   }
-
+  const [setError] = useState(null)
   const limit = fullPage ? maxResults : 7
 
   const getInfo = (infoConfig, infoQuery) => {
@@ -48,6 +48,8 @@ const Search = ({ fullPage }) => {
         setConfig(value)
       })
     }
+
+
     axios.get(`${infoConfig.url}indexes/${infoConfig.index}/search?attributesToCrop=text&cropLength=200&attributesToHighlight=text,keywords&q=${infoQuery}&limit=${limit}&attributesToRetrieve=title,keywords,text,url,site,section`, { params: {}, headers: { Authorization: `Bearer ${infoConfig.public_api_key}` } })
       .then(({ data }) => {
         setHits({
@@ -58,7 +60,7 @@ const Search = ({ fullPage }) => {
           apidocs: data.hits.filter((hit) => hit.site === 'apidocs'),
         })
       })
-      .catch((err) => console.error(err))
+      .catch((err) => setError(err.message))
   }
 
   useEffect(() => {

sites/upsun/static/scripts/xss/src/components/SuggestionsPrimary.js

@@ -6,13 +6,21 @@
 // which in this case are documents coming from the public documentation.
 // These results are presented in a separate section in the dropdown,
 // and prioritized as primary results via the index's `rank` attribute.
+function pushSearchResult(title, url) {
+  window.dataLayer.push({
+    event: 'click_search_result',
+    click_name: title,
+    link_url: url
+  })
+}
+
 const SuggestionsPrimary = ({ hits, title }) => {
   const results = hits.map((r) => (
     <li className="mb-4 border-b border-grey-dark" key={r.relurl}>
       <h3 className="mb-2">
-        <a className="text-skye-dark hover:underline" onClick={`dataLayer.push({'event': 'click_search_result', 'click_name': ${r.title}, 'link_url': ${r.url})`} href={r.url}>
+        <a className="text-skye-dark hover:underline" href={r.url} onClick={() => pushSearchResult(r.title, r.url)}>
           <b dangerouslySetInnerHTML={{ __html: `${DOMPurify.sanitize(r.section)} | ` }} />
           <span dangerouslySetInnerHTML={{ __html: `${DOMPurify.sanitize(r.title)}` }} />
         </a>
       </h3>
       {/* Add keywords if they match */}

sites/upsun/static/scripts/xss/src/containers/Search.js

@@ -39,6 +39,7 @@ const Search = ({ fullPage }) => {
     urlQuery = url.pathname.replace('.html', '').replaceAll('/', ' ').replaceAll('-', ' ')
   }
 
+  const [setError] = useState(null)
   const limit = fullPage ? maxResults : 7
 
   const getInfo = (infoConfig, infoQuery) => {
@@ -61,7 +62,7 @@ const Search = ({ fullPage }) => {
           apidocs: data.hits.filter((hit) => hit.site === 'apidocs'),
         })
       })
-      .catch((err) => console.error(err))
+      .catch((err) => setError(err.message))
   }
 
   useEffect(() => {