From 45d7a39768c20541dcc25d2d2142602db7ed4771 Mon Sep 17 00:00:00 2001
From: g3gg0 <git@g3gg0.de>
Date: Sun, 20 Aug 2023 14:05:54 +0200
Subject: [PATCH] fix history when browsing library

---
 contrib/data/www/index.html | 23 ++++++++++++++++-------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/contrib/data/www/index.html b/contrib/data/www/index.html
index edad6c94..dc516932 100644
--- a/contrib/data/www/index.html
+++ b/contrib/data/www/index.html
@@ -779,10 +779,10 @@ <h2>Client certificate upload</h2>
                 super(props);
                 this.state = {
                     path: '/',
+                    mode: 'content',
                     files: [],
                     selectedFiles: [],
                     tonies: [],
-                    mode: "content",
                     showSuccessMessage: false,
                     showSuccessState: false,
                     opacity: 1
@@ -805,17 +805,19 @@ <h2>Client certificate upload</h2>
             componentDidMount() {
                 // Extract path from the URL if present
                 const urlParams = new URLSearchParams(window.location.search);
-                const initialPath = urlParams.get('path') || '/';
-                const initialMode = urlParams.get('mode') || 'content';
+                const path = urlParams.get('path') || this.state.path;
+                const mode = urlParams.get('mode') || this.state.mode;
 
-                this.setState({ path: initialPath, mode: initialMode });
-                this.fetchFileIndex(initialPath, initialMode);
+                this.setState({ path: path, mode: mode });
+                this.fetchFileIndex(path, mode);
 
                 fetch("/tonies.json")
                     .then(response => response.json())
                     .then(data => this.setState({ tonies: data }));
 
                 window.addEventListener('popstate', this.handlePopState);
+
+                window.history.replaceState({ path, mode }, '', `?path=${path}&mode=${mode}`);
             }
 
             componentWillUnmount() {
@@ -823,7 +825,7 @@ <h2>Client certificate upload</h2>
             }
 
             handlePopState = (event) => {
-                if (event.state && event.state.path) {
+                if (event.state && event.state.path && event.state.mode) {
                     this.fetchFileIndex(event.state.path, event.state.mode, true);
                 }
             };
@@ -889,7 +891,14 @@ <h2>Client certificate upload</h2>
 
             async fetchFileIndex(path, mode, scroll = false) {
                 try {
-                    window.history.pushState({ path }, '', `?path=${path}&mode=${mode}`);
+                    const urlParams = new URLSearchParams(window.location.search);
+                    const currentPath = urlParams.get('path') || '';
+                    const currentMode = urlParams.get('mode') || '';
+
+                    if (path !== currentPath || mode !== currentMode) {
+                        window.history.pushState({ path, mode }, '', `?path=${path}&mode=${mode}`);
+                    }
+
                     const response = await fetch(`/api/fileIndex?path=${encodeURIComponent(path)}&special=${mode}`);
                     if (response.ok) {
                         const data = await response.json();