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

fix pending reply logic, add it to board

Browse Source
This commit is contained in:
Tom
2023-04-25 14:34:48 +02:00
parent 467a979c78
commit aa875b9c9a
4 changed files with 154 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/views/Board.jsx
+122 -34
View File
@@ -1,9 +1,10 @@
import React, { useState, useEffect, useRef, Fragment } from 'react';
import React, { Fragment, useEffect, useMemo, useRef, useState } from 'react';
import { Helmet } from 'react-helmet-async';
import InfiniteScroll from 'react-infinite-scroller';
import { Link, useNavigate, useParams } from 'react-router-dom';
import { Tooltip } from 'react-tooltip';
import { useFeed, usePublishComment } from '@plebbit/plebbit-react-hooks';
import { useAccount, useAccountComments, useFeed, usePublishComment } from '@plebbit/plebbit-react-hooks';
import { flattenCommentsPages } from '@plebbit/plebbit-react-hooks/dist/lib/utils'
import { debounce } from 'lodash';
import useGeneralStore from '../../hooks/stores/useGeneralStore';
import { Container, NavBar, Header, Break, PostFormLink, PostFormTable, PostForm, TopBar, BoardForm } from '../styled/Board.styled';
@@ -19,7 +20,6 @@ import getDate from '../../utils/getDate';
import handleAddressClick from '../../utils/handleAddressClick';
import handleQuoteClick from '../../utils/handleQuoteClick';
import handleStyleChange from '../../utils/handleStyleChange';
import renderComments from '../../utils/renderComments';
import useClickForm from '../../hooks/useClickForm';
import useError from '../../hooks/useError';
import packageJson from '../../../package.json'
@@ -62,6 +62,62 @@ const Board = () => {
const [errorMessage, setErrorMessage] = useState(null);
useError(errorMessage, [errorMessage]);
const account = useAccount();
const flattenedRepliesByThread = useMemo(() => {
return selectedFeed.reduce((acc, thread) => {
const replies = flattenCommentsPages(thread.replies);
acc[thread.cid] = replies;
return acc;
}, {});
}, [selectedFeed]);
const allParentCids = useMemo(() => {
const allRepliesCids = Object.values(flattenedRepliesByThread).flatMap(replies => replies.map(reply => reply.cid));
const allThreadCids = selectedFeed.map(thread => thread.cid);
return [...allThreadCids, ...allRepliesCids];
}, [flattenedRepliesByThread, selectedFeed]);
const filter = useMemo(() => ({
parentCids: allParentCids
}), [allParentCids]);
const { accountComments } = useAccountComments({ filter });
const filteredRepliesByThread = useMemo(() => {
const maxRepliesPerThread = 5;
const accountRepliesNotYetInCommentReplies = selectedFeed.reduce((acc, thread) => {
const replyCids = new Set(flattenedRepliesByThread[thread.cid].map(reply => reply.cid));
acc[thread.cid] = accountComments.filter(accountReply => !replyCids.has(accountReply.cid) && accountReply.parentCid === thread.cid);
return acc;
}, {});
return selectedFeed.reduce((acc, thread) => {
const combinedReplies = [...flattenedRepliesByThread[thread.cid], ...accountRepliesNotYetInCommentReplies[thread.cid]].sort((a, b) => a.timestamp - b.timestamp);
acc[thread.cid] = {
displayedReplies: combinedReplies.slice(0, maxRepliesPerThread),
omittedCount: Math.max(combinedReplies.length - maxRepliesPerThread, 0),
};
return acc;
}, {});
}, [flattenedRepliesByThread, accountComments, selectedFeed]);
const pendingReplyCounts = useMemo(() => {
return selectedFeed.reduce((acc, thread) => {
const replyCids = new Set(flattenedRepliesByThread[thread.cid].map(reply => reply.cid));
acc[thread.cid] = accountComments.filter(accountReply => !replyCids.has(accountReply.cid) && accountReply.parentCid === thread.cid).length;
return acc;
}, {});
}, [flattenedRepliesByThread, accountComments, selectedFeed]);
// temporary title from JSON, gets subplebbitAddress from URL
useEffect(() => {
setSelectedAddress(subplebbitAddress);
@@ -396,8 +452,8 @@ const Board = () => {
hasMore={hasMore}
>
{selectedFeed.map((thread) => {
const { replies: { pages: { topAll: { comments } = {} } = {} } = {} } = thread;
const { renderedComments, omittedCount } = renderComments(comments);
const { replies: { pages: { topAll: {} = {} } = {} } = {} } = thread;
const { displayedReplies, omittedCount } = filteredRepliesByThread[thread.cid] || {};
const commentMediaInfo = getCommentMediaInfo(thread);
const fallbackImgUrl = "/assets/filedeleted-res.gif";
return (
@@ -542,7 +598,7 @@ const Board = () => {
</span>
</span>) : null}
</span>
{renderedComments?.map((reply) => {
{displayedReplies?.map((reply) => {
const replyMediaInfo = getCommentMediaInfo(reply);
const fallbackImgUrl = "/assets/filedeleted-res.gif";
const shortParentCid = findShortParentCid(reply.parentCid, selectedFeed);
@@ -572,9 +628,21 @@ const Board = () => {
onClick={() => handleAddressClick(reply.author.shortAddress)}
>
(u/
<span key={`mob-ha-${reply.cid}`}>
{reply.author.shortAddress}
</span>
{reply.author?.shortAddress ?
(
<span key={`mob-ha-${reply.cid}`}>
{reply.author?.shortAddress}
</span>
) : (
<span key={`mob-ha-${reply.cid}`}
data-tooltip-id="tooltip"
data-tooltip-content={account?.author?.address}
data-tooltip-place="top"
>
{account?.author?.address.slice(0, 10) + "(...)"}
</span>
)
}
)
</span>
</span>
@@ -583,14 +651,18 @@ const Board = () => {
&nbsp;
<span key={`pn-${reply.cid}`} className="post-number post-number-desktop">
<Link to={() => {}} key={`pl1-${reply.cid}`} onClick={() => {}} title="Link to this post">c/</Link>
<Link to={`/p/${selectedAddress}/c/${thread.cid}`} id="reply-button" key={`pl2-${reply.cid}`}
onClick={(e) => {
if (e.button === 2) return;
e.preventDefault();
setIsReplyOpen(true);
setSelectedShortCid(reply.shortCid);
setSelectedParentCid(reply.cid);
}} title="Reply to this post">{reply.shortCid}</Link>
{reply.shortCid ? (
<Link to={`/p/${selectedAddress}/c/${thread.cid}`} id="reply-button" key={`pl2-${reply.cid}`}
onClick={(e) => {
if (e.button === 2) return;
e.preventDefault();
setIsReplyOpen(true);
setSelectedShortCid(reply.shortCid);
setSelectedParentCid(reply.cid);
}} title="Reply to this post">{reply.shortCid}</Link>
) : (
<span key="pending" style={{color: 'red', fontWeight: '700'}}>Pending</span>
)}
</span>&nbsp;
<button key={`pmb-${reply.cid}`} className="post-menu-button" onClick={() => {}} title="Post menu" style={{ all: 'unset', cursor: 'pointer' }} data-cmd="post-menu">▶</button>
<div id="backlink-id" className="backlink">
@@ -797,18 +869,18 @@ const Board = () => {
</div>
<div key={`mob-pl-${thread.cid}`} className="post-link-mobile">
<span key={`mob-info-${thread.cid}`} className="info-mobile">{
thread.replyCount === 0 ?
(thread.replyCount + pendingReplyCounts[thread.cid]) === 0 ?
("No replies")
: thread.replyCount === 1 ?
: (thread.replyCount + pendingReplyCounts[thread.cid]) === 1 ?
("1 reply")
: thread.replyCount > 1 ?
(thread.replyCount + " replies")
: (thread.replyCount + pendingReplyCounts[thread.cid]) > 1 ?
((thread.replyCount + pendingReplyCounts[thread.cid]) + " replies")
: null
}</span>
<Link key={`rl2-${thread.cid}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="button-mobile" >View Thread</Link>
</div>
</div>
{renderedComments?.map((reply) => {
{displayedReplies?.map((reply) => {
const replyMediaInfo = getCommentMediaInfo(reply);
const shortParentCid = findShortParentCid(reply.parentCid, selectedFeed);
return (
@@ -837,9 +909,21 @@ const Board = () => {
onClick={() => handleAddressClick(reply.author.shortAddress)}
>
(u/
<span key={`mob-ha-${reply.cid}`} className="highlight-address-mobile">
{reply.author.shortAddress}
</span>
{reply.author?.shortAddress ?
(
<span key={`mob-ha-${reply.cid}`} className="highlight-address-mobile">
{reply.author?.shortAddress}
</span>
) : (
<span key={`mob-ha-${reply.cid}`}
data-tooltip-id="tooltip"
data-tooltip-content={account?.author?.address}
data-tooltip-place="top"
>
{account?.author?.address.slice(0, 8) + "(...)"}
</span>
)
}
)&nbsp;
</span>
<br key={`mob-br-${reply.cid}`} />
@@ -847,15 +931,19 @@ const Board = () => {
<span key={`mob-dt-${reply.cid}`} className="date-time-mobile post-number-mobile">
{getDate(reply.timestamp)}&nbsp;
<Link to={() => {}} key={`mob-pl1-${reply.cid}`} onClick={() => {}} title="Link to this post">c/</Link>
<Link to={`/p/${selectedAddress}/c/${thread.cid}`} id="reply-button" key={`mob-pl2-${reply.cid}`}
onClick={(e) => {
if (e.button === 2) return;
e.preventDefault();
setIsReplyOpen(true);
setSelectedShortCid(reply.shortCid);
setSelectedParentCid(reply.cid);
}} title="Reply to this post">{reply.shortCid}
</Link>
{reply.shortCid ? (
<Link to={`/p/${selectedAddress}/c/${thread.cid}`} id="reply-button" key={`mob-pl2-${reply.cid}`}
onClick={(e) => {
if (e.button === 2) return;
e.preventDefault();
setIsReplyOpen(true);
setSelectedShortCid(reply.shortCid);
setSelectedParentCid(reply.cid);
}} title="Reply to this post">{reply.shortCid}
</Link>
) : (
<span key="pending" style={{color: 'red', fontWeight: '700'}}>Pending</span>
)}
</span>
</div>
{reply.link ? (
src/components/views/Thread.jsx
+32 -9
View File
@@ -1,8 +1,9 @@
import React, { useState, useEffect, useRef } from 'react';
import React, { useEffect, useMemo, useRef, useState } from 'react';
import { Helmet } from 'react-helmet-async';
import { Link, useNavigate, useParams } from 'react-router-dom';
import { Tooltip } from 'react-tooltip';
import { useAccount, useAccountComment, useComment, usePublishComment } from '@plebbit/plebbit-react-hooks';
import { useAccount, useAccountComments, useComment, usePublishComment } from '@plebbit/plebbit-react-hooks';
import { flattenCommentsPages } from '@plebbit/plebbit-react-hooks/dist/lib/utils'
import { debounce } from 'lodash';
import useGeneralStore from '../../hooks/stores/useGeneralStore';
import { Container, NavBar, Header, Break, PostForm, PostFormTable } from '../styled/Board.styled';
@@ -19,7 +20,6 @@ import getDate from '../../utils/getDate';
import handleAddressClick from '../../utils/handleAddressClick';
import handleQuoteClick from '../../utils/handleQuoteClick';
import handleStyleChange from '../../utils/handleStyleChange';
import renderThreadComments from '../../utils/renderThreadComments';
import useClickForm from '../../hooks/useClickForm';
import useError from '../../hooks/useError';
import packageJson from '../../../package.json'
@@ -35,7 +35,7 @@ const Thread = () => {
isSettingsOpen, setIsSettingsOpen,
setResolveCaptchaPromise,
setPendingComment,
pendingCommentIndex, setPendingCommentIndex,
setPendingCommentIndex,
selectedAddress, setSelectedAddress,
setSelectedParentCid,
setSelectedShortCid,
@@ -65,9 +65,32 @@ const Thread = () => {
const [errorMessage, setErrorMessage] = useState(null);
useError(errorMessage, [errorMessage]);
const pendingComment = useAccountComment({commentIndex: pendingCommentIndex});
const renderedComments = renderThreadComments(comment, pendingComment);
const flattenedReplies = useMemo(() =>
flattenCommentsPages(comment.replies), [comment.replies]
);
const filter = useMemo(() => ({
parentCids: [
selectedThread || 'n/a', ...flattenedReplies.map(reply => reply.cid)
]
}), [flattenedReplies]);
const { accountComments } = useAccountComments({filter});
const accountRepliesNotYetInCommentReplies = useMemo(() => {
const commentReplyCids = new Set(flattenedReplies.map(reply => reply.cid))
return accountComments.filter(accountReply => !commentReplyCids.has(accountReply.cid))
}, [flattenedReplies, accountComments]);
const sortedReplies = useMemo(() => [
...accountRepliesNotYetInCommentReplies, ...flattenedReplies
].sort((a, b) => a.timestamp - b.timestamp
), [accountRepliesNotYetInCommentReplies, flattenedReplies]);
// temporary title from JSON, gets subplebbitAddress and threadCid from URL
useEffect(() => {
@@ -522,7 +545,7 @@ const Thread = () => {
{comment.state === "fetching-ipns" ?
(null) :
(comment.replyCount === undefined ? (<PostLoader />) : (null))}
{renderedComments.map((reply, index) => {
{sortedReplies.map((reply, index) => {
const replyMediaInfo = getCommentMediaInfo(reply);
const fallbackImgUrl = "/assets/filedeleted-res.gif";
const shortParentCid = findShortParentCid(reply.parentCid, comment);
@@ -758,7 +781,7 @@ const Thread = () => {
</div>
</div>
{comment.replyCount === undefined ? <PostLoader /> : null}
{renderedComments.map((reply, index) => {
{sortedReplies.map((reply, index) => {
const replyMediaInfo = getCommentMediaInfo(reply);
const shortParentCid = findShortParentCid(reply.parentCid, comment);
return (
@@ -798,7 +821,7 @@ const Thread = () => {
data-tooltip-content={account?.author?.address}
data-tooltip-place="top"
>
{account?.author?.address.slice(0, 6) + "(...)"}
{account?.author?.address.slice(0, 8) + "(...)"}
</span>
)
}