diff --git a/src/components/MainToolbar.vue b/src/components/MainToolbar.vue index 7b687ee..607a264 100644 --- a/src/components/MainToolbar.vue +++ b/src/components/MainToolbar.vue @@ -45,12 +45,11 @@ import { mapMutations } from 'vuex'; import Component from 'vue-class-component'; import { Prop, Emit } from 'vue-property-decorator'; -import { ConfigPayload } from '@/store/types'; @Component({ methods: { ...mapMutations([ - 'updateConfig', + 'setQuery', ]), }, }) @@ -58,12 +57,12 @@ export default class MainToolbar extends Vue { @Prop(Boolean) readonly value!: boolean - updateConfig!: (_: ConfigPayload) => void + setQuery!: (_: string | null) => void focusedSearch = false get searchQuery() { - return this.$store.getters.config.filter.query; + return this.$store.state.query; } get phoneLayout() { @@ -82,12 +81,7 @@ export default class MainToolbar extends Vue { onSearch = throttle(async (v: string) => { // avoid input lag await this.$nextTick(); - this.updateConfig({ - key: 'filter', - value: { - query: v, - }, - }); + this.setQuery(v || null); }, 400) } diff --git a/src/components/Torrents.vue b/src/components/Torrents.vue index a1525d1..335351f 100644 --- a/src/components/Torrents.vue +++ b/src/components/Torrents.vue @@ -348,6 +348,9 @@ function getStateInfo(state: string) { filter(state, getters) { return getters.config.filter; }, + query(state: any) { + return state.query; + }, }), }, filters: { @@ -421,6 +424,7 @@ export default class Torrents extends Vue { torrentGroupBySite!: {[site: string]: Torrent[]} torrentGroupByState!: {[state: string]: Torrent[]} filter!: TorrentFilter + query!: string | null updateConfig!: (_: ConfigPayload) => void showSnackBar!: (_: SnackBarConfig) => void @@ -454,8 +458,8 @@ export default class Torrents extends Vue { if (this.filter.state !== null) { list = intersection(list, this.torrentGroupByState[this.filter.state]); } - if (this.filter.query) { - const q = this.filter.query.toLowerCase(); + if (this.query) { + const q = this.query.toLowerCase(); list = list.filter(t => { return t.name.toLowerCase().includes(q) || diff --git a/src/store/config.ts b/src/store/config.ts index dc6a45e..3710ae5 100644 --- a/src/store/config.ts +++ b/src/store/config.ts @@ -13,7 +13,6 @@ export interface Config { state: string | null; category: string | null; site: string | null; - query: string | null; }; locale: string | null; darkMode: string | null; @@ -30,7 +29,6 @@ const defaultConfig = { state: null, category: null, site: null, - query: null, }, locale: null, darkMode: null, diff --git a/src/store/index.ts b/src/store/index.ts index 96253b6..366eaea 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -30,6 +30,7 @@ const store = new Vuex.Store({ preferences: null, pasteUrl: null, needAuth: false, + query: null, }, mutations: { /* eslint-disable no-param-reassign */ @@ -72,6 +73,9 @@ const store = new Vuex.Store({ updateNeedAuth(state, payload) { state.needAuth = payload; }, + setQuery(state, payload) { + state.query = payload; + }, /* eslint-enable no-param-reassign */ }, getters: { diff --git a/src/store/types.ts b/src/store/types.ts index 51b405c..5d4279c 100644 --- a/src/store/types.ts +++ b/src/store/types.ts @@ -7,6 +7,7 @@ export interface RootState { preferences: any; pasteUrl: string | null; needAuth: boolean; + query: string | null; } export interface SearchEnginePage { diff --git a/tests/unit/filters.spec.ts b/tests/unit/filters.spec.ts index 76a0077..88f6a14 100644 --- a/tests/unit/filters.spec.ts +++ b/tests/unit/filters.spec.ts @@ -44,7 +44,7 @@ describe('format duration', () => { describe('format timestamp', () => { test.each([ - // [948602096, '2000-01-23 12:34:56'], # comment for timezone issue + // [948602096, '2000-01-23 12:34:56'], # commented out due to timezone issue [null, ''], [-1, ''], ])('case %#', (value, result) => { diff --git a/tests/unit/store/index.spec.ts b/tests/unit/store/index.spec.ts index 8963c3c..a56a95d 100644 --- a/tests/unit/store/index.spec.ts +++ b/tests/unit/store/index.spec.ts @@ -14,6 +14,7 @@ const emtpyState: RootState = { preferences: null, pasteUrl: null, needAuth: false, + query: null, }; const mockState = mock(emtpyState);