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 commentIndex for StateLabel and add timer

Browse Source
This commit is contained in:
plebeius.eth
2023-06-08 22:23:58 +02:00
parent 604ebac472
commit 394c8c5825
3 changed files with 37 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/StateLabel.jsx
+25 -18
View File
@@ -1,18 +1,25 @@
import React from "react"; import React, { useState, useEffect } from "react";
import { useAccountComment } from "@plebbit/plebbit-react-hooks"; import { useAccountComment } from "@plebbit/plebbit-react-hooks";
import useStateString from "../hooks/useStateString"; import useStateString from "../hooks/useStateString";
import useGeneralStore from "../hooks/stores/useGeneralStore";
const StateLabel = ({ commentIndex, className }) => {
const StateLabel = ({ commentCid, className }) => { const comment = useAccountComment({commentIndex: commentIndex});
const { pendingCommentIndex } = useGeneralStore(state => state);
const comment = useAccountComment({commentIndex: pendingCommentIndex});
const stateString = useStateString(comment); const stateString = useStateString(comment);
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
const timer = setTimeout(() => setIsLoading(false), 5000);
return () => clearTimeout(timer);
}, []);
if (commentIndex === undefined) return null;
console.log(commentIndex, stateString, comment);
return ( return (
!commentCid && stateString !== "Succeeded" ? ( commentIndex && stateString !== "Succeeded" ? (
comment.state === "failed" ? ( (comment.state === "failed" || (stateString === undefined && !isLoading)) ? (
<span className="ttl"> <span className="ttl">
<br /> <br />
( (
@@ -20,16 +27,16 @@ const StateLabel = ({ commentCid, className }) => {
Failed Failed
</span> </span>
) )
</span> </span>
) : ( ) : (
<span className="ttl"> <span className="ttl">
<br /> <br />
( (
<span className={className}> <span className={className}>
{stateString} {stateString}
</span> </span>
) )
</span> </span>
) )
) : null ) : null
); );
src/components/views/Board.jsx
+8 -8
View File
@@ -1019,7 +1019,7 @@ const Board = () => {
commentCid={thread.cid} commentCid={thread.cid}
className="ttl"/> className="ttl"/>
<StateLabel key={`state-label-thread-${index}`} <StateLabel key={`state-label-thread-${index}`}
commentCid={thread.cid} commentIndex={thread.index}
className="ttl ellipsis"/> className="ttl ellipsis"/>
<br key={`ttl-s-br2${index}`} /> <br key={`ttl-s-br2${index}`} />
Post too long.&nbsp; Post too long.&nbsp;
@@ -1034,7 +1034,7 @@ const Board = () => {
commentCid={thread.cid} commentCid={thread.cid}
className="ttl"/> className="ttl"/>
<StateLabel key={`state-label-thread-${index}`} <StateLabel key={`state-label-thread-${index}`}
commentCid={thread.cid} commentIndex={thread.index}
className="ttl ellipsis"/> className="ttl ellipsis"/>
</blockquote>) </blockquote>)
: null} : null}
@@ -1337,7 +1337,7 @@ const Board = () => {
commentCid={reply.cid} commentCid={reply.cid}
className="ttl"/> className="ttl"/>
<StateLabel key={`state-label-reply-${index}`} <StateLabel key={`state-label-reply-${index}`}
commentCid={reply.cid} commentIndex={reply.index}
className="ttl ellipsis"/> className="ttl ellipsis"/>
<br key={`ttl-s-br2${index}`} /> <br key={`ttl-s-br2${index}`} />
Comment too long.&nbsp; Comment too long.&nbsp;
@@ -1377,7 +1377,7 @@ const Board = () => {
commentCid={reply.cid} commentCid={reply.cid}
className="ttl"/> className="ttl"/>
<StateLabel key={`state-label-reply-${index}`} <StateLabel key={`state-label-reply-${index}`}
commentCid={reply.cid} commentIndex={reply.index}
className="ttl ellipsis"/> className="ttl ellipsis"/>
</blockquote>) </blockquote>)
: null} : null}
@@ -1520,7 +1520,7 @@ const Board = () => {
commentCid={thread.cid} commentCid={thread.cid}
className="ttl"/> className="ttl"/>
<StateLabel key={`state-label-thread-mob-${index}`} <StateLabel key={`state-label-thread-mob-${index}`}
commentCid={thread.cid} commentIndex={thread.index}
className="ttl ellipsis"/> className="ttl ellipsis"/>
<br key={`mob-ttl-s-br2${thread.cid}`} /> <br key={`mob-ttl-s-br2${thread.cid}`} />
Post too long.&nbsp; Post too long.&nbsp;
@@ -1534,7 +1534,7 @@ const Board = () => {
commentCid={thread.cid} commentCid={thread.cid}
className="ttl"/> className="ttl"/>
<StateLabel key={`state-label-thread-mob-${index}`} <StateLabel key={`state-label-thread-mob-${index}`}
commentCid={thread.cid} commentIndex={thread.index}
className="ttl ellipsis"/> className="ttl ellipsis"/>
</blockquote>) </blockquote>)
: null} : null}
@@ -1682,7 +1682,7 @@ const Board = () => {
commentCid={reply.cid} commentCid={reply.cid}
className="ttl"/> className="ttl"/>
<StateLabel key={`state-label-reply-mob-${index}`} <StateLabel key={`state-label-reply-mob-${index}`}
commentCid={reply.cid} commentIndex={reply.index}
className="ttl ellipsis"/> className="ttl ellipsis"/>
<br key={`mob-ttl-s-br2${reply.cid}`} /> <br key={`mob-ttl-s-br2${reply.cid}`} />
Comment too long.&nbsp; Comment too long.&nbsp;
@@ -1705,7 +1705,7 @@ const Board = () => {
commentCid={reply.cid} commentCid={reply.cid}
className="ttl"/> className="ttl"/>
<StateLabel key={`state-label-reply-mob-${index}`} <StateLabel key={`state-label-reply-mob-${index}`}
commentCid={reply.cid} commentIndex={reply.index}
className="ttl ellipsis"/> className="ttl ellipsis"/>
</blockquote>) </blockquote>)
: null} : null}
src/components/views/Thread.jsx
+4 -4
View File
@@ -972,7 +972,7 @@ const Thread = () => {
commentCid={comment.cid} commentCid={comment.cid}
className="ttl"/> className="ttl"/>
<StateLabel key={`state-label-thread-${index}`} <StateLabel key={`state-label-thread-${index}`}
commentCid={comment.cid} commentIndex={comment.index}
className="ttl ellipsis"/> className="ttl ellipsis"/>
</blockquote> </blockquote>
</div> </div>
@@ -1251,7 +1251,7 @@ const Thread = () => {
commentCid={reply.cid} commentCid={reply.cid}
className="ttl"/> className="ttl"/>
<StateLabel key={`state-label-reply-${index}`} <StateLabel key={`state-label-reply-${index}`}
commentCid={reply.cid} commentIndex={reply.index}
className="ttl ellipsis"/> className="ttl ellipsis"/>
</blockquote> </blockquote>
</div> </div>
@@ -1374,7 +1374,7 @@ const Thread = () => {
commentCid={comment.cid} commentCid={comment.cid}
className="ttl"/> className="ttl"/>
<StateLabel key={`state-label-thread-mob-${index}`} <StateLabel key={`state-label-thread-mob-${index}`}
commentCid={comment.cid} commentIndex={comment.index}
className="ttl ellipsis"/> className="ttl ellipsis"/>
</> </>
) : null} ) : null}
@@ -1499,7 +1499,7 @@ const Thread = () => {
commentCid={reply.cid} commentCid={reply.cid}
className="ttl"/> className="ttl"/>
<StateLabel key={`state-label-reply-mob-${index}`} <StateLabel key={`state-label-reply-mob-${index}`}
commentCid={reply.cid} commentIndex={reply.index}
className="ttl ellipsis"/> className="ttl ellipsis"/>
</blockquote> </blockquote>
{reply.replyCount > 0 ? ( {reply.replyCount > 0 ? (