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

refactor: remove description and rules mock posts

Browse Source 
Removed all fake posts for subplebbit description and rules, including dedicated routes, components, and all related logic across the codebase. Board admins can now pin regular posts if they want to provide a description.
This commit is contained in:
plebeius
2025-12-23 19:14:25 +01:00
parent 13b0f10a23
commit 5e79ce91b6
24 changed files with 142 additions and 490 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/board-buttons/board-buttons.tsx
+5 -7
View File
@@ -3,7 +3,7 @@ import { Link, useLocation, useNavigate, useParams } from 'react-router-dom';
import { useAccountComment, useSubscribe } from '@plebbit/plebbit-react-hooks';
import useSubplebbitsStore from '@plebbit/plebbit-react-hooks/dist/stores/subplebbits';
import useSubplebbitsPagesStore from '@plebbit/plebbit-react-hooks/dist/stores/subplebbits-pages';
import { isAllView, isCatalogView, isDescriptionView, isModView, isPendingPostView, isPostPageView, isSubscriptionsView } from '../../lib/utils/view-utils';
import { isAllView, isCatalogView, isModView, isPendingPostView, isPostPageView, isSubscriptionsView } from '../../lib/utils/view-utils';
import { useDefaultSubplebbits } from '../../hooks/use-default-subplebbits';
import { getBoardPath, isDirectoryBoard } from '../../lib/utils/route-utils';
import { useResolvedSubplebbitAddress } from '../../hooks/use-resolved-subplebbit-address';
@@ -365,23 +365,21 @@ const PostPageStats = () => {
const { t } = useTranslation();
const params = useParams();
const location = useLocation();
const isInDescriptionView = isDescriptionView(location.pathname, params);
const resolvedAddress = useResolvedSubplebbitAddress();
const comment = useSubplebbitsPagesStore((state) => state.comments[params?.commentCid as string]);
const subplebbit = useSubplebbitsStore((state) => state.subplebbits[resolvedAddress as string]);
const descriptionReplyCount = location?.pathname.startsWith('/all/') ? 0 : subplebbit?.rules?.length > 0 ? 1 : 0;
const { closed, pinned, replyCount } = comment || {};
const linkCount = useCountLinksInReplies(comment);
const displayReplyCount = replyCount !== undefined ? replyCount.toString() : isInDescriptionView ? descriptionReplyCount : '?';
const replyCountTooltip = replyCount !== undefined || isInDescriptionView ? _.capitalize(t('replies')) : t('loading');
const displayReplyCount = replyCount !== undefined ? replyCount.toString() : '?';
const replyCountTooltip = replyCount !== undefined ? _.capitalize(t('replies')) : t('loading');
return (
<span>
{(pinned || isInDescriptionView) && `${_.capitalize(t('sticky'))} / `}
{(closed || isInDescriptionView) && `${_.capitalize(t('closed'))} / `}
{pinned && `${_.capitalize(t('sticky'))} / `}
{closed && `${_.capitalize(t('closed'))} / `}
<Tooltip children={displayReplyCount} content={replyCountTooltip} /> / <Tooltip children={linkCount?.toString()} content={_.capitalize(t('links'))} />
</span>
);
src/components/catalog-row/catalog-row.tsx
+9 -32
View File
@@ -34,7 +34,7 @@ interface CatalogPostMediaProps {
linkHeight?: number;
}
export const CatalogPostMedia = ({ cid, commentMediaInfo, isOutOfFeed, linkWidth, linkHeight }: CatalogPostMediaProps) => {
export const CatalogPostMedia = ({ cid, commentMediaInfo, linkWidth, linkHeight }: CatalogPostMediaProps) => {
const { patternThumbnailUrl, thumbnail, type, url } = commentMediaInfo || {};
const iframeThumbnail = patternThumbnailUrl || thumbnail;
const gifFrameUrl = useFetchGifFirstFrame(type === 'gif' ? url : undefined);
@@ -58,7 +58,7 @@ export const CatalogPostMedia = ({ cid, commentMediaInfo, isOutOfFeed, linkWidth
displayHeight = `${maxThumbnailSize}px`;
}
if (type === 'audio' || isOutOfFeed) {
if (type === 'audio') {
displayWidth = 'unset';
displayHeight = 'unset';
}
@@ -112,24 +112,7 @@ export const CatalogPostMedia = ({ cid, commentMediaInfo, isOutOfFeed, linkWidth
const CatalogPost = ({ post }: { post: Comment }) => {
const { t } = useTranslation();
const {
author,
cid,
content,
isDescription,
isRules,
link,
linkHeight,
linkWidth,
locked,
pinned,
replyCount,
spoiler,
subplebbitAddress,
timestamp,
title,
thumbnailUrl,
} = post || {};
const { author, cid, content, link, linkHeight, linkWidth, locked, pinned, replyCount, spoiler, subplebbitAddress, timestamp, title, thumbnailUrl } = post || {};
const linkCount = useCountLinksInReplies(post);
const commentMediaInfo = useCommentMediaInfo(link, thumbnailUrl, linkWidth, linkHeight);
@@ -145,7 +128,7 @@ const CatalogPost = ({ post }: { post: Comment }) => {
const boardPath = subplebbitAddress ? getBoardPath(subplebbitAddress, defaultSubplebbits) : '';
const postMenuProps = useMemo(() => selectPostMenuProps(post), [post]);
const postLink = isInAllView && isDescription ? '/all/description' : `/${boardPath}/${isDescription ? 'description' : isRules ? 'rules' : `thread/${cid}`}`;
const postLink = boardPath ? `/${boardPath}/thread/${cid}` : `/thread/${cid}`;
const threadIcons = (
<div className={styles.threadIcons}>
@@ -236,12 +219,12 @@ const CatalogPost = ({ post }: { post: Comment }) => {
'--maxHeight': maxHeight,
} as React.CSSProperties;
const isTextOnlyThread = !hasThumbnail || isRules;
const isTextOnlyThread = !hasThumbnail;
return (
<>
<div className={`${styles.post} ${imageSize === 'Large' ? styles.large : ''}`} style={CSSProperties}>
<div onMouseOver={() => setHoveredCid(isDescription ? 'd' : isRules ? 'r' : cid)} onMouseLeave={() => setHoveredCid(null)}>
<div onMouseOver={() => setHoveredCid(cid)} onMouseLeave={() => setHoveredCid(null)}>
{hidden ? (
<Link to={postLink}>
<span className={styles.hiddenThumbnail} />
@@ -266,13 +249,7 @@ const CatalogPost = ({ post }: { post: Comment }) => {
{spoiler ? (
<img src='assets/spoiler.png' alt='' />
) : (
<CatalogPostMedia
cid={cid}
commentMediaInfo={commentMediaInfo}
isOutOfFeed={isDescription || isRules}
linkWidth={linkWidth}
linkHeight={linkHeight}
/>
<CatalogPostMedia cid={cid} commentMediaInfo={commentMediaInfo} linkWidth={linkWidth} linkHeight={linkHeight} />
)}
</div>
</Link>
@@ -295,7 +272,7 @@ const CatalogPost = ({ post }: { post: Comment }) => {
<div className={styles.postContent}>{(showOPComment || isTextOnlyThread) && (hasThumbnail ? postContent : <Link to={postLink}>{postContent}</Link>)}</div>
</div>
</div>
{(hoveredCid === cid || isDescription) &&
{hoveredCid === cid &&
showPortal &&
createPortal(
<div className={styles.postPreview} ref={refs.setFloating} style={floatingStyles}>
@@ -307,7 +284,7 @@ const CatalogPost = ({ post }: { post: Comment }) => {
) : (
t('posted_by')
)}{' '}
<span className={`${styles.postAuthor} ${(isCatalogPostAuthorMod || isRules || isDescription) && styles.capcode}`}>
<span className={`${styles.postAuthor} ${isCatalogPostAuthorMod && styles.capcode}`}>
{author?.displayName || _.capitalize(t('anonymous'))}
{isCatalogPostAuthorMod && <span className='capitalize'>{` ## Board ${catalogPostAuthorRole}`}</span>}
</span>
src/components/comment-content/comment-content.tsx
+2 -2
View File
@@ -23,7 +23,7 @@ const CommentContent = ({ comment: post }: { comment: Comment }) => {
const isMobile = useIsMobile();
// TODO: commentAuthor is not yet available outside of editedComment, wait for API to be updated
const { cid, content, deleted, edit, isRules, original, parentCid, postCid, reason, removed, state } = post || {};
const { cid, content, deleted, edit, original, parentCid, postCid, reason, removed, state } = post || {};
// const banned = !!post?.commentAuthor?.banExpiresAt;
const [showFullComment, setShowFullComment] = useState(false);
@@ -45,7 +45,7 @@ const CommentContent = ({ comment: post }: { comment: Comment }) => {
const loadingString = <div className={styles.stateString}>{stateString !== 'Failed' ? <LoadingEllipsis string={stateString || t('loading')} /> : stateString}</div>;
return (
<blockquote className={`${styles.postMessage} ${!isReply && isMobile && styles.clampLines} ${isRules && styles.rulesMessage}`}>
<blockquote className={`${styles.postMessage} ${!isReply && isMobile && styles.clampLines}`}>
{isReply && state !== 'failed' && isReplyingToReply && !(deleted || removed) && <ReplyQuotePreview isQuotelinkReply={true} quotelinkReply={quotelinkReply} />}
{removed ? (
reason ? (
src/components/comment-media/comment-media.tsx
+1 -5
View File
@@ -13,8 +13,6 @@ interface MediaProps {
deleted?: boolean;
displayHeight?: string;
displayWidth?: string;
isDescription?: boolean;
isRules?: boolean;
isFloatingEmbed?: boolean;
isOutOfFeed?: boolean;
isReply?: boolean;
@@ -204,9 +202,7 @@ const Image = ({ commentMediaInfo, displayHeight, displayWidth, isOutOfFeed, par
const CommentMedia = ({
commentMediaInfo,
deleted,
isDescription,
isFloatingEmbed,
isRules,
linkHeight,
linkWidth,
parentCid,
@@ -251,7 +247,7 @@ const CommentMedia = ({
displayWidth = '100%';
displayHeight = '100%';
}
const isOutOfFeed = isDescription || isRules || isFloatingEmbed || spoiler || false; // virtuoso wrapper unneeded
const isOutOfFeed = isFloatingEmbed || spoiler || false; // virtuoso wrapper unneeded
return (
<span className={styles.content}>
src/components/edit-menu/edit-menu.tsx
+2 -2
View File
@@ -32,7 +32,7 @@ const timestampToDays = (timestamp: number) => {
const EditMenu = ({ post }: { post: Comment }) => {
const { t } = useTranslation();
const isMobile = useIsMobile();
const { author, cid, content, deleted, isRules, locked, parentCid, pinned, postCid, reason, removed, spoiler, subplebbitAddress } = post || {};
const { author, cid, content, deleted, locked, parentCid, pinned, postCid, reason, removed, spoiler, subplebbitAddress } = post || {};
const [isEditMenuOpen, setIsEditMenuOpen] = useState(false);
const [isContentEditorOpen, setIsContentEditorOpen] = useState(false);
@@ -216,7 +216,7 @@ const EditMenu = ({ post }: { post: Comment }) => {
setIsEditMenuOpen(!isEditMenuOpen);
} else {
setIsEditMenuOpen(false);
alert(parentCid || isRules ? t('cannot_edit_reply') : t('cannot_edit_thread'));
alert(parentCid ? t('cannot_edit_reply') : t('cannot_edit_thread'));
}
}}
checked={isEditMenuOpen}
src/components/post-desktop/post-desktop.tsx
+52 -104
View File
@@ -58,8 +58,7 @@ const PostInfo = ({ post, postReplyCount = 0, roles, isHidden }: PostProps) => {
const replies = useReplies(post);
const { address, shortAddress } = author || {};
const displayName = author?.displayName?.trim();
const { isDescription, isRules } = post || {}; // custom properties, not from api
const authorRole = roles?.[address]?.role.replace('moderator', 'mod') || (isDescription || isRules ? 'mod' : undefined);
const authorRole = roles?.[address]?.role.replace('moderator', 'mod');
const stateString = useStateString(post);
const isReply = parentCid;
const { showOmittedReplies } = useShowOmittedReplies();
@@ -139,66 +138,60 @@ const PostInfo = ({ post, postReplyCount = 0, roles, isHidden }: PostProps) => {
</span>
)}{' '}
</span>
{!(isDescription || isRules) && (
<>
{author?.avatar && !(deleted || removed) && !hideAvatars && avatarImageUrl ? (
<span className={styles.authorAvatar}>
<img src={avatarImageUrl} alt='' />
{author?.avatar && !(deleted || removed) && !hideAvatars && avatarImageUrl ? (
<span className={styles.authorAvatar}>
<img src={avatarImageUrl} alt='' />
</span>
) : null}
(ID:{' '}
{deleted ? (
t('deleted')
) : removed ? (
t('removed')
) : (
<Tooltip
children={
<span
title={t('highlight_posts')}
className={styles.userAddress}
onClick={() => handleUserAddressClick(userID, postCid)}
style={{ backgroundColor: userIDBackgroundColor, color: userIDTextColor }}
>
{userID}
</span>
) : null}
(ID:{' '}
{deleted ? (
t('deleted')
) : removed ? (
t('removed')
) : (
<Tooltip
children={
<span
title={t('highlight_posts')}
className={styles.userAddress}
onClick={() => handleUserAddressClick(userID, postCid)}
style={{ backgroundColor: userIDBackgroundColor, color: userIDTextColor }}
>
{userID}
</span>
}
content={`${numberOfPostsByAuthor === 1 ? t('1_post_by_this_id') : t('x_posts_by_this_id', { number: numberOfPostsByAuthor })}`}
showTooltip={isInPostPageView || showOmittedReplies[postCid] || (postReplyCount < 6 && !pinned)}
/>
)}
){' '}
</>
}
content={`${numberOfPostsByAuthor === 1 ? t('1_post_by_this_id') : t('x_posts_by_this_id', { number: numberOfPostsByAuthor })}`}
showTooltip={isInPostPageView || showOmittedReplies[postCid] || (postReplyCount < 6 && !pinned)}
/>
)}
){' '}
</span>
<span className={styles.dateTime}>
<Tooltip children={<span>{getFormattedDate(timestamp)}</span>} content={getFormattedTimeAgo(timestamp)} />
{isDescription || isRules ? '' : ' '}
<Tooltip children={<span>{getFormattedDate(timestamp)}</span>} content={getFormattedTimeAgo(timestamp)} />{' '}
</span>
<span className={styles.postNum}>
{!(isDescription || isRules) &&
(cid ? (
<span className={styles.postNumLink}>
<Link
to={boardPath ? `/${boardPath}/thread/${cid}` : `/thread/${cid}`}
className={styles.linkToPost}
title={t('link_to_post')}
onClick={(e) => !cid && e.preventDefault()}
>
CID:
</Link>
<span className={styles.replyToPost} title={t('reply_to_post')} onMouseDown={onReplyModalClick}>
{shortCid}
</span>
{cid ? (
<span className={styles.postNumLink}>
<Link
to={boardPath ? `/${boardPath}/thread/${cid}` : `/thread/${cid}`}
className={styles.linkToPost}
title={t('link_to_post')}
onClick={(e) => !cid && e.preventDefault()}
>
CID:
</Link>
<span className={styles.replyToPost} title={t('reply_to_post')} onMouseDown={onReplyModalClick}>
{shortCid}
</span>
) : (
<>
<span>CID:</span>
<span className={styles.pendingCid}>
{state === 'failed' || stateString === 'Failed' ? _.capitalize(t('failed')) : state === 'pending' ? _.capitalize(t('pending')) : ''}
</span>
</>
))}
</span>
) : (
<>
<span>CID:</span>
<span className={styles.pendingCid}>
{state === 'failed' || stateString === 'Failed' ? _.capitalize(t('failed')) : state === 'pending' ? _.capitalize(t('pending')) : ''}
</span>
</>
)}
{pinned && (
<span className={`${styles.stickyIconWrapper} ${!locked && styles.addPaddingBeforeReply}`}>
<img src='assets/icons/sticky.gif' alt='' className={styles.stickyIcon} title={t('sticky')} />
@@ -212,16 +205,7 @@ const PostInfo = ({ post, postReplyCount = 0, roles, isHidden }: PostProps) => {
{!isInPostPageView && !isReply && !isHidden && (
<span className={styles.replyButton}>
[
<Link
to={
isInAllView && isDescription
? '/all/description'
: boardPath
? `/${boardPath}/${isDescription ? 'description' : isRules ? 'rules' : `thread/${postCid}`}`
: `/${isDescription ? 'description' : isRules ? 'rules' : `thread/${postCid}`}`
}
onClick={(e) => !cid && !isDescription && !isRules && e.preventDefault()}
>
<Link to={boardPath ? `/${boardPath}/thread/${postCid}` : `/thread/${postCid}`} onClick={(e) => !cid && e.preventDefault()}>
{_.capitalize(t('reply'))}
</Link>
]
@@ -246,8 +230,6 @@ const PostInfo = ({ post, postReplyCount = 0, roles, isHidden }: PostProps) => {
interface PostMediaProps {
commentMediaInfo: CommentMediaInfo | undefined;
hasThumbnail: boolean;
isDescription: boolean;
isRules: boolean;
spoiler: boolean;
deleted: boolean;
removed: boolean;
@@ -262,8 +244,6 @@ interface PostMediaProps {
const PostMedia = ({
commentMediaInfo,
hasThumbnail,
isDescription,
isRules,
spoiler,
deleted,
removed,
@@ -330,14 +310,11 @@ const PostMedia = ({
<CommentMedia
commentMediaInfo={commentMediaInfo}
deleted={deleted}
isDescription={isDescription}
isRules={isRules}
removed={removed}
linkHeight={linkHeight}
linkWidth={linkWidth}
showThumbnail={showThumbnail}
setShowThumbnail={setShowThumbnail}
isOutOfFeed={isDescription || isRules}
parentCid={parentCid}
spoiler={spoiler}
/>
@@ -356,7 +333,6 @@ const Reply = ({ postReplyCount, reply, roles }: PostProps) => {
}
const { author, cid, deleted, link, linkHeight, linkWidth, postCid, reason, removed, spoiler, subplebbitAddress, thumbnailUrl, parentCid } = post || {};
const { isDescription, isRules } = post || {}; // custom properties, not from api
const defaultSubplebbits = useDefaultSubplebbits();
const boardPath = subplebbitAddress ? getBoardPath(subplebbitAddress, defaultSubplebbits) : undefined;
@@ -381,8 +357,6 @@ const Reply = ({ postReplyCount, reply, roles }: PostProps) => {
<PostMedia
commentMediaInfo={commentMediaInfo}
hasThumbnail={hasThumbnail}
isDescription={isDescription}
isRules={isRules}
spoiler={spoiler}
deleted={deleted}
removed={removed}
@@ -403,7 +377,6 @@ const Reply = ({ postReplyCount, reply, roles }: PostProps) => {
const PostDesktop = ({ post, roles, showAllReplies, showReplies = true }: PostProps) => {
const { t } = useTranslation();
const { author, cid, content, deleted, link, linkHeight, linkWidth, pinned, postCid, removed, spoiler, state, subplebbitAddress, thumbnailUrl, parentCid } = post || {};
const { isDescription, isRules } = post || {}; // custom properties, not from api
const params = useParams();
const location = useLocation();
const isInPendingPostView = isPendingPostView(location.pathname, params);
@@ -427,17 +400,6 @@ const PostDesktop = ({ post, roles, showAllReplies, showReplies = true }: PostPr
const stateString = useStateString(post) || t('downloading_board');
const subplebbit = useSubplebbitsStore((state) => state.subplebbits[subplebbitAddress]);
const subplebbitRulesReply = {
isRules: true,
subplebbitAddress,
timestamp: subplebbit?.createdAt,
author: { displayName: _.capitalize(t('anonymous')) },
content: `${subplebbit?.rules?.map((rule: string, index: number) => `${index + 1}. ${rule}`).join('\n')}`,
replyCount: 0,
};
const commentMediaInfo = useCommentMediaInfo(link, thumbnailUrl, linkWidth, linkHeight);
const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
@@ -451,7 +413,7 @@ const PostDesktop = ({ post, roles, showAllReplies, showReplies = true }: PostPr
<div className={styles.replyQuotePreviewSpacer} />
)}
<div className={isHidden ? styles.postDesktopHidden : ''}>
{!isInPostPageView && !isDescription && !isRules && showReplies && (
{!isInPostPageView && showReplies && (
<span className={`${styles.hideButtonWrapper} ${!hasThumbnail ? styles.hideButtonWrapperNoImage : ''}`}>
<span className={`${styles.hideButton} ${hidden ? styles.unhideThread : styles.hideThread}`} onClick={hidden ? unhide : hide} />
</span>
@@ -462,8 +424,6 @@ const PostDesktop = ({ post, roles, showAllReplies, showReplies = true }: PostPr
<PostMedia
commentMediaInfo={commentMediaInfo}
hasThumbnail={hasThumbnail}
isDescription={isDescription}
isRules={isRules}
spoiler={spoiler}
deleted={deleted}
removed={removed}
@@ -479,7 +439,7 @@ const PostDesktop = ({ post, roles, showAllReplies, showReplies = true }: PostPr
{!isHidden && !content && !(deleted || removed) && <div className={styles.spacer} />}
{!isHidden && <CommentContent comment={post} />}
</div>
{!isHidden && !isDescription && !isRules && !isInPendingPostView && (replyCount > 5 || (pinned && repliesCount > 0)) && !isInPostPageView && (
{!isHidden && !isInPendingPostView && (replyCount > 5 || (pinned && repliesCount > 0)) && !isInPostPageView && (
<span className={styles.summary}>
<span
className={`${showOmittedReplies[cid] ? styles.hideOmittedReplies : styles.showOmittedReplies} ${styles.omittedRepliesButtonWrapper}`}
@@ -517,20 +477,8 @@ const PostDesktop = ({ post, roles, showAllReplies, showReplies = true }: PostPr
<Reply reply={reply} roles={roles} postReplyCount={replyCount} />
</div>
))}
{isDescription && subplebbit?.rules && subplebbit?.rules.length > 0 && (
<div className={styles.replyContainer}>
<Reply reply={subplebbitRulesReply} />
</div>
)}
</div>
{!isInPendingPostView &&
(!isDescription || (isDescription && !subplebbit?.updatedAt)) &&
!isRules &&
stateString &&
stateString !== 'Failed' &&
state !== 'succeeded' &&
isInPostPageView &&
!(!showReplies && !showAllReplies) ? (
{!isInPendingPostView && stateString && stateString !== 'Failed' && state !== 'succeeded' && isInPostPageView && !(!showReplies && !showAllReplies) ? (
<div className={styles.stateString}>
<br />
<LoadingEllipsis string={stateString} />
src/components/post-desktop/post-menu-desktop/post-menu-desktop.tsx
+7 -9
View File
@@ -124,7 +124,7 @@ type PostMenuDesktopProps = {
const PostMenuDesktop = ({ postMenu }: PostMenuDesktopProps) => {
const { t } = useTranslation();
const { authorAddress, cid, isDescription, isRules, link, thumbnailUrl, linkWidth, linkHeight, postCid, subplebbitAddress } = postMenu || {};
const { authorAddress, cid, link, thumbnailUrl, linkWidth, linkHeight, postCid, subplebbitAddress } = postMenu || {};
const commentMediaInfo = getCommentMediaInfo(link || '', thumbnailUrl || '', linkWidth ?? 0, linkHeight ?? 0);
const { thumbnail, type, url } = commentMediaInfo || {};
const [menuBtnRotated, setMenuBtnRotated] = useState(false);
@@ -152,7 +152,7 @@ const PostMenuDesktop = ({ postMenu }: PostMenuDesktopProps) => {
const headingId = useId();
const handleMenuClick = () => {
if (cid || isDescription || isRules) {
if (cid) {
setMenuBtnRotated((prev) => !prev);
}
};
@@ -166,21 +166,19 @@ const PostMenuDesktop = ({ postMenu }: PostMenuDesktopProps) => {
className={isInCatalogView ? styles.postMenuBtnCatalog : styles.postMenuBtn}
title='Post menu'
onClick={handleMenuClick}
style={{ transform: menuBtnRotated && (cid || isDescription || isRules) ? 'rotate(90deg)' : 'rotate(0deg)' }}
style={{ transform: menuBtnRotated && cid ? 'rotate(90deg)' : 'rotate(0deg)' }}
>
▶
</span>
</span>
{menuBtnRotated &&
(cid || isDescription || isRules) &&
cid &&
createPortal(
<FloatingFocusManager context={context} modal={false}>
<div className={styles.postMenu} ref={refs.setFloating} style={floatingStyles} aria-labelledby={headingId} {...getFloatingProps()}>
{cid && subplebbitAddress && <CopyLinkButton cid={cid} subplebbitAddress={subplebbitAddress} linkType='thread' onClose={handleClose} />}
{cid && <CopyContentIdButton cid={cid} onClose={handleClose} />}
{!cid && isDescription && subplebbitAddress && <CopyLinkButton subplebbitAddress={subplebbitAddress} linkType='description' onClose={handleClose} />}
{!cid && isRules && subplebbitAddress && <CopyLinkButton subplebbitAddress={subplebbitAddress} linkType='rules' onClose={handleClose} />}
{!(isInPostPageView && postCid === cid) && !isDescription && !isRules && (
{!(isInPostPageView && postCid === cid) && (
<div
className={styles.postMenuItem}
onClick={() => {
@@ -192,8 +190,8 @@ const PostMenuDesktop = ({ postMenu }: PostMenuDesktopProps) => {
</div>
)}
{link && isValidURL(link) && (type === 'image' || type === 'gif' || thumbnail) && url && <ImageSearchButton url={url} onClose={handleClose} />}
{!isDescription && !isRules && authorAddress && <BlockUserButton address={authorAddress} />}
{!isDescription && !isRules && (isInAllView || isInSubscriptionsView) && subplebbitAddress && <BlockBoardButton address={subplebbitAddress} />}
{authorAddress && <BlockUserButton address={authorAddress} />}
{(isInAllView || isInSubscriptionsView) && subplebbitAddress && <BlockBoardButton address={subplebbitAddress} />}
</div>
</FloatingFocusManager>,
document.body,
src/components/post-form/post-form.tsx
+2 -4
View File
@@ -8,7 +8,7 @@ import useSubplebbitsPagesStore from '@plebbit/plebbit-react-hooks/dist/stores/s
import { getHasThumbnail, getLinkMediaInfo } from '../../lib/utils/media-utils';
import { formatMarkdown } from '../../lib/utils/post-utils';
import { isValidURL } from '../../lib/utils/url-utils';
import { isAllView, isDescriptionView, isModView, isPostPageView, isRulesView, isSubscriptionsView } from '../../lib/utils/view-utils';
import { isAllView, isModView, isPostPageView, isSubscriptionsView } from '../../lib/utils/view-utils';
import { useDefaultSubplebbits } from '../../hooks/use-default-subplebbits';
import { useResolvedSubplebbitAddress } from '../../hooks/use-resolved-subplebbit-address';
import useFetchGifFirstFrame from '../../hooks/use-fetch-gif-first-frame';
@@ -357,9 +357,7 @@ const PostForm = () => {
const { t } = useTranslation();
const location = useLocation();
const params = useParams();
const isInDescriptionView = isDescriptionView(location.pathname, params);
const isInPostView = isPostPageView(location.pathname, params);
const isInRulesView = isRulesView(location.pathname, params);
const isInAllView = isAllView(location.pathname);
const isInModView = isModView(location.pathname);
const isInSubscriptionsView = isSubscriptionsView(location.pathname, params);
@@ -374,7 +372,7 @@ const PostForm = () => {
}
const { deleted, locked, removed, postCid } = comment || {};
const isThreadClosed = deleted || locked || removed || isInDescriptionView || isInRulesView;
const isThreadClosed = deleted || locked || removed;
const [showForm, setShowForm] = useState(false);
src/components/post-mobile/post-menu-mobile/post-menu-mobile.tsx
+5 -8
View File
@@ -135,8 +135,7 @@ type PostMenuMobileProps = {
};
const PostMenuMobile = ({ postMenu, editMenuPost }: PostMenuMobileProps) => {
const { authorAddress, cid, deleted, isDescription, isRules, link, linkHeight, linkWidth, parentCid, postCid, removed, subplebbitAddress, thumbnailUrl } =
postMenu || {};
const { authorAddress, cid, deleted, link, linkHeight, linkWidth, parentCid, postCid, removed, subplebbitAddress, thumbnailUrl } = postMenu || {};
const { isAccountMod, isAccountCommentAuthor } = useEditCommentPrivileges({ commentAuthorAddress: authorAddress, subplebbitAddress });
const commentMediaInfo = getCommentMediaInfo(link, thumbnailUrl, linkWidth, linkHeight);
const { thumbnail, type, url } = commentMediaInfo || {};
@@ -155,7 +154,7 @@ const PostMenuMobile = ({ postMenu, editMenuPost }: PostMenuMobileProps) => {
const headingId = useId();
const handleMenuClick = () => {
if (cid || isDescription || isRules) {
if (cid) {
setIsMenuOpen((prev) => !prev);
}
};
@@ -172,17 +171,15 @@ const PostMenuMobile = ({ postMenu, editMenuPost }: PostMenuMobileProps) => {
...
</span>
{isMenuOpen &&
(cid || isDescription || isRules) &&
cid &&
createPortal(
<FloatingFocusManager context={context} modal={false}>
<div className={styles.postMenu} ref={refs.setFloating} style={floatingStyles} aria-labelledby={headingId} {...getFloatingProps()}>
{cid && subplebbitAddress && <CopyLinkButton cid={cid} subplebbitAddress={subplebbitAddress} linkType='thread' onClose={handleClose} />}
{cid && <CopyContentIdButton cid={cid} onClose={handleClose} />}
{!cid && isDescription && subplebbitAddress && <CopyLinkButton subplebbitAddress={subplebbitAddress} linkType='description' onClose={handleClose} />}
{!cid && isRules && subplebbitAddress && <CopyLinkButton subplebbitAddress={subplebbitAddress} linkType='rules' onClose={handleClose} />}
{cid && subplebbitAddress && <HidePostButton cid={cid} isReply={!!parentCid} postCid={postCid} onClose={handleClose} />}
{cid && subplebbitAddress && !isDescription && !isRules && authorAddress && <BlockUserButton address={authorAddress} />}
{cid && subplebbitAddress && !isInBoardView && !isDescription && !isRules && <BlockBoardButton address={subplebbitAddress} />}
{cid && subplebbitAddress && authorAddress && <BlockUserButton address={authorAddress} />}
{cid && subplebbitAddress && !isInBoardView && <BlockBoardButton address={subplebbitAddress} />}
{link && isValidURL(link) && (type === 'image' || type === 'gif' || thumbnail) && url && <ImageSearchButtons url={url} onClose={handleClose} />}
</div>
</FloatingFocusManager>,
src/components/post-mobile/post-mobile.tsx
+49 -92
View File
@@ -55,10 +55,9 @@ const PostInfoAndMedia = ({ post, postReplyCount = 0, roles }: PostProps) => {
const boardPath = subplebbitAddress ? getBoardPath(subplebbitAddress, defaultSubplebbits) : undefined;
const isReply = parentCid;
const title = post?.title?.trim();
const { isDescription, isRules } = post || {}; // custom properties, not from api
const { address, shortAddress } = author || {};
const displayName = author?.displayName?.trim();
const authorRole = roles?.[address]?.role.replace('moderator', 'mod') || (isDescription || isRules ? 'mod' : undefined);
const authorRole = roles?.[address]?.role.replace('moderator', 'mod');
const { imageUrl: avatarImageUrl } = useAuthorAvatar({ author });
const { hideAvatars } = useAvatarVisibilityStore();
@@ -134,37 +133,33 @@ const PostInfoAndMedia = ({ post, postReplyCount = 0, roles }: PostProps) => {
</span>
)}
</span>
{!(isDescription || isRules) && (
<>
{author?.avatar && !(deleted || removed) && !hideAvatars && avatarImageUrl ? (
<span className={styles.authorAvatar}>
<img src={avatarImageUrl} alt='' />
{author?.avatar && !(deleted || removed) && !hideAvatars && avatarImageUrl ? (
<span className={styles.authorAvatar}>
<img src={avatarImageUrl} alt='' />
</span>
) : null}
(ID: {''}
{removed ? (
_.lowerCase(t('removed'))
) : deleted ? (
_.lowerCase(t('deleted'))
) : (
<Tooltip
children={
<span
title={t('highlight_posts')}
className={styles.userAddress}
onClick={() => handleUserAddressClick(userID, postCid)}
style={{ backgroundColor: userIDBackgroundColor, color: userIDTextColor }}
>
{userID}
</span>
) : null}
(ID: {''}
{removed ? (
_.lowerCase(t('removed'))
) : deleted ? (
_.lowerCase(t('deleted'))
) : (
<Tooltip
children={
<span
title={t('highlight_posts')}
className={styles.userAddress}
onClick={() => handleUserAddressClick(userID, postCid)}
style={{ backgroundColor: userIDBackgroundColor, color: userIDTextColor }}
>
{userID}
</span>
}
content={`${numberOfPostsByAuthor === 1 ? t('1_post_by_this_id') : t('x_posts_by_this_id', { number: numberOfPostsByAuthor })}`}
showTooltip={isInPostPageView || postReplyCount < 6}
/>
)}
){' '}
</>
}
content={`${numberOfPostsByAuthor === 1 ? t('1_post_by_this_id') : t('x_posts_by_this_id', { number: numberOfPostsByAuthor })}`}
showTooltip={isInPostPageView || postReplyCount < 6}
/>
)}
){' '}
{pinned && (
<span className={styles.stickyIconWrapper}>
<img src='assets/icons/sticky.gif' alt='' className={styles.stickyIcon} title={t('sticky')} />
@@ -196,29 +191,28 @@ const PostInfoAndMedia = ({ post, postReplyCount = 0, roles }: PostProps) => {
</div>
)}
<Tooltip children={<span>{getFormattedDate(timestamp)}</span>} content={getFormattedTimeAgo(timestamp)} />{' '}
{!(isDescription || isRules) &&
(cid ? (
<span className={styles.postNumLink}>
<Link
to={boardPath ? `/${boardPath}/thread/${cid}` : `/thread/${cid}`}
className={styles.linkToPost}
title={t('link_to_post')}
onClick={(e) => !cid && e.preventDefault()}
>
CID:
</Link>
<span className={styles.replyToPost} title={t('reply_to_post')} onMouseDown={onReplyModalClick}>
{shortCid.slice(0, -4)}
</span>
{cid ? (
<span className={styles.postNumLink}>
<Link
to={boardPath ? `/${boardPath}/thread/${cid}` : `/thread/${cid}`}
className={styles.linkToPost}
title={t('link_to_post')}
onClick={(e) => !cid && e.preventDefault()}
>
CID:
</Link>
<span className={styles.replyToPost} title={t('reply_to_post')} onMouseDown={onReplyModalClick}>
{shortCid.slice(0, -4)}
</span>
) : (
<>
<span>CID:</span>
<span className={styles.pendingCid}>
{state === 'failed' || stateString === 'Failed' ? _.capitalize(t('failed')) : state === 'pending' ? _.capitalize(t('pending')) : ''}
</span>
</>
))}
</span>
) : (
<>
<span>CID:</span>
<span className={styles.pendingCid}>
{state === 'failed' || stateString === 'Failed' ? _.capitalize(t('failed')) : state === 'pending' ? _.capitalize(t('pending')) : ''}
</span>
</>
)}
</span>
</span>
</div>
@@ -229,7 +223,6 @@ const PostInfoAndMedia = ({ post, postReplyCount = 0, roles }: PostProps) => {
const PostMediaContent = ({ post, link }: { post: any; link: string }) => {
const [showThumbnail, setShowThumbnail] = useState(true);
const { isDescription, isRules } = post || {}; // custom properties, not from api
const { thumbnailUrl, linkWidth, linkHeight, spoiler, deleted, removed, parentCid } = post || {};
const commentMediaInfo = useCommentMediaInfo(link, thumbnailUrl, linkWidth, linkHeight);
const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
@@ -239,14 +232,11 @@ const PostMediaContent = ({ post, link }: { post: any; link: string }) => {
<CommentMedia
commentMediaInfo={commentMediaInfo}
deleted={deleted}
isDescription={isDescription}
isRules={isRules}
removed={removed}
linkHeight={linkHeight}
linkWidth={linkWidth}
showThumbnail={showThumbnail}
setShowThumbnail={setShowThumbnail}
isOutOfFeed={isDescription || isRules}
parentCid={parentCid}
spoiler={spoiler}
/>
@@ -310,7 +300,6 @@ const Reply = ({ postReplyCount, reply, roles }: PostProps) => {
const PostMobile = ({ post, roles, showAllReplies, showReplies = true }: PostProps) => {
const { t } = useTranslation();
const { author, cid, pinned, postCid, replyCount, state, subplebbitAddress } = post || {};
const { isDescription, isRules } = post || {}; // custom properties, not from api
const params = useParams();
const location = useLocation();
const isInAllView = isAllView(location.pathname);
@@ -326,17 +315,6 @@ const PostMobile = ({ post, roles, showAllReplies, showReplies = true }: PostPro
const stateString = useStateString(post) || t('loading_post');
const subplebbit = useSubplebbitsStore((state) => state.subplebbits[subplebbitAddress]);
const showRules = isDescription && subplebbit?.rules && subplebbit?.rules.length > 0;
const subplebbitRulesReply = {
isRules: true,
subplebbitAddress,
timestamp: subplebbit?.createdAt,
author: { displayName: _.capitalize(t('anonymous')) },
content: `${subplebbit?.rules?.map((rule: string, index: number) => `${index + 1}. ${rule}`).join('\n')}`,
replyCount: 0,
};
return (
<>
{hidden && !isInPostPageView ? (
@@ -373,16 +351,7 @@ const PostMobile = ({ post, roles, showAllReplies, showReplies = true }: PostPro
{replyCount > 0 && `${replyCount} Replies`}
{linksCount > 0 && ` / ${linksCount} Links`}
</span>
<Link
to={
isInAllView && isDescription
? '/all/description'
: boardPath
? `/${boardPath}/${isDescription ? 'description' : isRules ? 'rules' : `thread/${cid}`}`
: `/${isDescription ? 'description' : isRules ? 'rules' : `thread/${cid}`}`
}
className='button'
>
<Link to={boardPath ? `/${boardPath}/thread/${cid}` : `/thread/${cid}`} className='button'>
{t('view_thread')}
</Link>
</div>
@@ -400,20 +369,8 @@ const PostMobile = ({ post, roles, showAllReplies, showReplies = true }: PostPro
<Reply postReplyCount={replyCount} reply={reply} roles={roles} />
</div>
))}
{showRules && (
<div className={styles.replyContainer}>
<Reply reply={subplebbitRulesReply} />
</div>
)}
</div>
{!isInPendingPostView &&
(!isDescription || (isDescription && !subplebbit?.updatedAt)) &&
!isRules &&
stateString &&
stateString !== 'Failed' &&
state !== 'succeeded' &&
isInPostPageView &&
!(!showReplies && !showAllReplies) ? (
{!isInPendingPostView && stateString && stateString !== 'Failed' && state !== 'succeeded' && isInPostPageView && !(!showReplies && !showAllReplies) ? (
<div className={styles.stateString}>
<LoadingEllipsis string={stateString} />
</div>
src/components/subplebbit-description/index.ts
-1
View File
@@ -1 +0,0 @@
export { default } from './subplebbit-description';
src/components/subplebbit-description/subplebbit-description.tsx
-44
View File
@@ -1,44 +0,0 @@
import { Post } from '../../views/post';
import { useTranslation } from 'react-i18next';
import { isAllView } from '../../lib/utils/view-utils';
import { useMultisubMetadata } from '../../hooks/use-default-subplebbits';
import { useLocation } from 'react-router-dom';
import _ from 'lodash';
interface DescriptionPostProps {
avatarUrl?: string;
createdAt: number;
description: string;
replyCount: number;
shortAddress: string;
subplebbitAddress: string | undefined;
title: string;
}
const SubplebbitDescription = ({ avatarUrl, createdAt, description, replyCount, shortAddress, subplebbitAddress, title }: DescriptionPostProps) => {
const { t } = useTranslation();
const location = useLocation();
const isInAllView = isAllView(location.pathname);
const multisubMetadata = useMultisubMetadata();
const descriptionSubplebbitAddress = isInAllView ? 'all' : subplebbitAddress;
const post = {
isDescription: true,
subplebbitAddress: descriptionSubplebbitAddress,
timestamp: isInAllView ? multisubMetadata?.createdAt : createdAt,
author: { displayName: _.capitalize(t('anonymous')) },
content: isInAllView ? multisubMetadata?.description : description,
link: avatarUrl,
replyCount,
title: t('welcome_to_board', {
board: isInAllView ? multisubMetadata?.title : title || `p/${shortAddress}`,
interpolation: { escapeValue: false },
}),
pinned: true,
locked: true,
};
return <Post post={post} />;
};
export default SubplebbitDescription;
src/components/subplebbit-rules/index.ts
-1
View File
@@ -1 +0,0 @@
export { default } from './subplebbit-rules';
src/components/subplebbit-rules/subplebbit-rules.tsx
-29
View File
@@ -1,29 +0,0 @@
import { Post } from '../../views/post';
import { useTranslation } from 'react-i18next';
import _ from 'lodash';
interface RulesPostProps {
subplebbitAddress: string | undefined;
createdAt: number;
rules: string[];
}
const SubplebbitRules = ({ subplebbitAddress, createdAt, rules }: RulesPostProps) => {
const { t } = useTranslation();
const content = rules?.map((rule, index) => `${index + 1}. ${rule}`).join('\n');
const post = {
isRules: true,
subplebbitAddress,
timestamp: createdAt,
author: { displayName: _.capitalize(t('anonymous')) },
content,
replyCount: 0,
title: _.capitalize(t('rules')),
pinned: true,
locked: true,
};
return <Post post={post} />;
};
export default SubplebbitRules;
src/components/subplebbit-stats/subplebbit-stats.tsx
+1 -4
View File
@@ -4,7 +4,6 @@ import { useAccountComment, useSubplebbitStats } from '@plebbit/plebbit-react-ho
import useSubplebbitsStore from '@plebbit/plebbit-react-hooks/dist/stores/subplebbits';
import useSubplebbitsPagesStore from '@plebbit/plebbit-react-hooks/dist/stores/subplebbits-pages';
import useSubplebbitStatsVisibilityStore from '../../stores/use-subplebbit-stats-visibility-store';
import { isDescriptionView, isRulesView } from '../../lib/utils/view-utils';
import { useResolvedSubplebbitAddress } from '../../hooks/use-resolved-subplebbit-address';
import styles from './subplebbit-stats.module.css';
@@ -24,12 +23,10 @@ const SubplebbitStats = () => {
const isHidden = hiddenStats[address];
const location = useLocation();
const isInDescriptionView = isDescriptionView(location.pathname, params);
const isInRulesView = isRulesView(location.pathname, params);
const comment = useSubplebbitsPagesStore((state) => state.comments[params?.commentCid as string]);
const { deleted, locked, removed } = comment || {};
const hideStats = deleted || locked || removed || isInDescriptionView || isInRulesView;
const hideStats = deleted || locked || removed;
const unixToMMDDYYYY = (timestamp: number) => {
const date = new Date(timestamp * 1000);