refactor(settings): remove blocked addresses setting and block user/board feature

Obsolete with pseudonymity mode (user IDs randomized per board) and custom boards
requiring explicit search/subscribe. Unsubscribe suffices for boards.

src/components/post-desktop/post-menu-desktop/post-menu-desktop.tsx

@@ -3,7 +3,6 @@ import { createPortal } from 'react-dom';
 import { useLocation, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { autoUpdate, flip, FloatingFocusManager, offset, shift, useClick, useDismiss, useFloating, useId, useInteractions, useRole } from '@floating-ui/react';
-import { useBlock } from '@plebbit/plebbit-react-hooks';
 import styles from './post-menu-desktop.module.css';
 import { getCommentMediaInfo } from '../../../lib/utils/media-utils';
 import { copyShareLinkToClipboard, isValidURL, type ShareLinkType } from '../../../lib/utils/url-utils';
@@ -117,26 +116,6 @@ const ImageSearchButton = ({ url, onClose }: { url: string; onClose: () => void
   );
 };
 
-const BlockUserButton = ({ address }: { address: string }) => {
-  const { t } = useTranslation();
-  const { blocked, unblock, block } = useBlock({ address });
-  return (
-    <div className={styles.postMenuItem} onClick={blocked ? unblock : block}>
-      {blocked ? t('unblock_user') : t('block_user')}
-    </div>
-  );
-};
-
-const BlockBoardButton = ({ address }: { address: string }) => {
-  const { t } = useTranslation();
-  const { blocked, unblock, block } = useBlock({ address });
-  return (
-    <div className={styles.postMenuItem} onClick={blocked ? unblock : block}>
-      {blocked ? t('unblock_board') : t('block_board')}
-    </div>
-  );
-};
-
 type PostMenuDesktopProps = {
   postMenu: PostMenuProps;
 };
@@ -210,8 +189,6 @@ const PostMenuDesktop = ({ postMenu }: PostMenuDesktopProps) => {
                 </div>
               )}
               {link && isValidURL(link) && (type === 'image' || type === 'gif' || thumbnail) && url && <ImageSearchButton url={url} onClose={handleClose} />}
-              {authorAddress && <BlockUserButton address={authorAddress} />}
-              {(isInAllView || isInSubscriptionsView) && subplebbitAddress && <BlockBoardButton address={subplebbitAddress} />}
             </div>
           </FloatingFocusManager>,
           document.body,

src/components/post-mobile/post-menu-mobile/post-menu-mobile.tsx

@@ -1,7 +1,7 @@
 import { memo, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { useTranslation } from 'react-i18next';
-import { Comment, useBlock } from '@plebbit/plebbit-react-hooks';
+import { Comment } from '@plebbit/plebbit-react-hooks';
 import { autoUpdate, flip, FloatingFocusManager, offset, shift, useClick, useDismiss, useFloating, useId, useInteractions, useRole } from '@floating-ui/react';
 import styles from './post-menu-mobile.module.css';
 import { getCommentMediaInfo } from '../../../lib/utils/media-utils';
@@ -128,26 +128,6 @@ const HidePostButton = ({ cid, isReply, onClose, postCid }: HideButtonProps) =>
   );
 };
 
-const BlockUserButton = ({ address }: { address: string }) => {
-  const { t } = useTranslation();
-  const { blocked, unblock, block } = useBlock({ address });
-  return (
-    <div className={styles.postMenuItem} onClick={blocked ? unblock : block}>
-      {blocked ? t('unblock_user') : t('block_user')}
-    </div>
-  );
-};
-
-const BlockBoardButton = ({ address }: { address: string }) => {
-  const { t } = useTranslation();
-  const { blocked, unblock, block } = useBlock({ address });
-  return (
-    <div className={styles.postMenuItem} onClick={blocked ? unblock : block}>
-      {blocked ? t('unblock_board') : t('block_board')}
-    </div>
-  );
-};
-
 type PostMenuMobileProps = {
   postMenu: PostMenuProps;
   editMenuPost: Comment;
@@ -201,8 +181,6 @@ const PostMenuMobile = ({ postMenu, editMenuPost }: PostMenuMobileProps) => {
                   {cid && <CopyContentIdButton cid={cid} onClose={handleClose} />}
                   {authorAddress && <CopyUserIdButton address={authorAddress} onClose={handleClose} />}
                   {cid && subplebbitAddress && <HidePostButton cid={cid} isReply={!!parentCid} postCid={postCid} onClose={handleClose} />}
-                  {cid && subplebbitAddress && authorAddress && <BlockUserButton address={authorAddress} />}
-                  {cid && subplebbitAddress && !isInBoardView && <BlockBoardButton address={subplebbitAddress} />}
                   {link && isValidURL(link) && (type === 'image' || type === 'gif' || thumbnail) && url && <ImageSearchButtons url={url} onClose={handleClose} />}
                 </div>
               </FloatingFocusManager>,

src/components/settings-modal/blocked-addresses-setting/blocked-addresses-setting.module.css

@@ -1,31 +0,0 @@
-.setting {
-  margin: 10px 10px 0 10px;
-}
-
-.blockedAddress {
-  padding-bottom: 5px;
-  margin-left: 20px;
-}
-
-.unblockAll {
-  padding-bottom: 10px;
-}
-
-.button {
-  text-transform: capitalize;
-  color: var(--button-desktop-text-color);
-  text-decoration: var(--button-text-decoration);
-}
-
-.unblockButton {
-  float: right;
-}
-
-.button:hover {
-  color: var(--button-desktop-text-color-hover);
-  cursor: pointer;
-}
-
-.notBlocked {
-  padding-bottom: 10px;
-}

src/components/settings-modal/blocked-addresses-setting/blocked-addresses-setting.tsx

@@ -1,59 +0,0 @@
-import { setAccount, useAccount, useBlock } from '@plebbit/plebbit-react-hooks';
-import Plebbit from '@plebbit/plebbit-js';
-import styles from './blocked-addresses-setting.module.css';
-import { useTranslation } from 'react-i18next';
-
-const UnblockButton = ({ address }: { address: string }) => {
-  const { t } = useTranslation();
-  const { unblock } = useBlock({ address });
-
-  return (
-    <span className={styles.unblockButton}>
-      [
-      <span className={styles.button} onClick={unblock}>
-        {t('unblock')}
-      </span>
-      ]
-    </span>
-  );
-};
-
-const BlockedAddressesSetting = () => {
-  const { t } = useTranslation();
-  const { blockedAddresses } = useAccount() || {};
-  const addressList = blockedAddresses ? Object.keys(blockedAddresses) : [];
-  const account = useAccount();
-
-  const unblockAll = () => {
-    window.confirm(t('unblock_all_confirm')) && setAccount({ ...account, blockedAddresses: {} });
-  };
-
-  return (
-    <div className={styles.setting}>
-      {addressList.length > 0 ? (
-        <>
-          {addressList.length > 1 && (
-            <div className={styles.unblockAll}>
-              [
-              <span className={styles.button} onClick={unblockAll}>
-                {t('unblock_all')}
-              </span>
-              ]
-            </div>
-          )}
-          <ul className={styles.blockedAddresses}>
-            {addressList.map((address: string) => (
-              <li key={address} className={styles.blockedAddress}>
-                {address && Plebbit.getShortAddress({ address })} <UnblockButton address={address} />
-              </li>
-            ))}
-          </ul>
-        </>
-      ) : (
-        <div className={styles.notBlocked}>{t('you_have_not_blocked')}</div>
-      )}
-    </div>
-  );
-};
-
-export default BlockedAddressesSetting;

src/components/settings-modal/blocked-addresses-setting/index.ts

@@ -1 +0,0 @@
-export { default } from './blocked-addresses-setting';

src/components/settings-modal/settings-modal.tsx

@@ -4,7 +4,6 @@ import { useTranslation } from 'react-i18next';
 import styles from './settings-modal.module.css';
 import AccountSettings from './account-settings';
 import AvatarSettings from './avatar-settings';
-import BlockedAddressesSetting from './blocked-addresses-setting';
 import CryptoAddressSetting from './crypto-address-setting';
 import CryptoWalletsSetting from './crypto-wallets-setting';
 import InterfaceSettings from './interface-settings';
@@ -43,7 +42,6 @@ const SettingsModal = () => {
   const [showCryptoAddressSetting, setShowCryptoAddressSetting] = useState(false);
   const [showCryptoWalletSettings, setShowCryptoWalletSettings] = useState(false);
   const [showSubscriptionsSettings, setShowSubscriptionsSettings] = useState(false);
-  const [showBlockedAddressesSetting, setShowBlockedAddressesSetting] = useState(false);
   const [showAdvancedSettings, setShowAdvancedSettings] = useState(false);
   const [expandAll, setExpandAll] = useState(false);
 
@@ -56,7 +54,6 @@ const SettingsModal = () => {
       Number(showCryptoAddressSetting) +
       Number(showCryptoWalletSettings) +
       Number(showSubscriptionsSettings) +
-      Number(showBlockedAddressesSetting) +
       Number(showAdvancedSettings)
     );
   };
@@ -69,7 +66,6 @@ const SettingsModal = () => {
     if (showCryptoAddressSetting && 'crypto-address-settings' !== excludeCategoryId) return 'crypto-address-settings';
     if (showCryptoWalletSettings && 'crypto-wallet-settings' !== excludeCategoryId) return 'crypto-wallet-settings';
     if (showSubscriptionsSettings && 'subscriptions-settings' !== excludeCategoryId) return 'subscriptions-settings';
-    if (showBlockedAddressesSetting && 'blocked-addresses-settings' !== excludeCategoryId) return 'blocked-addresses-settings';
     if (showAdvancedSettings && 'advanced-settings' !== excludeCategoryId) return 'advanced-settings';
     return null;
   };
@@ -110,7 +106,6 @@ const SettingsModal = () => {
       setShowCryptoAddressSetting(hash === 'crypto-address-settings');
       setShowCryptoWalletSettings(hash === 'crypto-wallet-settings');
       setShowSubscriptionsSettings(hash === 'subscriptions-settings');
-      setShowBlockedAddressesSetting(hash === 'blocked-addresses-settings');
       setShowAdvancedSettings(hash === 'advanced-settings');
     }
   }, [hash]);
@@ -125,7 +120,6 @@ const SettingsModal = () => {
     setShowCryptoAddressSetting(newExpandState);
     setShowCryptoWalletSettings(newExpandState);
     setShowSubscriptionsSettings(newExpandState);
-    setShowBlockedAddressesSetting(newExpandState);
     setShowAdvancedSettings(newExpandState);
 
     const baseSettingsPath = location.pathname.split('#')[0];
@@ -192,13 +186,6 @@ const SettingsModal = () => {
           </label>
         </div>
         {showSubscriptionsSettings && <SubscriptionsSetting />}
-        <div id='blocked-addresses-settings' className={`${styles.setting} ${styles.category}`}>
-          <label onClick={() => handleCategoryClick('blocked-addresses-settings', showBlockedAddressesSetting, setShowBlockedAddressesSetting)}>
-            <span className={showBlockedAddressesSetting ? styles.hideButton : styles.showButton} />
-            {t('blocked_addresses')}
-          </label>
-        </div>
-        {showBlockedAddressesSetting && <BlockedAddressesSetting />}
         <div id='advanced-settings' className={`${styles.setting} ${styles.category}`}>
           <label onClick={() => handleCategoryClick('advanced-settings', showAdvancedSettings, setShowAdvancedSettings)}>
             <span className={showAdvancedSettings ? styles.hideButton : styles.showButton} />