From caf079bab825c539dd07f44b61ffa66f3127594e Mon Sep 17 00:00:00 2001 From: JL Date: Sat, 1 Feb 2025 18:33:16 -0800 Subject: [PATCH] update vuex to use mutations over action wrapper, fix css, add code review suggestions and fixes --- src/constants.js | 6 ++++++ src/renderer/helpers/history.js | 4 ---- src/renderer/store/modules/history.js | 18 ++++-------------- src/renderer/views/History/History.css | 12 ++++++++++++ src/renderer/views/History/History.js | 21 ++++++++++----------- src/renderer/views/History/History.vue | 21 ++++++++++----------- static/locales/en-US.yaml | 6 ++---- 7 files changed, 44 insertions(+), 44 deletions(-) delete mode 100644 src/renderer/helpers/history.js diff --git a/src/constants.js b/src/constants.js index 66a2f73751195..bf89d10a11bed 100644 --- a/src/constants.js +++ b/src/constants.js @@ -212,6 +212,11 @@ const MIXED_SEARCH_HISTORY_ENTRIES_DISPLAY_LIMIT = 4 // Displayed on the about page and used in the main.js file to only allow bitcoin URLs with this wallet address to be opened const ABOUT_BITCOIN_ADDRESS = '1Lih7Ho5gnxb1CwPD4o59ss78pwo2T91eS' +const HISTORY_SORT_BY_VALUES = { + DateAddedNewest: 'newestFirst', + DateAddedOldest: 'oldestFirst', +} + export { IpcChannels, DBActions, @@ -224,4 +229,5 @@ export { SEARCH_RESULTS_DISPLAY_LIMIT, MIXED_SEARCH_HISTORY_ENTRIES_DISPLAY_LIMIT, ABOUT_BITCOIN_ADDRESS, + HISTORY_SORT_BY_VALUES } diff --git a/src/renderer/helpers/history.js b/src/renderer/helpers/history.js deleted file mode 100644 index 6bcf731d67dae..0000000000000 --- a/src/renderer/helpers/history.js +++ /dev/null @@ -1,4 +0,0 @@ -export const SORT_BY_VALUES = { - DateAddedNewest: 'newestFirst', - DateAddedOldest: 'oldestFirst', -} diff --git a/src/renderer/store/modules/history.js b/src/renderer/store/modules/history.js index 73e781c1ddca1..54877288d76fc 100644 --- a/src/renderer/store/modules/history.js +++ b/src/renderer/store/modules/history.js @@ -1,10 +1,10 @@ import { set as vueSet, del as vueDel } from 'vue' import { DBHistoryHandlers } from '../../../datastores/handlers/index' -import { SORT_BY_VALUES } from '../../helpers/history' +import { HISTORY_SORT_BY_VALUES } from '../../../constants' const state = { historyCacheSorted: [], - useAscendingOrder: SORT_BY_VALUES['DateAddedNewest'], + useAscendingOrder: HISTORY_SORT_BY_VALUES.DateAddedNewest, // Vuex doesn't support Maps, so we have to use an object here instead // TODO: switch to a Map during the Pinia migration @@ -20,7 +20,7 @@ const getters = { return state.historyCacheById }, - getSortOrder(state) { + getHistorySortOrder(state) { return state.useAscendingOrder } } @@ -42,15 +42,6 @@ const actions = { } }, - async selectSort({ commit }, sort) { - try { - const order = sort - commit('setSortOrder', order) - } catch (errMessage) { - console.error(errMessage) - } - }, - async updateHistory({ commit }, record) { try { await DBHistoryHandlers.upsert(record) @@ -124,9 +115,8 @@ const mutations = { state.historyCacheSorted = historyCacheSorted }, - setSortOrder(state, order) { + setHistorySortOrder(state, order) { state.useAscendingOrder = order - return state.useAscendingOrder }, setHistoryCacheById(state, historyCacheById) { diff --git a/src/renderer/views/History/History.css b/src/renderer/views/History/History.css index a902565bb94b5..8a9b8db06b8e0 100644 --- a/src/renderer/views/History/History.css +++ b/src/renderer/views/History/History.css @@ -4,6 +4,18 @@ margin-inline: auto; } +.optionsRow { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: 1fr; + align-items: center; +} + +.sortSelect { + /* Put it on the right */ + margin-inline-start: auto; +} + .message { color: var(--tertiary-text-color); } diff --git a/src/renderer/views/History/History.js b/src/renderer/views/History/History.js index 0a3fb6f7adae1..2c80bbb12aa15 100644 --- a/src/renderer/views/History/History.js +++ b/src/renderer/views/History/History.js @@ -9,10 +9,9 @@ import FtButton from '../../components/ft-button/ft-button.vue' import FtInput from '../../components/ft-input/ft-input.vue' import FtAutoLoadNextPageWrapper from '../../components/ft-auto-load-next-page-wrapper/ft-auto-load-next-page-wrapper.vue' import FtToggleSwitch from '../../components/ft-toggle-switch/ft-toggle-switch.vue' -import { ctrlFHandler, debounce } from '../../helpers/utils' -import { mapActions } from 'vuex' -import { getIconForSortPreference } from '../../helpers/utils' -import { SORT_BY_VALUES } from '../../helpers/history' +import { ctrlFHandler, debounce, getIconForSortPreference } from '../../helpers/utils' +import { mapMutations } from 'vuex' +import { HISTORY_SORT_BY_VALUES } from '../../../constants' const identity = (v) => v @@ -54,15 +53,15 @@ export default defineComponent({ computed: { sortByNames: function () { return [ - this.$t('History.Sort By.DateWatchedNewest'), - this.$t('History.Sort By.DateWatchedOldest'), + this.$t('Global.DateWatchedNewest'), + this.$t('Global.DateWatchedOldest'), ] }, sortOrder: function() { - return this.$store.getters.getSortOrder + return this.$store.getters.getHistorySortOrder }, historyCacheSorted: function () { - return this.sortOrder === SORT_BY_VALUES['DateAddedNewest'] ? this.$store.getters.getHistoryCacheSorted : this.$store.getters.getHistoryCacheSorted.toReversed() + return this.sortOrder === HISTORY_SORT_BY_VALUES.DateAddedNewest ? this.$store.getters.getHistoryCacheSorted : this.$store.getters.getHistoryCacheSorted.toReversed() }, fullData: function () { if (this.historyCacheSorted.length < this.dataLimit) { @@ -72,7 +71,7 @@ export default defineComponent({ } }, sortByValues() { - return Object.values(SORT_BY_VALUES) + return Object.values(HISTORY_SORT_BY_VALUES) } }, watch: { @@ -199,8 +198,8 @@ export default defineComponent({ ctrlFHandler(event, this.$refs.searchBar) }, getIconForSortPreference: (s) => getIconForSortPreference(s), - ...mapActions([ - 'selectSort' + ...mapMutations([ + 'setHistorySortOrder' ]) } }) diff --git a/src/renderer/views/History/History.vue b/src/renderer/views/History/History.vue index d1f1064bbd65e..e998af49264c6 100644 --- a/src/renderer/views/History/History.vue +++ b/src/renderer/views/History/History.vue @@ -22,17 +22,6 @@
- - +