From 189d72725cd9d68a5bf4fd6e936d41b4b3356aa3 Mon Sep 17 00:00:00 2001
From: Taka <taka@vm-linux-dev>
Date: Wed, 17 Nov 2021 22:05:13 +1100
Subject: [PATCH] Update the browser URL after selecting menu items.

---
 web/src/App.js   | 40 +++++++++++++++++++++++-----------------
 web/src/index.js |  6 +++---
 2 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/web/src/App.js b/web/src/App.js
index cb9dc9f..ebc0689 100644
--- a/web/src/App.js
+++ b/web/src/App.js
@@ -92,13 +92,13 @@ export class App extends React.Component
             const menu = ( <Menu id="app">
                 <MenuButton />
                 <MenuList>
-                    <MenuItem id="menu-show-publishers" onSelect={ () => this._showPublishers() } >
+                    <MenuItem id="menu-show-publishers" onSelect={ () => this._showPublishers(true) } >
                         <img src="/images/icons/publisher.png" alt="Show publishers." /> Show publishers
                     </MenuItem>
-                    <MenuItem id="menu-search-technique" onSelect={ () => this._showTechniqueArticles() } >
+                    <MenuItem id="menu-search-technique" onSelect={ () => this._showTechniqueArticles(true) } >
                         <img src="/images/icons/technique.png" alt="Show technique articles." /> Show technique
                     </MenuItem>
-                    <MenuItem id="menu-search-tips" onSelect={ () => this._showTipsArticles() } >
+                    <MenuItem id="menu-search-tips" onSelect={ () => this._showTipsArticles(true) } >
                         <img src="/images/icons/tips.png" alt="Show tip articles." /> Show tips
                     </MenuItem>
                     <div className="divider" />
@@ -258,20 +258,26 @@ export class App extends React.Component
             args = {} ;
         this._doSearch( url, args, onDone ) ;
     }
-    _showPublishers() {
-        this.runSpecialSearch( "/search/publishers", null,
-            () => { this.setWindowTitle( "All publishers" ) }
-        )
-    }
-    _showTechniqueArticles() {
-        this.runSpecialSearch( "/search/tag/technique", {randomize:1},
-            () => { this.setWindowTitle( "Technique" ) }
-        )
-    }
-    _showTipsArticles() {
-        this.runSpecialSearch( "/search/tag/tips", {randomize:1},
-            () => { this.setWindowTitle( "Tips" ) }
-        )
+    _showPublishers( pushState ) {
+        this.runSpecialSearch( "/search/publishers", null, () => {
+            this.setWindowTitle( "All publishers" ) ;
+            if ( pushState )
+                window.history.pushState( null, document.title, "/publishers"+window.location.search ) ;
+        } )
+    }
+    _showTechniqueArticles( pushState ) {
+        this.runSpecialSearch( "/search/tag/technique", {randomize:1}, () => {
+            this.setWindowTitle( "Technique" ) ;
+            if ( pushState )
+                window.history.pushState( null, document.title, "/technique"+window.location.search ) ;
+        } )
+    }
+    _showTipsArticles( pushState ) {
+        this.runSpecialSearch( "/search/tag/tips", {randomize:1}, () => {
+            this.setWindowTitle( "Tips" ) ;
+            if ( pushState )
+                window.history.pushState( null, document.title, "/tips"+window.location.search ) ;
+        } )
     }
 
     prependSearchResult( sr ) {
diff --git a/web/src/index.js b/web/src/index.js
index 67482e1..a541b31 100644
--- a/web/src/index.js
+++ b/web/src/index.js
@@ -13,13 +13,13 @@ ReactDOM.render(
     <BrowserRouter>
         <Switch>
             <Route path="/publishers" render={ (props) => <App {...props} type="publishers" key="publishers"
-                doSearch = { () => gAppRef._showPublishers() }
+                doSearch = { () => gAppRef._showPublishers(false) }
             /> } />
             <Route path="/technique" render={ (props) => <App {...props} type="technique" key="technique"
-                doSearch = { () => gAppRef._showTechniqueArticles() }
+                doSearch = { () => gAppRef._showTechniqueArticles(false) }
             /> } />
             <Route path="/tips" render={ (props) => <App {...props} type="tips" key="tips"
-                doSearch = { () => gAppRef._showTipsArticles() }
+                doSearch = { () => gAppRef._showTipsArticles(false) }
             /> } />
             <Route path="/publisher/:publId" render={ (props) => <App {...props} type="publisher" key={"publ:"+props.match.params.publId}
                 doSearch = { () => gAppRef.runSpecialSearch( "/search/publisher/"+gAppRef.props.match.params.publId, null,