diff --git a/src/components/sidebar/sidebar.module.css b/src/components/sidebar/sidebar.module.css index bbc38ce2..352ece3a 100644 --- a/src/components/sidebar/sidebar.module.css +++ b/src/components/sidebar/sidebar.module.css @@ -210,4 +210,10 @@ a { width: 175px; background-color: var(--background); color: var(--text); +} + +.blockSub { + padding-top: 10px; + color: var(--text-primary); + cursor: pointer; } \ No newline at end of file diff --git a/src/components/sidebar/sidebar.tsx b/src/components/sidebar/sidebar.tsx index b1d460ba..28d6ba09 100644 --- a/src/components/sidebar/sidebar.tsx +++ b/src/components/sidebar/sidebar.tsx @@ -1,7 +1,7 @@ import { Link, useLocation, useParams } from 'react-router-dom'; import { useTranslation } from 'react-i18next'; import { getShortAddress } from '@plebbit/plebbit-js'; -import { Role, useSubplebbitStats } from '@plebbit/plebbit-react-hooks'; +import { useBlock, Role, useSubplebbitStats } from '@plebbit/plebbit-react-hooks'; import styles from './sidebar.module.css'; import { getFormattedDate, getFormattedDuration, getFormattedTimeAgo } from '../../lib/utils/time-utils'; import { findSubplebbitCreator } from '../../lib/utils/user-utils'; @@ -94,6 +94,18 @@ const Sidebar = ({ address, cid, createdAt, description, downvoteCount = 0, role alert('This community has no owner role set.'); }; + const { blocked, unblock, block } = useBlock({ address }); + + const blockConfirm = () => { + if (window.confirm(`Are you sure you want to ${blocked ? 'unblock' : 'block'} this community?`)) { + if (blocked) { + unblock(); + } else { + block(); + } + } + }; + return (
@@ -140,6 +152,9 @@ const Sidebar = ({ address, cid, createdAt, description, downvoteCount = 0, role e.preventDefault()}>{`u/${creatorAddress}`} {creatorAddress === 'anonymous' && } {createdAt && {t('community_for', { date: getFormattedDuration(createdAt) })}} +
+ {blocked ? 'Unblock community' : 'Block community'} +
)}