Sort by date on the history page #6214

jlvivero · 2024-11-22T20:13:40Z

Sortbydate

Pull Request Type

Bugfix
Feature Implementation
Documentation
Other

Related issue

Initial addition to #5595 (not sure it would be considered closed and we just make a new issue for future changes)

Description

Adds a sort by date ascending/descending toggle to the history page, this is a stopgap to adding a more fully fledged filter by setting, but I wanted to keep the changes small and incremental since design wise, some decisions have to be made and I'm not sure I'm the one that should make those decisions. (like other kinds of sorting/filtering in history page)

I also removed the second sorting it does when it does the search, since the array it uses is already sorted (in whichever order we choose), and the filter method I believe does a linear scan, it seemed unnecessary to sort twice, if we think it's necessary I can add it back and just add a condition to sort whichever way we need it to (But I don't think it's needed)

Screenshots

Testing

I tested by adding random videos to history, sorting it back and forth, then doing search and sorting back and forth as well

possibly with a huge history we'd like to view how the sorting performs... I don't have a huge history at the moment, so it's hard to tell. it's expected to a certain degree

Desktop

OS: Pop!_OS
OS Version: Pop!_OS 22.04 LTS
FreeTube version: [email protected] dev

Additional context

I stuck to the simple toggle since I was only going to do the asc/desc sorting on this PR

jlvivero · 2024-12-03T15:22:26Z

o: it's been two weeks, hopefully this get reviewed soon so I can make any fixes necessary and/or start work on follow ups

src/renderer/views/History/History.js

kommunarr · 2024-12-03T23:47:09Z

src/renderer/views/History/History.js

@@ -44,14 +41,15 @@ export default defineComponent({
      dataLimit: 100,
      searchDataLimit: 100,
      doCaseSensitiveSearch: false,
+      ascending: false,


Suggested change

ascending: false,

useAscendingOrder: false,

Recommend adjusting the variable name to be more specific.

sounds good, I'll change it

kommunarr · 2024-12-03T23:52:50Z

src/renderer/views/History/History.vue

@@ -28,6 +28,13 @@
          :default-value="doCaseSensitiveSearch"
          @change="doCaseSensitiveSearch = !doCaseSensitiveSearch"
        />
+        <ft-toggle-switch


suggestion (non-blocking): We do tend to use ft-selects for sort selections, and we may have more options for this in the future, so you may want to consider changing it. Not incredibly important at this point, though, aside from making the current labeling more likely to be temporary.

Better have consistent UI unless there is a good reason

ft-select will probably require me to make change to the store, not a problem, but I'm debating then, if I'm using ft-select I should stop using a boolean for this then, I didn't want to use an enum yet, since I don't even know if we will have sorting of anything besides date. (and if we are never sorting by anything else an enum feels unnecessary)

what are your thoughts on using an enum instead?

I can also add boolean as a type to ft-select, but I'm not sure what is the desired approach here

kommunarr · 2024-12-03T23:55:32Z

static/locales/en-US.yaml

@@ -269,6 +269,7 @@ 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 Date ASC: Sort By Date ASC


issue: Related to the above, not a fan of this label, but hard to know of a better alternative without switching to ft-select. If you do do that, looking at the other sorting labels we have, more consistent ones would be DateWatchedOldest: Earliest Watched First and DateWatchedNewest: Latest Watched First

I was also not a big fan of the label, but I also wasn't sure what to write, I'll look into ft-select and update the label accordingly (I like the Latest/Earliest watched first label more)

I changed the sort by texts please take a look

github-actions · 2024-12-07T17:30:38Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

jlvivero · 2024-12-07T17:33:30Z

I made some changes based on feedback, I switched to ft-select, I prepared the store to prepare for more sort options, when more sort options are added, historyCacheSorted would be the place to change things

(instead of just an inline if a case and calls to different sorting would be necessary).

in the case of this sort, it's just reversing the list not actually sorting, if other sorts would be added, we would need to stop doing that and actually sort, so a decision would have to be made if it's worth adding more sorting possibilities that would obviously make sorting slower, particularly with people with huge histories.

github-actions · 2024-12-07T17:48:52Z

Conflicts have been resolved. A maintainer will review the pull request shortly.

jlvivero · 2024-12-07T17:50:27Z

I might have messed up the way I solved the conflicts (let me know if you prefer a clean PR again :(, or if something else)

absidue · 2024-12-07T17:57:17Z

Please solve the conflicts properly, you seem to have pulled in all the commits from the development branch so now it is really difficult to tell what changes are yours and merging this PR will then reland all of the existing changes on the development branch a second time.

The two usual approaches are:

git rebase development: That resets the starting point of your branch back to the current head of the development branch and recommits all of commits from this branch on top of it
git merge development: This merges in the changes from the development branch in a single commit that git recognises as a merge commit so ignores when comparing the changes and when this branch is merged into development

As for how to fix what you have done here, I'm not sure.

github-actions · 2024-12-07T18:09:04Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

jlvivero · 2024-12-07T18:15:34Z

I reset to my latest commit, I used rebase, but I think I messed it up somehow, unsure how it ended that way you can see only my changes now, I'll try to fix the merge conflicts in a bit... HOPEFULLY not messing everything up again lol

had to reset HEAD --hard <my_last_commit>

then I did the rebase properly after that

EDIT. that should have fixed it, sorry about the random trouble... please review when you have the chance

…o ascending

…o more sort types

github-actions · 2024-12-07T18:18:01Z

Conflicts have been resolved. A maintainer will review the pull request shortly.

efb4f5ff-1298-471a-8973-3d47447115dc · 2024-12-08T15:59:43Z

lets emulate the view of the Playlists page, toggle left, dropdown right

change the icon like its done here

VirtualBoxVM_Q9QR4nuIRH.mp4

absidue · 2024-12-26T12:25:04Z

src/renderer/store/modules/history.js

@@ -16,6 +18,10 @@ const getters = {

  getHistoryCacheById(state) {
    return state.historyCacheById
+  },
+
+  getSortOrder(state) {


Getters, mutations and actions are global in the store, please use namespaced names whenever possible (tells other developers where it comes from and avoids name conflicts).

Suggested change

getSortOrder(state) {

getHistorySortOrder(state) {

absidue · 2024-12-26T12:26:07Z

src/renderer/store/modules/history.js

@@ -109,6 +124,11 @@ const mutations = {
    state.historyCacheSorted = historyCacheSorted
  },

+  setSortOrder(state, order) {
+    state.useAscendingOrder = order
+    return state.useAscendingOrder


Unnecessary return.

Suggested change

return state.useAscendingOrder

absidue · 2024-12-26T12:26:18Z

src/renderer/store/modules/history.js

@@ -109,6 +124,11 @@ const mutations = {
    state.historyCacheSorted = historyCacheSorted
  },

+  setSortOrder(state, order) {


Suggested change

setSortOrder(state, order) {

setHistorySortOrder(state, order) {

absidue · 2024-12-26T12:28:29Z

src/renderer/views/History/History.js

+    getIconForSortPreference: (s) => getIconForSortPreference(s),
+    ...mapActions([
+      'selectSort'
+    ])


Suggested change

getIconForSortPreference: (s) => getIconForSortPreference(s),

...mapActions([

'selectSort'

])

getIconForSortPreference,

...mapMutations([

'setHistorySortOrder'

])

absidue · 2024-12-26T12:28:55Z

src/renderer/views/History/History.js

    historyCacheSorted: function () {
-      return this.$store.getters.getHistoryCacheSorted
+      return this.sortOrder === SORT_BY_VALUES['DateAddedNewest'] ? this.$store.getters.getHistoryCacheSorted : this.$store.getters.getHistoryCacheSorted.toReversed()


Suggested change

return this.sortOrder === SORT_BY_VALUES['DateAddedNewest'] ? this.$store.getters.getHistoryCacheSorted : this.$store.getters.getHistoryCacheSorted.toReversed()

return this.sortOrder === SORT_BY_VALUES.DateAddedNewest ? this.$store.getters.getHistoryCacheSorted : this.$store.getters.getHistoryCacheSorted.toReversed()

absidue · 2024-12-26T12:30:06Z

src/renderer/store/modules/history.js

+  async selectSort({ commit }, sort) {
+    try {
+      const order = sort
+      commit('setSortOrder', order)
+    } catch (errMessage) {
+      console.error(errMessage)
+    }
+  },
+


As this action is just a plain wrapper, there isn't any benefit to using it compared to just calling the mutation directly, so it's better to just call the mutation directly in this case.

Suggested change

async selectSort({ commit }, sort) {

try {

const order = sort

commit('setSortOrder', order)

} catch (errMessage) {

console.error(errMessage)

}

},

absidue · 2024-12-26T12:31:20Z

src/renderer/helpers/history.js

+export const SORT_BY_VALUES = {
+  DateAddedNewest: 'newestFirst',
+  DateAddedOldest: 'oldestFirst',
+}


Please move this constant into the src/constants.js file and add HISTORY to its name (not worth creating a new file for a single constant, especially when we already have a file for constants that are used in multiple places).

absidue · 2024-12-26T12:31:31Z

src/renderer/store/modules/history.js


 const state = {
  historyCacheSorted: [],
+  useAscendingOrder: SORT_BY_VALUES['DateAddedNewest'],


Suggested change

useAscendingOrder: SORT_BY_VALUES['DateAddedNewest'],

useAscendingOrder: SORT_BY_VALUES.DateAddedNewest,

absidue · 2024-12-26T12:32:28Z

src/renderer/views/History/History.js

@@ -10,6 +11,9 @@ 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 } from '../../helpers/utils'
+import { mapActions } from 'vuex'


Suggested change

import { mapActions } from 'vuex'

import { mapMutations } from 'vuex'

absidue · 2024-12-26T12:33:36Z

static/locales/en-US.yaml

@@ -270,6 +270,10 @@ 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


We really need to deduplicate this string, as this pull request will add the 6th Sort By string/text, I'll do a separate pull request for that though.

do I

leave it like this for now then?

hard code the string for now (since this string doesn't have translation yet for this specific instance anyways?)

maybe reference another string for now?

I've opened #6495 to deduplicate the strings, if you are willing to wait until that pull request is merged and rebase, you'll be able to use the Global.Sort By string that that pull request adds.

I don't mind, since it's the holidays haven't had time to finish my changes, so I can wait and rebase

github-actions bot added the PR: waiting for review For PRs that are complete, tested, and ready for review label Nov 22, 2024

FreeTubeBot enabled auto-merge (squash) November 22, 2024 20:13

auto-merge was automatically disabled November 22, 2024 20:16
Head branch was pushed to by a user without write access

FreeTubeBot enabled auto-merge (squash) November 22, 2024 20:16

PikachuEXE requested a review from absidue November 22, 2024 22:14

kommunarr reviewed Dec 3, 2024

View reviewed changes

auto-merge was automatically disabled December 7, 2024 17:30
Head branch was pushed to by a user without write access

FreeTubeBot enabled auto-merge (squash) December 7, 2024 17:30

github-actions bot added PR: merge conflicts / rebase needed and removed PR: waiting for review For PRs that are complete, tested, and ready for review labels Dec 7, 2024

auto-merge was automatically disabled December 7, 2024 17:48
Head branch was pushed to by a user without write access

FreeTubeBot enabled auto-merge (squash) December 7, 2024 17:48

github-actions bot removed the PR: merge conflicts / rebase needed label Dec 7, 2024

auto-merge was automatically disabled December 7, 2024 18:08
Head branch was pushed to by a user without write access

jlvivero force-pushed the sortbydate branch from d55efab to e3b4fee Compare December 7, 2024 18:08

github-actions bot added the PR: merge conflicts / rebase needed label Dec 7, 2024

FreeTubeBot enabled auto-merge (squash) December 7, 2024 18:09

JL added 5 commits December 7, 2024 10:16

add a simple toggle switch to change search history from descending t…

f976aeb

…o ascending

add name for english string for sort by date in history

9effe73

add the en-US locale string so that it can be used for translations

6988c3a

switch to using ft-select, updated store, now it's easier to expand t…

1768258

…o more sort types

add renderers helper with map of sort by options

2e99d60

auto-merge was automatically disabled December 7, 2024 18:17
Head branch was pushed to by a user without write access

jlvivero force-pushed the sortbydate branch from e3b4fee to 2e99d60 Compare December 7, 2024 18:17

FreeTubeBot enabled auto-merge (squash) December 7, 2024 18:17

github-actions bot removed the PR: merge conflicts / rebase needed label Dec 7, 2024

efb4f5ff-1298-471a-8973-3d47447115dc added the PR: changes requested label Dec 16, 2024

absidue reviewed Dec 26, 2024

View reviewed changes

absidue changed the title ~~Sortbydate~~ Sort by date on the history page Jan 1, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Sort by date on the history page #6214

Sort by date on the history page #6214

jlvivero commented Nov 22, 2024 •

edited

Loading

jlvivero commented Dec 3, 2024

kommunarr Dec 3, 2024

jlvivero Dec 4, 2024

kommunarr Dec 3, 2024

PikachuEXE Dec 4, 2024

jlvivero Dec 4, 2024

kommunarr Dec 3, 2024

jlvivero Dec 4, 2024

jlvivero Dec 7, 2024

github-actions bot commented Dec 7, 2024

jlvivero commented Dec 7, 2024

github-actions bot commented Dec 7, 2024

jlvivero commented Dec 7, 2024

absidue commented Dec 7, 2024

github-actions bot commented Dec 7, 2024

jlvivero commented Dec 7, 2024 •

edited

Loading

github-actions bot commented Dec 7, 2024

efb4f5ff-1298-471a-8973-3d47447115dc commented Dec 8, 2024 •

edited

Loading

absidue Dec 26, 2024

absidue Dec 26, 2024

absidue Dec 26, 2024

absidue Dec 26, 2024

absidue Dec 26, 2024

absidue Dec 26, 2024

absidue Dec 26, 2024

absidue Dec 26, 2024

absidue Dec 26, 2024

absidue Dec 26, 2024

jlvivero Dec 27, 2024 •

edited

Loading

absidue Jan 1, 2025

jlvivero Jan 2, 2025

	setSortOrder(state, order) {
	setHistorySortOrder(state, order) {

	return this.sortOrder === SORT_BY_VALUES['DateAddedNewest'] ? this.$store.getters.getHistoryCacheSorted : this.$store.getters.getHistoryCacheSorted.toReversed()
	return this.sortOrder === SORT_BY_VALUES.DateAddedNewest ? this.$store.getters.getHistoryCacheSorted : this.$store.getters.getHistoryCacheSorted.toReversed()

	useAscendingOrder: SORT_BY_VALUES['DateAddedNewest'],
	useAscendingOrder: SORT_BY_VALUES.DateAddedNewest,

	import { mapActions } from 'vuex'
	import { mapMutations } from 'vuex'

Sort by date on the history page #6214

Are you sure you want to change the base?

Sort by date on the history page #6214

Conversation

jlvivero commented Nov 22, 2024 • edited Loading

Sortbydate

Pull Request Type

Related issue

Description

Screenshots

Testing

Desktop

Additional context

jlvivero commented Dec 3, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Dec 7, 2024

jlvivero commented Dec 7, 2024

github-actions bot commented Dec 7, 2024

jlvivero commented Dec 7, 2024

absidue commented Dec 7, 2024

github-actions bot commented Dec 7, 2024

jlvivero commented Dec 7, 2024 • edited Loading

github-actions bot commented Dec 7, 2024

efb4f5ff-1298-471a-8973-3d47447115dc commented Dec 8, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jlvivero Dec 27, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jlvivero commented Nov 22, 2024 •

edited

Loading

jlvivero commented Dec 7, 2024 •

edited

Loading

efb4f5ff-1298-471a-8973-3d47447115dc commented Dec 8, 2024 •

edited

Loading

jlvivero Dec 27, 2024 •

edited

Loading