From e1e28b94909149ecd9ebd92e7241a93918f74cd7 Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Thu, 18 Jan 2024 12:25:13 +0100
Subject: [PATCH] feat: add mobile about page to home, p/all

---
 src/app.tsx                        |  3 +++
 src/components/header/header.tsx   | 10 +++++++---
 src/components/sidebar/sidebar.tsx |  5 +++--
 src/lib/utils/view-utils.ts        | 10 ++++++++++
 4 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/app.tsx b/src/app.tsx
index 14f1b7ef..c7ff5e8d 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -80,6 +80,9 @@ function App() {
           </Route>
           <Route element={pagesLayout}>
             <Route path='/submit' element={<Submit />} />
+            <Route path='/about' element={<About />} />
+
+            <Route path='/p/all/about' element={<About />} />
 
             <Route path='/p/:subplebbitAddress/c/:commentCid' element={<Post />} />
             <Route path='/p/:subplebbitAddress/c/:commentCid/about' element={<About />} />
diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
index 1bf589a6..0addc432 100644
--- a/src/components/header/header.tsx
+++ b/src/components/header/header.tsx
@@ -7,10 +7,12 @@ import {
   getAboutLink,
   isAboutView,
   isAllView,
+  isAllAboutView,
   isAuthorView,
   isAuthorCommentsView,
   isAuthorSubmittedView,
   isProfileDownvotedView,
+  isHomeAboutView,
   isHomeView,
   isInboxView,
   isPendingView,
@@ -235,6 +237,7 @@ const HeaderTabs = () => {
   const location = useLocation();
   const isInAllView = isAllView(location.pathname);
   const isInAuthorView = isAuthorView(location.pathname);
+  const isInHomeAboutView = isHomeAboutView(location.pathname);
   const isInHomeView = isHomeView(location.pathname, params);
   const isInInboxView = isInboxView(location.pathname);
   const isInPendingView = isPendingView(location.pathname, params);
@@ -247,7 +250,7 @@ const HeaderTabs = () => {
 
   if (isInPostView) {
     return <CommentsButton />;
-  } else if (isInHomeView || (isInSubplebbitView && !isInSubplebbitSubmitView && !isInSubplebbitSettingsView) || isInAllView) {
+  } else if (isInHomeView || isInHomeAboutView || (isInSubplebbitView && !isInSubplebbitSubmitView && !isInSubplebbitSettingsView) || isInAllView) {
     return <SortItems />;
   } else if ((isInProfileView || isInAuthorView) && !isInPendingView) {
     return <AuthorHeaderTabs />;
@@ -321,6 +324,7 @@ const Header = () => {
 
   const isMobile = window.innerWidth < 768;
   const isInAboutView = isAboutView(location.pathname);
+  const isInAllAboutView = isAllAboutView(location.pathname);
   const isInAllView = isAllView(location.pathname);
   const isInAuthorView = isAuthorView(location.pathname);
   const isInHomeView = isHomeView(location.pathname, params);
@@ -343,7 +347,7 @@ const Header = () => {
     isInHomeView ||
     (isInSubplebbitView && !isInSubplebbitSubmitView && !isInSubplebbitSettingsView && !isInPostView && !isInAboutView) ||
     (isInProfileView && !isInAboutView) ||
-    isInAllView ||
+    (isInAllView && !isInAllAboutView) ||
     (isInAuthorView && !isInAboutView);
   const logoSrc = isInSubplebbitView ? suggested?.avatarUrl : isInProfileView ? imageUrl : 'assets/logo/seedit.png';
   const logoIsAvatar = (isInSubplebbitView && suggested?.avatarUrl) || (isInProfileView && imageUrl);
@@ -385,7 +389,7 @@ const Header = () => {
         <div className={`${styles.tabs} ${hasFewTabs ? styles.fewTabs : ''}`}>
           <ul className={styles.tabMenu}>
             <HeaderTabs />
-            {(isInSubplebbitView || isInSubplebbitSubmitView || isInPostView) && <AboutButton />}
+            {(isInHomeView || isInAllView || isInAboutView || isInSubplebbitView || isInSubplebbitSubmitView || isInPostView) && <AboutButton />}
           </ul>
         </div>
       )}
diff --git a/src/components/sidebar/sidebar.tsx b/src/components/sidebar/sidebar.tsx
index 1679f974..77cadbf2 100644
--- a/src/components/sidebar/sidebar.tsx
+++ b/src/components/sidebar/sidebar.tsx
@@ -5,7 +5,7 @@ import { useAccount, useBlock, Role, useSubplebbitStats, useAccountComment } fro
 import styles from './sidebar.module.css';
 import { getFormattedDate, getFormattedTimeDuration, getFormattedTimeAgo } from '../../lib/utils/time-utils';
 import { findSubplebbitCreator } from '../../lib/utils/user-utils';
-import { isAboutView, isAllView, isHomeView, isPendingView, isPostView, isSubplebbitSettingsView, isSubplebbitsView } from '../../lib/utils/view-utils';
+import { isAboutView, isAllView, isHomeAboutView, isHomeView, isPendingView, isPostView, isSubplebbitSettingsView, isSubplebbitsView } from '../../lib/utils/view-utils';
 import Markdown from '../markdown';
 import SearchBar from '../search-bar';
 import SubscribeButton from '../subscribe-button';
@@ -109,6 +109,7 @@ const Sidebar = ({ address, cid, createdAt, description, downvoteCount = 0, role
   const params = useParams();
   const isInAboutView = isAboutView(location.pathname);
   const isInAllView = isAllView(location.pathname);
+  const isInHomeAboutView = isHomeAboutView(location.pathname);
   const isInHomeView = isHomeView(location.pathname, params);
   const isInPendingView = isPendingView(location.pathname, params);
   const isInPostView = isPostView(location.pathname, params);
@@ -158,7 +159,7 @@ const Sidebar = ({ address, cid, createdAt, description, downvoteCount = 0, role
           <div className={styles.nub} />
         </div>
       </Link>
-      {!isInHomeView && !isInAllView && !isInPendingView && !isInSubplebbitsView && (
+      {!isInHomeView && !isInHomeAboutView && !isInAllView && !isInPendingView && !isInSubplebbitsView && (
         <div className={styles.titleBox}>
           <Link className={styles.title} to={`/p/${address}`}>
             {address}
diff --git a/src/lib/utils/view-utils.ts b/src/lib/utils/view-utils.ts
index 1363125a..ca0c3967 100644
--- a/src/lib/utils/view-utils.ts
+++ b/src/lib/utils/view-utils.ts
@@ -21,6 +21,8 @@ export const getAboutLink = (pathname: string, params: ParamsType): string => {
     return '/profile/about';
   } else if (pathname.startsWith('/u/')) {
     return `/u/${params.authorAddress}/c/${params.commentCid}/about`;
+  } else if (pathname.startsWith('/p/all')) {
+    return '/p/all/about';
   } else {
     return '/about';
   }
@@ -34,6 +36,10 @@ export const isAllView = (pathname: string): boolean => {
   return pathname.startsWith('/p/all');
 };
 
+export const isAllAboutView = (pathname: string): boolean => {
+  return pathname === '/p/all/about';
+};
+
 export const isAuthorView = (pathname: string): boolean => {
   return pathname.startsWith('/u/');
 };
@@ -54,6 +60,10 @@ export const isHomeView = (pathname: string, params: ParamsType): boolean => {
   return pathname === '/' || sortTypes.includes(pathname) || (timeFilterNames.includes(params.timeFilterName as TimeFilterKey) && !pathname.startsWith('/p/all'));
 };
 
+export const isHomeAboutView = (pathname: string): boolean => {
+  return pathname === '/about';
+};
+
 export const isInboxView = (pathname: string): boolean => {
   return pathname.startsWith('/inbox');
 };