From ec32a8e7cc0a84ddff2e58b84badbab32334c8a4 Mon Sep 17 00:00:00 2001
From: Makar <68788448+tinkermakar@users.noreply.github.com>
Date: Wed, 27 Mar 2024 21:54:50 +0400
Subject: [PATCH] skip unnecessary history pushes and preserve intuitive
 forward/back (#20762)

---
 app/javascript/readingList/readingList.jsx         |  6 +++---
 .../searchableItemList/searchableItemList.js       | 14 +++++++++-----
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/app/javascript/readingList/readingList.jsx b/app/javascript/readingList/readingList.jsx
index 3615afe44..48d13b4ac 100644
--- a/app/javascript/readingList/readingList.jsx
+++ b/app/javascript/readingList/readingList.jsx
@@ -77,10 +77,10 @@ export class ReadingList extends Component {
       searchOptions: { status: `${statusView}` },
     });
 
-    const persistedTag = checkForPersistedTag();
-    if (persistedTag) {
+    const persistedAvailableTag = checkForPersistedTag(this.state.availableTags);
+    if (persistedAvailableTag) {
       this.selectTag({
-        target: { value: persistedTag },
+        target: { value: persistedAvailableTag, },
         preventDefault(){},
       });
     }
diff --git a/app/javascript/searchableItemList/searchableItemList.js b/app/javascript/searchableItemList/searchableItemList.js
index 917faaf7b..1ced9c8ec 100644
--- a/app/javascript/searchableItemList/searchableItemList.js
+++ b/app/javascript/searchableItemList/searchableItemList.js
@@ -18,7 +18,7 @@ export function onSearchBoxType(event) {
 
 export function selectTag(event) {
   event.preventDefault();
-  const { value, dataset } = event.target;
+  const { value, dataset, skipPushState } = event.target;
   const selectedTagOrAll = value ?? dataset.tag;
   const selectedTag = selectedTagOrAll?.match(/all tags/i) ? null : selectedTagOrAll;
   const component = this;
@@ -32,7 +32,10 @@ export function selectTag(event) {
   });
 
   // persist the selected tag in query params
-  window.history.pushState(null, null, `/readinglist${selectedTag ? `?selectedTag=${selectedTag}` : ''}`);
+  if (!skipPushState) {
+    const newQueryParams = selectedTag ? `?selectedTag=${selectedTag}` : '';
+    window.history.pushState(null, null, `/readinglist${newQueryParams}`);
+  }
 }
 
 export function clearSelectedTags(event) {
@@ -140,11 +143,12 @@ export function loadNextPage() {
   });
 }
 
-export function checkForPersistedTag() {
+export function checkForPersistedTag(availableTags) {
   // credit: https://stackoverflow.com/a/9870540
   const params = (new URL(window.location)).searchParams
-  const selectedTag =  params.get('selectedTag');
+  const selectedTag = params.get('selectedTag');
 
-  return selectedTag || '';
+  if (availableTags?.includes(selectedTag)) return selectedTag;
+  return null;
 }