External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat(multisubs): add subplebbit address in post info

Browse Source
This commit is contained in:
plebeius.eth
2024-05-17 15:29:03 +02:00
parent 07af3187c6
commit 82fe238979
5 changed files with 83 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/board-buttons/board-buttons.tsx
+4 -4
View File
@@ -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
+8 -8
View File
@@ -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
+38 -16
View File
@@ -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} />}
{!isDescription && !isRules && !isPendingPostPage && (replies.length > 5 || (pinned && replies.length > 0)) && !isInPostPage && (
{content && <PostMessage post={post} />}
{!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) &&
!isPendingPostPage &&
{!(pinned && !isInPostView) &&
!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
+31 -10
View File
@@ -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) &&
!isPendingPostPage &&
{!(pinned && !isInPostView) &&
!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
+2 -25
View File
@@ -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
isInPostPage={isInPostPage}
isPendingPostPage={isPendingPostPage}
post={post}
roles={subplebbit?.roles}
showAllReplies={showAllReplies}
openReplyModal={openReplyModal}
/>
<PostMobile post={post} roles={subplebbit?.roles} showAllReplies={showAllReplies} openReplyModal={openReplyModal} />
) : (
<PostDesktop
isInPostPage={isInPostPage}
isPendingPostPage={isPendingPostPage}
post={post}
roles={subplebbit?.roles}
showAllReplies={showAllReplies}
openReplyModal={openReplyModal}
/>
<PostDesktop post={post} roles={subplebbit?.roles} showAllReplies={showAllReplies} openReplyModal={openReplyModal} />
)}
</div>
</div>