AbandonedChannelPreview: Handle blocked channels as well.

Issue 3800

ui/component/abandonedChannelPreview/index.js

@@ -1,10 +1,14 @@
 import { connect } from 'react-redux';
+import { selectBlockedChannels } from 'lbry-redux';
 import { doChannelUnsubscribe } from 'redux/actions/subscriptions';
+import { doOpenModal } from 'redux/actions/app';
 import AbandonedChannelPreview from './view';
 
-export default connect(
+const select = (state, props) => ({
-  null,
+  blockedChannelUris: selectBlockedChannels(state),
-  {
+});
-    doChannelUnsubscribe,
+
-  }
+export default connect(select, {
-)(AbandonedChannelPreview);
+  doChannelUnsubscribe,
+  doOpenModal,
+})(AbandonedChannelPreview);

ui/component/abandonedChannelPreview/view.jsx

@@ -5,6 +5,7 @@ import ChannelThumbnail from 'component/channelThumbnail';
 import Button from 'component/button';
 import { parseURI } from 'lbry-redux';
 import * as ICONS from '../../constants/icons';
+import * as MODALS from 'constants/modal_types';
 
 type SubscriptionArgs = {
   channelName: string,
@@ -15,11 +16,14 @@ type Props = {
   uri: string,
   doChannelUnsubscribe: SubscriptionArgs => void,
   type: string,
+  blockedChannelUris: Array<string>,
+  doOpenModal: (string, {}) => void,
 };
 
 function AbandonedChannelPreview(props: Props) {
-  const { uri, doChannelUnsubscribe, type } = props;
+  const { uri, doChannelUnsubscribe, type, blockedChannelUris, doOpenModal } = props;
   const { channelName } = parseURI(uri);
+  const isBlockedChannel = blockedChannelUris.includes(uri);
 
   return (
     <li className={classnames('claim-preview__wrapper', 'claim-preview__wrapper--notice')}>
@@ -33,20 +37,31 @@ function AbandonedChannelPreview(props: Props) {
             <div className="media__subtitle">{__(`This channel may have been unpublished.`)}</div>
           </div>
           <div className="claim-preview__actions">
+            {isBlockedChannel && (
+              <Button
+                iconColor="red"
+                icon={ICONS.UNBLOCK}
+                button={'alt'}
+                label={__('Unblock')}
+                onClick={() => doOpenModal(MODALS.REMOVE_BLOCKED, { blockedUri: uri })}
+              />
+            )}
             {/* SubscribeButton uses resolved permanentUri; modifying it didn't seem worth it. */}
-            <Button
+            {!isBlockedChannel && (
-              iconColor="red"
+              <Button
-              icon={ICONS.UNSUBSCRIBE}
+                iconColor="red"
-              button={'alt'}
+                icon={ICONS.UNSUBSCRIBE}
-              label={__('Unfollow')}
+                button={'alt'}
-              onClick={e => {
+                label={__('Unfollow')}
-                e.stopPropagation();
+                onClick={e => {
-                doChannelUnsubscribe({
+                  e.stopPropagation();
-                  channelName: `@${channelName}`,
+                  doChannelUnsubscribe({
-                  uri,
+                    channelName: `@${channelName}`,
-                });
+                    uri,
-              }}
+                  });
-            />
+                }}
+              />
+            )}
           </div>
         </div>
       </div>