mirror of
https://github.com/bitsocialnet/5chan.git
synced 2026-08-03 07:41:04 +02:00
fix commentIndex for StateLabel and add timer
This commit is contained in:
@@ -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
|
||||
);
|
||||
|
||||
@@ -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.
|
||||
@@ -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.
|
||||
@@ -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.
|
||||
@@ -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.
|
||||
@@ -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}
|
||||
|
||||
@@ -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 ? (
|
||||
|
||||
Reference in New Issue
Block a user