From ba0200ab85d1294172f9d0118bd8d72e388f1f4e Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Fri, 1 Dec 2023 21:06:16 +0100
Subject: [PATCH] refactor(header): each element should be a component not a
 variable

---
 src/components/header/header.tsx | 216 ++++++++++++++++++-------------
 src/lib/utils/view-utils.ts      |  11 ++
 2 files changed, 136 insertions(+), 91 deletions(-)

diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
index 613a903e..30c5ffae 100644
--- a/src/components/header/header.tsx
+++ b/src/components/header/header.tsx
@@ -2,20 +2,138 @@ import { useEffect, useState } from 'react';
 import { Link, useLocation, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { useSubplebbit } from '@plebbit/plebbit-react-hooks';
-import { isAboutView, isHomeView, isPostView, isSettingsView, isSubplebbitView, isSubmitView, isSubplebbitSubmitView } from '../../lib/utils/view-utils';
+import { getAboutLink, isAboutView, isHomeView, isPostView, isSettingsView, isSubplebbitView, isSubmitView, isSubplebbitSubmitView } from '../../lib/utils/view-utils';
 import useTheme from '../../hooks/use-theme';
 import styles from './header.module.css';
 import SubscribeButton from '../subscribe-button';
 
 const sortTypes = ['hot', 'new', 'active', 'controversialAll', 'topAll'];
 
+const AboutButton = () => {
+  const { t } = useTranslation();
+  const params = useParams();
+  const location = useLocation();
+  const aboutLink = getAboutLink(location.pathname, params);
+  const isHome = isHomeView(location.pathname);
+  const isAbout = isAboutView(location.pathname);
+
+  return (
+    <li className={styles.about}>
+      <Link
+        to={aboutLink}
+        className={`${isAbout ? styles.selected : styles.choice}`}
+        onClick={(event) => {
+          isHome && event.preventDefault();
+        }}
+      >
+        {t('header_about')}
+      </Link>
+    </li>
+  )
+}
+
+const CommentsButton = () => {
+  const { t } = useTranslation();
+  const params = useParams();
+  const location = useLocation();
+  const isPost = isPostView(location.pathname, params);
+  const isAbout = isAboutView(location.pathname);
+
+  return (
+    <li>
+      <Link to={`/p/${params.subplebbitAddress}/c/${params.commentCid}`} className={isPost && !isAbout ? styles.selected : styles.choice}>
+        {t('header_comments')}
+      </Link>
+    </li>
+  );
+}
+
+const SortItems = () => {
+  const { t } = useTranslation();
+  const params = useParams();
+  const location = useLocation();
+  const isSubplebbit = isSubplebbitView(location.pathname, params);
+  const sortLabels = [t('header_hot'), t('header_new'), t('header_active'), t('header_controversial'), t('header_top')];
+  const [selectedSortType, setSelectedSortType] = useState(params.sortType || '/hot');
+
+  const handleSelect = (choice: string) => {
+    setSelectedSortType(choice);
+  };
+
+  useEffect(() => {
+    if (location.pathname.endsWith('/about')) {
+      setSelectedSortType('');
+    } else if (params.sortType) {
+      setSelectedSortType(params.sortType);
+    } else {
+      setSelectedSortType('hot');
+    }
+  }, [params.sortType, location.pathname]);
+
+  return (
+    sortTypes.map((choice, index) => (
+      <li key={choice}>
+        <Link
+          to={isSubplebbit ? `/p/${params.subplebbitAddress}/${choice}` : choice}
+          className={selectedSortType === choice ? styles.selected : styles.choice}
+          onClick={() => handleSelect(choice)}
+        >
+          {sortLabels[index]}
+        </Link>
+      </li>
+    ))
+  );
+}
+
+const HeaderTabs = () => {
+  const params = useParams();
+  const location = useLocation();
+  const isHome = isHomeView(location.pathname);
+  const isPost = isPostView(location.pathname, params);
+  const isSubplebbit = isSubplebbitView(location.pathname, params);
+  const isSubplebbitSubmit = isSubplebbitSubmitView(location.pathname, params);
+
+  if (isPost) {
+    return <CommentsButton />;
+  } else if (isHome || (isSubplebbit && !isSubplebbitSubmit)) {
+    return <SortItems />;
+  }
+  return null;
+};
+
+const HeaderTitle = ({title, shortAddress}: {title: string, shortAddress: string}) => {
+  const { t } = useTranslation();
+  const params = useParams();
+  const location = useLocation();
+  const isPost = isPostView(location.pathname, params);
+  const isSubplebbit = isSubplebbitView(location.pathname, params);
+  const isSubmit = isSubmitView(location.pathname);
+  const isSubplebbitSubmit = isSubplebbitSubmitView(location.pathname, params);
+  const isSettings = isSettingsView(location.pathname);
+
+  const subplebbitTitle = <Link to={`/p/${params.subplebbitAddress}`}>{title || shortAddress}</Link>;
+  const submitTitle = <span className={styles.submitTitle}>{t('submit')}</span>;
+
+  if (isSubplebbitSubmit) {
+    return (
+      <>
+        {subplebbitTitle}: {submitTitle}
+      </>
+    );
+  } else if (isPost || isSubplebbit) {
+    return subplebbitTitle;
+  } else if (isSubmit) {
+    return submitTitle;
+  } else if (isSettings) {
+    return t('preferences');
+  }
+  return null;
+}
+
 const Header = () => {
   const [theme] = useTheme();
-  const { t } = useTranslation();
   const location = useLocation();
   const params = useParams();
-  const [selectedSortType, setSelectedSortType] = useState(params.sortType || '/hot');
-  const sortLabels = [t('header_hot'), t('header_new'), t('header_active'), t('header_controversial'), t('header_top')];
   const subplebbit = useSubplebbit({ subplebbitAddress: params.subplebbitAddress });
   const { suggested, title, shortAddress } = subplebbit || {};
 
@@ -32,90 +150,6 @@ const Header = () => {
   const logoSrc = isSubplebbit ? suggested?.avatarUrl : '/assets/logo/seedit.png';
   const logoIsAvatar = isSubplebbit && suggested?.avatarUrl;
 
-  const handleSelect = (choice: string) => {
-    setSelectedSortType(choice);
-  };
-
-  useEffect(() => {
-    if (location.pathname.endsWith('/about')) {
-      setSelectedSortType('');
-    } else if (params.sortType) {
-      setSelectedSortType(params.sortType);
-    } else {
-      setSelectedSortType('hot');
-    }
-  }, [params.sortType, location.pathname]);
-
-  const sortItems = sortTypes.map((choice, index) => (
-    <li key={choice}>
-      <Link
-        to={isSubplebbit ? `/p/${params.subplebbitAddress}/${choice}` : choice}
-        className={selectedSortType === choice ? styles.selected : styles.choice}
-        onClick={() => handleSelect(choice)}
-      >
-        {sortLabels[index]}
-      </Link>
-    </li>
-  ));
-
-  const commentsButton = (
-    <li>
-      <Link to={`/p/${params.subplebbitAddress}/c/${params.commentCid}`} className={isPost && !isAbout ? styles.selected : styles.choice}>
-        {t('header_comments')}
-      </Link>
-    </li>
-  );
-
-  let headerTabs;
-
-  if (isPost) {
-    headerTabs = commentsButton;
-  } else if (isHome || (isSubplebbit && !isSubplebbitSubmit)) {
-    headerTabs = sortItems;
-  }
-
-  const subplebbitTitle = <Link to={`/p/${params.subplebbitAddress}`}>{title || shortAddress}</Link>;
-  let headerTitle;
-  const submitTitle = <span className={styles.submitTitle}>{t('submit')}</span>;
-
-  if (isSubplebbitSubmit) {
-    headerTitle = (
-      <>
-        {subplebbitTitle}: {submitTitle}
-      </>
-    );
-  } else if (isPost || isSubplebbit) {
-    headerTitle = subplebbitTitle;
-  } else if (isSubmit) {
-    headerTitle = submitTitle;
-  } else if (isSettings) {
-    headerTitle = t('preferences');
-  }
-
-  let aboutLink;
-
-  if (isPost) {
-    aboutLink = `/p/${params.subplebbitAddress}/c/${params.commentCid}/about`;
-  } else if (isSubplebbit || isSubplebbitSubmit) {
-    aboutLink = `/p/${params.subplebbitAddress}/about`;
-  } else {
-    aboutLink = '/about';
-  }
-
-  const aboutButton = (
-    <li className={styles.about}>
-      <Link
-        to={aboutLink}
-        className={`${isAbout ? styles.selected : styles.choice}`}
-        onClick={(event) => {
-          isHome && event.preventDefault();
-        }}
-      >
-        {t('header_about')}
-      </Link>
-    </li>
-  );
-
   return (
     <div className={styles.header}>
       <div className={`${styles.container} ${hasFewTabs && styles.reducedHeight} ${hasStickyHeader && styles.increasedHeight}`}>
@@ -127,7 +161,7 @@ const Header = () => {
             )}
           </Link>
         </div>
-        {!isHome && <span className={`${styles.pageName} ${!logoIsAvatar && styles.soloPageName}`}>{headerTitle}</span>}
+        {!isHome && <span className={`${styles.pageName} ${!logoIsAvatar && styles.soloPageName}`}><HeaderTitle title={title} shortAddress={shortAddress} /></span>}
         {isSubplebbit && !isAbout && (
           <span className={styles.joinButton}>
             <SubscribeButton address={params.subplebbitAddress} />
@@ -135,8 +169,8 @@ const Header = () => {
         )}
         <div className={`${styles.tabs} ${hasFewTabs ? styles.fewTabs : ''}`}>
           <ul className={styles.tabMenu}>
-            {headerTabs}
-            {(isSubplebbit || isSubplebbitSubmit || isPost) && aboutButton}
+            <HeaderTabs />
+            {(isSubplebbit || isSubplebbitSubmit || isPost) && <AboutButton />}
           </ul>
         </div>
       </div>
diff --git a/src/lib/utils/view-utils.ts b/src/lib/utils/view-utils.ts
index bec2c4ad..5ec273d0 100644
--- a/src/lib/utils/view-utils.ts
+++ b/src/lib/utils/view-utils.ts
@@ -8,6 +8,17 @@ export type ViewType = 'home' | 'pending' | 'post' | 'submit' | 'subplebbit' | '
 
 const sortTypes = ['/hot', '/new', '/active', '/controversialAll', '/topAll'];
 
+export const getAboutLink = (pathname: string, params: ParamsType): string => {
+  if (params.subplebbitAddress && params.commentCid) {
+    if (pathname.startsWith(`/p/${params.subplebbitAddress}/c/${params.commentCid}`)) {
+      return `/p/${params.subplebbitAddress}/c/${params.commentCid}/about`;
+    } else if (pathname.startsWith(`/p/${params.subplebbitAddress}`)) {
+      return `/p/${params.subplebbitAddress}/about`;
+    }
+  }
+  return '/about';
+};
+
 export const isAboutView = (pathname: string): boolean => {
   return pathname.endsWith('/about');
 }