* Make history page remember last query string & search limit

FreeTubeApp · May 30, 2024 · 434c7d5 · 434c7d5
1 parent 452e32e
commit 434c7d5
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 13 deletions.
diff --git a/src/renderer/views/History/History.js b/src/renderer/views/History/History.js
@@ -44,34 +44,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 = sessionStorage.getItem('History/query')
+    if (oldQuery !== null && oldQuery !== '') {
+      // `handleQueryChange` must be called after `filterHistoryDebounce` assigned
+      this.handleQueryChange(oldQuery, sessionStorage.getItem('History/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
+      sessionStorage.setItem('History/query', val)
+
+      const newLimit = customLimit ?? 100
+      this.searchDataLimit = newLimit
+      sessionStorage.setItem('History/searchDataLimit', newLimit)
+
+      this.filterHistoryAsync()
+    },
+
     increaseLimit: function () {
       if (this.query !== '') {
         this.searchDataLimit += 100
+        sessionStorage.setItem('History/searchDataLimit', this.searchDataLimit)
         this.filterHistory()
       } else {
         this.dataLimit += 100

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"