Merge pull request #9 from newfold-labs/ui_ux_enhancements

clear input and results on pressing close button

.npmrc

@@ -1 +1,3 @@
-save-exact=true
+save-exact=true
+@newfold-labs:registry=https://npm.pkg.github.com/
+//npm.pkg.github.com/:_authToken=<token>

build/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('lodash', 'react', 'wp-api-fetch', 'wp-data', 'wp-dom-ready', 'wp-edit-post', 'wp-element', 'wp-i18n', 'wp-plugins'), 'version' => 'b5e8999d056078aa6593');
+<?php return array('dependencies' => array('lodash', 'react', 'wp-api-fetch', 'wp-data', 'wp-dom-ready', 'wp-edit-post', 'wp-element', 'wp-i18n', 'wp-plugins'), 'version' => 'f8ef71c8f4b8ded14664');

src/components/HelpCenter.js

@@ -37,7 +37,7 @@ const HelpCenter = (props) => {
       >
         <Index indexName="nfd_help_searchable_posts">
           <Configure hitsPerPage={3} getRankingInfo={true} />
-          <SearchResults />
+          <SearchResults refresh={props.refresh} />
         </Index>
       </InstantSearch>
     </div>

src/components/Modal.js

@@ -1,4 +1,4 @@
-import { useEffect } from "@wordpress/element";
+import { useEffect, useState } from "@wordpress/element";
 import { __ } from "@wordpress/i18n";
 //
 import { ReactComponent as CloseIcon } from "../icons/close.svg";
@@ -14,22 +14,37 @@ const Modal = ({ onClose }) => {
     toggleHelp(helpVisible);
   }, []);
 
+  const [refresh, setRefresh] = useState(false);
+
   return (
     <div className="modal">
       <div className="modal-header">
         <h3 className="heading">
           <span className="icon">
             <Help />
           </span>
-          {__('Help Center', 'wp-module-help-center')}
+          {__("Help Center", "wp-module-help-center")}
         </h3>
-        <button className="close-button" onClick={onClose}>
+        <button
+          className="close-button"
+          onClick={() => {
+            onClose();
+            setRefresh(!refresh);
+          }}
+        >
           <div className="icon-button">
             <CloseIcon />
           </div>
         </button>
       </div>
-      <HelpCenter closeHelp={onClose} />
+      <HelpCenter
+        closeHelp={() => {
+          onClose();
+          console.log("Setting to refresh");
+          setRefresh(!refresh);
+        }}
+        refresh={refresh}
+      />
     </div>
   );
 };

src/components/SearchResults.js

@@ -10,7 +10,7 @@ import { ResultContent } from "./ResultContent";
 import { Analytics, LocalStorageUtils } from "../utils";
 import Loader from "./Loader";
 
-const SearchResults = () => {
+const SearchResults = (props) => {
   const [isLoading, setIsLoading] = useState(false);
   const [noResult, setNoResult] = useState(false);
   const [searchInput, setSearchInput] = useState("");
@@ -25,14 +25,19 @@ const SearchResults = () => {
     setPostId(postId);
     LocalStorageUtils.persistResult(resultContentFormatted, postId);
     LocalStorageUtils.persistSearchInput(searchInput);
-    Analytics.sendEvent('search', postId);
+    Analytics.sendEvent("search", postId);
   };
 
+  useEffect(() => {
+    setSearchInput("");
+    setResultContent("");
+    refine("");
+  }, [props.refresh]);
+
   useEffect(() => {
     // Populate the results from local storage if they exist
-    const {
-      content: currentResultContent, postId: currentResultPostId
-    } = LocalStorageUtils.getResultInfo();
+    const { content: currentResultContent, postId: currentResultPostId } =
+      LocalStorageUtils.getResultInfo();
     if (currentResultContent) {
       setResultContent(currentResultContent);
     }
@@ -48,15 +53,21 @@ const SearchResults = () => {
   }, []);
 
   const getResultMatches = (proximity, words) => {
-    return (proximity / words) >= 0.75;
-  }
+    return proximity / words >= 0.75;
+  };
 
   const getAIResult = async () => {
     setIsLoading(true);
     try {
       // Check if the algolia results are close enough
       const hits = results.hits;
-      const resultMatches = hits.length > 0 ? getResultMatches(hits[0]._rankingInfo.proximityDistance, hits[0]._rankingInfo.words) : false;
+      const resultMatches =
+        hits.length > 0
+          ? getResultMatches(
+              hits[0]._rankingInfo.proximityDistance,
+              hits[0]._rankingInfo.words
+            )
+          : false;
       if (resultMatches) {
         populateSearchResult(hits[0].content, hits[0].post_id, searchInput);
         return;
@@ -152,7 +163,11 @@ const SearchResults = () => {
               searchTitle={result.post_title}
               onGo={() => {
                 setSearchInput(result.post_title);
-                populateSearchResult(result.content, result.post_id, result.post_title);
+                populateSearchResult(
+                  result.content,
+                  result.post_id,
+                  result.post_title
+                );
               }}
             />
           </>

src/index.js

@@ -1,7 +1,7 @@
 import { PluginSidebar } from "@wordpress/edit-post";
 import React, { render, useState, useEffect } from "@wordpress/element";
 import { registerPlugin } from "@wordpress/plugins";
-import domReady from '@wordpress/dom-ready';
+import domReady from "@wordpress/dom-ready";
 import { HiiveAnalytics } from "@newfold-labs/js-utility-ui-analytics";
 import { __ } from "@wordpress/i18n";
 import "../styles.scss";
@@ -12,15 +12,15 @@ import { Analytics, LocalStorageUtils } from "./utils";
 
 domReady(() => {
   // Run only once DOM is ready, else this won't work.
-  if ( window?.nfdHelpCenter?.restUrl ) {
+  if (window?.nfdHelpCenter?.restUrl) {
     HiiveAnalytics.initialize({
-      namespace: 'nfd-help-center',
+      namespace: "nfd-help-center",
       urls: {
         single: window.nfdHelpCenter.restUrl + "/newfold-data/v1/events",
       },
     });
   }
-})
+});
 
 const wpContentContainer = document.getElementById("wpcontent");
 
@@ -92,10 +92,12 @@ window.newfoldEmbeddedHelp.renderEmbeddedHelp = function renderEmbeddedHelp() {
   helpContainer.style.display = "none";
   wpContentContainer.appendChild(helpContainer);
   const DOM_TARGET = document.getElementById("nfd-help-center");
+
   render(
     <Modal
       onClose={() => {
         toggleHelp(false);
+        LocalStorageUtils.clear();
       }}
     />,
     DOM_TARGET

src/utils.js

@@ -41,6 +41,11 @@ export const LocalStorageUtils = {
   persistSearchInput: (searchInput) => {
     localStorage.setItem("searchInput", searchInput);
   },
+  clear: () => {
+    localStorage.removeItem("helpResultContent");
+    localStorage.removeItem("helpPostId");
+    localStorage.removeItem("searchInput");
+  },
   getResultInfo: () => {
     return {
       content: localStorage.getItem("helpResultContent"),

styles.scss

@@ -216,6 +216,7 @@
   display: block !important;
   border: 1px solid #DCDCDC;
   box-shadow: -5px 0px 36px rgba(0, 0, 0, 0.25);
+  z-index: 100;
 }
 
 .wpcontent-container {