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: add challenge modal

Browse Source
This commit is contained in:
plebeius.eth
2024-04-26 19:13:23 +02:00
parent 3ce3f090f5
commit cc5d042889
10 changed files with 463 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/post/post.module.css
+10
View File
@@ -303,6 +303,11 @@
text-align: right;
}
.postMobile .postNumLink a {
color: unset;
text-decoration: unset;
}
.postMobile .postMessage {
padding: 10px;
font-size: var(--post-mobile-content-font-size);
@@ -416,6 +421,11 @@
text-transform: capitalize;
}
.pendingCid {
color: red !important;
font-weight: 700 !important;
}
@media (max-width: 640px) {
.postDesktop {
display: none;
src/components/post/post.tsx
+42 -13
View File
@@ -5,7 +5,7 @@ import { Role, useSubplebbit } 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 { isPostPageView } from '../../lib/utils/view-utils';
import { isPostPageView, isPendingPostView } from '../../lib/utils/view-utils';
import useCountLinksInReplies from '../../hooks/use-count-links-in-replies';
import useReplies from '../../hooks/use-replies';
import useWindowWidth from '../../hooks/use-window-width';
@@ -24,13 +24,16 @@ interface PostProps {
const PostDesktop = ({ post, roles, showAllReplies }: PostProps) => {
const { t } = useTranslation();
const { author, cid, content, link, linkHeight, linkWidth, locked, pinned, postCid, replyCount, shortCid, subplebbitAddress, timestamp, title } = post || {};
const { author, cid, content, link, linkHeight, linkWidth, locked, pinned, postCid, replyCount, shortCid, state, subplebbitAddress, timestamp, title } = post || {};
const { address, displayName, shortAddress } = author || {};
const authorRole = roles?.[address]?.role;
const { isDescription, isRules } = post || {}; // custom properties, not from api
const isInPostPage = isPostPageView(useLocation().pathname, useParams());
const params = useParams();
const location = useLocation();
const isInPostPage = isPostPageView(location.pathname, params);
const isInPendingPostPage = isPendingPostView(location.pathname, params);
const displayTitle = title && title.length > 75 ? title?.slice(0, 75) + '...' : title;
const displayContent = content && !isInPostPage && content.length > 1000 ? content?.slice(0, 1000) + '(...)' : content;
@@ -120,12 +123,21 @@ const PostDesktop = ({ post, roles, showAllReplies }: PostProps) => {
<span className={styles.postNum}>
{!(isDescription || isRules) && (
<span className={styles.postNumLink}>
<Link to={`/p/${subplebbitAddress}/${cid}`} className={styles.linkToPost} title={t('link_to_post')}>
<Link
to={`/p/${subplebbitAddress}/${cid}`}
className={styles.linkToPost}
title={t('link_to_post')}
onClick={(e) => isInPendingPostPage && e.preventDefault()}
>
c/
</Link>
<span className={styles.replyToPost} title={t('reply_to_post')}>
{shortCid}
</span>
{isInPendingPostPage ? (
<span className={styles.pendingCid}>{state === 'failed' ? 'Failed' : 'Pending'}</span>
) : (
<span className={styles.replyToPost} title={t('reply_to_post')}>
{shortCid}
</span>
)}
</span>
)}
{pinned && (
@@ -305,14 +317,18 @@ const ReplyDesktop = ({ reply, roles }: PostProps) => {
const PostMobile = ({ post, roles, showAllReplies }: PostProps) => {
const { t } = useTranslation();
const { author, cid, content, link, linkHeight, linkWidth, locked, pinned, replyCount, shortCid, 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 authorRole = roles?.[address]?.role;
const { isDescription, isRules } = post || {}; // custom properties, not from api
const params = useParams();
const location = useLocation();
const isInPostPage = isPostPageView(location.pathname, params);
const isInPendingPostPage = isPendingPostView(location.pathname, params);
const linkCount = useCountLinksInReplies(post);
const isInPostPage = isPostPageView(useLocation().pathname, useParams());
const displayTitle = title && title.length > 30 ? title?.slice(0, 30) + '(...)' : title;
const displayContent = content && !isInPostPage && content.length > 1000 ? content?.slice(0, 1000) : content;
@@ -360,10 +376,23 @@ const PostMobile = ({ post, roles, showAllReplies }: PostProps) => {
<span className={styles.dateTimePostNum}>
{getFormattedDate(timestamp)}{' '}
{!(isDescription || isRules) && (
<>
<span className={styles.linkToPost}>c/</span>
<span className={styles.replyToPost}>{shortCid}</span>
</>
<span className={styles.postNumLink}>
<Link
to={`/p/${subplebbitAddress}/${cid}`}
className={styles.linkToPost}
title={t('link_to_post')}
onClick={(e) => isInPendingPostPage && e.preventDefault()}
>
c/
</Link>
{isInPendingPostPage ? (
<span className={styles.pendingCid}>{state === 'failed' ? 'Failed' : 'Pending'}</span>
) : (
<span className={styles.replyToPost} title={t('reply_to_post')}>
{shortCid}
</span>
)}
</span>
)}
</span>
</div>