[REFACTOR] Refactor window path location for settings sidebar (#1856)

use useLocation hook instead of href for window location
This commit is contained in:
Sean Hatfield 2024-07-11 15:57:41 -07:00 committed by GitHub
parent 2f620163ff
commit 36c5cd16c7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -1,6 +1,6 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { CaretRight } from "@phosphor-icons/react"; import { CaretRight } from "@phosphor-icons/react";
import { Link } from "react-router-dom"; import { Link, useLocation } from "react-router-dom";
export default function MenuOption({ export default function MenuOption({
btnText, btnText,
@ -14,14 +14,14 @@ export default function MenuOption({
isChild = false, isChild = false,
}) { }) {
const storageKey = generateStorageKey({ key: btnText }); const storageKey = generateStorageKey({ key: btnText });
const location = window.location.pathname; const location = useLocation();
const hasChildren = childOptions.length > 0; const hasChildren = childOptions.length > 0;
const hasVisibleChildren = hasVisibleOptions(user, childOptions); const hasVisibleChildren = hasVisibleOptions(user, childOptions);
const { isExpanded, setIsExpanded } = useIsExpanded({ const { isExpanded, setIsExpanded } = useIsExpanded({
storageKey, storageKey,
hasVisibleChildren, hasVisibleChildren,
childOptions, childOptions,
location, location: location.pathname,
}); });
if (hidden) return null; if (hidden) return null;
@ -43,9 +43,10 @@ export default function MenuOption({
} }
const isActive = hasChildren const isActive = hasChildren
? (!isExpanded && childOptions.some((child) => child.href === location)) || ? (!isExpanded &&
location === href childOptions.some((child) => child.href === location.pathname)) ||
: location === href; location.pathname === href
: location.pathname === href;
const handleClick = (e) => { const handleClick = (e) => {
if (hasChildren) { if (hasChildren) {