From 69f3d2019f43a6ca7ed74946d99ebf164a282973 Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Sat, 30 Dec 2023 14:58:03 +0100
Subject: [PATCH] feat: add subplebbits component and header

---
 src/app.tsx                                  |  3 ++
 src/components/header/header.tsx             | 35 ++++++++++++++++++--
 src/components/topbar/topbar.tsx             |  2 +-
 src/lib/utils/view-utils.ts                  |  4 +++
 src/views/subplebbits/index.ts               |  1 +
 src/views/subplebbits/subplebbits.module.css |  0
 src/views/subplebbits/subplebbits.tsx        |  5 +++
 7 files changed, 46 insertions(+), 4 deletions(-)
 create mode 100644 src/views/subplebbits/index.ts
 create mode 100644 src/views/subplebbits/subplebbits.module.css
 create mode 100644 src/views/subplebbits/subplebbits.tsx

diff --git a/src/app.tsx b/src/app.tsx
index 98437a39..9c35224f 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -13,6 +13,7 @@ import Profile from './views/profile';
 import Settings from './views/settings';
 import Submit from './views/submit';
 import Subplebbit from './views/subplebbit';
+import Subplebbits from './views/subplebbits';
 import AccountBar from './components/account-bar/';
 import ChallengeModal from './components/challenge-modal';
 import Header from './components/header';
@@ -96,6 +97,8 @@ function App() {
             <Route path='inbox/unread' element={<Inbox />} />
             <Route path='inbox/commentreplies' element={<Inbox />} />
             <Route path='inbox/postreplies' element={<Inbox />} />
+
+            <Route path='/communities' element={<Subplebbits />} />
           </Route>
         </Route>
       </Routes>
diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
index c98442c1..e0ebead2 100644
--- a/src/components/header/header.tsx
+++ b/src/components/header/header.tsx
@@ -22,6 +22,7 @@ import {
   isProfileView,
   isProfileCommentsView,
   isProfileSubmittedView,
+  isSubplebbitsView,
   isUpvotedView,
 } from '../../lib/utils/view-utils';
 import useTheme from '../../hooks/use-theme';
@@ -192,6 +193,28 @@ const InboxHeaderTabs = () => {
   );
 };
 
+const SubplebbitsHeaderTabs = () => {
+  return (
+    <>
+      <li>
+        <Link to={'/communities'} className={styles.selected}>
+          homepage
+        </Link>
+      </li>
+      <li>
+        <Link to={'/communities'} className={styles.choice}>
+          proposed
+        </Link>
+      </li>
+      <li>
+        <Link to={'/communities'} className={styles.choice}>
+          my communities
+        </Link>
+      </li>
+    </>
+  );
+};
+
 const HeaderTabs = () => {
   const params = useParams();
   const location = useLocation();
@@ -204,6 +227,7 @@ const HeaderTabs = () => {
   const isProfilePage = isProfileView(location.pathname);
   const isSubplebbitPage = isSubplebbitView(location.pathname, params);
   const isSubplebbitSubmitPage = isSubplebbitSubmitView(location.pathname, params);
+  const isSubplebbitsPage = isSubplebbitsView(location.pathname);
 
   if (isPostPage) {
     return <CommentsButton />;
@@ -215,6 +239,8 @@ const HeaderTabs = () => {
     return <span className={styles.pageName}>pending</span>;
   } else if (isInboxPage) {
     return <InboxHeaderTabs />;
+  } else if (isSubplebbitsPage) {
+    return <SubplebbitsHeaderTabs />;
   }
   return null;
 };
@@ -228,10 +254,11 @@ const HeaderTitle = ({ title, shortAddress }: { title: string; shortAddress: str
   const isInboxPage = isInboxView(location.pathname);
   const isPostPage = isPostView(location.pathname, params);
   const isProfilePage = isProfileView(location.pathname);
-  const isSubplebbitPage = isSubplebbitView(location.pathname, params);
-  const isSubmitPage = isSubmitView(location.pathname);
-  const isSubplebbitSubmitPage = isSubplebbitSubmitView(location.pathname, params);
   const isSettingsPage = isSettingsView(location.pathname);
+  const isSubmitPage = isSubmitView(location.pathname);
+  const isSubplebbitPage = isSubplebbitView(location.pathname, params);
+  const isSubplebbitSubmitPage = isSubplebbitSubmitView(location.pathname, params);
+  const isSubplebbitsPage = isSubplebbitsView(location.pathname);
 
   const subplebbitTitle = <Link to={`/p/${params.subplebbitAddress}`}>{title || shortAddress}</Link>;
   const submitTitle = <span className={styles.submitTitle}>{t('submit')}</span>;
@@ -256,6 +283,8 @@ const HeaderTitle = ({ title, shortAddress }: { title: string; shortAddress: str
     return authorTitle;
   } else if (isInboxPage) {
     return t('messages');
+  } else if (isSubplebbitsPage) {
+    return 'communities';
   }
   return null;
 };
diff --git a/src/components/topbar/topbar.tsx b/src/components/topbar/topbar.tsx
index acfb6b61..657e3624 100644
--- a/src/components/topbar/topbar.tsx
+++ b/src/components/topbar/topbar.tsx
@@ -160,7 +160,7 @@ const TopBar = () => {
             ))}
           </ul>
         </div>
-        <Link to='#' className={styles.moreLink}>
+        <Link to='/communities' className={styles.moreLink}>
           {t('edit')} »
         </Link>
       </div>
diff --git a/src/lib/utils/view-utils.ts b/src/lib/utils/view-utils.ts
index 4f7b8e52..40bd1005 100644
--- a/src/lib/utils/view-utils.ts
+++ b/src/lib/utils/view-utils.ts
@@ -106,6 +106,10 @@ export const isSubplebbitSubmitView = (pathname: string, params: ParamsType): bo
   return params.subplebbitAddress ? pathname === `/p/${params.subplebbitAddress}/submit` : false;
 };
 
+export const isSubplebbitsView = (pathname: string): boolean => {
+  return pathname.startsWith('/communities');
+};
+
 export const isUpvotedView = (pathname: string): boolean => {
   return pathname === '/profile/upvoted';
 };
diff --git a/src/views/subplebbits/index.ts b/src/views/subplebbits/index.ts
new file mode 100644
index 00000000..682a6c5d
--- /dev/null
+++ b/src/views/subplebbits/index.ts
@@ -0,0 +1 @@
+export { default } from './subplebbits';
diff --git a/src/views/subplebbits/subplebbits.module.css b/src/views/subplebbits/subplebbits.module.css
new file mode 100644
index 00000000..e69de29b
diff --git a/src/views/subplebbits/subplebbits.tsx b/src/views/subplebbits/subplebbits.tsx
new file mode 100644
index 00000000..3fe6258c
--- /dev/null
+++ b/src/views/subplebbits/subplebbits.tsx
@@ -0,0 +1,5 @@
+const Subplebbits = () => {
+  return <div>subplebbits</div>;
+};
+
+export default Subplebbits;