fix commentIndex for StateLabel and add timer

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
+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 useStateString from "../hooks/useStateString";
import useGeneralStore from "../hooks/stores/useGeneralStore";
const StateLabel = ({ commentCid, className }) => {
const { pendingCommentIndex } = useGeneralStore(state => state);
const comment = useAccountComment({commentIndex: pendingCommentIndex});
const StateLabel = ({ commentIndex, className }) => {
const comment = useAccountComment({commentIndex: commentIndex});
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 (
!commentCid && stateString !== "Succeeded" ? (
comment.state === "failed" ? (
commentIndex && stateString !== "Succeeded" ? (
(comment.state === "failed" || (stateString === undefined && !isLoading)) ? (
<span className="ttl">
<br />
(
@@ -20,16 +27,16 @@ const StateLabel = ({ commentCid, className }) => {
Failed
</span>
)
</span>
</span>
) : (
<span className="ttl">
<br />
(
<span className={className}>
{stateString}
</span>
)
</span>
<span className="ttl">
<br />
(
<span className={className}>
{stateString}
</span>
)
</span>
)
) : null
);
+8 -8
View File
@@ -1019,7 +1019,7 @@ const Board = () => {
commentCid={thread.cid}
className="ttl"/>
<StateLabel key={`state-label-thread-${index}`}
commentCid={thread.cid}
commentIndex={thread.index}
className="ttl ellipsis"/>
<br key={`ttl-s-br2${index}`} />
Post too long.&nbsp;
@@ -1034,7 +1034,7 @@ const Board = () => {
commentCid={thread.cid}
className="ttl"/>
<StateLabel key={`state-label-thread-${index}`}
commentCid={thread.cid}
commentIndex={thread.index}
className="ttl ellipsis"/>
</blockquote>)
: null}
@@ -1337,7 +1337,7 @@ const Board = () => {
commentCid={reply.cid}
className="ttl"/>
<StateLabel key={`state-label-reply-${index}`}
commentCid={reply.cid}
commentIndex={reply.index}
className="ttl ellipsis"/>
<br key={`ttl-s-br2${index}`} />
Comment too long.&nbsp;
@@ -1377,7 +1377,7 @@ const Board = () => {
commentCid={reply.cid}
className="ttl"/>
<StateLabel key={`state-label-reply-${index}`}
commentCid={reply.cid}
commentIndex={reply.index}
className="ttl ellipsis"/>
</blockquote>)
: null}
@@ -1520,7 +1520,7 @@ const Board = () => {
commentCid={thread.cid}
className="ttl"/>
<StateLabel key={`state-label-thread-mob-${index}`}
commentCid={thread.cid}
commentIndex={thread.index}
className="ttl ellipsis"/>
<br key={`mob-ttl-s-br2${thread.cid}`} />
Post too long.&nbsp;
@@ -1534,7 +1534,7 @@ const Board = () => {
commentCid={thread.cid}
className="ttl"/>
<StateLabel key={`state-label-thread-mob-${index}`}
commentCid={thread.cid}
commentIndex={thread.index}
className="ttl ellipsis"/>
</blockquote>)
: null}
@@ -1682,7 +1682,7 @@ const Board = () => {
commentCid={reply.cid}
className="ttl"/>
<StateLabel key={`state-label-reply-mob-${index}`}
commentCid={reply.cid}
commentIndex={reply.index}
className="ttl ellipsis"/>
<br key={`mob-ttl-s-br2${reply.cid}`} />
Comment too long.&nbsp;
@@ -1705,7 +1705,7 @@ const Board = () => {
commentCid={reply.cid}
className="ttl"/>
<StateLabel key={`state-label-reply-mob-${index}`}
commentCid={reply.cid}
commentIndex={reply.index}
className="ttl ellipsis"/>
</blockquote>)
: null}
+4 -4
View File
@@ -972,7 +972,7 @@ const Thread = () => {
commentCid={comment.cid}
className="ttl"/>
<StateLabel key={`state-label-thread-${index}`}
commentCid={comment.cid}
commentIndex={comment.index}
className="ttl ellipsis"/>
</blockquote>
</div>
@@ -1251,7 +1251,7 @@ const Thread = () => {
commentCid={reply.cid}
className="ttl"/>
<StateLabel key={`state-label-reply-${index}`}
commentCid={reply.cid}
commentIndex={reply.index}
className="ttl ellipsis"/>
</blockquote>
</div>
@@ -1374,7 +1374,7 @@ const Thread = () => {
commentCid={comment.cid}
className="ttl"/>
<StateLabel key={`state-label-thread-mob-${index}`}
commentCid={comment.cid}
commentIndex={comment.index}
className="ttl ellipsis"/>
</>
) : null}
@@ -1499,7 +1499,7 @@ const Thread = () => {
commentCid={reply.cid}
className="ttl"/>
<StateLabel key={`state-label-reply-mob-${index}`}
commentCid={reply.cid}
commentIndex={reply.index}
className="ttl ellipsis"/>
</blockquote>
{reply.replyCount > 0 ? (