Refactor support dropdown to fix errors on build

This refactor is necessary because the error `[cause]: TypeError: Layout_styles_module_default is not a function` occurred. After trying to fix this issue by changing the import for **styles.module.css** to the global **custom.css** file instead, the error `[cause]: ReferenceError: Cannot access 'SupportDropdownMenu' before initialization` occurred. This refactor resolves those issues by ensuring that the support dropdown menu component is initialized first before the Layout component is built.

Author: josh-wong

src/components/Support/SupportDropdownMenu.tsx

@@ -1,42 +1,44 @@
-import React, { useState, useEffect, useRef } from 'react';
-import AssistantModal from './AssistantModal'; // Import the AssistantModal component for the chatbot.
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; // Import the FontAwesomeIcon component.
-import { faChevronDown } from '@fortawesome/free-solid-svg-icons'; // Import the icon.
+import React, { useState, useEffect, useRef, lazy, Suspense, MouseEvent } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
 import { useDoc } from '@docusaurus/plugin-content-docs/client';
-import { useLocation } from "@docusaurus/router"; // Import for location detection.
+import { useLocation } from "@docusaurus/router";
+
+// Lazy-load AssistantModal
+const AssistantModal = lazy(() => import('./AssistantModal'));
 
 const SupportDropdownMenu: React.FC = () => {
-  const [isOpen, setIsOpen] = useState(false); // For dropdown visibility
-  const [isModalOpen, setIsModalOpen] = useState(false); // For modal visibility
-  const [storedUrl, setStoredUrl] = useState<string | null>(null); // For storing the URL
-  const dropdownRef = useRef<HTMLDivElement>(null);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
+  const [storedUrl, setStoredUrl] = useState<string | null>(null);
+  const dropdownRef = useRef<HTMLDivElement | null>(null);
   const location = useLocation();
 
   // Get document metadata from Docusaurus.
   const { metadata } = useDoc();
-  const docTitle = metadata?.title || "Issue with documentation page"; // Use document title or fallback.
+  const docTitle: string = metadata?.title || "Issue with documentation page";
 
   // Detect the language based on the URL path.
-  const isJapanese = location.pathname.startsWith("/ja-jp");
+  const isJapanese: boolean = location.pathname.startsWith("/ja-jp");
 
   useEffect(() => {
-    // Store the current URL in localStorage when the component first mounts.
-    const currentUrl = `https://scalardb.scalar-labs.com${location.pathname}`;
-    localStorage.setItem("currentUrl", currentUrl);
-
-    // Retrieve stored URL (if available).
-    const savedUrl = localStorage.getItem("currentUrl");
-    if (savedUrl) {
-      setStoredUrl(savedUrl);
+    if (typeof window !== "undefined") {
+      const currentUrl = `https://scalardb.scalar-labs.com${location.pathname}`;
+      localStorage.setItem("currentUrl", currentUrl);
+
+      const savedUrl = localStorage.getItem("currentUrl");
+      if (savedUrl) {
+        setStoredUrl(savedUrl);
+      }
     }
   }, [location]);
 
   const toggleDropdown = () => {
     setIsOpen((prev) => !prev);
   };
 
-  const openModal = (event: React.MouseEvent) => {
-    event.preventDefault(); // Prevent default anchor behavior.
+  const openModal = (event: MouseEvent<HTMLAnchorElement>) => {
+    event.preventDefault();
     setIsModalOpen(true);
     setIsOpen(false);
   };
@@ -46,23 +48,23 @@ const SupportDropdownMenu: React.FC = () => {
   };
 
   const handleSupportClick = () => {
-    // Get the stored URL or fall back to the current URL.
-    const finalUrl = storedUrl || `https://scalardb.scalar-labs.com${location.pathname}`;
-    const reportUrl = `https://support.scalar-labs.com/hc/ja/requests/new?ticket_form_id=8641483507983&tf_11847415366927=${encodeURIComponent(finalUrl)}`;
+    if (typeof window !== "undefined") {
+      const finalUrl = storedUrl || `https://scalardb.scalar-labs.com${location.pathname}`;
+      const reportUrl = `https://support.scalar-labs.com/hc/ja/requests/new?ticket_form_id=8641483507983&tf_11847415366927=${encodeURIComponent(finalUrl)}`;
 
-    // Open the support link in a new tab.
-    window.open(reportUrl, "_blank");
+      window.open(reportUrl, "_blank");
+    }
   };
 
-  // Generate GitHub issue URL dynamically.
-  const repoUrl = "https://github.com/scalar-labs/docs-scalardb/issues/new";
-  const issueTitle = encodeURIComponent(
-    isJapanese ? `フィードバック: \`${docTitle}\` ページ` : `Feedback: \`${docTitle}\` page`
-  );
+  const githubIssueUrl: string = typeof window !== "undefined" ? (() => {
+    const repoUrl = "https://github.com/scalar-labs/docs-scalardb/issues/new";
+    const issueTitle = encodeURIComponent(
+      isJapanese ? `フィードバック: \`${docTitle}\` ページ` : `Feedback: \`${docTitle}\` page`
+    );
 
-  const issueBody = encodeURIComponent(
-    isJapanese
-      ? `**ドキュメントページの URL:** ${window.location.href.replace(/#.*$/, '')}
+    const issueBody = encodeURIComponent(
+      isJapanese
+        ? `**ドキュメントページの URL:** ${window.location.href.replace(/#.*$/, '')}
 
 ## 期待される動作
 
@@ -80,7 +82,7 @@ const SupportDropdownMenu: React.FC = () => {
 
 該当する場合は、スクリーンショットを添付してください。
 `
-      : `**Documentation page URL:** ${window.location.href.replace(/#.*$/, '')}
+        : `**Documentation page URL:** ${window.location.href.replace(/#.*$/, '')}
 
 ## Expected behavior
 
@@ -98,13 +100,13 @@ If the issue is reproducible, please list the steps to reproduce it.
 
 If applicable, add screenshots to help explain your problem.
 `
-  );
+    );
 
-  const githubIssueUrl = `${repoUrl}?title=${issueTitle}&body=${issueBody}&labels=documentation`;
+    return `${repoUrl}?title=${issueTitle}&body=${issueBody}&labels=documentation`;
+  })() : "#";
 
-  // Close dropdown when clicking outside of it.
   useEffect(() => {
-    function handleClickOutside(event: MouseEvent) {
+    function handleClickOutside(event: MouseEvent | Event) {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
         setIsOpen(false);
       }
@@ -151,7 +153,11 @@ If applicable, add screenshots to help explain your problem.
         </div>
       )}
 
-      {isModalOpen && <AssistantModal isOpen={isModalOpen} onClose={closeModal} />}
+      {isModalOpen && (
+        <Suspense fallback={<div>Loading...</div>}>
+          <AssistantModal isOpen={isModalOpen} onClose={closeModal} />
+        </Suspense>
+      )}
     </div>
   );
 };

src/theme/DocItem/Layout/index.tsx

@@ -1,7 +1,8 @@
-import React, {type ReactNode} from 'react';
+import SupportDropdownMenu from '../../../components/Support/SupportDropdownMenu';
+import React from 'react';
 import clsx from 'clsx';
-import {useWindowSize} from '@docusaurus/theme-common';
-import {useDoc} from '@docusaurus/plugin-content-docs/client';
+import { useWindowSize } from '@docusaurus/theme-common';
+import { useDoc } from '@docusaurus/plugin-content-docs/client';
 import DocItemPaginator from '@theme/DocItem/Paginator';
 import DocVersionBanner from '@theme/DocVersionBanner';
 import DocVersionBadge from '@theme/DocVersionBadge';
@@ -11,40 +12,41 @@ import DocItemTOCDesktop from '@theme/DocItem/TOC/Desktop';
 import DocItemContent from '@theme/DocItem/Content';
 import DocBreadcrumbs from '@theme/DocBreadcrumbs';
 import ContentVisibility from '@theme/ContentVisibility';
-import type {Props} from '@theme/DocItem/Layout';
-import SupportDropdownMenu from '../../../components/Support/SupportDropdownMenu'; // Import the support dropdown component.
 
 import styles from './styles.module.css';
 
-/**
- * Decide if the ToC should be rendered, on mobile or desktop viewports.
- */
-function useDocTOC() {
-  const {frontMatter, toc} = useDoc();
-  const windowSize = useWindowSize();
+// Define the type for the useDocTOC return value.
+interface DocTOC {
+  hidden: boolean;
+  mobile?: JSX.Element;
+  desktop?: JSX.Element;
+}
 
+// Type for the DocItemLayout props
+interface DocItemLayoutProps {
+  children: React.ReactNode;
+}
+
+// Hook to handle the Table of Contents visibility and rendering
+function useDocTOC(): DocTOC {
+  const { frontMatter, toc } = useDoc();
+  const windowSize = useWindowSize();
   const hidden = frontMatter.hide_table_of_contents;
   const canRender = !hidden && toc.length > 0;
 
-  const mobile = canRender ? <DocItemTOCMobile /> : undefined;
-
-  const desktop =
-    canRender && (windowSize === 'desktop' || windowSize === 'ssr') ? (
-      <DocItemTOCDesktop />
-    ) : undefined;
-
   return {
     hidden,
-    mobile,
-    desktop,
+    mobile: canRender ? <DocItemTOCMobile /> : undefined,
+    desktop: canRender && (windowSize === 'desktop' || windowSize === 'ssr') ? <DocItemTOCDesktop /> : undefined,
   };
 }
 
-export default function DocItemLayout({children}: Props): ReactNode {
+// DocItemLayout component
+const DocItemLayout: React.FC<DocItemLayoutProps> = ({ children }) => {
   const docTOC = useDocTOC();
-  const {metadata, frontMatter} = useDoc(); // Get the front-matter metadata to check for the `hide_table_of_contents` configuration.
-  const hideTOC = frontMatter.hide_table_of_contents; // Check if the ToC is hidden.
-  const windowSize = useWindowSize(); // Get the current window size.
+  const { metadata, frontMatter } = useDoc();
+  const hideTOC = frontMatter.hide_table_of_contents;
+  const windowSize = useWindowSize();
 
   return (
     <div className="row">
@@ -55,7 +57,6 @@ export default function DocItemLayout({children}: Props): ReactNode {
           <article>
             <DocBreadcrumbs />
             <DocVersionBadge />
-            {/* Show the Support button on mobile. */}
             {windowSize === 'mobile' && (
               <div style={{ display: 'flex', justifyContent: 'left', marginBottom: '1rem' }}>
                 <SupportDropdownMenu />
@@ -69,20 +70,18 @@ export default function DocItemLayout({children}: Props): ReactNode {
         </div>
       </div>
 
-      {/* Ensure the right column always exists, even if there is no ToC. */}
       {!hideTOC && windowSize !== 'mobile' && (
         <div className="col col--3" style={{ position: "relative" }}>
-          {/* Add a wrapper div to make the support dropdown and ToC sticky. */}
           <div style={{ position: "sticky", top: "80px", zIndex: 1 }}>
-            {/* Add the support dropdown above the ToC on desktop. */}
             <div style={{ display: 'flex', justifyContent: 'flex-start', padding: '0px 17px', right: '0' }}>
               <SupportDropdownMenu />
             </div>
-            {/* Render the ToC if one is available. */}
             {docTOC.desktop}
           </div>
         </div>
       )}
     </div>
   );
-}
+};
+
+export default DocItemLayout;