From 0d65f58da7fb46bf1bc2214606fd9fe16b1bb237 Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Thu, 14 Dec 2023 13:21:07 +0100
Subject: [PATCH] feat(author sidebar): add subscribe (friends) button

---
 src/components/author-sidebar/author-sidebar.tsx  |  4 ++++
 .../subscribe-button/subscribe-button.module.css  |  4 ++++
 .../subscribe-button/subscribe-button.tsx         | 15 ++++++++++++---
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/components/author-sidebar/author-sidebar.tsx b/src/components/author-sidebar/author-sidebar.tsx
index b0e875a0..154b3537 100644
--- a/src/components/author-sidebar/author-sidebar.tsx
+++ b/src/components/author-sidebar/author-sidebar.tsx
@@ -6,6 +6,7 @@ import { getFormattedDuration } from '../../lib/utils/time-utils';
 import { isAuthorView, isProfileView } from '../../lib/utils/view-utils';
 import { findAuthorSubplebbits } from '../../lib/utils/user-utils';
 import { useDefaultSubplebbitAddresses } from '../../lib/utils/addresses-utils';
+import SubscribeButton from '../subscribe-button';
 
 interface AuthorModeratingListProps {
   accountSubplebbits: AccountSubplebbit[];
@@ -78,6 +79,9 @@ const AuthorSidebar = () => {
           {isProfilePage && !displayName && <button onClick={showUsernameNotice}>edit</button>}
         </div>
         {displayName && <div className={styles.displayName}>{displayName}</div>}
+        <div className={styles.friends}>
+          <SubscribeButton address={address} />
+        </div>
         {postScore ? (
           <>
             <div>
diff --git a/src/components/subscribe-button/subscribe-button.module.css b/src/components/subscribe-button/subscribe-button.module.css
index 8161491c..edc38241 100644
--- a/src/components/subscribe-button/subscribe-button.module.css
+++ b/src/components/subscribe-button/subscribe-button.module.css
@@ -17,4 +17,8 @@
 
 .leaveButton {
   background-image: url('/public/assets/buttons/button-background-red.png');
+}
+
+.hidden {
+  display: none;
 }
\ No newline at end of file
diff --git a/src/components/subscribe-button/subscribe-button.tsx b/src/components/subscribe-button/subscribe-button.tsx
index 8fd56cf8..8b8d49f9 100644
--- a/src/components/subscribe-button/subscribe-button.tsx
+++ b/src/components/subscribe-button/subscribe-button.tsx
@@ -1,6 +1,8 @@
+import { useLocation } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 import { useSubscribe } from '@plebbit/plebbit-react-hooks';
 import styles from './subscribe-button.module.css';
-import { useTranslation } from 'react-i18next';
+import { isAuthorView, isProfileView } from '../../lib/utils/view-utils';
 
 interface subscribeButtonProps {
   address: string | undefined;
@@ -9,8 +11,15 @@ interface subscribeButtonProps {
 const SubscribeButton = ({ address }: subscribeButtonProps) => {
   const { subscribe, subscribed, unsubscribe } = useSubscribe({ subplebbitAddress: address });
   const { t } = useTranslation();
+  const location = useLocation();
+  const isAuthorPage = isAuthorView(location.pathname);
+  const isProfilePage = isProfileView(location.pathname);
+  const subplebbitPageString = subscribed ? `${t('leave')}` : `${t('join')}`;
+  const authorPageString = '+ friends'; // TODO: add functionality once implemented in backend
 
   const handleSubscribe = () => {
+    if (isAuthorPage) return; // TODO: remove once implemented in backend
+
     if (subscribed === false) {
       subscribe();
     } else if (subscribed === true) {
@@ -19,8 +28,8 @@ const SubscribeButton = ({ address }: subscribeButtonProps) => {
   };
 
   return (
-    <span className={`${styles.subscribeButton} ${subscribed ? styles.leaveButton : styles.joinButton}`} onClick={handleSubscribe}>
-      {subscribed ? `${t('leave')}` : `${t('join')}`}
+    <span className={`${isProfilePage ? styles.hidden : ''} ${styles.subscribeButton} ${subscribed ? styles.leaveButton : styles.joinButton}`} onClick={handleSubscribe}>
+      {isAuthorPage ? authorPageString : subplebbitPageString}
     </span>
   );
 };