feat(subplebbits): add filtering by user role in 'my communities' tab, routes

src/app.tsx

@@ -104,10 +104,10 @@ function App() {
             <Route path='/inbox/postreplies' element={<Inbox />} />
 
             <Route path='/communities' element={<Subplebbits />} />
-            <Route path='/communities/mine' element={<Subplebbits />} />
-            <Route path='/communities/mine/subscriber' element={<Subplebbits />} />
-            <Route path='/communities/mine/contributor' element={<Subplebbits />} />
-            <Route path='/communities/mine/moderator' element={<Subplebbits />} />
+            <Route path='/communities/subscriber' element={<Subplebbits />} />
+            <Route path='/communities/moderator' element={<Subplebbits />} />
+            <Route path='/communities/admin' element={<Subplebbits />} />
+            <Route path='/communities/owner' element={<Subplebbits />} />
           </Route>
         </Route>
       </Routes>

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 = () => {
       </li>
       <li>
         <Link
-          to={'/communities/mine'}
-          className={isInSubplebbitsMineView || isInSubplebbitsMineModeratorView || isInSubplebbitsMineSubscriberView ? styles.selected : styles.choice}
+          to={'/communities/subscriber'}
+          className={
+            isInSubplebbitsSubscriberView || isInSubplebbitsModeratorView || isInSubplebbitsAdminView || isInSubplebbitsOwnerView ? styles.selected : styles.choice
+          }
         >
           {t('my_communities')}
         </Link>

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';
 };

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 (
     <div className={styles.subplebbitsTabs}>
-      <Link to='/communities/mine/subscriber' className={isInSubplebbitsMineSubscriberView ? styles.selected : styles.choice}>
+      <Link to='/communities/subscriber' className={isInSubplebbitsSubscriberView ? styles.selected : styles.choice}>
         {t('subscriber')}
       </Link>
       <span className={styles.separator}>|</span>
-      <Link
-        to='/communities/mine/contributor'
-        className={isInSubplebbitsMineContributorView ? styles.selected : styles.choice}
-        onClick={(e) => e.preventDefault()} // TODO: enable after approving user is implemented in the API
-      >
-        {t('approved_user')}
+      <Link to='/communities/moderator' className={isInSubplebbitsModeratorView ? styles.selected : styles.choice}>
+        {t('moderator')}
       </Link>
       <span className={styles.separator}>|</span>
-      <Link to='/communities/mine/moderator' className={isInSubplebbitsMineModeratorView ? styles.selected : styles.choice}>
-        {t('moderator')}
+      <Link to='/communities/admin' className={isInSubplebbitsAdminView ? styles.selected : styles.choice}>
+        {t('admin')}
+      </Link>
+      <span className={styles.separator}>|</span>
+      <Link to='/communities/owner' className={isInSubplebbitsOwnerView ? styles.selected : styles.choice}>
+        {t('owner')}
       </Link>
     </div>
   );
@@ -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 <Trans i18nKey='join_communities_notice' values={{ join: t('join'), leave: t('leave') }} components={{ 1: <code />, 2: <code /> }} />;
     }
-  }, [isInSubplebbitsMineSubscriberView, isInSubplebbitsMineContributorView, isInSubplebbitsMineModeratorView, t, subscriptions.length, accountSubplebbits]);
+  }, [t, subscriptions.length, accountSubplebbits, isInSubplebbitsSubscriberView, isInSubplebbitsModeratorView, isInSubplebbitsAdminView, isInSubplebbitsOwnerView]);
 
   return <div className={styles.infobar}>{infobarText}</div>;
 };
@@ -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) => <Subplebbit key={index} subplebbit={subplebbit} />);
+  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) => <Subplebbit key={index} subplebbit={subplebbit} />);
 };
 
 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 (
     <div className={styles.content}>
       <div className={styles.sidebar}>
         <Sidebar />
       </div>
-      {(isInSubplebbitsMineView || isInSubplebbitsMineModeratorView || isInSubplebbitsMineSubscriberView) && <Tabs />}
+      {(isInSubplebbitsSubscriberView || isInSubplebbitsModeratorView || isInSubplebbitsAdminView || isInSubplebbitsOwnerView) && <Tabs />}
       <Infobar />
       {isInSubplebbitsView && <ApprovedSubplebbits />}
-      {isInSubplebbitsMineModeratorView && <AccountSubplebbits />}
-      {isInSubplebbitsMineSubscriberView && <SubscriberSubplebbits />}
+      {(isInSubplebbitsModeratorView || isInSubplebbitsAdminView || isInSubplebbitsOwnerView) && <AccountSubplebbits viewRole={viewRole} />}
+      {isInSubplebbitsSubscriberView && <SubscriberSubplebbits />}
     </div>
   );
 };