feat(multisubs): add subplebbit address in post info

src/components/board-buttons/board-buttons.tsx

@@ -57,13 +57,13 @@ export const MobileBoardButtons = () => {
   const location = useLocation();
   const accountComment = useAccountComment({ commentIndex: params?.accountCommentIndex as any });
   const subplebbitAddress = params?.subplebbitAddress || accountComment?.subplebbitAddress;
-  const isInPostPage = isPostPageView(location.pathname, params);
+  const isInPostView = isPostPageView(location.pathname, params);
   const isInCatalogView = isCatalogView(location.pathname, params);
   const isInPendingPostPage = isPendingPostView(location.pathname, params);
 
   return (
     <div className={styles.mobileBoardButtons}>
-      {isInPostPage || isInPendingPostPage ? (
+      {isInPostView || isInPendingPostPage ? (
         <div className={styles.mobilePostPageButtons}>
           <ReturnButton address={subplebbitAddress} />
           <CatalogButton address={subplebbitAddress} />
@@ -92,13 +92,13 @@ export const DesktopBoardButtons = () => {
   const isInCatalogView = isCatalogView(location.pathname, params);
   const isInAllView = isAllView(location.pathname);
   const isInPendingPostPage = isPendingPostView(location.pathname, params);
-  const isInPostPage = isPostPageView(location.pathname, params);
+  const isInPostView = isPostPageView(location.pathname, params);
   const isInSubscriptionsView = isSubscriptionsView(location.pathname);
 
   return (
     <div className={styles.desktopBoardButtons}>
       <hr />
-      {isInPostPage || isInPendingPostPage ? (
+      {isInPostView || isInPendingPostPage ? (
         <>
           [<ReturnButton address={subplebbitAddress} />] [<CatalogButton address={subplebbitAddress} />] [<BottomButton />] [
           <OptionsButton />]

src/components/post-form/post-form.tsx

@@ -122,7 +122,7 @@ const PostFormTable = ({ closeForm }: { closeForm: () => void }) => {
   }, [index, resetSubmitStore, navigate]);
 
   // in post page, publish a reply to the post
-  const isInPostPage = isPostPageView(location.pathname, params);
+  const isInPostView = isPostPageView(location.pathname, params);
   const cid = params?.commentCid as string;
   const { setContent, resetContent, replyIndex, publishReply } = useReply({ cid, subplebbitAddress });
 
@@ -164,10 +164,10 @@ const PostFormTable = ({ closeForm }: { closeForm: () => void }) => {
               defaultValue={displayName || undefined}
               onChange={(e) => setAccount({ ...account, author: { ...account?.author, displayName: e.target.value } })}
             />
-            {isInPostPage && <button onClick={onPublishReply}>{t('post')}</button>}
+            {isInPostView && <button onClick={onPublishReply}>{t('post')}</button>}
           </td>
         </tr>
-        {!isInPostPage && (
+        {!isInPostView && (
           <tr>
             <td>{t('subject')}</td>
             <td>
@@ -192,7 +192,7 @@ const PostFormTable = ({ closeForm }: { closeForm: () => void }) => {
               ref={textRef}
               onChange={(e) => {
                 const content = e.target.value.replace(/\n/g, '\n\n');
-                isInPostPage ? setContent.content(content) : setSubmitStore({ content });
+                isInPostView ? setContent.content(content) : setSubmitStore({ content });
               }}
             />
           </td>
@@ -208,7 +208,7 @@ const PostFormTable = ({ closeForm }: { closeForm: () => void }) => {
               ref={urlRef}
               onChange={(e) => {
                 setUrl(e.target.value);
-                isInPostPage ? setContent.link(e.target.value) : setSubmitStore({ link: e.target.value });
+                isInPostView ? setContent.link(e.target.value) : setSubmitStore({ link: e.target.value });
               }}
             />
             <span className={styles.linkType}>
@@ -252,7 +252,7 @@ const PostForm = () => {
   const location = useLocation();
   const params = useParams();
   const isInDescriptionView = isDescriptionView(location.pathname, params);
-  const isInPostPage = isPostPageView(location.pathname, params);
+  const isInPostView = isPostPageView(location.pathname, params);
   const isInRulesView = isRulesView(location.pathname, params);
 
   const comment = useComment({ commentCid: useParams().commentCid });
@@ -274,7 +274,7 @@ const PostForm = () => {
           <div>
             [
             <button className='button' onClick={() => setShowForm(true)}>
-              {isInPostPage ? t('post_a_reply') : t('start_new_thread')}
+              {isInPostView ? t('post_a_reply') : t('start_new_thread')}
             </button>
             ]
           </div>
@@ -292,7 +292,7 @@ const PostForm = () => {
         ) : (
           <>
             <button className={`${styles.showFormButton} button`} onClick={() => setShowForm(showForm ? false : true)}>
-              {showForm ? t('close_post_form') : isInPostPage ? t('post_a_reply') : t('start_new_thread')}
+              {showForm ? t('close_post_form') : isInPostView ? t('post_a_reply') : t('start_new_thread')}
             </button>
             {showForm && <PostFormTable closeForm={() => setShowForm(false)} />}
           </>

src/components/post/post-desktop/post-desktop.tsx

@@ -1,10 +1,12 @@
 import { useEffect, useRef, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
+import { useLocation, useParams } from 'react-router-dom';
 import { Link } from 'react-router-dom';
 import { useAccount } from '@plebbit/plebbit-react-hooks';
 import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
 import { getCommentMediaInfo, getDisplayMediaInfoType, getHasThumbnail } from '../../../lib/utils/media-utils';
 import { getFormattedDate } from '../../../lib/utils/time-utils';
+import { isAllView, isPendingPostView, isPostPageView, isSubscriptionsView } from '../../../lib/utils/view-utils';
 import useCountLinksInReplies from '../../../hooks/use-count-links-in-replies';
 import useReplies from '../../../hooks/use-replies';
 import useStateString from '../../../hooks/use-state-string';
@@ -16,16 +18,20 @@ import { PostProps } from '../post';
 import styles from '../post.module.css';
 import _ from 'lodash';
 
-const PostInfo = ({ isInPostPage, openReplyModal, post, roles }: PostProps) => {
+const PostInfo = ({ openReplyModal, post, roles }: PostProps) => {
   const { t } = useTranslation();
   const { author, cid, locked, pinned, parentCid, postCid, shortCid, state, subplebbitAddress, timestamp, title } = post || {};
   const { address, displayName, shortAddress } = author || {};
   const { isDescription, isRules } = post || {}; // custom properties, not from api
-
   const stateString = useStateString(post);
-
   const isReply = parentCid;
 
+  const params = useParams();
+  const location = useLocation();
+  const isInAllView = isAllView(location.pathname);
+  const isInPostView = isPostPageView(location.pathname, params);
+  const isInSubscriptionsView = isSubscriptionsView(location.pathname);
+
   const shortDisplayName = displayName?.trim().length > 20 ? displayName?.trim().slice(0, 20).trim() + '...' : displayName?.trim();
   const authorRole = roles?.[address]?.role;
   const displayTitle = title && title.length > 75 ? title?.slice(0, 75) + '...' : title;
@@ -90,6 +96,12 @@ const PostInfo = ({ isInPostPage, openReplyModal, post, roles }: PostProps) => {
             )}
           </span>
         )}
+        {subplebbitAddress && (isInAllView || isInSubscriptionsView) && (
+          <span className={styles.postNumLink}>
+            {' '}
+            <Link to={`/p/${subplebbitAddress}`}>p/{subplebbitAddress && Plebbit.getShortAddress(subplebbitAddress)}</Link>
+          </span>
+        )}
         {pinned && (
           <span className={`${styles.stickyIconWrapper} ${!locked && styles.addPaddingBeforeReply}`}>
             <img src='assets/icons/sticky.gif' alt='' className={styles.stickyIcon} title={t('sticky')} />
@@ -100,7 +112,7 @@ const PostInfo = ({ isInPostPage, openReplyModal, post, roles }: PostProps) => {
             <img src='assets/icons/closed.gif' alt='' className={styles.closedIcon} title={t('closed')} />
           </span>
         )}
-        {!isInPostPage && !isReply && (
+        {!isInPostView && !isReply && (
           <span className={styles.replyButton}>
             [<Link to={`/p/${subplebbitAddress}/${isDescription ? 'description' : isRules ? 'rules' : `c/${postCid}`}`}>{_.capitalize(t('reply'))}</Link>]
           </span>
@@ -171,9 +183,14 @@ const PostMedia = ({ post }: PostProps) => {
   );
 };
 
-const PostMessage = ({ isInPostPage, post }: PostProps) => {
+const PostMessage = ({ post }: PostProps) => {
   const { cid, content, parentCid, postCid, state, subplebbitAddress } = post || {};
-  const displayContent = content && !isInPostPage && content.length > 1000 ? content?.slice(0, 1000) + '(...)' : content;
+
+  const params = useParams();
+  const location = useLocation();
+  const isInPostView = isPostPageView(location.pathname, params);
+
+  const displayContent = content && !isInPostView && content.length > 1000 ? content?.slice(0, 1000) + '(...)' : content;
 
   const isReply = parentCid;
   const isReplyingToReply = postCid !== parentCid;
@@ -195,7 +212,7 @@ const PostMessage = ({ isInPostPage, post }: PostProps) => {
         </>
       )}
       <Markdown content={displayContent} />
-      {!isReply && content.length > 1000 && !isInPostPage && (
+      {!isReply && content.length > 1000 && !isInPostView && (
         <span className={styles.abbr}>
           <br />
           <Trans i18nKey={'comment_too_long'} shouldUnescape={true} components={{ 1: <Link to={`/p/${subplebbitAddress}/c/${cid}`} /> }} />
@@ -211,10 +228,15 @@ const PostMessage = ({ isInPostPage, post }: PostProps) => {
   );
 };
 
-const PostDesktop = ({ isInPostPage, isPendingPostPage, openReplyModal, post, roles, showAllReplies }: PostProps) => {
+const PostDesktop = ({ openReplyModal, post, roles, showAllReplies }: PostProps) => {
   const { cid, content, link, pinned, replyCount, subplebbitAddress } = post || {};
   const { isDescription, isRules } = post || {}; // custom properties, not from api
 
+  const params = useParams();
+  const location = useLocation();
+  const isInPendingPostView = isPendingPostView(location.pathname, params);
+  const isInPostView = isPostPageView(location.pathname, params);
+
   const replies = useReplies(post);
   const visiblelinksCount = useCountLinksInReplies(post, 5);
   const totallinksCount = useCountLinksInReplies(post);
@@ -226,16 +248,16 @@ const PostDesktop = ({ isInPostPage, isPendingPostPage, openReplyModal, post, ro
       <div className={styles.hrWrapper}>
         <hr />
       </div>
-      {!isInPostPage && (
+      {!isInPostView && (
         <span className={styles.hideButtonWrapper}>
           <span className={`${styles.hideButton} ${styles.hideThread}`} />
         </span>
       )}
       {link && <PostMedia post={post} />}
-      <PostInfo isInPostPage={isInPostPage} isPendingPostPage={isPendingPostPage} openReplyModal={openReplyModal} post={post} roles={roles} />
+      <PostInfo openReplyModal={openReplyModal} post={post} roles={roles} />
       {!content && <div className={styles.spacer} />}
-      {content && <PostMessage isInPostPage={isInPostPage} post={post} />}
+      {content && <PostMessage post={post} />}
-      {!isDescription && !isRules && !isPendingPostPage && (replies.length > 5 || (pinned && replies.length > 0)) && !isInPostPage && (
+      {!isDescription && !isRules && !isInPendingPostView && (replies.length > 5 || (pinned && replies.length > 0)) && !isInPostView && (
         <span className={styles.summary}>
           <span className={styles.expandButtonWrapper}>
             <span className={styles.expandButton} />
@@ -252,8 +274,8 @@ const PostDesktop = ({ isInPostPage, isPendingPostPage, openReplyModal, post, ro
           )}
         </span>
       )}
-      {!(pinned && !isInPostPage) &&
+      {!(pinned && !isInPostView) &&
-        !isPendingPostPage &&
+        !isInPendingPostView &&
         !isDescription &&
         !isRules &&
         replies &&
@@ -262,9 +284,9 @@ const PostDesktop = ({ isInPostPage, isPendingPostPage, openReplyModal, post, ro
             <div className={styles.replyDesktop}>
               <div className={styles.sideArrows}>{'>>'}</div>
               <div className={styles.reply}>
-                <PostInfo isInPostPage={isInPostPage} isPendingPostPage={isPendingPostPage} openReplyModal={openReplyModal} post={reply} roles={roles} />
+                <PostInfo openReplyModal={openReplyModal} post={reply} roles={roles} />
                 {reply.link && <PostMedia post={reply} />}
-                {reply.content && <PostMessage isInPostPage={isInPostPage} post={reply} />}
+                {reply.content && <PostMessage post={reply} />}
               </div>
             </div>
           </div>

src/components/post/post-mobile/post-mobile.tsx

@@ -1,10 +1,11 @@
 import { useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
+import { Link, useLocation, useParams } from 'react-router-dom';
 import { useAccount } from '@plebbit/plebbit-react-hooks';
 import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
 import { getCommentMediaInfo, getHasThumbnail } from '../../../lib/utils/media-utils';
 import { getFormattedDate } from '../../../lib/utils/time-utils';
+import { isAllView, isPendingPostView, isPostPageView, isSubscriptionsView } from '../../../lib/utils/view-utils';
 import useCountLinksInReplies from '../../../hooks/use-count-links-in-replies';
 import useReplies from '../../../hooks/use-replies';
 import useStateString from '../../../hooks/use-state-string';
@@ -21,6 +22,10 @@ const PostInfoAndMedia = ({ openReplyModal, post, roles }: PostProps) => {
   const { isDescription, isRules } = post || {}; // custom properties, not from api
   const { address, displayName, shortAddress } = author || {};
 
+  const location = useLocation();
+  const isInAllView = isAllView(location.pathname);
+  const isInSubscriptionsView = isSubscriptionsView(location.pathname);
+
   const authorRole = roles?.[address]?.role;
   const shortDisplayName = displayName?.trim().length > 20 ? displayName?.trim().slice(0, 20).trim() + '...' : displayName?.trim();
   const displayTitle = title && title.length > 30 ? title?.slice(0, 30) + '(...)' : title;
@@ -67,6 +72,12 @@ const PostInfoAndMedia = ({ openReplyModal, post, roles }: PostProps) => {
           )}
         </span>
         <span className={styles.dateTimePostNum}>
+          {subplebbitAddress && (isInAllView || isInSubscriptionsView) && (
+            <div className={styles.postNumLink}>
+              {' '}
+              <Link to={`/p/${subplebbitAddress}`}>p/{subplebbitAddress && Plebbit.getShortAddress(subplebbitAddress)}</Link>
+            </div>
+          )}
           {getFormattedDate(timestamp)}{' '}
           {!(isDescription || isRules) && (
             <span className={styles.postNumLink}>
@@ -99,9 +110,14 @@ const PostInfoAndMedia = ({ openReplyModal, post, roles }: PostProps) => {
   );
 };
 
-const PostMessageMobile = ({ isInPostPage, post }: PostProps) => {
+const PostMessageMobile = ({ post }: PostProps) => {
   const { cid, content, parentCid, postCid, state, subplebbitAddress } = post || {};
-  const displayContent = content && !isInPostPage && content.length > 1000 ? content?.slice(0, 1000) : content;
+
+  const params = useParams();
+  const location = useLocation();
+  const isInPostView = isPostPageView(location.pathname, params);
+
+  const displayContent = content && !isInPostView && content.length > 1000 ? content?.slice(0, 1000) : content;
 
   const isReply = parentCid;
   const isReplyingToReply = postCid !== parentCid;
@@ -124,7 +140,7 @@ const PostMessageMobile = ({ isInPostPage, post }: PostProps) => {
           </>
         )}
         <Markdown content={displayContent} />
-        {!isReply && content.length > 1000 && !isInPostPage && (
+        {!isReply && content.length > 1000 && !isInPostView && (
           <span className={styles.abbr}>
             <br />
             <Trans i18nKey={'comment_too_long'} shouldUnescape={true} components={{ 1: <Link to={`/p/${subplebbitAddress}/c/${cid}`} /> }} />
@@ -141,11 +157,16 @@ const PostMessageMobile = ({ isInPostPage, post }: PostProps) => {
   );
 };
 
-const PostMobile = ({ isInPostPage, isPendingPostPage, openReplyModal, post, roles, showAllReplies }: PostProps) => {
+const PostMobile = ({ openReplyModal, post, roles, showAllReplies }: PostProps) => {
   const { t } = useTranslation();
   const { cid, content, pinned, replyCount, subplebbitAddress } = post || {};
   const { isDescription, isRules } = post || {}; // custom properties, not from api
 
+  const params = useParams();
+  const location = useLocation();
+  const isInPendingPostView = isPendingPostView(location.pathname, params);
+  const isInPostView = isPostPageView(location.pathname, params);
+
   const linksCount = useCountLinksInReplies(post);
 
   const replies = useReplies(post);
@@ -159,9 +180,9 @@ const PostMobile = ({ isInPostPage, isPendingPostPage, openReplyModal, post, rol
         <div className={styles.postContainer}>
           <div className={styles.postOp}>
             <PostInfoAndMedia openReplyModal={openReplyModal} post={post} roles={roles} />
-            {content && <PostMessageMobile isInPostPage={isInPostPage} post={post} />}
+            {content && <PostMessageMobile post={post} />}
           </div>
-          {!isInPostPage && !isPendingPostPage && (
+          {!isInPostView && !isInPendingPostView && (
             <div className={styles.postLink}>
               <span className={styles.info}>
                 {replyCount > 0 && `${replyCount} Replies`}
@@ -173,8 +194,8 @@ const PostMobile = ({ isInPostPage, isPendingPostPage, openReplyModal, post, rol
             </div>
           )}
         </div>
-        {!(pinned && !isInPostPage) &&
+        {!(pinned && !isInPostView) &&
-          !isPendingPostPage &&
+          !isInPendingPostView &&
           !isDescription &&
           !isRules &&
           replies &&
@@ -184,7 +205,7 @@ const PostMobile = ({ isInPostPage, isPendingPostPage, openReplyModal, post, rol
                 <div className={styles.reply}>
                   <div className={styles.replyContainer}>
                     <PostInfoAndMedia openReplyModal={openReplyModal} post={reply} roles={roles} />
-                    {content && <PostMessageMobile isInPostPage={isInPostPage} post={reply} />}
+                    {content && <PostMessageMobile post={reply} />}
                   </div>
                 </div>
               </div>

src/components/post/post.tsx

@@ -1,6 +1,4 @@
-import { useLocation, useParams } from 'react-router-dom';
 import { Role, useSubplebbit } from '@plebbit/plebbit-react-hooks';
-import { isPendingPostView, isPostPageView } from '../../lib/utils/view-utils';
 import useWindowWidth from '../../hooks/use-window-width';
 import styles from './post.module.css';
 import PostDesktop from './post-desktop';
@@ -8,8 +6,6 @@ import PostMobile from './post-mobile';
 
 export interface PostProps {
   index?: number;
-  isInPostPage?: boolean;
-  isPendingPostPage?: boolean;
   post?: any;
   reply?: any;
   roles?: Role[];
@@ -21,32 +17,13 @@ const Post = ({ post, showAllReplies = false, openReplyModal }: PostProps) => {
   const subplebbit = useSubplebbit({ subplebbitAddress: post?.subplebbitAddress });
   const isMobile = useWindowWidth() < 640;
 
-  const params = useParams();
-  const location = useLocation();
-  const isInPostPage = isPostPageView(location.pathname, params);
-  const isPendingPostPage = isPendingPostView(location.pathname, params);
-
   return (
     <div className={styles.thread}>
       <div className={styles.postContainer}>
         {isMobile ? (
-          <PostMobile
+          <PostMobile post={post} roles={subplebbit?.roles} showAllReplies={showAllReplies} openReplyModal={openReplyModal} />
-            isInPostPage={isInPostPage}
-            isPendingPostPage={isPendingPostPage}
-            post={post}
-            roles={subplebbit?.roles}
-            showAllReplies={showAllReplies}
-            openReplyModal={openReplyModal}
-          />
         ) : (
-          <PostDesktop
+          <PostDesktop post={post} roles={subplebbit?.roles} showAllReplies={showAllReplies} openReplyModal={openReplyModal} />
-            isInPostPage={isInPostPage}
-            isPendingPostPage={isPendingPostPage}
-            post={post}
-            roles={subplebbit?.roles}
-            showAllReplies={showAllReplies}
-            openReplyModal={openReplyModal}
-          />
         )}
       </div>
     </div>