update vuex to use mutations over action wrapper, fix css, add code r…

…eview suggestions and fixes

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
 }

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) {

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);
 }

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'
     ])
   }
 })

src/renderer/views/History/History.vue

@@ -22,24 +22,23 @@
       <div
         class="optionsRow"
       >
-        <ft-select
-          v-if="fullData.length > 1"
-          class="sortSelect"
-          :placeholder="$t('History.Sort By.Sort By')"
-          :value="sortOrder"
-          :select-names="sortByNames"
-          :select-values="sortByValues"
-          :icon="getIconForSortPreference(sortOrder)"
-          @change="selectSort"
-        />
-
         <ft-toggle-switch
           v-if="fullData.length > 1"
           :label="$t('History.Case Sensitive Search')"
           :compact="true"
           :default-value="doCaseSensitiveSearch"
           @change="doCaseSensitiveSearch = !doCaseSensitiveSearch"
         />
+        <ft-select
+          v-if="fullData.length > 1"
+          class="sortSelect"
+          :placeholder="$t('Global.Sort By')"
+          :value="sortOrder"
+          :select-names="sortByNames"
+          :select-values="sortByValues"
+          :icon="getIconForSortPreference(setHistorySortOrder)"
+          @change="setHistorySortOrder"
+        />
       </div>
       <ft-flex-box
         v-show="fullData.length === 0"

static/locales/en-US.yaml

@@ -49,6 +49,8 @@ Global:
   Live: Live
   Community: Community
   Sort By: Sort By
+  DateWatchedOldest: Earliest Watched First
+  DateWatchedNewest: Latest Watched First
   Counts:
     Video Count: 1 video | {count} videos
     Channel Count: 1 channel | {count} channels
@@ -265,10 +267,6 @@ History:
   Empty Search Message: There are no videos in your history that match your search
   Search bar placeholder: "Search in History"
   Case Sensitive Search: Case Sensitive Search
-  Sort By:
-    Sort By: Sort By
-    DateWatchedOldest: Earliest Watched First
-    DateWatchedNewest: Latest Watched First
 Settings:
   # On Settings Page
   Settings: Settings