add ability to mark all subscriptions as read

This commit is contained in:
Sean Yesmunt 2018-11-27 17:16:23 -05:00
parent 0562ed866b
commit c07214ef7a
7 changed files with 108 additions and 21 deletions

View file

@ -1,7 +1,7 @@
// @flow
import type { Claim } from 'types/claim';
import * as ICONS from 'constants/icons';
import * as React from 'react';
import React, { PureComponent } from 'react';
import { normalizeURI } from 'lbry-redux';
import ToolTip from 'component/common/tooltip';
import FileCard from 'component/fileCard';

View file

@ -0,0 +1,10 @@
import { connect } from 'react-redux';
import { doRemoveUnreadSubscriptions } from 'redux/actions/subscriptions';
import MarkAsRead from './view';
export default connect(
null,
{
doRemoveUnreadSubscriptions,
}
)(MarkAsRead);

View file

@ -0,0 +1,40 @@
// @flow
import * as ICONS from 'constants/icons';
import React, { PureComponent } from 'react';
import Button from 'component/button';
type Props = {
channel: ?string,
doRemoveUnreadSubscriptions: (?string) => void,
};
export default class MarkAsRead extends PureComponent<Props> {
constructor() {
super();
(this: any).handleClick = this.handleClick.bind(this);
}
handleClick() {
const { channel, doRemoveUnreadSubscriptions } = this.props;
// If there is no channel, mark all as read
// If there is a channel, only mark that channel as read
if (channel) {
doRemoveUnreadSubscriptions(channel);
} else {
doRemoveUnreadSubscriptions();
}
}
render() {
return (
<Button
noPadding
button="inverse"
icon={ICONS.CHECK_SIMPLE}
label={__('Mark as read')}
onClick={this.handleClick}
/>
);
}
}

View file

@ -11,6 +11,7 @@ import FileCard from 'component/fileCard';
import { parseURI } from 'lbry-redux';
import Native from 'native';
import SuggestedSubscriptions from 'component/subscribeSuggested';
import MarkAsRead from 'component/subscribeMarkAsRead';
type Props = {
viewMode: ViewMode,
@ -90,7 +91,10 @@ export default (props: Props) => {
<div className="card__content">
{viewMode === VIEW_ALL && (
<Fragment>
<div className="card__title">{__('Your subscriptions')}</div>
<div className="card__title card__actions card__actions--no-margin">
{__('Your subscriptions')}
{unreadSubscriptions.length > 0 && <MarkAsRead />}
</div>
<FileList hideFilter sortByHeight fileInfos={subscriptions} />
</Fragment>
)}
@ -102,13 +106,14 @@ export default (props: Props) => {
const { claimName } = parseURI(channel);
return (
<section key={channel}>
<div className="card__title">
<div className="card__title card__actions card__actions--no-margin">
<Button
button="link"
navigate="/show"
navigateParams={{ uri: channel }}
label={claimName}
/>
<MarkAsRead channel={channel} />
</div>
<div className="card__list card__content">
{uris.map(uri => <FileCard key={uri} uri={uri} />)}

View file

@ -167,28 +167,44 @@ export const doUpdateUnreadSubscriptions = (
};
// Remove multiple files (or all) from a channels unread subscriptions
export const doRemoveUnreadSubscriptions = (channelUri: string, readUris: Array<string>) => (
export const doRemoveUnreadSubscriptions = (channelUri: ?string, readUris: ?Array<string>) => (
dispatch: ReduxDispatch,
getState: GetState
) => {
const state = getState();
const unreadByChannel = selectUnreadByChannel(state);
// If no channel is passed in, remove all unread subscriptions from all channels
if (!channelUri) {
return dispatch({
type: ACTIONS.REMOVE_SUBSCRIPTION_UNREADS,
data: { channel: null },
});
}
const currentChannelUnread = unreadByChannel[channelUri];
if (!currentChannelUnread || !currentChannelUnread.uris) {
// Channel passed in doesn't have any unreads
return;
}
// For each uri passed in, remove it from the list of unread uris
const urisToRemoveMap = readUris.reduce(
(acc, val) => ({
...acc,
[val]: true,
}),
{}
);
// If no uris are passed in, remove them all
let newUris;
if (readUris) {
const urisToRemoveMap = readUris.reduce(
(acc, val) => ({
...acc,
[val]: true,
}),
{}
);
const filteredUris = currentChannelUnread.uris.filter(uri => !urisToRemoveMap[uri]);
const newUris = filteredUris.length ? filteredUris : null;
const filteredUris = currentChannelUnread.uris.filter(uri => !urisToRemoveMap[uri]);
newUris = filteredUris.length ? filteredUris : null;
} else {
newUris = null;
}
dispatch({
type: ACTIONS.REMOVE_SUBSCRIPTION_UNREADS,

View file

@ -66,10 +66,11 @@ export default handleActions(
action: SetSubscriptionLatest
): SubscriptionState => ({
...state,
subscriptions: state.subscriptions.map(subscription =>
subscription.channelName === action.data.subscription.channelName
? { ...subscription, latest: action.data.uri }
: subscription
subscriptions: state.subscriptions.map(
subscription =>
subscription.channelName === action.data.subscription.channelName
? { ...subscription, latest: action.data.uri }
: subscription
),
}),
[ACTIONS.UPDATE_SUBSCRIPTION_UNREADS]: (
@ -94,12 +95,19 @@ export default handleActions(
action: DoRemoveSubscriptionUnreads
): SubscriptionState => {
const { channel, uris } = action.data;
const newUnread = { ...state.unread };
if (!uris) {
delete newUnread[channel];
// If no channel is passed in, remove all unreads
let newUnread;
if (channel) {
newUnread = { ...state.unread };
if (!uris) {
delete newUnread[channel];
} else {
newUnread[channel].uris = uris;
}
} else {
newUnread[channel].uris = uris;
newUnread = {};
}
return {

View file

@ -32,6 +32,14 @@
}
}
&.btn--no-padding {
.btn__content {
padding: 0;
display: flex;
align-items: center;
}
}
&.btn--alt {
&:not(:disabled) {
background-color: $lbry-white;