persist fileList sorting

This commit is contained in:
Jessop Breth 2018-10-22 22:02:19 -04:00
parent c35b13cdc0
commit 490e9beed3
9 changed files with 52 additions and 35 deletions

View file

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

View file

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

View file

@ -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({
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<Props, State> {
value={sortBy}
onChange={this.handleSortChanged}
>
<option value="dateNew">{__('Newest First')}</option>
<option value="dateOld">{__('Oldest First')}</option>
<option value="title">{__('Title')}</option>
<option value={SORT_OPTIONS.DATE_NEW}>{__('Newest First')}</option>
<option value={SORT_OPTIONS.DATE_OLD}>{__('Oldest First')}</option>
<option value={SORT_OPTIONS.TITLE}>{__('Title')}</option>
</FormField>
</div>
)}

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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