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(post): abstract post info on desktop

Browse Source
This commit is contained in:
plebeius.eth
2024-05-16 18:15:48 +02:00
parent e6e87fa07f
commit 15601f47e5
2 changed files with 150 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/post/post.tsx
+149 -143
View File
@@ -1,4 +1,4 @@
import { useState } from 'react'; import { useEffect, useRef, useState } from 'react';
import { Link, useLocation, useParams } from 'react-router-dom'; import { Link, useLocation, useParams } from 'react-router-dom';
import { Trans, useTranslation } from 'react-i18next'; import { Trans, useTranslation } from 'react-i18next';
import { Role, useAccount, useSubplebbit } from '@plebbit/plebbit-react-hooks'; import { Role, useAccount, useSubplebbit } from '@plebbit/plebbit-react-hooks';
@@ -20,30 +20,124 @@ import { getDisplayMediaInfoType } from '../../lib/utils/media-utils';
interface PostProps { interface PostProps {
index?: number; index?: number;
isInPostPage?: boolean;
isPendingPostPage?: boolean;
post?: any; post?: any;
reply?: any; reply?: any;
roles?: Role[]; roles?: Role[];
showAllReplies?: boolean; showAllReplies?: boolean;
stateString?: string;
openReplyModal?: (cid: string) => void; openReplyModal?: (cid: string) => void;
} }
const PostDesktop = ({ openReplyModal, post, roles, showAllReplies }: PostProps) => { const PostInfoDesktop = ({ isInPostPage, openReplyModal, post, roles, stateString }: PostProps) => {
const { t } = useTranslation(); const { t } = useTranslation();
const { author, cid, content, link, linkHeight, linkWidth, locked, pinned, postCid, replyCount, shortCid, state, subplebbitAddress, timestamp, title } = post || {}; const { author, cid, locked, pinned, postCid, shortCid, state, subplebbitAddress, timestamp, title } = post || {};
const { address, displayName, shortAddress } = author || {}; const { address, displayName, shortAddress } = author || {};
const shortDisplayName = displayName?.trim().length > 20 ? displayName?.trim().slice(0, 20).trim() + '...' : displayName?.trim();
const authorRole = roles?.[address]?.role;
const { isDescription, isRules } = post || {}; // custom properties, not from api const { isDescription, isRules } = post || {}; // custom properties, not from api
const params = useParams(); const isReply = post?.parentCid;
const location = useLocation();
const isInPostPage = isPostPageView(location.pathname, params);
const isPendingPostPage = isPendingPostView(location.pathname, params);
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; const displayTitle = title && title.length > 75 ? title?.slice(0, 75) + '...' : title;
// pending reply by account is not yet published
const account = useAccount();
const accountShortAddress = account?.author?.shortAddress;
const [menuBtnRotated, setMenuBtnRotated] = useState(false);
const menuRef = useRef<HTMLDivElement>(null);
const handleMenuButtonClick = () => {
setMenuBtnRotated((prev) => !prev);
};
const handleClickOutside = (event: MouseEvent) => {
if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
setMenuBtnRotated(false);
}
};
useEffect(() => {
if (menuBtnRotated) {
document.addEventListener('mousedown', handleClickOutside);
} else {
document.removeEventListener('mousedown', handleClickOutside);
}
return () => {
document.removeEventListener('mousedown', handleClickOutside);
};
}, [menuBtnRotated]);
return (
<div className={styles.postInfo}>
<span className={styles.checkbox}>
<input type='checkbox' />
</span>
{title && <span className={styles.subject}>{displayTitle} </span>}
<span className={styles.nameBlock}>
<span className={`${styles.name} ${(isDescription || isRules || authorRole) && styles.capcodeMod}`}>
{shortDisplayName || _.capitalize(t('anonymous'))}
{authorRole && ` ## Board ${authorRole}`}{' '}
</span>
{!(isDescription || isRules) && <span className={styles.userAddress}>(u/{shortAddress || accountShortAddress}) </span>}
</span>
<span className={styles.dateTime}>
{getFormattedDate(timestamp)}
{isDescription || isRules ? '' : ' '}
</span>
<span className={styles.postNum}>
{!(isDescription || isRules) && (
<span className={styles.postNumLink}>
<Link to={`/p/${subplebbitAddress}/c/${cid}`} className={styles.linkToPost} title={t('link_to_post')} onClick={(e) => !cid && e.preventDefault()}>
c/
</Link>
{!cid ? (
<span className={styles.pendingCid}>{state === 'failed' || stateString === 'Failed' ? 'Failed' : 'Pending'}</span>
) : (
<span className={styles.replyToPost} title={t('reply_to_post')} onClick={() => openReplyModal && openReplyModal(cid)}>
{shortCid}
</span>
)}
</span>
)}
{pinned && (
<span className={`${styles.stickyIconWrapper} ${!locked && styles.addPaddingBeforeReply}`}>
<img src='assets/icons/sticky.gif' alt='' className={styles.stickyIcon} title={t('sticky')} />
</span>
)}
{locked && (
<span className={`${styles.closedIconWrapper} ${styles.addPaddingBeforeReply} ${pinned && styles.addPaddingInBetween}`}>
<img src='assets/icons/closed.gif' alt='' className={styles.closedIcon} title={t('closed')} />
</span>
)}
{!isInPostPage && !isReply && (
<span className={styles.replyButton}>
[<Link to={`/p/${subplebbitAddress}/${isDescription ? 'description' : isRules ? 'rules' : `c/${postCid}`}`}>{t('reply')}</Link>]
</span>
)}
</span>
<span className={styles.postMenuBtnWrapper} ref={menuRef}>
<span className={styles.postMenuBtn} title='Post menu' onClick={handleMenuButtonClick} style={{ transform: menuBtnRotated ? 'rotate(90deg)' : 'rotate(0deg)' }}>
▶
</span>
</span>
</div>
);
};
const PostDesktop = ({ isInPostPage, isPendingPostPage, openReplyModal, post, roles, showAllReplies, stateString }: PostProps) => {
const { t } = useTranslation();
const { cid, content, link, linkHeight, linkWidth, pinned, replyCount, state, subplebbitAddress } = post || {};
const { isDescription, isRules } = post || {}; // custom properties, not from api
const displayContent = content && !isInPostPage && content.length > 1000 ? content?.slice(0, 1000) + '(...)' : content; const displayContent = content && !isInPostPage && content.length > 1000 ? content?.slice(0, 1000) + '(...)' : content;
const loadingString = stateString && (
<div className={`${styles.stateString} ${styles.ellipsis}`}>{stateString !== 'Failed' ? <LoadingEllipsis string={stateString} /> : stateString}</div>
);
const commentMediaInfo = getCommentMediaInfo(post); const commentMediaInfo = getCommentMediaInfo(post);
const { type, url } = commentMediaInfo || {}; const { type, url } = commentMediaInfo || {};
const embedUrl = url && new URL(url); const embedUrl = url && new URL(url);
@@ -56,17 +150,6 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies }: PostProps)
const repliesCount = pinned ? replyCount : replyCount - 5; const repliesCount = pinned ? replyCount : replyCount - 5;
const linksCount = pinned ? totallinksCount : totallinksCount - visiblelinksCount; const linksCount = pinned ? totallinksCount : totallinksCount - visiblelinksCount;
const [menuBtnRotated, setMenuBtnRotated] = useState(false);
// pending reply by account is not yet published
const account = useAccount();
const accountShortAddress = account?.author?.shortAddress;
const stateString = useStateString(post);
const loadingString = stateString && (
<div className={`${styles.stateString} ${styles.ellipsis}`}>{stateString !== 'Failed' ? <LoadingEllipsis string={stateString} /> : stateString}</div>
);
return ( return (
<div className={styles.postDesktop}> <div className={styles.postDesktop}>
<div className={styles.hrWrapper}> <div className={styles.hrWrapper}>
@@ -119,64 +202,14 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies }: PostProps)
)} )}
</div> </div>
)} )}
<div className={styles.postInfo}> <PostInfoDesktop
<span className={styles.checkbox}> isInPostPage={isInPostPage}
<input type='checkbox' /> isPendingPostPage={isPendingPostPage}
</span> openReplyModal={openReplyModal}
{title && <span className={styles.subject}>{displayTitle} </span>} post={post}
<span className={styles.nameBlock}> roles={roles}
<span className={`${styles.name} ${(isDescription || isRules || authorRole) && styles.capcodeMod}`}> stateString={stateString}
{shortDisplayName || _.capitalize(t('anonymous'))} />
{authorRole && ` ## Board ${authorRole}`}{' '}
</span>
{!(isDescription || isRules) && <span className={styles.userAddress}>(u/{shortAddress || accountShortAddress}) </span>}
</span>
<span className={styles.dateTime}>
{getFormattedDate(timestamp)}
{isDescription || isRules ? '' : ' '}
</span>
<span className={styles.postNum}>
{!(isDescription || isRules) && (
<span className={styles.postNumLink}>
<Link to={`/p/${subplebbitAddress}/c/${cid}`} className={styles.linkToPost} title={t('link_to_post')} onClick={(e) => !cid && e.preventDefault()}>
c/
</Link>
{!cid ? (
<span className={styles.pendingCid}>{state === 'failed' || stateString === 'Failed' ? 'Failed' : 'Pending'}</span>
) : (
<span className={styles.replyToPost} title={t('reply_to_post')} onClick={() => openReplyModal && openReplyModal(cid)}>
{shortCid}
</span>
)}
</span>
)}
{pinned && (
<span className={`${styles.stickyIconWrapper} ${!locked && styles.addPaddingBeforeReply}`}>
<img src='assets/icons/sticky.gif' alt='' className={styles.stickyIcon} title={t('sticky')} />
</span>
)}
{locked && (
<span className={`${styles.closedIconWrapper} ${styles.addPaddingBeforeReply} ${pinned && styles.addPaddingInBetween}`}>
<img src='assets/icons/closed.gif' alt='' className={styles.closedIcon} title={t('closed')} />
</span>
)}
{!isInPostPage && (
<span className={styles.replyButton}>
[<Link to={`/p/${subplebbitAddress}/${isDescription ? 'description' : isRules ? 'rules' : `c/${postCid}`}`}>{t('reply')}</Link>]
</span>
)}
</span>
<span className={styles.postMenuBtnWrapper}>
<span
className={styles.postMenuBtn}
title='Post menu'
onClick={() => setMenuBtnRotated(!menuBtnRotated)}
style={{ transform: menuBtnRotated ? 'rotate(90deg)' : 'rotate(0deg)' }}
>
▶
</span>
</span>
</div>
{!content && <div className={styles.spacer} />} {!content && <div className={styles.spacer} />}
{content && ( {content && (
<blockquote className={styles.postMessage}> <blockquote className={styles.postMessage}>
@@ -226,12 +259,9 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies }: PostProps)
); );
}; };
const ReplyDesktop = ({ reply, roles, openReplyModal }: PostProps) => { const ReplyDesktop = ({ isInPostPage, isPendingPostPage, reply, roles, openReplyModal }: PostProps) => {
const { t } = useTranslation(); const { t } = useTranslation();
const { author, cid, content, link, linkHeight, linkWidth, parentCid, pinned, postCid, shortCid, state, subplebbitAddress, timestamp } = reply || {}; const { cid, content, link, linkHeight, linkWidth, parentCid, postCid, state, subplebbitAddress } = reply || {};
const { address, displayName, shortAddress } = author || {};
const shortDisplayName = displayName?.trim().length > 20 ? displayName?.trim().slice(0, 20).trim() + '...' : displayName?.trim();
const authorRole = roles?.[address]?.role;
const commentMediaInfo = getCommentMediaInfo(reply); const commentMediaInfo = getCommentMediaInfo(reply);
const { type, url } = commentMediaInfo || {}; const { type, url } = commentMediaInfo || {};
@@ -241,63 +271,23 @@ const ReplyDesktop = ({ reply, roles, openReplyModal }: PostProps) => {
const isReplyingToReply = postCid !== parentCid; const isReplyingToReply = postCid !== parentCid;
const [menuBtnRotated, setMenuBtnRotated] = useState(false);
const stateString = useStateString(reply); const stateString = useStateString(reply);
const loadingString = stateString && ( const loadingString = stateString && (
<div className={`${styles.stateString} ${styles.ellipsis}`}>{stateString !== 'Failed' ? <LoadingEllipsis string={stateString} /> : stateString}</div> <div className={`${styles.stateString} ${styles.ellipsis}`}>{stateString !== 'Failed' ? <LoadingEllipsis string={stateString} /> : stateString}</div>
); );
// pending reply by account is not yet published
const account = useAccount();
const accountShortAddress = account?.author?.shortAddress;
return ( return (
<div className={styles.replyDesktop}> <div className={styles.replyDesktop}>
<div className={styles.sideArrows}>{'>>'}</div> <div className={styles.sideArrows}>{'>>'}</div>
<div className={styles.reply}> <div className={styles.reply}>
<div className={styles.postInfo}> <PostInfoDesktop
<span className={styles.checkbox}> isInPostPage={isInPostPage}
<input type='checkbox' /> isPendingPostPage={isPendingPostPage}
</span> openReplyModal={openReplyModal}
<span className={styles.nameBlock}> post={reply}
<span className={`${styles.name} ${authorRole && styles.capcodeMod}`}> roles={roles}
{shortDisplayName || _.capitalize(t('anonymous'))} stateString={stateString}
{authorRole && ` ## Board ${authorRole}`}{' '} />
</span>
<span className={styles.userAddress}>(u/{shortAddress || accountShortAddress}) </span>
</span>
<span className={styles.dateTime}>{getFormattedDate(timestamp)} </span>
<span className={styles.postNum}>
<span className={styles.postNumLink}>
<Link to={`/p/${subplebbitAddress}/c/${cid}`} className={styles.linkToPost} title={t('link_to_post')} onClick={(e) => !cid && e.preventDefault()}>
c/
</Link>
{!cid ? (
<span className={styles.pendingCid}>{state === 'failed' || stateString === 'Failed' ? 'Failed' : 'Pending'}</span>
) : (
<span className={styles.replyToPost} title={t('reply_to_post')} onClick={() => openReplyModal && openReplyModal(cid)}>
{shortCid}
</span>
)}
</span>
{pinned && (
<span className={styles.stickyIconWrapper}>
<img src='assets/icons/sticky.gif' alt='' className={styles.stickyIcon} title={t('sticky')} />
</span>
)}
</span>
<span className={styles.postMenuBtnWrapper}>
<span
className={styles.postMenuBtn}
title='Post menu'
onClick={() => setMenuBtnRotated(!menuBtnRotated)}
style={{ transform: menuBtnRotated ? 'rotate(90deg)' : 'rotate(0deg)' }}
>
▶
</span>
</span>
</div>
{url && ( {url && (
<div className={styles.file}> <div className={styles.file}>
<div className={styles.fileText}> <div className={styles.fileText}>
@@ -363,7 +353,7 @@ const ReplyDesktop = ({ reply, roles, openReplyModal }: PostProps) => {
); );
}; };
const PostMobile = ({ openReplyModal, post, roles, showAllReplies }: PostProps) => { const PostMobile = ({ isInPostPage, isPendingPostPage, openReplyModal, post, roles, showAllReplies, stateString }: PostProps) => {
const { t } = useTranslation(); const { t } = useTranslation();
const { author, cid, content, link, linkHeight, linkWidth, locked, pinned, replyCount, shortCid, state, subplebbitAddress, timestamp, title } = post || {}; const { author, cid, content, link, linkHeight, linkWidth, locked, pinned, replyCount, shortCid, state, subplebbitAddress, timestamp, title } = post || {};
const { address, displayName, shortAddress } = author || {}; const { address, displayName, shortAddress } = author || {};
@@ -372,11 +362,6 @@ const PostMobile = ({ openReplyModal, post, roles, showAllReplies }: PostProps)
const { isDescription, isRules } = post || {}; // custom properties, not from api const { isDescription, isRules } = post || {}; // custom properties, not from api
const params = useParams();
const location = useLocation();
const isInPostPage = isPostPageView(location.pathname, params);
const isPendingPostPage = isPendingPostView(location.pathname, params);
const linksCount = useCountLinksInReplies(post); const linksCount = useCountLinksInReplies(post);
const displayTitle = title && title.length > 30 ? title?.slice(0, 30) + '(...)' : title; const displayTitle = title && title.length > 30 ? title?.slice(0, 30) + '(...)' : title;
const displayContent = content && !isInPostPage && content.length > 1000 ? content?.slice(0, 1000) : content; const displayContent = content && !isInPostPage && content.length > 1000 ? content?.slice(0, 1000) : content;
@@ -391,7 +376,6 @@ const PostMobile = ({ openReplyModal, post, roles, showAllReplies }: PostProps)
const account = useAccount(); const account = useAccount();
const accountShortAddress = account?.author?.shortAddress; const accountShortAddress = account?.author?.shortAddress;
const stateString = useStateString(post);
const loadingString = stateString && ( const loadingString = stateString && (
<div className={`${styles.stateString} ${styles.ellipsis}`}>{stateString !== 'Failed' ? <LoadingEllipsis string={stateString} /> : stateString}</div> <div className={`${styles.stateString} ${styles.ellipsis}`}>{stateString !== 'Failed' ? <LoadingEllipsis string={stateString} /> : stateString}</div>
); );
@@ -505,7 +489,7 @@ const PostMobile = ({ openReplyModal, post, roles, showAllReplies }: PostProps)
); );
}; };
const ReplyMobile = ({ reply, roles, openReplyModal }: PostProps) => { const ReplyMobile = ({ openReplyModal, reply, roles, stateString }: PostProps) => {
const { t } = useTranslation(); const { t } = useTranslation();
const { author, content, cid, link, linkHeight, linkWidth, parentCid, pinned, postCid, shortCid, state, subplebbitAddress, timestamp } = reply || {}; const { author, content, cid, link, linkHeight, linkWidth, parentCid, pinned, postCid, shortCid, state, subplebbitAddress, timestamp } = reply || {};
const { address, displayName, shortAddress } = author || {}; const { address, displayName, shortAddress } = author || {};
@@ -522,7 +506,6 @@ const ReplyMobile = ({ reply, roles, openReplyModal }: PostProps) => {
const account = useAccount(); const account = useAccount();
const accountShortAddress = account?.author?.shortAddress; const accountShortAddress = account?.author?.shortAddress;
const stateString = useStateString(reply);
const loadingString = stateString && ( const loadingString = stateString && (
<div className={`${styles.stateString} ${styles.ellipsis}`}>{stateString !== 'Failed' ? <LoadingEllipsis string={stateString} /> : stateString}</div> <div className={`${styles.stateString} ${styles.ellipsis}`}>{stateString !== 'Failed' ? <LoadingEllipsis string={stateString} /> : stateString}</div>
); );
@@ -600,13 +583,36 @@ const Post = ({ post, showAllReplies = false, openReplyModal }: PostProps) => {
const subplebbit = useSubplebbit({ subplebbitAddress: post?.subplebbitAddress }); const subplebbit = useSubplebbit({ subplebbitAddress: post?.subplebbitAddress });
const isMobile = useWindowWidth() < 640; const isMobile = useWindowWidth() < 640;
const params = useParams();
const location = useLocation();
const isInPostPage = isPostPageView(location.pathname, params);
const isPendingPostPage = isPendingPostView(location.pathname, params);
const stateString = useStateString(post);
return ( return (
<div className={styles.thread}> <div className={styles.thread}>
<div className={styles.postContainer}> <div className={styles.postContainer}>
{isMobile ? ( {isMobile ? (
<PostMobile post={post} roles={subplebbit?.roles} showAllReplies={showAllReplies} openReplyModal={openReplyModal} /> <PostMobile
isInPostPage={isInPostPage}
isPendingPostPage={isPendingPostPage}
post={post}
roles={subplebbit?.roles}
showAllReplies={showAllReplies}
stateString={stateString}
openReplyModal={openReplyModal}
/>
) : ( ) : (
<PostDesktop post={post} roles={subplebbit?.roles} showAllReplies={showAllReplies} openReplyModal={openReplyModal} /> <PostDesktop
isInPostPage={isInPostPage}
isPendingPostPage={isPendingPostPage}
post={post}
roles={subplebbit?.roles}
showAllReplies={showAllReplies}
stateString={stateString}
openReplyModal={openReplyModal}
/>
)} )}
</div> </div>
</div> </div>
src/components/settings-modal/crypto-wallets-setting/crypto-wallets-setting.tsx
+1
View File
@@ -124,6 +124,7 @@ const CryptoWalletsForm = ({ account }: { account: Account | undefined }) => {
<Trans <Trans
i18nKey='copy_message_etherscan' i18nKey='copy_message_etherscan'
components={{ components={{
// eslint-disable-next-line
1: <a href='https://etherscan.io/verifiedSignatures' target='_blank' rel='noopener noreferrer' />, 1: <a href='https://etherscan.io/verifiedSignatures' target='_blank' rel='noopener noreferrer' />,
}} }}
/> />