Add modal to remove uri from Blocked list.

Issue 3800

static/app-strings.json

@@ -1201,7 +1201,7 @@
   "%view_count% Views": "%view_count% Views",
   "Tap to unmute": "Tap to unmute",
   "Playing in %seconds_left% seconds...": "Playing in %seconds_left% seconds...",
-  "Autoplay timer paused.": "Autoplay timer paused.", 
+  "Autoplay timer paused.": "Autoplay timer paused.",
   "0 Bytes": "0 Bytes",
   "Bytes": "Bytes",
   "KB": "KB",
@@ -1257,5 +1257,7 @@
   "Get notified when a publish or channel is confirmed.": "Get notified when a publish or channel is confirmed.",
   "Email Preferences": "Email Preferences",
   "Opt out of any topics you don't want to receive email about.": "Opt out of any topics you don't want to receive email about.",
-  "Uncheck your email below if you want to stop receiving messages.": "Uncheck your email below if you want to stop receiving messages."
+  "Uncheck your email below if you want to stop receiving messages.": "Uncheck your email below if you want to stop receiving messages.",
+  "Remove from Blocked List": "Remove from Blocked List",
+  "Are you sure you want to remove this from the list?": "Are you sure you want to remove this from the list?"
 }

ui/constants/modal_types.js

@@ -41,3 +41,4 @@ export const REPOST = 'repost';
 export const SIGN_OUT = 'sign_out';
 export const LIQUIDATE_SUPPORTS = 'liquidate_supports';
 export const CONFIRM_AGE = 'confirm_age';
+export const REMOVE_BLOCKED = 'remove_blocked';

ui/modal/modalRemoveBlocked/index.js

@@ -0,0 +1,15 @@
+import { connect } from 'react-redux';
+import { doHideModal } from 'redux/actions/app';
+import ModalRemoveBlocked from './view';
+import { doToggleBlockChannel, selectBlockedChannels } from 'lbry-redux';
+
+const select = (state, props) => ({
+  blockedChannels: selectBlockedChannels(state),
+});
+
+const perform = dispatch => ({
+  closeModal: () => dispatch(doHideModal()),
+  toggleBlockChannel: uri => dispatch(doToggleBlockChannel(uri)),
+});
+
+export default connect(select, perform)(ModalRemoveBlocked);

ui/modal/modalRemoveBlocked/view.jsx

@@ -0,0 +1,46 @@
+// @flow
+import React from 'react';
+import { Modal } from 'modal/modal';
+import I18nMessage from 'component/i18nMessage';
+
+type Props = {
+  blockedUri: string,
+  closeModal: () => void,
+  blockedChannels: Array<string>,
+  toggleBlockChannel: (uri: string) => void,
+};
+
+function ModalRemoveBlocked(props: Props) {
+  const { blockedUri, closeModal, blockedChannels, toggleBlockChannel } = props;
+
+  function handleConfirm() {
+    if (blockedUri && blockedChannels.includes(blockedUri)) {
+      // DANGER: Always ensure the uri is actually in the list since we are using a
+      // toggle function. If 'null' is accidentally toggled INTO the list, the app
+      // won't start. Ideally, we should add a "removeBlockedChannel()", but with
+      // the gating above, it should be safe/good enough.
+      toggleBlockChannel(blockedUri);
+    }
+
+    closeModal();
+  }
+
+  return (
+    <Modal
+      isOpen
+      type="confirm"
+      title={__('Remove from Blocked List')}
+      confirmButtonLabel={__('Remove')}
+      onConfirmed={handleConfirm}
+      onAborted={() => closeModal()}
+    >
+      <em>{blockedUri}</em>
+      <p />
+      <p>
+        <I18nMessage>Are you sure you want to remove this from the list?</I18nMessage>
+      </p>
+    </Modal>
+  );
+}
+
+export default ModalRemoveBlocked;

ui/modal/modalRouter/view.jsx

@@ -17,6 +17,7 @@ import ModalRevokeClaim from 'modal/modalRevokeClaim';
 import ModalPhoneCollection from 'modal/modalPhoneCollection';
 import ModalFirstSubscription from 'modal/modalFirstSubscription';
 import ModalConfirmTransaction from 'modal/modalConfirmTransaction';
+import ModalRemoveBlocked from 'modal/modalRemoveBlocked';
 import ModalSocialShare from 'modal/modalSocialShare';
 import ModalSendTip from 'modal/modalSendTip';
 import ModalPublish from 'modal/modalPublish';
@@ -140,6 +141,8 @@ function ModalRouter(props: Props) {
       return <ModalFileSelection {...modalProps} />;
     case MODALS.LIQUIDATE_SUPPORTS:
       return <ModalSupportsLiquidate {...modalProps} />;
+    case MODALS.REMOVE_BLOCKED:
+      return <ModalRemoveBlocked {...modalProps} />;
     default:
       return null;
   }