diff --git a/picture-gallery-client/src/ImageGallery/ImageGalleryDrawer.tsx b/picture-gallery-client/src/ImageGallery/ImageGalleryDrawer.tsx index 7d966e9..d1d074f 100644 --- a/picture-gallery-client/src/ImageGallery/ImageGalleryDrawer.tsx +++ b/picture-gallery-client/src/ImageGallery/ImageGalleryDrawer.tsx @@ -10,7 +10,7 @@ import Toolbar from "@mui/material/Toolbar"; import { Chip, useTheme } from "@mui/material"; import useMediaQuery from "@mui/material/useMediaQuery"; import { smallScreenMediaQuery } from "../ImageGalleryLayout"; -import { getDefaultExpanded } from "./PathToExpaned"; +import { getDefaultExpanded, getParentAndChildPath } from "./pathnames"; import Typography from "@mui/material/Typography"; function generateTreeViewChildren( @@ -61,17 +61,9 @@ const GenerateTreeView = ({ root }: { root: Folders }) => { ); const [selectedItem, setSelectedItem] = useState(location.pathname); - // TODO: clean this effect up. See also `getDefaultExpanded` useEffect(() => { - let curPathname = location.pathname.startsWith("/") - ? location.pathname.slice(1) - : location.pathname; - while (curPathname.endsWith("/")) { - curPathname = curPathname.slice(0, -1); - } - const parentPathname = curPathname.substring( - 0, - curPathname.lastIndexOf("/"), + const { parent: parentPathname, cur: curPathname } = getParentAndChildPath( + location.pathname, ); if (!expandedItems.includes(parentPathname)) { setExpandedItems([parentPathname, ...expandedItems]); diff --git a/picture-gallery-client/src/ImageGallery/__test__/PathToExpanded.test.tsx b/picture-gallery-client/src/ImageGallery/__test__/pathnames.test.tsx similarity index 92% rename from picture-gallery-client/src/ImageGallery/__test__/PathToExpanded.test.tsx rename to picture-gallery-client/src/ImageGallery/__test__/pathnames.test.tsx index 1ee06a4..ba700cb 100644 --- a/picture-gallery-client/src/ImageGallery/__test__/PathToExpanded.test.tsx +++ b/picture-gallery-client/src/ImageGallery/__test__/pathnames.test.tsx @@ -1,4 +1,4 @@ -import { getDefaultExpanded } from "../PathToExpaned"; +import { getDefaultExpanded } from "../pathnames"; interface pathWithExpanded { pathname: string; diff --git a/picture-gallery-client/src/ImageGallery/PathToExpaned.ts b/picture-gallery-client/src/ImageGallery/pathnames.ts similarity index 50% rename from picture-gallery-client/src/ImageGallery/PathToExpaned.ts rename to picture-gallery-client/src/ImageGallery/pathnames.ts index fa4315b..ee75679 100644 --- a/picture-gallery-client/src/ImageGallery/PathToExpaned.ts +++ b/picture-gallery-client/src/ImageGallery/pathnames.ts @@ -1,12 +1,28 @@ -export const getDefaultExpanded = (pathname: string): string[] => { - const pathParts = []; +const cleanupPath = (pathname: string): string => { let curPathname = pathname.startsWith("/") ? pathname.slice(1) : pathname; while (curPathname.endsWith("/")) { curPathname = curPathname.slice(0, -1); } + return curPathname; +}; + +export const getDefaultExpanded = (pathname: string): string[] => { + let curPathname = cleanupPath(pathname); + const pathParts = []; while (curPathname.length > 0) { pathParts.push(curPathname); curPathname = curPathname.substring(0, curPathname.lastIndexOf("/")); } return pathParts; }; + +export const getParentAndChildPath = ( + pathname: string, +): { parent: string; cur: string } => { + let curPathname = cleanupPath(pathname); + const parentPathname = curPathname.substring(0, curPathname.lastIndexOf("/")); + return { + parent: parentPathname, + cur: curPathname, + }; +};