persist fileList sorting
This commit is contained in:
parent
c35b13cdc0
commit
490e9beed3
9 changed files with 52 additions and 35 deletions
|
@ -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))
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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>
|
||||
)}
|
||||
|
|
|
@ -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 => ({
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 => ({
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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),
|
||||
});
|
||||
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue