feat(author sidebar): add subscribe (friends) button

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>

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

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