bring in 'blocked' code from lbry-redux take 2

package.json

@@ -136,7 +136,7 @@
     "imagesloaded": "^4.1.4",
     "json-loader": "^0.5.4",
     "lbry-format": "https://github.com/lbryio/lbry-format.git",
-    "lbry-redux": "lbryio/lbry-redux#a1673ebfa933c0e921a23a1877d22e21c2bff8f9",
+    "lbry-redux": "lbryio/lbry-redux#0ec72d09d438c60d25cc56d256df971a9d3b2c0a",
     "lbryinc": "lbryio/lbryinc#cff5dd60934c4c6080e135f47ebbece1548c658c",
     "lint-staged": "^7.0.2",
     "localforage": "^1.7.1",

ui/component/abandonedChannelPreview/index.js

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { selectBlockedChannels } from 'lbry-redux';
+import { selectBlockedChannels } from 'redux/selectors/blocked';
 import { doChannelUnsubscribe } from 'redux/actions/subscriptions';
 import { doOpenModal } from 'redux/actions/app';
 import AbandonedChannelPreview from './view';

ui/component/blockButton/index.js

@@ -1,12 +1,8 @@
 import { connect } from 'react-redux';
-import {
-  selectChannelIsBlocked,
-  doToggleBlockChannel,
-  makeSelectClaimIsMine,
-  makeSelectShortUrlForUri,
-  makeSelectPermanentUrlForUri,
-} from 'lbry-redux';
+import { makeSelectClaimIsMine, makeSelectShortUrlForUri, makeSelectPermanentUrlForUri } from 'lbry-redux';
+import { selectChannelIsBlocked } from 'redux/selectors/blocked';
 import { doToast } from 'redux/actions/notifications';
+import { doToggleBlockChannel } from 'redux/actions/blocked';
 import BlockButton from './view';
 
 const select = (state, props) => ({

ui/component/channelContent/index.js

@@ -6,9 +6,9 @@ import {
   makeSelectFetchingChannelClaims,
   makeSelectClaimIsMine,
   makeSelectTotalPagesInChannelSearch,
-  selectChannelIsBlocked,
   makeSelectClaimForUri,
 } from 'lbry-redux';
+import { selectChannelIsBlocked } from 'redux/selectors/blocked';
 import { withRouter } from 'react-router';
 import { selectUserVerifiedEmail } from 'redux/selectors/user';
 import { makeSelectClientSetting } from 'redux/selectors/settings';

ui/component/claimListDiscover/index.js

@@ -4,10 +4,10 @@ import {
   selectClaimSearchByQuery,
   selectClaimSearchByQueryLastPageReached,
   selectFetchingClaimSearch,
-  selectBlockedChannels,
   SETTINGS,
   selectFollowedTags,
 } from 'lbry-redux';
+import { selectBlockedChannels } from 'redux/selectors/blocked';
 import { doToggleTagFollowDesktop } from 'redux/actions/tags';
 import { makeSelectClientSetting } from 'redux/selectors/settings';
 import ClaimListDiscover from './view';

ui/component/claimPreview/index.js

@@ -7,13 +7,12 @@ import {
   makeSelectClaimIsPending,
   makeSelectCoverForUri,
   makeSelectClaimIsNsfw,
-  selectBlockedChannels,
-  selectChannelIsBlocked,
   doFileGet,
   makeSelectReflectingClaimForUri,
   makeSelectClaimWasPurchased,
   makeSelectStreamingUrlForUri,
 } from 'lbry-redux';
+import { selectBlockedChannels, selectChannelIsBlocked } from 'redux/selectors/blocked';
 import { selectBlackListedOutpoints, selectFilteredOutpoints } from 'lbryinc';
 import { selectShowMatureContent } from 'redux/selectors/settings';
 import { makeSelectHasVisitedUri } from 'redux/selectors/content';

ui/component/claimPreviewTile/index.js

@@ -7,9 +7,9 @@ import {
   makeSelectTitleForUri,
   doFileGet,
   makeSelectChannelForClaimUri,
-  selectBlockedChannels,
   makeSelectClaimIsNsfw,
 } from 'lbry-redux';
+import { selectBlockedChannels } from 'redux/selectors/blocked';
 import { selectBlackListedOutpoints, selectFilteredOutpoints } from 'lbryinc';
 import { selectShowMatureContent } from 'redux/selectors/settings';
 import ClaimPreviewTile from './view';
@@ -32,7 +32,4 @@ const perform = dispatch => ({
   getFile: uri => dispatch(doFileGet(uri, false)),
 });
 
-export default connect(
-  select,
-  perform
-)(ClaimPreviewTile);
+export default connect(select, perform)(ClaimPreviewTile);

ui/component/claimTilesDiscover/index.js

@@ -1,11 +1,6 @@
 import { connect } from 'react-redux';
-import {
-  doClaimSearch,
-  selectClaimSearchByQuery,
-  selectFetchingClaimSearch,
-  selectBlockedChannels,
-  SETTINGS,
-} from 'lbry-redux';
+import { doClaimSearch, selectClaimSearchByQuery, selectFetchingClaimSearch, SETTINGS } from 'lbry-redux';
+import { selectBlockedChannels } from 'redux/selectors/blocked';
 import { doToggleTagFollowDesktop } from 'redux/actions/tags';
 import { makeSelectClientSetting } from 'redux/selectors/settings';
 import ClaimListDiscover from './view';

ui/component/comment/index.js

@@ -5,10 +5,10 @@ import {
   makeSelectClaimForUri,
   makeSelectThumbnailForUri,
   makeSelectIsUriResolving,
-  selectChannelIsBlocked,
   doCommentUpdate, // doEditComment would be a more fitting name
   doCommentAbandon,
 } from 'lbry-redux';
+import { selectChannelIsBlocked } from 'redux/selectors/blocked';
 import Comment from './view';
 
 const select = (state, props) => ({

ui/constants/action_types.js

@@ -246,3 +246,6 @@ export const COMMENT_UPDATE_FAILED = 'COMMENT_UPDATE_FAILED';
 export const COMMENT_HIDE_STARTED = 'COMMENT_HIDE_STARTED';
 export const COMMENT_HIDE_COMPLETED = 'COMMENT_HIDE_COMPLETED';
 export const COMMENT_HIDE_FAILED = 'COMMENT_HIDE_FAILED';
+
+// Blocked Channels
+export const TOGGLE_BLOCK_CHANNEL = 'TOGGLE_BLOCK_CHANNEL';

ui/modal/modalRemoveBlocked/index.js

@@ -1,7 +1,8 @@
 import { connect } from 'react-redux';
 import { doHideModal } from 'redux/actions/app';
+import { doToggleBlockChannel } from 'redux/actions/blocked';
+import { selectBlockedChannels } from 'redux/selectors/blocked';
 import ModalRemoveBlocked from './view';
-import { doToggleBlockChannel, selectBlockedChannels } from 'lbry-redux';
 
 const select = (state, props) => ({
   blockedChannels: selectBlockedChannels(state),

ui/page/channel/index.js

@@ -6,9 +6,9 @@ import {
   makeSelectCoverForUri,
   selectCurrentChannelPage,
   makeSelectClaimForUri,
-  selectChannelIsBlocked,
   makeSelectClaimIsPending,
 } from 'lbry-redux';
+import { selectChannelIsBlocked } from 'redux/selectors/blocked';
 import { selectBlackListedOutpoints, doFetchSubCount, makeSelectSubCountForUri } from 'lbryinc';
 import { makeSelectIsSubscribed } from 'redux/selectors/subscriptions';
 import { doOpenModal } from 'redux/actions/app';

ui/page/channelsFollowingDiscover/index.js

@@ -1,5 +1,6 @@
 import { connect } from 'react-redux';
-import { selectFollowedTags, selectBlockedChannels } from 'lbry-redux';
+import { selectFollowedTags } from 'lbry-redux';
+import { selectBlockedChannels } from 'redux/selectors/blocked';
 import { selectSubscriptions } from 'redux/selectors/subscriptions';
 import ChannelsFollowingManagePage from './view';
 

ui/page/listBlocked/index.js

@@ -1,12 +1,9 @@
 import { connect } from 'react-redux';
-import { selectBlockedChannels } from 'lbry-redux';
+import { selectBlockedChannels } from 'redux/selectors/blocked';
 import ListBlocked from './view';
 
 const select = state => ({
   uris: selectBlockedChannels(state),
 });
 
-export default connect(
-  select,
-  null
-)(ListBlocked);
+export default connect(select, null)(ListBlocked);

ui/page/listBlocked/view.jsx

@@ -2,6 +2,7 @@
 import React from 'react';
 import ClaimList from 'component/claimList';
 import Page from 'component/page';
+import Card from 'component/common/card';
 
 type Props = {
   uris: Array<string>,
@@ -13,13 +14,10 @@ function ListBlocked(props: Props) {
   return (
     <Page>
       {uris && uris.length ? (
-        <ClaimList
-          header={<h1>{__('Your Blocked Channels')}</h1>}
-          persistedStorageKey="block-list-published"
-          uris={uris}
-          defaultSort
-          showUnresolvedClaims
-          showHiddenByUser
+        <Card
+          isBodyList
+          title={__('Your Blocked Channels')}
+          body={<ClaimList isCardBody uris={uris} showUnresolvedClaims showHiddenByUser />}
         />
       ) : (
         <div className="main--empty">

ui/page/settings/index.js

@@ -22,7 +22,8 @@ import {
   selectFfmpegStatus,
   selectFindingFFmpeg,
 } from 'redux/selectors/settings';
-import { doWalletStatus, selectWalletIsEncrypted, selectBlockedChannelsCount, SETTINGS } from 'lbry-redux';
+import { doWalletStatus, selectWalletIsEncrypted, SETTINGS } from 'lbry-redux';
+import { selectBlockedChannelsCount } from 'redux/selectors/blocked';
 import SettingsPage from './view';
 import { selectUserVerifiedEmail } from 'redux/selectors/user';
 

ui/reducers.js

@@ -1,14 +1,6 @@
 import { combineReducers } from 'redux';
 import { connectRouter } from 'connected-react-router';
-import {
-  claimsReducer,
-  fileInfoReducer,
-  searchReducer,
-  walletReducer,
-  tagsReducer,
-  blockedReducer,
-  publishReducer,
-} from 'lbry-redux';
+import { claimsReducer, fileInfoReducer, searchReducer, walletReducer, tagsReducer, publishReducer } from 'lbry-redux';
 import {
   costInfoReducer,
   blacklistReducer,
@@ -26,6 +18,7 @@ import notificationsReducer from 'redux/reducers/notifications';
 import rewardsReducer from 'redux/reducers/rewards';
 import userReducer from 'redux/reducers/user';
 import commentsReducer from 'redux/reducers/comments';
+import blockedReducer from 'redux/reducers/blocked';
 
 export default history =>
   combineReducers({

ui/redux/actions/blocked.js

@@ -0,0 +1,9 @@
+// @flow
+import * as ACTIONS from 'constants/action_types';
+
+export const doToggleBlockChannel = (uri: string) => ({
+  type: ACTIONS.TOGGLE_BLOCK_CHANNEL,
+  data: {
+    uri,
+  },
+});

ui/redux/reducers/blocked.js

@@ -0,0 +1,39 @@
+// @flow
+import * as ACTIONS from 'constants/action_types';
+import { ACTIONS as LBRY_REDUX_ACTIONS } from 'lbry-redux';
+import { handleActions } from 'util/redux-utils';
+
+const defaultState: BlocklistState = {
+  blockedChannels: [],
+};
+
+export default handleActions(
+  {
+    [ACTIONS.TOGGLE_BLOCK_CHANNEL]: (state: BlocklistState, action: BlocklistAction): BlocklistState => {
+      const { blockedChannels } = state;
+      const { uri } = action.data;
+      let newBlockedChannels = blockedChannels.slice();
+
+      if (newBlockedChannels.includes(uri)) {
+        newBlockedChannels = newBlockedChannels.filter(id => id !== uri);
+      } else {
+        newBlockedChannels.push(uri);
+      }
+
+      return {
+        blockedChannels: newBlockedChannels,
+      };
+    },
+    [LBRY_REDUX_ACTIONS.USER_STATE_POPULATE]: (
+      state: BlocklistState,
+      action: { data: { blocked: ?Array<string> } }
+    ) => {
+      const { blocked } = action.data;
+      return {
+        ...state,
+        blockedChannels: blocked && blocked.length ? blocked : state.blockedChannels,
+      };
+    },
+  },
+  defaultState
+);

ui/redux/selectors/blocked.js

@@ -0,0 +1,13 @@
+// @flow
+import { createSelector } from 'reselect';
+
+const selectState = (state: { blocked: BlocklistState }) => state.blocked || {};
+
+export const selectBlockedChannels = createSelector(selectState, (state: BlocklistState) => state.blockedChannels);
+
+export const selectBlockedChannelsCount = createSelector(selectBlockedChannels, (state: Array<string>) => state.length);
+
+export const selectChannelIsBlocked = (uri: string) =>
+  createSelector(selectBlockedChannels, (state: Array<string>) => {
+    return state.includes(uri);
+  });

ui/redux/selectors/content.js

@@ -9,12 +9,12 @@ import {
   makeSelectRecommendedContentForUri,
   makeSelectMediaTypeForUri,
   selectBalance,
-  selectBlockedChannels,
   parseURI,
   buildURI,
   makeSelectContentTypeForUri,
   makeSelectFileNameForUri,
 } from 'lbry-redux';
+import { selectBlockedChannels } from 'redux/selectors/blocked';
 import { selectAllCostInfoByUri, makeSelectCostInfoForUri } from 'lbryinc';
 import { selectShowMatureContent } from 'redux/selectors/settings';
 import * as RENDER_MODES from 'constants/file_render_modes';

ui/store.js

@@ -117,8 +117,8 @@ history = createBrowserHistory();
 const triggerSharedStateActions = [
   ACTIONS.CHANNEL_SUBSCRIBE,
   ACTIONS.CHANNEL_UNSUBSCRIBE,
+  ACTIONS.TOGGLE_BLOCK_CHANNEL,
   LBRY_REDUX_ACTIONS.TOGGLE_TAG_FOLLOW,
-  LBRY_REDUX_ACTIONS.TOGGLE_BLOCK_CHANNEL,
   LBRY_REDUX_ACTIONS.CREATE_CHANNEL_COMPLETED,
   // Disabled until we can overwrite preferences
   // LBRY_REDUX_ACTIONS.SHARED_PREFERENCE_SET,

yarn.lock

@@ -6383,9 +6383,9 @@ lazy-val@^1.0.4:
     yargs "^13.2.2"
     zstd-codec "^0.1.1"
 
-lbry-redux@lbryio/lbry-redux#a1673ebfa933c0e921a23a1877d22e21c2bff8f9:
+lbry-redux@lbryio/lbry-redux#0ec72d09d438c60d25cc56d256df971a9d3b2c0a:
   version "0.0.1"
-  resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/a1673ebfa933c0e921a23a1877d22e21c2bff8f9"
+  resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/0ec72d09d438c60d25cc56d256df971a9d3b2c0a"
   dependencies:
     proxy-polyfill "0.1.6"
     reselect "^3.0.0"