From 4e85e2f3d788030f24b53a90c427ccfc546b948d Mon Sep 17 00:00:00 2001
From: Roland <roland@learningselfreliance.com>
Date: Mon, 10 Apr 2023 12:27:55 -0600
Subject: [PATCH] Storing opened folders in URL to preserve opened folders
 after tagging.

---
 app/src/components/FileBrowser.js |  2 +-
 app/src/components/FilePreview.js |  7 ++-
 app/src/hooks/customHooks.js      | 86 +++++++++++++++++--------------
 wrolpi/tags.py                    |  2 +-
 4 files changed, 55 insertions(+), 42 deletions(-)

diff --git a/app/src/components/FileBrowser.js b/app/src/components/FileBrowser.js
index 3134a626..36e9ae38 100644
--- a/app/src/components/FileBrowser.js
+++ b/app/src/components/FileBrowser.js
@@ -107,7 +107,7 @@ export function FileBrowser() {
 
     useEffect(() => {
         // Fetch files after tagging.
-        setCallbacks([fetchFiles]);
+        setCallbacks([() => fetchFiles(openFolders)]);
 
         return () => setCallbacks(null);
     }, []);
diff --git a/app/src/components/FilePreview.js b/app/src/components/FilePreview.js
index eb92c22b..e09d0730 100644
--- a/app/src/components/FilePreview.js
+++ b/app/src/components/FilePreview.js
@@ -170,7 +170,10 @@ export function FilePreviewWrapper({children}) {
         }
     };
 
-    const handleClose = () => {
+    const handleClose = (e) => {
+        if (e) {
+            e.preventDefault();
+        }
         setPreviewModal(null);
         setPreviewFile(null);
     }
@@ -213,7 +216,7 @@ export function FilePreviewWrapper({children}) {
         setPreviewModal(<Modal closeIcon
                                size='fullscreen'
                                open={true}
-                               onClose={handleClose}
+                               onClose={e => handleClose(e)}
         >
             {content}
             <ModalActions>
diff --git a/app/src/hooks/customHooks.js b/app/src/hooks/customHooks.js
index 35333093..063b0091 100644
--- a/app/src/hooks/customHooks.js
+++ b/app/src/hooks/customHooks.js
@@ -52,6 +52,52 @@ export const useRecurringTimeout = (callback, delay) => {
     }, [delay])
 }
 
+export const useQuery = () => {
+    const [searchParams, setSearchParams] = useSearchParams();
+
+    const setQuery = (obj) => {
+        setSearchParams(createSearchParams(obj), {replace: true});
+    }
+
+    const updateQuery = (obj) => {
+        const newQuery = {};
+        for (const entry of searchParams.entries()) {
+            newQuery[entry[0]] = entry[1];
+        }
+        Object.entries(obj).forEach(([key, value]) => {
+            if (value === undefined || value === null || value === '') {
+                delete newQuery[key];
+            } else {
+                newQuery[key] = value;
+            }
+        })
+        setQuery(newQuery);
+    }
+
+    return {searchParams, setSearchParams, setQuery, updateQuery}
+}
+
+export const useOneQuery = (name) => {
+    const {searchParams, updateQuery} = useQuery();
+    const value = searchParams.get(name);
+
+    const setValue = (newValue) => {
+        updateQuery({[name]: newValue});
+    }
+
+    return [value, setValue]
+}
+
+export const useAllQuery = (name) => {
+    const {searchParams, updateQuery} = useQuery();
+    const value = searchParams.getAll(name);
+
+    const setValue = (newValue) => {
+        updateQuery({[name]: newValue});
+    }
+
+    return [value, setValue]
+}
 
 export const useDomains = () => {
     const [domains, setDomains] = useState(null);
@@ -99,42 +145,6 @@ export const useArchive = (archiveId) => {
     return {archiveFile: archiveFileGroup, history, fetchArchive};
 }
 
-export const useQuery = () => {
-    const [searchParams, setSearchParams] = useSearchParams();
-
-    const setQuery = (obj) => {
-        setSearchParams(createSearchParams(obj), {replace: true});
-    }
-
-    const updateQuery = (obj) => {
-        const newQuery = {};
-        for (const entry of searchParams.entries()) {
-            newQuery[entry[0]] = entry[1];
-        }
-        Object.entries(obj).forEach(([key, value]) => {
-            if (value === undefined || value === null || value === '') {
-                delete newQuery[key];
-            } else {
-                newQuery[key] = value;
-            }
-        })
-        setQuery(newQuery);
-    }
-
-    return {searchParams, setSearchParams, setQuery, updateQuery}
-}
-
-export const useOneQuery = (name) => {
-    const {searchParams, updateQuery} = useQuery();
-    const value = searchParams.get(name);
-
-    const setValue = (newValue) => {
-        updateQuery({[name]: newValue});
-    }
-
-    return [value, setValue]
-}
-
 export const usePages = (defaultLimit) => {
     const {searchParams, updateQuery} = useQuery();
     const offset = searchParams.get('o') || 0;
@@ -447,7 +457,7 @@ export const useSearchFiles = (defaultLimit = 48, emptySearch = false, model) =>
 
 export const useBrowseFiles = () => {
     const [browseFiles, setBrowseFiles] = useState(null);
-    const [openFolders, setOpenFolders] = useState([]);
+    const [openFolders, setOpenFolders] = useAllQuery('folders');
 
     const fetchFiles = async () => {
         try {
@@ -461,7 +471,7 @@ export const useBrowseFiles = () => {
 
     useEffect(() => {
         fetchFiles();
-    }, [openFolders])
+    }, [JSON.stringify(openFolders)])
 
     return {browseFiles, openFolders, setOpenFolders, fetchFiles};
 }
diff --git a/wrolpi/tags.py b/wrolpi/tags.py
index d218c62f..94785c0f 100644
--- a/wrolpi/tags.py
+++ b/wrolpi/tags.py
@@ -295,7 +295,7 @@ def import_tags_config(session: Session = None):
                 absolute_path = media_directory / primary_path
                 file_group: FileGroup = file_groups_by_primary_path.get(absolute_path)
                 if tag and file_group:
-                    tag_file = tag_files.get((tag.id, file_group.id))
+                    tag_file: TagFile = tag_files.get((tag.id, file_group.id))
                     if not tag_file:
                         # This FileGroup has not been tagged with the Tag, add it.
                         tag_file = tag.add_file_group_tag(file_group, session)