diff --git a/src/app.tsx b/src/app.tsx index c7ff5e8d..b1abaca5 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -104,10 +104,10 @@ function App() { } /> } /> - } /> - } /> - } /> - } /> + } /> + } /> + } /> + } /> diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx index bfbe19e1..765f776d 100644 --- a/src/components/header/header.tsx +++ b/src/components/header/header.tsx @@ -26,9 +26,10 @@ import { isSubplebbitSettingsView, isSubplebbitSubmitView, isSubplebbitsView, - isSubplebbitsMineView, - isSubplebbitsMineSubscriberView, - isSubplebbitsMineModeratorView, + isSubplebbitsSubscriberView, + isSubplebbitsModeratorView, + isSubplebbitsAdminView, + isSubplebbitsOwnerView, isProfileUpvotedView, } from '../../lib/utils/view-utils'; import useTheme from '../../hooks/use-theme'; @@ -202,10 +203,12 @@ const InboxHeaderTabs = () => { const SubplebbitsHeaderTabs = () => { const { t } = useTranslation(); const location = useLocation(); - const isInSubplebbitsMineSubscriberView = isSubplebbitsMineSubscriberView(location.pathname); - const isInSubplebbitsMineModeratorView = isSubplebbitsMineModeratorView(location.pathname); - const isInSubplebbitsView = isSubplebbitsView(location.pathname) && !isInSubplebbitsMineSubscriberView && !isInSubplebbitsMineModeratorView; - const isInSubplebbitsMineView = isSubplebbitsMineView(location.pathname); + const isInSubplebbitsSubscriberView = isSubplebbitsSubscriberView(location.pathname); + const isInSubplebbitsModeratorView = isSubplebbitsModeratorView(location.pathname); + const isInSubplebbitsAdminView = isSubplebbitsAdminView(location.pathname); + const isInSubplebbitsOwnerView = isSubplebbitsOwnerView(location.pathname); + const isInSubplebbitsView = + isSubplebbitsView(location.pathname) && !isInSubplebbitsSubscriberView && !isInSubplebbitsModeratorView && !isInSubplebbitsAdminView && !isInSubplebbitsOwnerView; return ( <> @@ -221,8 +224,10 @@ const SubplebbitsHeaderTabs = () => {
  • {t('my_communities')} diff --git a/src/lib/utils/view-utils.ts b/src/lib/utils/view-utils.ts index d8d11b6d..9f951826 100644 --- a/src/lib/utils/view-utils.ts +++ b/src/lib/utils/view-utils.ts @@ -52,10 +52,6 @@ export const isAuthorSubmittedView = (pathname: string, params: ParamsType): boo return pathname === `/u/${params.authorAddress}/c/${params.commentCid}/submitted`; }; -export const isProfileDownvotedView = (pathname: string): boolean => { - return pathname === '/profile/downvoted'; -}; - export const isHomeView = (pathname: string, params: ParamsType): boolean => { return pathname === '/' || sortTypes.includes(pathname) || (timeFilterNames.includes(params.timeFilterName as TimeFilterKey) && !pathname.startsWith('/p/')); }; @@ -100,6 +96,14 @@ export const isProfileSubmittedView = (pathname: string): boolean => { return pathname.startsWith('/profile/submitted'); }; +export const isProfileDownvotedView = (pathname: string): boolean => { + return pathname === '/profile/downvoted'; +}; + +export const isProfileUpvotedView = (pathname: string): boolean => { + return pathname === '/profile/upvoted'; +}; + export const isSettingsView = (pathname: string): boolean => { return pathname === '/settings'; }; @@ -124,22 +128,18 @@ export const isSubplebbitsView = (pathname: string): boolean => { return pathname.startsWith('/communities'); }; -export const isSubplebbitsMineView = (pathname: string): boolean => { - return pathname === '/communities/mine'; +export const isSubplebbitsSubscriberView = (pathname: string): boolean => { + return pathname === '/communities/subscriber'; }; -export const isSubplebbitsMineSubscriberView = (pathname: string): boolean => { - return pathname === '/communities/mine' || pathname === '/communities/mine/subscriber'; +export const isSubplebbitsModeratorView = (pathname: string): boolean => { + return pathname === '/communities/moderator'; }; -export const isSubplebbitsMineContributorView = (pathname: string): boolean => { - return pathname === '/communities/mine/contributor'; +export const isSubplebbitsAdminView = (pathname: string): boolean => { + return pathname === '/communities/admin'; }; -export const isSubplebbitsMineModeratorView = (pathname: string): boolean => { - return pathname === '/communities/mine/moderator'; -}; - -export const isProfileUpvotedView = (pathname: string): boolean => { - return pathname === '/profile/upvoted'; +export const isSubplebbitsOwnerView = (pathname: string): boolean => { + return pathname === '/communities/owner'; }; diff --git a/src/views/subplebbits/subplebbits.tsx b/src/views/subplebbits/subplebbits.tsx index c28cd4d1..da45b6e2 100644 --- a/src/views/subplebbits/subplebbits.tsx +++ b/src/views/subplebbits/subplebbits.tsx @@ -6,13 +6,7 @@ import styles from './subplebbits.module.css'; import Sidebar from '../../components/sidebar'; import SubscribeButton from '../../components/subscribe-button'; import { getFormattedTimeDuration, getFormattedTimeAgo } from '../../lib/utils/time-utils'; -import { - isSubplebbitsView, - isSubplebbitsMineView, - isSubplebbitsMineContributorView, - isSubplebbitsMineSubscriberView, - isSubplebbitsMineModeratorView, -} from '../../lib/utils/view-utils'; +import { isSubplebbitsView, isSubplebbitsSubscriberView, isSubplebbitsModeratorView, isSubplebbitsAdminView, isSubplebbitsOwnerView } from '../../lib/utils/view-utils'; import { useDefaultSubplebbitAddresses } from '../../lib/utils/addresses-utils'; import { RoleLabel } from '../../components/post/label/label'; @@ -24,26 +18,27 @@ interface SubplebbitProps { const Tabs = () => { const { t } = useTranslation(); const location = useLocation(); - const isInSubplebbitsMineSubscriberView = isSubplebbitsMineSubscriberView(location.pathname); - const isInSubplebbitsMineContributorView = isSubplebbitsMineContributorView(location.pathname); - const isInSubplebbitsMineModeratorView = isSubplebbitsMineModeratorView(location.pathname); + const isInSubplebbitsSubscriberView = isSubplebbitsSubscriberView(location.pathname); + const isInSubplebbitsModeratorView = isSubplebbitsModeratorView(location.pathname); + const isInSubplebbitsAdminView = isSubplebbitsAdminView(location.pathname); + const isInSubplebbitsOwnerView = isSubplebbitsOwnerView(location.pathname); return (
    - + {t('subscriber')} | - e.preventDefault()} // TODO: enable after approving user is implemented in the API - > - {t('approved_user')} + + {t('moderator')} | - - {t('moderator')} + + {t('admin')} + + | + + {t('owner')}
    ); @@ -55,21 +50,20 @@ const Infobar = () => { const subscriptions = account?.subscriptions || []; const { t } = useTranslation(); const location = useLocation(); - const isInSubplebbitsMineSubscriberView = isSubplebbitsMineSubscriberView(location.pathname); - const isInSubplebbitsMineContributorView = isSubplebbitsMineContributorView(location.pathname); - const isInSubplebbitsMineModeratorView = isSubplebbitsMineModeratorView(location.pathname); + const isInSubplebbitsSubscriberView = isSubplebbitsSubscriberView(location.pathname); + const isInSubplebbitsModeratorView = isSubplebbitsModeratorView(location.pathname); + const isInSubplebbitsAdminView = isSubplebbitsAdminView(location.pathname); + const isInSubplebbitsOwnerView = isSubplebbitsOwnerView(location.pathname); const infobarText = useMemo(() => { - if (isInSubplebbitsMineSubscriberView) { + if (isInSubplebbitsSubscriberView) { return subscriptions.length === 0 ? t('not_subscribed') : t('below_subscribed'); - } else if (isInSubplebbitsMineContributorView) { - return t('below_approved_user'); - } else if (isInSubplebbitsMineModeratorView) { + } else if (isInSubplebbitsModeratorView || isInSubplebbitsAdminView || isInSubplebbitsOwnerView) { return Object.keys(accountSubplebbits).length > 0 ? t('below_moderator_access') : t('not_moderator'); } else { return , 2: }} />; } - }, [isInSubplebbitsMineSubscriberView, isInSubplebbitsMineContributorView, isInSubplebbitsMineModeratorView, t, subscriptions.length, accountSubplebbits]); + }, [t, subscriptions.length, accountSubplebbits, isInSubplebbitsSubscriberView, isInSubplebbitsModeratorView, isInSubplebbitsAdminView, isInSubplebbitsOwnerView]); return
    {infobarText}
    ; }; @@ -158,10 +152,18 @@ const Subplebbit = ({ subplebbit }: SubplebbitProps) => { ); }; -const AccountSubplebbits = () => { +const AccountSubplebbits = ({ viewRole }: { viewRole: string }) => { const { accountSubplebbits } = useAccountSubplebbits(); - const accountSubplebbitsArray = useMemo(() => Object.values(accountSubplebbits), [accountSubplebbits]); - return accountSubplebbitsArray?.map((subplebbit, index) => ); + const account = useAccount(); + + const filteredSubplebbits = useMemo(() => { + return Object.values(accountSubplebbits).filter((subplebbit) => { + const userRole = (subplebbit as any).roles?.[account?.author?.address]?.role; + return userRole === viewRole; + }); + }, [accountSubplebbits, account, viewRole]); + + return filteredSubplebbits.map((subplebbit, index) => ); }; const SubscriberSubplebbits = () => { @@ -180,21 +182,32 @@ const ApprovedSubplebbits = () => { const Subplebbits = () => { const location = useLocation(); - const isInSubplebbitsMineSubscriberView = isSubplebbitsMineSubscriberView(location.pathname); - const isInSubplebbitsMineModeratorView = isSubplebbitsMineModeratorView(location.pathname); - const isInSubplebbitsView = isSubplebbitsView(location.pathname) && !isInSubplebbitsMineSubscriberView && !isInSubplebbitsMineModeratorView; - const isInSubplebbitsMineView = isSubplebbitsMineView(location.pathname); + const isInSubplebbitsSubscriberView = isSubplebbitsSubscriberView(location.pathname); + const isInSubplebbitsModeratorView = isSubplebbitsModeratorView(location.pathname); + const isInSubplebbitsAdminView = isSubplebbitsAdminView(location.pathname); + const isInSubplebbitsOwnerView = isSubplebbitsOwnerView(location.pathname); + const isInSubplebbitsView = + isSubplebbitsView(location.pathname) && !isInSubplebbitsSubscriberView && !isInSubplebbitsModeratorView && !isInSubplebbitsAdminView && !isInSubplebbitsOwnerView; + + let viewRole = 'subscriber'; + if (isInSubplebbitsModeratorView) { + viewRole = 'moderator'; + } else if (isInSubplebbitsAdminView) { + viewRole = 'admin'; + } else if (isInSubplebbitsOwnerView) { + viewRole = 'owner'; + } return (
    - {(isInSubplebbitsMineView || isInSubplebbitsMineModeratorView || isInSubplebbitsMineSubscriberView) && } + {(isInSubplebbitsSubscriberView || isInSubplebbitsModeratorView || isInSubplebbitsAdminView || isInSubplebbitsOwnerView) && } {isInSubplebbitsView && } - {isInSubplebbitsMineModeratorView && } - {isInSubplebbitsMineSubscriberView && } + {(isInSubplebbitsModeratorView || isInSubplebbitsAdminView || isInSubplebbitsOwnerView) && } + {isInSubplebbitsSubscriberView && }
    ); };