* Make history page remember last query string & search limit only wh…

…en going back
FreeTubeApp · Jun 3, 2024 · cfbda54 · cfbda54
1 parent 3c3b60c
commit cfbda54
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 13 deletions.
diff --git a/src/renderer/views/History/History.js b/src/renderer/views/History/History.js
@@ -1,4 +1,5 @@
 import { defineComponent } from 'vue'
+import { isNavigationFailure, NavigationFailureType } from 'vue-router'
 import debounce from 'lodash.debounce'
 import FtLoader from '../../components/ft-loader/ft-loader.vue'
 import FtCard from '../../components/ft-card/ft-card.vue'
@@ -44,34 +45,49 @@ export default defineComponent({
     },
   },
   watch: {
-    query() {
-      this.searchDataLimit = 100
-      this.filterHistoryAsync()
-    },
     fullData() {
       this.activeData = this.fullData
       this.filterHistory()
-    }
+    },
   },
-  mounted: function () {
+  created: function () {
     document.addEventListener('keydown', this.keyboardShortcutHandler)
-    const limit = sessionStorage.getItem('History/dataLimit')
 
-    if (limit !== null) {
-      this.dataLimit = limit
+    const oldDataLimit = sessionStorage.getItem('History/dataLimit')
+    if (oldDataLimit !== null) {
+      this.dataLimit = oldDataLimit
     }
 
-    this.activeData = this.fullData
-    this.showLoadMoreButton = this.activeData.length < this.historyCacheSorted.length
     this.filterHistoryDebounce = debounce(this.filterHistory, 500)
+
+    const oldQuery = this.$route.query.searchQueryText ?? ''
+    if (oldQuery !== null && oldQuery !== '') {
+      // `handleQueryChange` must be called after `filterHistoryDebounce` assigned
+      this.handleQueryChange(oldQuery, this.$route.query.searchDataLimit)
+    } else {
+      // Only display unfiltered data when no query used last time
+      this.filterHistory()
+    }
   },
   beforeDestroy: function () {
     document.removeEventListener('keydown', this.keyboardShortcutHandler)
   },
   methods: {
+    handleQueryChange(val, customLimit = null) {
+      this.query = val
+
+      const newLimit = customLimit ?? 100
+      this.searchDataLimit = newLimit
+
+      this.saveStateInRouter(val, newLimit)
+
+      this.filterHistoryAsync()
+    },
+
     increaseLimit: function () {
       if (this.query !== '') {
         this.searchDataLimit += 100
+        this.saveStateInRouter(this.query, this.searchDataLimit)
         this.filterHistory()
       } else {
         this.dataLimit += 100
@@ -104,6 +120,31 @@ export default defineComponent({
         this.activeData = filteredQuery.length < this.searchDataLimit ? filteredQuery : filteredQuery.slice(0, this.searchDataLimit)
       }
     },
+
+    async saveStateInRouter(query, searchDataLimit) {
+      if (this.query === '') {
+        await this.$router.replace({ name: 'history' }).catch(failure => {
+          if (isNavigationFailure(failure, NavigationFailureType.duplicated)) {
+            return
+          }
+
+          throw failure
+        })
+        return
+      }
+
+      await this.$router.replace({
+        name: 'history',
+        query: { searchQueryText: query, searchDataLimit: searchDataLimit },
+      }).catch(failure => {
+        if (isNavigationFailure(failure, NavigationFailureType.duplicated)) {
+          return
+        }
+
+        throw failure
+      })
+    },
+
     keyboardShortcutHandler: function (event) {
       ctrlFHandler(event, this.$refs.searchBar)
     }

diff --git a/src/renderer/views/History/History.vue b/src/renderer/views/History/History.vue
@@ -15,8 +15,9 @@
         :placeholder="$t('History.Search bar placeholder')"
         :show-clear-text-button="true"
         :show-action-button="false"
-        @input="(input) => query = input"
-        @clear="query = ''"
+        :value="query"
+        @input="(input) => handleQueryChange(input)"
+        @clear="() => handleQueryChange('')"
       />
       <ft-flex-box
         v-show="fullData.length === 0"