From 490e9beed32b2b2add690f04b6c023a85bbf578d Mon Sep 17 00:00:00 2001 From: Jessop Breth Date: Mon, 22 Oct 2018 22:02:19 -0400 Subject: [PATCH 1/3] persist fileList sorting --- CHANGELOG.md | 1 + src/renderer/component/fileList/index.js | 12 ++++--- src/renderer/component/fileList/view.jsx | 36 +++++++------------ src/renderer/page/fileListDownloaded/index.js | 2 ++ src/renderer/page/fileListDownloaded/view.jsx | 6 ++-- src/renderer/page/fileListPublished/index.js | 3 +- src/renderer/page/fileListPublished/view.jsx | 12 +++++-- src/renderer/page/subscriptions/index.js | 2 ++ src/renderer/page/subscriptions/view.jsx | 13 +++++-- 9 files changed, 52 insertions(+), 35 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 356c1bfd7..be36182d8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). * Content loading placeholder styles on FileCard/FileTile ([#2022](https://github.com/lbryio/lbry-desktop/pull/2022)) * Persistence to Transaction List Filter Selection ([#2048](https://github.com/lbryio/lbry-desktop/pull/2048)) * Subscription improvements ([#2031](https://github.com/lbryio/lbry-desktop/pull/2031)) + * Adds Persistence to File List Filter Selections ([#2050](https://github.com/lbryio/lbry-desktop/pull/2050)) ### Changed * Make tooltip smarter ([#1979](https://github.com/lbryio/lbry-desktop/pull/1979)) diff --git a/src/renderer/component/fileList/index.js b/src/renderer/component/fileList/index.js index 0bcb519e5..b6c075cf9 100644 --- a/src/renderer/component/fileList/index.js +++ b/src/renderer/component/fileList/index.js @@ -1,12 +1,16 @@ -import React from 'react'; import { connect } from 'react-redux'; +import { selectClaimsById, doSetFileListSort } from 'lbry-redux'; import FileList from './view'; -import { selectClaimsById } from 'lbry-redux'; const select = state => ({ claimsById: selectClaimsById(state), }); -const perform = dispatch => ({}); +const perform = dispatch => ({ + setFileListSort: (page, value) => dispatch(doSetFileListSort(page, value)), +}); -export default connect(select, perform)(FileList); +export default connect( + select, + perform +)(FileList); diff --git a/src/renderer/component/fileList/view.jsx b/src/renderer/component/fileList/view.jsx index 182461a48..b2b1eaa45 100644 --- a/src/renderer/component/fileList/view.jsx +++ b/src/renderer/component/fileList/view.jsx @@ -1,6 +1,6 @@ // @flow import * as React from 'react'; -import { buildURI } from 'lbry-redux'; +import { buildURI, SORT_OPTIONS } from 'lbry-redux'; import { FormField } from 'component/common/form'; import FileCard from 'component/fileCard'; import type { FileInfo } from 'types/file_info'; @@ -11,28 +11,22 @@ type Props = { claimsById: Array<{}>, fileInfos: Array, checkPending?: boolean, -}; - -type State = { sortBy: string, + page: string, + setFileListSort: (string, string) => void, }; -class FileList extends React.PureComponent { +class FileList extends React.PureComponent { static defaultProps = { hideFilter: false, }; constructor(props: Props) { super(props); - - this.state = { - sortBy: 'dateNew', - }; - (this: any).handleSortChanged = this.handleSortChanged.bind(this); this.sortFunctions = { - dateNew: fileInfos => + [SORT_OPTIONS.DATE_NEW]: fileInfos => this.props.sortByHeight ? fileInfos.sort((fileInfo1, fileInfo2) => { if (fileInfo1.pending) { @@ -57,7 +51,7 @@ class FileList extends React.PureComponent { return 0; }) : [...fileInfos].reverse(), - dateOld: fileInfos => + [SORT_OPTIONS.DATE_OLD]: fileInfos => this.props.sortByHeight ? fileInfos.slice().sort((fileInfo1, fileInfo2) => { const height1 = this.props.claimsById[fileInfo1.claim_id] @@ -74,7 +68,7 @@ class FileList extends React.PureComponent { return 0; }) : fileInfos, - title: fileInfos => + [SORT_OPTIONS.TITLE]: fileInfos => fileInfos.slice().sort((fileInfo1, fileInfo2) => { const getFileTitle = fileInfo => { const { value, metadata, name, claim_name: claimName } = fileInfo; @@ -98,7 +92,7 @@ class FileList extends React.PureComponent { } return 0; }), - filename: fileInfos => + [SORT_OPTIONS.FILENAME]: fileInfos => fileInfos.slice().sort(({ file_name: fileName1 }, { file_name: fileName2 }) => { const fileName1Lower = fileName1.toLowerCase(); const fileName2Lower = fileName2.toLowerCase(); @@ -124,18 +118,14 @@ class FileList extends React.PureComponent { }; handleSortChanged(event: SyntheticInputEvent<*>) { - this.setState({ - sortBy: event.target.value, - }); + this.props.setFileListSort(this.props.page, event.target.value); } sortFunctions: {}; render() { - const { fileInfos, hideFilter, checkPending } = this.props; - const { sortBy } = this.state; + const { fileInfos, hideFilter, checkPending, sortBy } = this.props; const content = []; - if (!fileInfos) { return null; } @@ -174,9 +164,9 @@ class FileList extends React.PureComponent { value={sortBy} onChange={this.handleSortChanged} > - - - + + + )} diff --git a/src/renderer/page/fileListDownloaded/index.js b/src/renderer/page/fileListDownloaded/index.js index 3542431c7..cfc3e4588 100644 --- a/src/renderer/page/fileListDownloaded/index.js +++ b/src/renderer/page/fileListDownloaded/index.js @@ -3,6 +3,7 @@ import { selectFileInfosDownloaded, selectMyClaimsWithoutChannels, selectIsFetchingFileList, + selectFileListDownloadedSort, } from 'lbry-redux'; import { doNavigate } from 'redux/actions/navigation'; import FileListDownloaded from './view'; @@ -11,6 +12,7 @@ const select = state => ({ fileInfos: selectFileInfosDownloaded(state), fetching: selectIsFetchingFileList(state), claims: selectMyClaimsWithoutChannels(state), + sortBy: selectFileListDownloadedSort(state), }); const perform = dispatch => ({ diff --git a/src/renderer/page/fileListDownloaded/view.jsx b/src/renderer/page/fileListDownloaded/view.jsx index 79e8e80fb..65045154d 100644 --- a/src/renderer/page/fileListDownloaded/view.jsx +++ b/src/renderer/page/fileListDownloaded/view.jsx @@ -3,22 +3,24 @@ import React from 'react'; import Button from 'component/button'; import FileList from 'component/fileList'; import Page from 'component/page'; +import { PAGES } from 'lbry-redux'; type Props = { fetching: boolean, fileInfos: {}, navigate: (string, ?{}) => void, + sortBy: string, }; class FileListDownloaded extends React.PureComponent { render() { - const { fetching, fileInfos, navigate } = this.props; + const { fetching, fileInfos, navigate, sortBy } = this.props; const hasDownloads = fileInfos && Object.values(fileInfos).length > 0; return ( {hasDownloads ? ( - + ) : (

{__("You haven't downloaded anything from LBRY yet.")}

diff --git a/src/renderer/page/fileListPublished/index.js b/src/renderer/page/fileListPublished/index.js index 81ce5cc47..871c44ed5 100644 --- a/src/renderer/page/fileListPublished/index.js +++ b/src/renderer/page/fileListPublished/index.js @@ -1,6 +1,6 @@ import { connect } from 'react-redux'; import { selectPendingPublishes, selectClaimsWithPendingPublishes } from 'redux/selectors/publish'; -import { selectIsFetchingClaimListMine } from 'lbry-redux'; +import { selectIsFetchingClaimListMine, selectFileListPublishedSort } from 'lbry-redux'; import { doNavigate } from 'redux/actions/navigation'; import { doCheckPendingPublishes } from 'redux/actions/publish'; import FileListPublished from './view'; @@ -9,6 +9,7 @@ const select = state => ({ claims: selectClaimsWithPendingPublishes(state), fetching: selectIsFetchingClaimListMine(state), pendingPublishes: selectPendingPublishes(state), + sortBy: selectFileListPublishedSort(state), }); const perform = dispatch => ({ diff --git a/src/renderer/page/fileListPublished/view.jsx b/src/renderer/page/fileListPublished/view.jsx index 8b9b1b84c..d25fb8c9b 100644 --- a/src/renderer/page/fileListPublished/view.jsx +++ b/src/renderer/page/fileListPublished/view.jsx @@ -3,6 +3,7 @@ import React from 'react'; import Button from 'component/button'; import FileList from 'component/fileList'; import Page from 'component/page'; +import { PAGES } from 'lbry-redux'; type Props = { pendingPublishes: Array<{}>, @@ -10,6 +11,7 @@ type Props = { checkIfPublishesConfirmed: (Array<{}>) => void, navigate: (string, ?{}) => void, fetching: boolean, + sortBy: string, }; class FileListPublished extends React.PureComponent { @@ -21,12 +23,18 @@ class FileListPublished extends React.PureComponent { } render() { - const { fetching, claims, navigate } = this.props; + const { fetching, claims, navigate, sortBy } = this.props; return ( {claims && claims.length ? ( - + ) : (

diff --git a/src/renderer/page/subscriptions/index.js b/src/renderer/page/subscriptions/index.js index a62734e5d..70fb57fc3 100644 --- a/src/renderer/page/subscriptions/index.js +++ b/src/renderer/page/subscriptions/index.js @@ -15,6 +15,7 @@ import { } from 'redux/actions/subscriptions'; import { doSetClientSetting } from 'redux/actions/settings'; import { makeSelectClientSetting } from 'redux/selectors/settings'; +import { selectFileListSubscriptionSort } from 'lbry-redux'; import SubscriptionsPage from './view'; const select = state => ({ @@ -25,6 +26,7 @@ const select = state => ({ autoDownload: makeSelectClientSetting(settings.AUTO_DOWNLOAD)(state), allSubscriptions: selectSubscriptionClaims(state), unreadSubscriptions: selectUnreadSubscriptions(state), + sortBy: selectFileListSubscriptionSort(state), viewMode: selectViewMode(state), }); diff --git a/src/renderer/page/subscriptions/view.jsx b/src/renderer/page/subscriptions/view.jsx index 5b7b80578..fa039d318 100644 --- a/src/renderer/page/subscriptions/view.jsx +++ b/src/renderer/page/subscriptions/view.jsx @@ -10,7 +10,7 @@ import FileList from 'component/fileList'; import HiddenNsfwClaims from 'component/hiddenNsfwClaims'; import { FormField } from 'component/common/form'; import FileCard from 'component/fileCard'; -import { parseURI } from 'lbry-redux'; +import { parseURI, PAGES } from 'lbry-redux'; type Props = { subscribedChannels: Array, // The channels a user is subscribed to @@ -25,6 +25,7 @@ type Props = { doSetViewMode: ViewMode => void, doFetchMySubscriptions: () => void, doSetClientSetting: (string, boolean) => void, + sortBy: string, }; export default class extends React.PureComponent { @@ -44,13 +45,19 @@ export default class extends React.PureComponent { } renderSubscriptions() { - const { viewMode, unreadSubscriptions, allSubscriptions } = this.props; + const { viewMode, unreadSubscriptions, allSubscriptions, sortBy } = this.props; if (viewMode === VIEW_ALL) { return (
{__('Your subscriptions')}
- + ); } From 50264c3ab2e2c991a76df656f07b420a72bf9a7b Mon Sep 17 00:00:00 2001 From: Sean Yesmunt Date: Thu, 25 Oct 2018 01:44:41 -0400 Subject: [PATCH 2/3] update lbry-redux --- package.json | 2 +- yarn.lock | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index db3484c92..0dce4c7e0 100644 --- a/package.json +++ b/package.json @@ -49,7 +49,7 @@ "formik": "^0.10.4", "hast-util-sanitize": "^1.1.2", "keytar": "^4.2.1", - "lbry-redux": "lbryio/lbry-redux#957d221c1830ecbb7a9e74fad78e711fb14539f4", + "lbry-redux": "lbryio/lbry-redux#03aea43da5f12bc01546a92bdf460ebd08681013", "lbryinc": "lbryio/lbryinc#3f34af546ee73ff2ee7d8ad05e540b3b0aa658fb", "localforage": "^1.7.1", "mammoth": "^1.4.6", diff --git a/yarn.lock b/yarn.lock index dc58dee33..208228689 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5670,9 +5670,9 @@ lbry-redux@lbryio/lbry-redux: proxy-polyfill "0.1.6" reselect "^3.0.0" -lbry-redux@lbryio/lbry-redux#957d221c1830ecbb7a9e74fad78e711fb14539f4: +lbry-redux@lbryio/lbry-redux#03aea43da5f12bc01546a92bdf460ebd08681013: version "0.0.1" - resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/957d221c1830ecbb7a9e74fad78e711fb14539f4" + resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/03aea43da5f12bc01546a92bdf460ebd08681013" dependencies: proxy-polyfill "0.1.6" reselect "^3.0.0" From 78fe88eed77b352fa4fdc06e7ebd9a8d441a4d7a Mon Sep 17 00:00:00 2001 From: Sean Yesmunt Date: Thu, 25 Oct 2018 02:01:32 -0400 Subject: [PATCH 3/3] persist fileSort options when the app is closed --- src/renderer/store.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/renderer/store.js b/src/renderer/store.js index 1bedc273b..b6e191885 100644 --- a/src/renderer/store.js +++ b/src/renderer/store.js @@ -103,15 +103,19 @@ const compressor = createCompressor(); // const saveClaimsFilter = createFilter('claims', ['byId', 'claimsByUri']); const subscriptionsFilter = createFilter('subscriptions', ['subscriptions', 'unread', 'viewMode']); const contentFilter = createFilter('content', ['positions', 'history']); - +const fileInfoFilter = createFilter('fileInfo', [ + 'fileListPublishedSort', + 'fileListDownloadedSort', + 'fileListSubscriptionSort', +]); // We only need to persist the receiveAddress for the wallet const walletFilter = createFilter('wallet', ['receiveAddress']); const persistOptions = { - whitelist: ['subscriptions', 'publish', 'wallet', 'content'], + whitelist: ['subscriptions', 'publish', 'wallet', 'content', 'fileInfo'], // Order is important. Needs to be compressed last or other transforms can't // read the data - transforms: [subscriptionsFilter, walletFilter, contentFilter, compressor], + transforms: [subscriptionsFilter, walletFilter, contentFilter, fileInfoFilter, compressor], debounce: 10000, storage: localForage, };