From ccd2d7ebcc7f20a77a045bfae601799839adcfa5 Mon Sep 17 00:00:00 2001 From: Gauthier Roebroeck Date: Fri, 26 Mar 2021 18:04:25 +0800 Subject: [PATCH] refactor(webui): migrate remaining cookies to localStorage closes #456 --- komga-webui/src/App.vue | 3 +++ komga-webui/src/plugins/persisted-state.ts | 27 +++++++++++++++++++++ komga-webui/src/views/BrowseCollection.vue | 7 ++---- komga-webui/src/views/BrowseCollections.vue | 2 +- komga-webui/src/views/BrowseLibraries.vue | 16 ++++-------- komga-webui/src/views/BrowseReadLists.vue | 2 +- komga-webui/src/views/BrowseSeries.vue | 2 +- 7 files changed, 40 insertions(+), 19 deletions(-) diff --git a/komga-webui/src/App.vue b/komga-webui/src/App.vue index 6a68b28c6..221643a86 100644 --- a/komga-webui/src/App.vue +++ b/komga-webui/src/App.vue @@ -69,6 +69,9 @@ export default Vue.extend({ this.$store.commit('setBrowsingPageSize', parseInt(this.$cookies.get(cookiePageSize))) this.$cookies.remove(cookiePageSize) } + this.$cookies.keys() + .filter(x => x.startsWith('collection.filter') || x.startsWith('library.filter') || x.startsWith('library.sort')) + .forEach(x => this.$cookies.remove(x)) }, beforeDestroy() { window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', this.systemThemeChange) diff --git a/komga-webui/src/plugins/persisted-state.ts b/komga-webui/src/plugins/persisted-state.ts index 3e4a83ace..eb8debe09 100644 --- a/komga-webui/src/plugins/persisted-state.ts +++ b/komga-webui/src/plugins/persisted-state.ts @@ -16,6 +16,24 @@ export const persistedModule: Module = { background: '', }, browsingPageSize: undefined as unknown as number, + collection: { + filter: {}, + }, + library: { + filter: {}, + sort: {}, + }, + }, + getters: { + getCollectionFilter: (state) => (id: string) => { + return state.collection.filter[id] + }, + getLibraryFilter: (state) => (id: string) => { + return state.library.filter[id] + }, + getLibrarySort: (state) => (id: string) => { + return state.library.sort[id] + }, }, mutations: { setLocale (state, val) { @@ -51,5 +69,14 @@ export const persistedModule: Module = { setBrowsingPageSize(state, val) { state.browsingPageSize = val }, + setCollectionFilter(state, {id, filter}) { + state.collection.filter[id] = filter + }, + setLibraryFilter(state, {id, filter}) { + state.library.filter[id] = filter + }, + setLibrarySort(state, {id, sort}) { + state.library.sort[id] = sort + }, }, } diff --git a/komga-webui/src/views/BrowseCollection.vue b/komga-webui/src/views/BrowseCollection.vue index b8e546433..b6d477d4d 100644 --- a/komga-webui/src/views/BrowseCollection.vue +++ b/komga-webui/src/views/BrowseCollection.vue @@ -284,15 +284,12 @@ export default Vue.extend({ this.$set(this.filters, role, parseQueryFilter(route.query[role], this.filterOptions[role].map((x: NameValue) => x.value))) }) } else { - this.filters = this.$cookies.get(this.cookieFilter(route.params.collectionId)) || {} as FiltersActive + this.filters = this.$store.getters.getCollectionFilter(route.params.collectionId) || {} as FiltersActive } }, - cookieFilter(collectionId: string): string { - return `collection.filter.${collectionId}` - }, setWatches() { this.filterUnwatch = this.$watch('filters', (val) => { - this.$cookies.set(this.cookieFilter(this.collectionId), val, Infinity) + this.$store.commit('setCollectionFilter', {id: this.collectionId, filter: val}) this.updateRouteAndReload() }) }, diff --git a/komga-webui/src/views/BrowseCollections.vue b/komga-webui/src/views/BrowseCollections.vue index 7f313070d..bd9f31bf8 100644 --- a/komga-webui/src/views/BrowseCollections.vue +++ b/komga-webui/src/views/BrowseCollections.vue @@ -93,7 +93,7 @@ export default Vue.extend({ this.$eventHub.$off(LIBRARY_CHANGED, this.reloadLibrary) }, mounted () { - this.pageSize = this.$store.state.persistedState.browsingPageSize + this.pageSize = this.$store.state.persistedState.browsingPageSize || this.pageSize // restore from query param if (this.$route.query.page) this.page = Number(this.$route.query.page) diff --git a/komga-webui/src/views/BrowseLibraries.vue b/komga-webui/src/views/BrowseLibraries.vue index be8593682..758f458ee 100644 --- a/komga-webui/src/views/BrowseLibraries.vue +++ b/komga-webui/src/views/BrowseLibraries.vue @@ -186,7 +186,7 @@ export default Vue.extend({ this.$eventHub.$off(LIBRARY_CHANGED, this.reloadLibrary) }, async mounted() { - this.pageSize = this.$store.state.persistedState.browsingPageSize + this.pageSize = this.$store.state.persistedState.browsingPageSize || this.pageSize // restore from query param await this.resetParams(this.$route, this.libraryId) @@ -274,15 +274,9 @@ export default Vue.extend({ }, }, methods: { - cookieSort(libraryId: string): string { - return `library.sort.${libraryId}` - }, - cookieFilter(libraryId: string): string { - return `library.filter.${libraryId}` - }, async resetParams(route: any, libraryId: string) { this.sortActive = parseQuerySort(route.query.sort, this.sortOptions) || - this.$cookies.get(this.cookieSort(route.params.libraryId)) || + this.$store.getters.getLibrarySort(route.params.libraryId) || this.$_.clone(this.sortDefault) const requestLibraryId = libraryId !== LIBRARIES_ALL ? libraryId : undefined @@ -314,7 +308,7 @@ export default Vue.extend({ this.$set(this.filters, role, parseQueryFilter(route.query[role], this.filterOptions[role].map((x: NameValue) => x.value))) }) } else { - this.filters = this.$cookies.get(this.cookieFilter(route.params.libraryId)) || {} as FiltersActive + this.filters = this.$store.getters.getLibraryFilter(route.params.libraryId) || {} as FiltersActive } }, libraryDeleted(event: EventLibraryDeleted) { @@ -326,11 +320,11 @@ export default Vue.extend({ }, setWatches() { this.sortUnwatch = this.$watch('sortActive', (val) => { - this.$cookies.set(this.cookieSort(this.libraryId), val, Infinity) + this.$store.commit('setLibrarySort', {id: this.libraryId, sort: val}) this.updateRouteAndReload() }) this.filterUnwatch = this.$watch('filters', (val) => { - this.$cookies.set(this.cookieFilter(this.libraryId), val, Infinity) + this.$store.commit('setLibraryFilter', {id: this.libraryId, filter: val}) this.updateRouteAndReload() }) this.pageSizeUnwatch = this.$watch('pageSize', (val) => { diff --git a/komga-webui/src/views/BrowseReadLists.vue b/komga-webui/src/views/BrowseReadLists.vue index 02aa3da0d..d96f7613a 100644 --- a/komga-webui/src/views/BrowseReadLists.vue +++ b/komga-webui/src/views/BrowseReadLists.vue @@ -93,7 +93,7 @@ export default Vue.extend({ this.$eventHub.$off(LIBRARY_CHANGED, this.reloadLibrary) }, mounted () { - this.pageSize = this.$store.state.persistedState.browsingPageSize + this.pageSize = this.$store.state.persistedState.browsingPageSize || this.pageSize // restore from query param if (this.$route.query.page) this.page = Number(this.$route.query.page) diff --git a/komga-webui/src/views/BrowseSeries.vue b/komga-webui/src/views/BrowseSeries.vue index 9361f8260..598f70070 100644 --- a/komga-webui/src/views/BrowseSeries.vue +++ b/komga-webui/src/views/BrowseSeries.vue @@ -531,7 +531,7 @@ export default Vue.extend({ this.$eventHub.$off(LIBRARY_DELETED, this.libraryDeleted) }, async mounted() { - this.pageSize = this.$store.state.persistedState.browsingPageSize + this.pageSize = this.$store.state.persistedState.browsingPageSize || this.pageSize // restore from query param await this.resetParams(this.$route, this.seriesId)