From e1f2d8938b344607d8c5dc7c3066f652695386b0 Mon Sep 17 00:00:00 2001
From: jessop <jessop@lbry.com>
Date: Fri, 2 Aug 2019 11:11:31 -0400
Subject: [PATCH] changes after review

---
 src/ui/component/blockButton/index.js      |  3 ++-
 src/ui/component/blockButton/view.jsx      |  7 ++++---
 src/ui/component/channelContent/view.jsx   |  2 +-
 src/ui/component/channelThumbnail/view.jsx |  8 ++++----
 src/ui/component/claimPreview/view.jsx     | 19 +++++--------------
 src/ui/page/listBlocked/view.jsx           |  7 +++----
 src/ui/reducers.js                         |  5 ++---
 src/ui/store.js                            |  4 ++--
 8 files changed, 23 insertions(+), 32 deletions(-)

diff --git a/src/ui/component/blockButton/index.js b/src/ui/component/blockButton/index.js
index f641ef9f1..430531c48 100644
--- a/src/ui/component/blockButton/index.js
+++ b/src/ui/component/blockButton/index.js
@@ -1,9 +1,10 @@
 import { connect } from 'react-redux';
-import { selectChannelIsBlocked, doToggleBlockChannel, doToast } from 'lbry-redux';
+import { selectChannelIsBlocked, doToggleBlockChannel, doToast, makeSelectShortUrlForUri } from 'lbry-redux';
 import BlockButton from './view';
 
 const select = (state, props) => ({
   channelIsBlocked: selectChannelIsBlocked(props.uri)(state),
+  shortUrl: makeSelectShortUrlForUri(props.uri)(state),
 });
 
 export default connect(
diff --git a/src/ui/component/blockButton/view.jsx b/src/ui/component/blockButton/view.jsx
index 912742b59..210a5001c 100644
--- a/src/ui/component/blockButton/view.jsx
+++ b/src/ui/component/blockButton/view.jsx
@@ -7,6 +7,7 @@ import useHover from 'util/use-hover';
 
 type Props = {
   uri: string,
+  shortUrl: string,
   isSubscribed: boolean,
   toggleBlockChannel: (uri: string) => void,
   channelIsBlocked: boolean,
@@ -14,7 +15,7 @@ type Props = {
 };
 
 export default function BlockButton(props: Props) {
-  const { uri, toggleBlockChannel, channelIsBlocked, doToast } = props;
+  const { uri, shortUrl, toggleBlockChannel, channelIsBlocked, doToast } = props;
 
   const blockRef = useRef();
   const isHovering = useHover(blockRef);
@@ -25,13 +26,13 @@ export default function BlockButton(props: Props) {
     <Button
       ref={blockRef}
       iconColor="red"
-      icon={blockedOverride ? ICONS.UNBLOCK : ICONS.BLOCK}
+      icon={ICONS.BLOCK}
       button={'alt'}
       label={blockedOverride || blockLabel}
       onClick={e => {
         e.stopPropagation();
         if (!channelIsBlocked) {
-          doToast({ message: `Blocked ${uri}`, linkText: 'Manage', linkTarget: `/${PAGES.BLOCKED}` });
+          doToast({ message: `Blocked ${shortUrl}`, linkText: 'Manage', linkTarget: `/${PAGES.BLOCKED}` });
         }
         toggleBlockChannel(uri);
       }}
diff --git a/src/ui/component/channelContent/view.jsx b/src/ui/component/channelContent/view.jsx
index 40e1c98ab..2d04fab7d 100644
--- a/src/ui/component/channelContent/view.jsx
+++ b/src/ui/component/channelContent/view.jsx
@@ -36,7 +36,7 @@ function ChannelContent(props: Props) {
 
       {!fetching && channelIsBlocked && (
         <div className="card--section">
-          <h2 className="card__content help">{__('You have blocked this channel content.')}</h2>
+          <h2 className="help">{__('You have blocked this channel content.')}</h2>
         </div>
       )}
 
diff --git a/src/ui/component/channelThumbnail/view.jsx b/src/ui/component/channelThumbnail/view.jsx
index 9d73f4c25..75dc316b4 100644
--- a/src/ui/component/channelThumbnail/view.jsx
+++ b/src/ui/component/channelThumbnail/view.jsx
@@ -19,15 +19,15 @@ function ChannelThumbnail(props: Props) {
   const { channelName } = parseURI(uri);
   const initializer = channelName.charCodeAt(0) - 65; // will be between 0 and 57
   const colorClassName = `channel-thumbnail__default--${initializer % 4}`;
-
+  const showThumb = !obscure && !!thumbnail;
   return (
     <div
       className={classnames('channel-thumbnail', className, {
-        [colorClassName]: !thumbnail,
+        [colorClassName]: !showThumb,
       })}
     >
-      {(!thumbnail || obscure) && <img className="channel-thumbnail__default" src={thumbnailPreview || Gerbil} />}
-      {!obscure && thumbnail && <img className="channel-thumbnail__custom" src={thumbnailPreview || thumbnail} />}
+      {!showThumb && <img className="channel-thumbnail__default" src={thumbnailPreview || Gerbil} />}
+      {showThumb && <img className="channel-thumbnail__custom" src={thumbnailPreview || thumbnail} />}
     </div>
   );
 }
diff --git a/src/ui/component/claimPreview/view.jsx b/src/ui/component/claimPreview/view.jsx
index 9b2b5a38d..68a5b58ef 100644
--- a/src/ui/component/claimPreview/view.jsx
+++ b/src/ui/component/claimPreview/view.jsx
@@ -107,6 +107,7 @@ function ClaimPreview(props: Props) {
     shouldHide = blockedChannelUris.some(blockedUri => blockedUri === signingChannel.permanent_url);
   }
   // block channel claims if we can't control for them in claim search
+  // e.g. fetchRecommendedSubscriptions
   if (claim && isChannel && !shouldHide && !showUserBlocked && blockedChannelUris.length && isChannel) {
     shouldHide = blockedChannelUris.some(blockedUri => blockedUri === claim.permanent_url);
   }
@@ -168,22 +169,12 @@ function ClaimPreview(props: Props) {
             {claim ? <TruncatedText text={title || claim.name} lines={1} /> : <span>{__('Nothing here')}</span>}
           </div>
           {!hideActions && (
-            <div className={'claim-preview-actions'}>
+            <div className={'card__actions'}>
               {isChannel && !channelIsBlocked && (
-                <div className={'claim-preview__button'}>
-                  <SubscribeButton uri={uri.startsWith('lbry://') ? uri : `lbry://${uri}`} />
-                </div>
-              )}
-              {isChannel && !isSubscribed && (
-                <div className={'claim-preview__button'}>
-                  <BlockButton uri={uri.startsWith('lbry://') ? uri : `lbry://${uri}`} />
-                </div>
-              )}
-              {!isChannel && (
-                <div className={'claim-preview__button'}>
-                  <FileProperties uri={uri} />
-                </div>
+                <SubscribeButton uri={uri.startsWith('lbry://') ? uri : `lbry://${uri}`} />
               )}
+              {isChannel && !isSubscribed && <BlockButton uri={uri.startsWith('lbry://') ? uri : `lbry://${uri}`} />}
+              {!isChannel && <FileProperties uri={uri} />}
             </div>
           )}
         </div>
diff --git a/src/ui/page/listBlocked/view.jsx b/src/ui/page/listBlocked/view.jsx
index b528993ff..f3b4a4c76 100644
--- a/src/ui/page/listBlocked/view.jsx
+++ b/src/ui/page/listBlocked/view.jsx
@@ -11,7 +11,7 @@ function ListBlocked(props: Props) {
   const { uris } = props;
 
   return (
-    <Page notContained>
+    <Page>
       {uris && uris.length ? (
         <div className="card">
           <ClaimList
@@ -25,9 +25,8 @@ function ListBlocked(props: Props) {
       ) : (
         <div className="main--empty">
           <section className="card card--section">
-            <header className="card__header">
-              <h2 className="card__title">{__('It looks like you have no blocked channels.')}</h2>
-            </header>
+            <h2 className="card__title">{__('You aren’t blocking any channels')}</h2>
+            <p className="card__subtitle">When you block a channel, all content from that channel will be hidden.</p>
           </section>
         </div>
       )}
diff --git a/src/ui/reducers.js b/src/ui/reducers.js
index a4be57f6d..8e53d02cf 100644
--- a/src/ui/reducers.js
+++ b/src/ui/reducers.js
@@ -8,7 +8,7 @@ import {
   notificationsReducer,
   tagsReducer,
   commentReducer,
-  blockChannelReducer,
+  blockedReducer,
   publishReducer,
 } from 'lbry-redux';
 import {
@@ -26,7 +26,6 @@ import contentReducer from 'redux/reducers/content';
 import settingsReducer from 'redux/reducers/settings';
 import subscriptionsReducer from 'redux/reducers/subscriptions';
 
-
 export default history =>
   combineReducers({
     router: connectRouter(history),
@@ -48,7 +47,7 @@ export default history =>
     stats: statsReducer,
     subscriptions: subscriptionsReducer,
     tags: tagsReducer,
-    blockedChannels: blockChannelReducer,
+    blocked: blockedReducer,
     user: userReducer,
     wallet: walletReducer,
   });
diff --git a/src/ui/store.js b/src/ui/store.js
index 952839edd..ba423ab7b 100644
--- a/src/ui/store.js
+++ b/src/ui/store.js
@@ -48,7 +48,7 @@ const appFilter = createFilter('app', ['hasClickedComment', 'searchOptionsExpand
 const walletFilter = createFilter('wallet', ['receiveAddress']);
 const searchFilter = createFilter('search', ['options']);
 const tagsFilter = createFilter('tags', ['followedTags']);
-const blockedFilter = createFilter('blockedChannels', ['blockedChannels']);
+const blockedFilter = createFilter('blocked', ['blockedChannels']);
 const whiteListedReducers = [
   // @if TARGET='app'
   'publish',
@@ -60,7 +60,7 @@ const whiteListedReducers = [
   'app',
   'search',
   'tags',
-  'blockedChannels',
+  'blocked',
 ];
 
 const transforms = [