🐛 Next.js Bugs - Fix useLocation + Custom Hook (#67)

* Added improved useLocation for use with Next.js * Added better logic to avoid Tina rerenders * Removed dependency on react-use * Reduced bundle size by using automatic detection of dependencies * Removed sourcemap * added update to package lock * Removed debug logs
SSWConsulting · Feb 13, 2024 · 68905cd · 68905cd
1 parent 959207e
commit 68905cd
Show file tree

Hide file tree

Showing 9 changed files with 72 additions and 238 deletions.
diff --git a/lib/components/CountryDropdown/CountryDropdown.tsx b/lib/components/CountryDropdown/CountryDropdown.tsx
@@ -1,7 +1,6 @@
 "use client";
 import { Popover, Transition } from "@headlessui/react";
 import { Fragment, useEffect, useState } from "react";
-import { useLocation } from "react-use";
 import { Countries } from "../../types/country";
 import { cx } from "../../util/cx";
 import { CustomLink } from "../CustomLink";
@@ -22,17 +21,26 @@ const websites: { country: Countries; url: string }[] = [
   },
 ] as const;
 
-const CountryDropdown = () => {
-  const { host } = useLocation();
+type CountryDropdownProps = {
+  url?: string;
+};
+
+const CountryDropdown = ({ url }: CountryDropdownProps) => {
   const [isOpened, setIsOpened] = useState(false);
   const [currentCountry, setCurrentCountry] = useState<Countries>("Australia");
 
   useEffect(() => {
-    const website = websites.find((w) => host?.endsWith(w.url));
-    if (website) {
-      setCurrentCountry(website.country);
+    try {
+      const { hostname } = new URL(url || "");
+
+      const website = websites.find((w) => hostname?.endsWith(w.url));
+      if (website) {
+        setCurrentCountry(website.country);
+      }
+    } catch (err) {
+      console.error(err);
     }
-  }, [host]);
+  }, [url]);
 
   return (
     <Popover>

diff --git a/lib/components/DesktopMenu/DesktopMenu.tsx b/lib/components/DesktopMenu/DesktopMenu.tsx
@@ -11,7 +11,7 @@ export interface DesktopMenuProps {
   menuGroups: NavMenuGroup[];
   sideActionsOverride?: () => JSX.Element;
   hidePhone?: boolean;
-  searchUrl?: string;
+  searchUrl: string;
 }
 
 export const ClosePopoverContext = createContext<(() => void) | null>(null);
@@ -84,7 +84,7 @@ const DesktopMenu: React.FC<DesktopMenuProps> = ({
 
 type DefaultSideActionsProps = {
   hidePhone?: boolean;
-  searchUrl?: string;
+  searchUrl: string;
 };
 
 const DefaultSideActions = ({
@@ -96,7 +96,7 @@ const DefaultSideActions = ({
       {!hidePhone && <PhoneButton hideMobile />}
       <Search url={searchUrl} />
       <Divider />
-      <CountryDropdown />
+      <CountryDropdown url={searchUrl} />
     </>
   );
 };

diff --git a/lib/components/MegaMenuLayout/MegaMenuLayout.tsx b/lib/components/MegaMenuLayout/MegaMenuLayout.tsx
@@ -2,6 +2,7 @@ import { Bars3Icon } from "@heroicons/react/24/outline";
 import React, { useState } from "react";
 import { useMenuItems } from "../../hooks/useMenuItems";
 import { NavMenuGroup } from "../../types/megamenu";
+import { DEFAULT_URL } from "../../util/constants";
 import { CustomLink } from "../CustomLink";
 import DesktopMenu from "../DesktopMenu/DesktopMenu";
 import { Logo } from "../Logo";
@@ -33,7 +34,7 @@ const MegaMenuLayout: React.FC<MegaMenuWrapperProps> = ({
   title,
   url,
   subtitle,
-  searchUrl,
+  searchUrl = DEFAULT_URL,
   menuBarItems,
   rightSideActionsOverride,
 }) => {

diff --git a/lib/components/Search/Search.tsx b/lib/components/Search/Search.tsx
@@ -1,7 +1,6 @@
 import { Dialog, Transition } from "@headlessui/react";
 import React, { Fragment, useEffect, useRef, useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
-import { useLocation } from "react-use";
 import { MegaIcon } from "../MegaIcon";
 
 export interface SearchProps {
@@ -10,7 +9,6 @@ export interface SearchProps {
 
 export const Search: React.FC<SearchProps> = ({ url }) => {
   const searchRef = useRef(null);
-  const location = useLocation();
   const [isOpen, setIsOpen] = useState(false);
   const [searchTerm, setSearchTerm] = useState("");
 
@@ -33,9 +31,9 @@ export const Search: React.FC<SearchProps> = ({ url }) => {
 
   const performSearch = () => {
     if (searchTerm) {
-      const searchUrl = `https://www.google.com.au/search?q=site:${
-        url || location.hostname
-      }%20${encodeURIComponent(searchTerm)}`;
+      const searchUrl = `https://www.google.com.au/search?q=site:${url}%20${encodeURIComponent(
+        searchTerm,
+      )}`;
       window.open(searchUrl, "_blank");
     }
   };

diff --git a/lib/hooks/useMenuItems.ts b/lib/hooks/useMenuItems.ts
@@ -15,8 +15,8 @@ const refreshData = async () => {
 export const useMenuItems = (
   menuBarItems?: NavMenuGroup[],
 ): { menuItems: NavMenuGroup[] } => {
-  const [menuItems, setMenuItems] = useState<NavMenuGroup[]>(
-    menuBarItems || [],
+  const [menuItems, setMenuItems] = useState<NavMenuGroup[] | undefined>(
+    menuBarItems,
   );
 
   useEffect(() => {
@@ -25,9 +25,14 @@ export const useMenuItems = (
         setMenuItems(data);
       })
       .catch((err) => {
-        setMenuItems(menuBarItems || []);
         console.error(err);
       });
+  }, []);
+
+  useEffect(() => {
+    if (menuBarItems) {
+      setMenuItems(menuBarItems);
+    }
   }, [menuBarItems]);
 
   return { menuItems: menuItems || [] };

diff --git a/lib/util/constants.ts b/lib/util/constants.ts
@@ -0,0 +1 @@
+export const DEFAULT_URL = "https://www.ssw.com.au";
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ssw.megamenu",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
@@ -30,7 +30,6 @@
     "react-device-detect": "^2.2.3",
     "react-hotkeys-hook": "^4.4.1",
     "react-icons": "^4.12.0",
-    "react-use": "^17.4.2",
     "tailwind-merge": "^2.1.0"
   },
   "peerDependencies": {
@@ -59,6 +58,7 @@
     "postcss": "^8.4.32",
     "prettier": "^3.1.1",
     "prettier-plugin-tailwindcss": "^0.5.9",
+    "rollup-plugin-node-externals": "^7.0.1",
     "source-map-explorer": "^2.5.3",
     "tailwindcss": "^3.3.6",
     "typescript": "^5.2.2",