From cfbcff14a7f23f20523b1575fe0240da7e6726cf Mon Sep 17 00:00:00 2001
From: "thomas.ekstrand" <thomas.ekstrand@bigcommerce.com>
Date: Tue, 13 Feb 2024 10:07:03 -0600
Subject: [PATCH] Use Docusaurus BrowserOnly for state

---
 src/components/FaqAccordion.tsx | 147 ++++++++++++++++++--------------
 1 file changed, 83 insertions(+), 64 deletions(-)

diff --git a/src/components/FaqAccordion.tsx b/src/components/FaqAccordion.tsx
index 0dee5410..d1c8c3e8 100644
--- a/src/components/FaqAccordion.tsx
+++ b/src/components/FaqAccordion.tsx
@@ -1,4 +1,5 @@
-import React from "react";
+import React, { useEffect, useState } from 'react';
+import BrowserOnly from '@docusaurus/BrowserOnly';
 import {
   Accordion,
   AccordionItem,
@@ -20,14 +21,58 @@ export interface Faq {
  * @type {Function}
  */
 const getOpenFaqItemsFromUrl = (slug: string): string[] => {
-  // Use URLSearchParams to parse the query parameters from the current URL
+  if (typeof window !== 'undefined') {
+    // Use URLSearchParams to parse the query parameters from the current URL
+    const searchParams = new URLSearchParams(window.location.search);
+
+    // Get the 'openFaqItems' parameter as a comma-separated string
+    const openFaqItemsString = searchParams.get(`openFaqItems-${slug}`);
+
+    // If the parameter exists, split it by commas into an array; otherwise, return an empty array
+    console.log(slug, openFaqItemsString ? openFaqItemsString.split(",") : []);
+    return openFaqItemsString ? openFaqItemsString.split(",") : [];
+  }
+};
+
+/**
+* Updates query parameters in the url when items are opened
+* so that a link can be shared with the faq item already opened
+*/
+const handleChange = (
+  openFaqItems: (string | number)[],
+  slug: string
+): void => {
+  // Get current url params
   const searchParams = new URLSearchParams(window.location.search);
 
-  // Get the 'openFaqItems' parameter as a comma-separated string
-  const openFaqItemsString = searchParams.get(`openFaqItems-${slug}`);
+  if (openFaqItems.length > 0) {
+    // Convert openFaqItems to a comma-separated string and update/add the parameter
+    searchParams.set(
+      `openFaqItems-${slug}`,
+      openFaqItems.map(String).join(","),
+    );
+  } else {
+    // If openFaqItems is empty, remove the parameter from the URL
+    searchParams.delete(`openFaqItems-${slug}`);
+  }
 
-  // If the parameter exists, split it by commas into an array; otherwise, return an empty array
-  return openFaqItemsString ? openFaqItemsString.split(",") : [];
+  // Construct the new URL, preserve existing parameters
+  const newUrl = `${window.location.protocol}//${window.location.host}${
+    window.location.pathname
+  }?${searchParams.toString()}`;
+
+  // Use history.pushState to change the URL without reloading the page
+  window.history.pushState({ path: newUrl }, "", newUrl);
+};
+
+/**
+ * We need to get the query params using docusaurus' router
+ * because `window` isn't available server side
+ * @return {[type]} [description]
+ */
+const useQuery = () => {
+  const { search } = useLocation();
+  return React.useMemo(() => new URLSearchParams(search), [search]);
 };
 
 export const FaqAccordion = ({
@@ -48,64 +93,38 @@ export const FaqAccordion = ({
     })),
   };
 
-  // Use the getOpenFaqItemsFromUrl function to set the
-  // initial state of preExpanded based on URL parameters
-  const [preExpanded, setPreExpanded] = React.useState<string[]>(
-    getOpenFaqItemsFromUrl(slug),
-  );
-
-  /**
-   * Updates query parameters in the url when items are opened
-   * so that a link can be shared with the faq item already opened
-   */
-  const handleChange = (openFaqItems: (string | number)[]): void => {
-    // Get current url params
-    const searchParams = new URLSearchParams(window.location.search);
-
-    if (openFaqItems.length > 0) {
-      // Convert openFaqItems to a comma-separated string and update/add the parameter
-      searchParams.set(
-        `openFaqItems-${slug}`,
-        openFaqItems.map(String).join(","),
-      );
-    } else {
-      // If openFaqItems is empty, remove the parameter from the URL
-      searchParams.delete(`openFaqItems-${slug}`);
-    }
-
-    // Construct the new URL, preserve existing parameters
-    const newUrl = `${window.location.protocol}//${window.location.host}${
-      window.location.pathname
-    }?${searchParams.toString()}`;
-
-    // Use history.pushState to change the URL without reloading the page
-    window.history.pushState({ path: newUrl }, "", newUrl);
-  };
-
   return (
-    <>
-      <script
-        type="application/ld+json"
-        // biome-ignore lint: we need dangerouslySetInnerHTML here, and since we're the ones setting the content it's should be safe
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(faqStructuredData) }}
-      />
-      <Accordion
-        allowMultipleExpanded={true}
-        allowZeroExpanded={true}
-        onChange={handleChange}
-        preExpanded={preExpanded}
-      >
-        {rows.map((row, index) => (
-          <AccordionItem>
-            <AccordionItemHeading aria-level="2">
-              <AccordionItemButton>{row.title}</AccordionItemButton>
-            </AccordionItemHeading>
-            <AccordionItemPanel>
-              <ReactMarkdown>{row.content}</ReactMarkdown>
-            </AccordionItemPanel>
-          </AccordionItem>
-        ))}
-      </Accordion>
-    </>
+    <BrowserOnly fallback={<div>Loading FAQ's...</div>}>
+      {() => {
+        return (
+          <>
+            <script
+              type="application/ld+json"
+              // biome-ignore lint: we need dangerouslySetInnerHTML here, and since we're the ones setting the content it's should be safe
+              dangerouslySetInnerHTML={{ __html: JSON.stringify(faqStructuredData) }}
+            />
+            <Accordion
+              allowMultipleExpanded={true}
+              allowZeroExpanded={true}
+              onChange={(itemUuids) => {
+                handleChange(itemUuids, slug)
+              }}
+              preExpanded={getOpenFaqItemsFromUrl(slug)}
+            >
+              {rows.map((row, index) => (
+                <AccordionItem key={index}>
+                  <AccordionItemHeading aria-level="2">
+                    <AccordionItemButton>{row.title}</AccordionItemButton>
+                  </AccordionItemHeading>
+                  <AccordionItemPanel>
+                    <ReactMarkdown>{row.content}</ReactMarkdown>
+                  </AccordionItemPanel>
+                </AccordionItem>
+              ))}
+            </Accordion>
+          </>
+        );
+      }}
+    </BrowserOnly>
   );
 };