Merge pull request #2050 from jessopb/fileListSort

persist fileList sorting

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

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",

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

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<FileInfo>,
   checkPending?: boolean,
-};
-
-type State = {
   sortBy: string,
+  page: string,
+  setFileListSort: (string, string) => void,
 };
 
-class FileList extends React.PureComponent<Props, State> {
+class FileList extends React.PureComponent<Props> {
   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<Props, State> {
               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<Props, State> {
               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<Props, State> {
           }
           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<Props, State> {
   };
 
   handleSortChanged(event: SyntheticInputEvent<*>) {
-    this.setState({
+    this.props.setFileListSort(this.props.page, event.target.value);
-      sortBy: event.target.value,
-    });
   }
 
   sortFunctions: {};
 
   render() {
-    const { fileInfos, hideFilter, checkPending } = this.props;
+    const { fileInfos, hideFilter, checkPending, sortBy } = this.props;
-    const { sortBy } = this.state;
     const content = [];
-
     if (!fileInfos) {
       return null;
     }
@@ -174,9 +164,9 @@ class FileList extends React.PureComponent<Props, State> {
               value={sortBy}
               onChange={this.handleSortChanged}
             >
-              <option value="dateNew">{__('Newest First')}</option>
+              <option value={SORT_OPTIONS.DATE_NEW}>{__('Newest First')}</option>
-              <option value="dateOld">{__('Oldest First')}</option>
+              <option value={SORT_OPTIONS.DATE_OLD}>{__('Oldest First')}</option>
-              <option value="title">{__('Title')}</option>
+              <option value={SORT_OPTIONS.TITLE}>{__('Title')}</option>
             </FormField>
           </div>
         )}

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 => ({

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<Props> {
   render() {
-    const { fetching, fileInfos, navigate } = this.props;
+    const { fetching, fileInfos, navigate, sortBy } = this.props;
     const hasDownloads = fileInfos && Object.values(fileInfos).length > 0;
 
     return (
       <Page notContained loading={fetching}>
         {hasDownloads ? (
-          <FileList fileInfos={fileInfos} />
+          <FileList fileInfos={fileInfos} sortBy={sortBy} page={PAGES.DOWNLOADED} />
         ) : (
           <div className="page__empty">
             <h3 className="card__title">{__("You haven't downloaded anything from LBRY yet.")}</h3>

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 => ({

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<Props> {
@@ -21,12 +23,18 @@ class FileListPublished extends React.PureComponent<Props> {
   }
 
   render() {
-    const { fetching, claims, navigate } = this.props;
+    const { fetching, claims, navigate, sortBy } = this.props;
 
     return (
       <Page notContained loading={fetching}>
         {claims && claims.length ? (
-          <FileList checkPending fileInfos={claims} sortByHeight />
+          <FileList
+            checkPending
+            fileInfos={claims}
+            sortByHeight
+            sortBy={sortBy}
+            page={PAGES.PUBLISHED}
+          />
         ) : (
           <div className="page__empty">
             <h3 className="card__title">

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

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<string>, // 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<Props> {
@@ -44,13 +45,19 @@ export default class extends React.PureComponent<Props> {
   }
 
   renderSubscriptions() {
-    const { viewMode, unreadSubscriptions, allSubscriptions } = this.props;
+    const { viewMode, unreadSubscriptions, allSubscriptions, sortBy } = this.props;
 
     if (viewMode === VIEW_ALL) {
       return (
         <React.Fragment>
           <div className="card__title">{__('Your subscriptions')}</div>
-          <FileList hideFilter sortByHeight fileInfos={allSubscriptions} />
+          <FileList
+            hideFilter
+            sortByHeight
+            fileInfos={allSubscriptions}
+            sortBy={sortBy}
+            page={PAGES.SUBSCRIPTIONS}
+          />
         </React.Fragment>
       );
     }

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

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"