(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("/"),
+ );
+ if (!expandedItems.includes(parentPathname)) {
+ setExpandedItems([parentPathname, ...expandedItems]);
+ }
+ setSelectedItem(curPathname);
+ }, [location]);
+
const toggleExpanded = (path: string) => {
if (expandedItems.includes(path)) {
setExpandedItems(expandedItems.filter((p) => p !== path));
@@ -87,16 +87,11 @@ const GenerateTreeView = ({ root }: { root: Folders }) => {
}
};
- const navigateAndToggleExpand = (
- path: string,
- navigationAllowed: boolean,
- ) => {
- if (!navigationAllowed || location.pathname === path) {
- toggleExpanded(path);
- return;
- }
+ const navigateAndToggleExpand = (path: string) => {
toggleExpanded(path);
- navigate(path);
+ if (location.pathname !== path) {
+ navigate(path);
+ }
};
return (
@@ -109,7 +104,7 @@ const GenerateTreeView = ({ root }: { root: Folders }) => {
expandedItems={expandedItems}
selectedItems={selectedItem}
onSelectedItemsChange={(event, itemId) => {
- if (itemId != null && folderFullPathContainingPhotos.has(itemId)) {
+ if (itemId != null) {
setSelectedItem(itemId);
}
}}
diff --git a/picture-gallery-client/src/ImageGalleryLayout.tsx b/picture-gallery-client/src/ImageGalleryLayout.tsx
index 2beb074..b5f90b5 100644
--- a/picture-gallery-client/src/ImageGalleryLayout.tsx
+++ b/picture-gallery-client/src/ImageGalleryLayout.tsx
@@ -123,7 +123,7 @@ function ImageGalleryLayout() {
{images.length > 0 && }
{images.length == 0 && foldersPreview.length == 0 && (
- No images available. You may want to add images in your root
+ No images available. You may want to add images to this
directory.
)}