Merge pull request #13 from newfold-labs/fix_visiblity

fire local storage events when changing visibility

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' => 'f8ef71c8f4b8ded14664');
+<?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' => '8fb0e0925d501ddd708d');

src/components/HelpCenter.js

@@ -11,7 +11,7 @@ const HelpCenter = (props) => {
     "eef54890add97ea2583ff1e417ff86ea"
   );
 
-  const visible = LocalStorageUtils.getHelpVisible();
+  const [visible, setVisible] = useState(false);
   const [helpEnabled, setHelpEnabled] = useState(false);
   const getHelpStatus = async () => {
     try {
@@ -25,6 +25,20 @@ const HelpCenter = (props) => {
     getHelpStatus();
   }, []);
 
+  useEffect(() => {
+    const updateVisibility = () => {
+      setVisible(LocalStorageUtils.getHelpVisible());
+    };
+
+    // Add the event listener on component mount
+    window.addEventListener("storage", updateVisibility);
+
+    // Remove the event listener when the component unmounts
+    return () => {
+      window.removeEventListener("storage", updateVisibility);
+    };
+  }, []);
+
   if (!helpEnabled || !visible) {
     return <></>;
   }

src/components/HelpCenterSidebar.js

@@ -0,0 +1,46 @@
+import { useEffect, useState } from "@wordpress/element";
+import algoliasearch from "algoliasearch";
+import { Configure, Index, InstantSearch } from "react-instantsearch-hooks-web";
+import SearchResults from "./SearchResults";
+import { CapabilityAPI, LocalStorageUtils } from "../utils";
+
+const HelpCenterSidebar = (props) => {
+  // Set up the instant search results
+  const searchClient = algoliasearch(
+    "AVE0JWZU92",
+    "eef54890add97ea2583ff1e417ff86ea"
+  );
+
+  const [helpEnabled, setHelpEnabled] = useState(false);
+  const getHelpStatus = async () => {
+    try {
+      const response = await CapabilityAPI.getHelpCenterCapability();
+      setHelpEnabled(response);
+    } catch (exception) {
+      setHelpEnabled(false);
+    }
+  };
+  useEffect(() => {
+    getHelpStatus();
+  }, []);
+
+  if (!helpEnabled) {
+    return <></>;
+  }
+
+  return (
+    <div className="nfd-help-center">
+      <InstantSearch
+        searchClient={searchClient}
+        indexName="nfd_help_searchable_posts"
+      >
+        <Index indexName="nfd_help_searchable_posts">
+          <Configure hitsPerPage={3} getRankingInfo={true} />
+          <SearchResults refresh={props.refresh} />
+        </Index>
+      </InstantSearch>
+    </div>
+  );
+};
+
+export default HelpCenterSidebar;

src/components/Modal.js

@@ -40,7 +40,6 @@ const Modal = ({ onClose }) => {
       <HelpCenter
         closeHelp={() => {
           onClose();
-          console.log("Setting to refresh");
           setRefresh(!refresh);
         }}
         refresh={refresh}

src/components/SearchResults.js

@@ -156,10 +156,11 @@ const SearchResults = (props) => {
           </b>
         </p>
       )}
-      {results.hits.map((result) => {
+      {results.hits.map((result, index) => {
         return (
           <>
             <AlgoliaResult
+              key={index}
               searchTitle={result.post_title}
               onGo={() => {
                 setSearchInput(result.post_title);

src/index.js

@@ -1,14 +1,17 @@
+import React, { render, useState } from "@wordpress/element";
+import { __ } from "@wordpress/i18n";
+//
 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 { HiiveAnalytics } from "@newfold-labs/js-utility-ui-analytics";
-import { __ } from "@wordpress/i18n";
+//
 import "../styles.scss";
-import HelpCenter from "./components/HelpCenter";
 import Modal from "./components/Modal";
 import { ReactComponent as Help } from "./icons/help-plugin-sidebar-icon.svg";
-import { Analytics, LocalStorageUtils } from "./utils";
+import { Analytics, LocalStorageUtils, CapabilityAPI } from "./utils";
+import HelpCenterSidebar from "./components/HelpCenterSidebar";
 
 domReady(() => {
   // Run only once DOM is ready, else this won't work.
@@ -29,10 +32,10 @@ export const toggleHelp = (visible) => {
   let nfdHelpContainer = document.getElementById("nfd-help-center");
   nfdHelpContainer.classList.toggle("help-container", visible);
   LocalStorageUtils.updateHelpVisible(visible);
+  window.dispatchEvent(new Event("storage"));
 };
 
-window.newfoldEmbeddedHelp = {};
-window.newfoldEmbeddedHelp.toggleNFDLaunchedEmbeddedHelp = () => {
+const toggleHelpViaLocalStorage = () => {
   const helpVisible = LocalStorageUtils.getHelpVisible();
   if (Object.is(helpVisible, undefined)) {
     toggleHelp(true);
@@ -43,41 +46,30 @@ window.newfoldEmbeddedHelp.toggleNFDLaunchedEmbeddedHelp = () => {
   Analytics.sendEvent("page", "closed");
 };
 
-window.newfoldEmbeddedHelp.toggleNFDUnlaunchedEmbeddedHelp =
-  function toggleNFDUnlaunchedEmbeddedHelp() {
-    let helpContainer = document.getElementById("nfd-help-center");
-    wpContentContainer.removeChild(helpContainer);
-    newfoldEmbeddedHelp.renderEmbeddedHelp();
-  };
+window.newfoldEmbeddedHelp = {};
+window.newfoldEmbeddedHelp.toggleNFDLaunchedEmbeddedHelp = () => {
+  toggleHelpViaLocalStorage();
+};
 
 //For rendering embedded help in Add, edit and View Pages
 const HelpCenterPluginSidebar = () => {
   const [helpEnabled, setHelpEnabled] = useState(false);
-  const getHelpStatus = async () => {
-    try {
-      const response = await CapabilityAPI.getHelpCenterCapability();
-      setHelpEnabled(response);
-    } catch (exception) {
-      setHelpEnabled(false);
-    }
-  };
-  useEffect(() => {
-    getHelpStatus();
-  }, []);
-
-  if (!helpEnabled) {
-    return <></>;
-  }
+  CapabilityAPI.getHelpCenterCapability().then((response) => {
+    setHelpEnabled(response);
+  });
 
   return (
-    <PluginSidebar
-      name="nfd-help-sidebar"
-      className="nfd-plugin-sidebar"
-      title="Help Center"
-      icon={<Help />}
-    >
-      <HelpCenter />
-    </PluginSidebar>
+    <>
+      <PluginSidebar
+        name="nfd-help-sidebar"
+        className="nfd-plugin-sidebar"
+        title="Help Center"
+        icon={<Help />}
+        isPinnable={helpEnabled}
+      >
+        <HelpCenterSidebar />
+      </PluginSidebar>
+    </>
   );
 };