Cleanup ImageGalleryDrawer

Move pathname related functions in pathnames.ts

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<string>(location.pathname);
 
-  // TODO: clean this effect up. See also `getDefaultExpanded`
   useEffect(() => {
-    let curPathname = location.pathname.startsWith("/")
+    const { parent: parentPathname, cur: curPathname } = getParentAndChildPath(
-      ? location.pathname.slice(1)
+      location.pathname,
-      : location.pathname;
-    while (curPathname.endsWith("/")) {
-      curPathname = curPathname.slice(0, -1);
-    }
-    const parentPathname = curPathname.substring(
-      0,
-      curPathname.lastIndexOf("/"),
     );
     if (!expandedItems.includes(parentPathname)) {
       setExpandedItems([parentPathname, ...expandedItems]);

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;

picture-gallery-client/src/ImageGallery/pathnames.ts

@@ -1,12 +1,28 @@
-export const getDefaultExpanded = (pathname: string): string[] => {
+const cleanupPath = (pathname: string): string => {
-  const pathParts = [];
   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,
+  };
+};