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/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} />