add ability to mark all subscriptions as read

src/renderer/component/categoryList/view.jsx

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

src/renderer/component/subscribeMarkAsRead/index.js

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

src/renderer/component/subscribeMarkAsRead/view.jsx

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

src/renderer/page/subscriptions/internal/user-subscriptions.jsx

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

src/renderer/redux/actions/subscriptions.js

@@ -167,18 +167,31 @@ 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
+  // If no uris are passed in, remove them all
+  let newUris;
+  if (readUris) {
     const urisToRemoveMap = readUris.reduce(
       (acc, val) => ({
         ...acc,
@@ -188,7 +201,10 @@ export const doRemoveUnreadSubscriptions = (channelUri: string, readUris: Array<
     );
 
     const filteredUris = currentChannelUnread.uris.filter(uri => !urisToRemoveMap[uri]);
-  const newUris = filteredUris.length ? filteredUris : null;
+    newUris = filteredUris.length ? filteredUris : null;
+  } else {
+    newUris = null;
+  }
 
   dispatch({
     type: ACTIONS.REMOVE_SUBSCRIPTION_UNREADS,

src/renderer/redux/reducers/subscriptions.js

@@ -66,7 +66,8 @@ export default handleActions(
       action: SetSubscriptionLatest
     ): SubscriptionState => ({
       ...state,
-      subscriptions: state.subscriptions.map(subscription =>
+      subscriptions: state.subscriptions.map(
+        subscription =>
           subscription.channelName === action.data.subscription.channelName
             ? { ...subscription, latest: action.data.uri }
             : subscription
@@ -94,13 +95,20 @@ export default handleActions(
       action: DoRemoveSubscriptionUnreads
     ): SubscriptionState => {
       const { channel, uris } = action.data;
-      const newUnread = { ...state.unread };
+
+      // 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 = {};
+      }
 
       return {
         ...state,

src/renderer/scss/component/_button.scss

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