From 81bc4ffb5566726831c9c0768a15b0298467f1c9 Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Wed, 7 Jun 2023 22:08:09 +0200 Subject: [PATCH 1/7] Fix state label --- src/components/StateLabel.jsx | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/src/components/StateLabel.jsx b/src/components/StateLabel.jsx index c366d100..079e28a0 100644 --- a/src/components/StateLabel.jsx +++ b/src/components/StateLabel.jsx @@ -9,12 +9,18 @@ const StateLabel = ({ commentCid, className }) => { return ( comment.state === "succeeded" ? null : ( - - <> -
- {stateString || comment.state.charAt(0).toUpperCase() + comment.state.slice(1)} - - + comment.state === "initializing" ? null : ( + + <> +
+ ( + + {stateString} + + ) + + + ) ) ) }; From 4d99491133c8ecc2363f6e6222d27b8eaf5a88a1 Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Thu, 8 Jun 2023 12:06:43 +0200 Subject: [PATCH 2/7] Update StateLabel.jsx --- src/components/StateLabel.jsx | 33 ++++++++++++++++----------------- 1 file changed, 16 insertions(+), 17 deletions(-) diff --git a/src/components/StateLabel.jsx b/src/components/StateLabel.jsx index 079e28a0..86a73fb9 100644 --- a/src/components/StateLabel.jsx +++ b/src/components/StateLabel.jsx @@ -1,28 +1,27 @@ import React from "react"; -import { useComment } from "@plebbit/plebbit-react-hooks"; +import { useAccountComment } from "@plebbit/plebbit-react-hooks"; import useStateString from "../hooks/useStateString"; +import useGeneralStore from "../hooks/stores/useGeneralStore"; const StateLabel = ({ commentCid, className }) => { - const comment = useComment({commentCid}); + const { pendingCommentIndex } = useGeneralStore(state => state); + + const comment = useAccountComment({commentIndex: pendingCommentIndex}); const stateString = useStateString(comment); return ( - comment.state === "succeeded" ? null : ( - comment.state === "initializing" ? null : ( - - <> -
- ( - - {stateString} - - ) - - - ) - ) - ) + !commentCid && stateString !== "Succeeded" ? ( + +
+ ( + + {stateString} + + ) + + ) : null + ); }; export default StateLabel; \ No newline at end of file From 919861215622ac4009b58ff6bd7c334307e9a823 Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Thu, 8 Jun 2023 12:28:33 +0200 Subject: [PATCH 3/7] add failed state --- src/components/StateLabel.jsx | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/components/StateLabel.jsx b/src/components/StateLabel.jsx index 86a73fb9..9a34357f 100644 --- a/src/components/StateLabel.jsx +++ b/src/components/StateLabel.jsx @@ -12,6 +12,16 @@ const StateLabel = ({ commentCid, className }) => { return ( !commentCid && stateString !== "Succeeded" ? ( + comment.state === "failed" ? ( + +
+ ( + + Failed + + ) + + ) : (
( @@ -20,6 +30,7 @@ const StateLabel = ({ commentCid, className }) => { ) + ) ) : null ); }; From 90693c6f75fae87436413319d39be827135582fb Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Thu, 8 Jun 2023 21:11:28 +0200 Subject: [PATCH 4/7] fix toasts --- src/components/modals/ModerationModal.jsx | 9 +++++---- src/components/views/All.jsx | 8 ++++---- src/components/views/Board.jsx | 12 ++++++------ src/components/views/Catalog.jsx | 12 ++++++------ src/components/views/Pending.jsx | 6 +++--- src/components/views/Subscriptions.jsx | 8 ++++---- src/components/views/Thread.jsx | 13 +++++++------ src/hooks/useError.js | 2 +- src/hooks/useSuccess.js | 2 +- 9 files changed, 37 insertions(+), 35 deletions(-) diff --git a/src/components/modals/ModerationModal.jsx b/src/components/modals/ModerationModal.jsx index 62cc0f42..5c1d5f23 100755 --- a/src/components/modals/ModerationModal.jsx +++ b/src/components/modals/ModerationModal.jsx @@ -26,7 +26,7 @@ const ModerationModal = ({ isOpen, closeModal, deletePost }) => { const [reason, setReason] = useState(''); const [triggerPublishCommentEdit, setTriggerPublishCommentEdit] = useState(false); - const setErrorMessage = useError(); + const [errorMessage, setErrorMessage] = useError(); const setSuccessMessage = useSuccess(); @@ -120,11 +120,12 @@ const ModerationModal = ({ isOpen, closeModal, deletePost }) => { const {error, publishCommentEdit } = usePublishCommentEdit(publishCommentEditOptions); + useEffect(() => { - if (error) { - setErrorMessage(error); + if (error && error !== errorMessage) { + setErrorMessage(error); } - }, [error, setErrorMessage]); + }, [error, setErrorMessage, errorMessage]); useEffect(() => { diff --git a/src/components/views/All.jsx b/src/components/views/All.jsx index d4667c86..d64365d5 100755 --- a/src/components/views/All.jsx +++ b/src/components/views/All.jsx @@ -46,7 +46,7 @@ const All = () => { const account = useAccount(); const navigate = useNavigate(); - const setErrorMessage = useError(); + const [errorMessage, setErrorMessage] = useError(); const threadMenuRefs = useRef({}); const replyMenuRefs = useRef({}); @@ -85,10 +85,10 @@ const All = () => { }, [subplebbits]) useEffect(() => { - if (errorString) { - setErrorMessage(errorString) + if (errorString && errorString !== errorMessage) { + setErrorMessage(errorString); } - }, [errorString, setErrorMessage]) + }, [errorString, setErrorMessage, errorMessage]); useEffect(() => { diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx index 45bc6f84..0daa01d7 100755 --- a/src/components/views/Board.jsx +++ b/src/components/views/Board.jsx @@ -69,7 +69,7 @@ const Board = () => { const navigate = useNavigate(); const { subplebbitAddress } = useParams(); - const setErrorMessage = useError(); + const [errorMessage, setErrorMessage] = useError(); const setSuccessMessage = useSuccess(); const nameRef = useRef(); @@ -157,10 +157,10 @@ const Board = () => { useEffect(() => { - if (errorString) { + if (errorString && errorString !== errorMessage) { setErrorMessage(errorString); } - }, [errorString, setErrorMessage]); + }, [errorString, setErrorMessage, errorMessage]); const flattenedRepliesByThread = useMemo(() => { @@ -411,10 +411,10 @@ const Board = () => { const {error, publishCommentEdit } = usePublishCommentEdit(publishCommentEditOptions); useEffect(() => { - if (error) { - setErrorMessage(error); + if (error && error !== errorMessage) { + setErrorMessage(error); } - }, [error, setErrorMessage]); + }, [error, setErrorMessage, errorMessage]); const handleAuthorDeleteClick = (commentCid) => { diff --git a/src/components/views/Catalog.jsx b/src/components/views/Catalog.jsx index 0b7be8d8..50ca385e 100755 --- a/src/components/views/Catalog.jsx +++ b/src/components/views/Catalog.jsx @@ -60,7 +60,7 @@ const Catalog = () => { const navigate = useNavigate(); - const setErrorMessage = useError(); + const [errorMessage, setErrorMessage] = useError(); const setSuccessMessage = useSuccess(); const [triggerPublishComment, setTriggerPublishComment] = useState(false); @@ -140,10 +140,10 @@ const Catalog = () => { useEffect(() => { - if (errorString) { + if (errorString && errorString !== errorMessage) { setErrorMessage(errorString); } - }, [errorString, setErrorMessage]); + }, [errorString, setErrorMessage, errorMessage]); const { subscribed, subscribe, unsubscribe } = useSubscribe({subplebbitAddress: selectedAddress}); @@ -336,10 +336,10 @@ const Catalog = () => { const {error, publishCommentEdit } = usePublishCommentEdit(publishCommentEditOptions); useEffect(() => { - if (error) { - setErrorMessage(error); + if (error && error !== errorMessage) { + setErrorMessage(error); } - }, [error, setErrorMessage]); + }, [error, setErrorMessage, errorMessage]); const handleAuthorDeleteClick = (commentCid) => { diff --git a/src/components/views/Pending.jsx b/src/components/views/Pending.jsx index 6777c196..a5557db5 100755 --- a/src/components/views/Pending.jsx +++ b/src/components/views/Pending.jsx @@ -34,7 +34,7 @@ const Pending = () => { const account = useAccount(); const comment = useAccountComment({commentIndex: index}); - const setErrorMessage = useError(); + const [errorMessage, setErrorMessage] = useError(); useEffect(() => { setSelectedAddress(comment?.subplebbitAddress); @@ -53,10 +53,10 @@ const Pending = () => { }, [comment?.state, comment?.error, index]) useEffect(() => { - if (errorString) { + if (errorString && errorString !== errorMessage) { setErrorMessage(errorString); } - }, [errorString, setErrorMessage]); + }, [errorString, setErrorMessage, errorMessage]); const [visible] = useState(true); diff --git a/src/components/views/Subscriptions.jsx b/src/components/views/Subscriptions.jsx index cbeff154..4c813753 100755 --- a/src/components/views/Subscriptions.jsx +++ b/src/components/views/Subscriptions.jsx @@ -47,7 +47,7 @@ const Subscriptions = () => { const account = useAccount(); const navigate = useNavigate(); - const setErrorMessage = useError(); + const [errorMessage, setErrorMessage] = useError(); const threadMenuRefs = useRef({}); const replyMenuRefs = useRef({}); @@ -84,10 +84,10 @@ const Subscriptions = () => { }, [subplebbits]) useEffect(() => { - if (errorString) { - setErrorMessage(errorString) + if (errorString && errorString !== errorMessage) { + setErrorMessage(errorString); } - }, [errorString, setErrorMessage]) + }, [errorString, setErrorMessage, errorMessage]); useEffect(() => { diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx index 9db177d5..4fc3533c 100755 --- a/src/components/views/Thread.jsx +++ b/src/components/views/Thread.jsx @@ -68,7 +68,7 @@ const Thread = () => { const navigate = useNavigate(); const handleClickForm = useClickForm(); - const setErrorMessage = useError(); + const [errorMessage, setErrorMessage] = useError(); const setSuccessMessage = useSuccess(); const nameRef = useRef(); @@ -171,10 +171,10 @@ const Thread = () => { useEffect(() => { - if (errorString) { + if (errorString && errorString !== errorMessage) { setErrorMessage(errorString); } - }, [errorString, setErrorMessage]); + }, [errorString, setErrorMessage, errorMessage]); const flattenedReplies = useMemo(() => @@ -384,10 +384,11 @@ const Thread = () => { const {error, publishCommentEdit } = usePublishCommentEdit(publishCommentEditOptions); useEffect(() => { - if (error) { - setErrorMessage(error); + if (error && error !== errorMessage) { + setErrorMessage(error); } - }, [error, setErrorMessage]); + }, [error, setErrorMessage, errorMessage]); + const handleAuthorDeleteClick = (commentCid) => { diff --git a/src/hooks/useError.js b/src/hooks/useError.js index aa90c163..7b27ef47 100755 --- a/src/hooks/useError.js +++ b/src/hooks/useError.js @@ -37,7 +37,7 @@ const useError = () => { setRenderCount(prevCount => prevCount + 1); }; - return setNewErrorMessage; + return [errorMessage, setNewErrorMessage]; }; export default useError; \ No newline at end of file diff --git a/src/hooks/useSuccess.js b/src/hooks/useSuccess.js index 23b465bd..9382506c 100755 --- a/src/hooks/useSuccess.js +++ b/src/hooks/useSuccess.js @@ -37,7 +37,7 @@ const useSuccess = () => { setRenderCount(prevCount => prevCount + 1); }; - return setNewSuccessMessage; + return [successMessage, setNewSuccessMessage]; }; export default useSuccess; \ No newline at end of file From 604ebac472b51d1d95bef7f2b126075b7edeb221 Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Thu, 8 Jun 2023 21:41:27 +0200 Subject: [PATCH 5/7] Update EditLabel.jsx --- src/components/EditLabel.jsx | 32 ++++++++++++++++++++------------ 1 file changed, 20 insertions(+), 12 deletions(-) diff --git a/src/components/EditLabel.jsx b/src/components/EditLabel.jsx index af872279..ef1159e8 100644 --- a/src/components/EditLabel.jsx +++ b/src/components/EditLabel.jsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useState } from "react"; import { useComment, useEditedComment } from "@plebbit/plebbit-react-hooks"; import { Link } from "react-router-dom"; import OriginalCommentModal from "./modals/OriginalCommentModal"; @@ -6,33 +6,41 @@ import getDate from "../utils/getDate"; const EditLabel = ({ commentCid, className }) => { - const [isOriginalCommentModalOpen, setIsOriginalCommentModalOpen] = React.useState(false); + const [isOriginalCommentModalOpen, setIsOriginalCommentModalOpen] = useState(false); const comment = useComment({commentCid}); const timestamp = getDate(comment.edit?.timestamp); const {state: editedCommentState, editedComment} = useEditedComment({comment}); - + return ( <> setIsOriginalCommentModalOpen(false)} comment={comment}/> - {editedComment && ( + {editedComment || comment.edit ? ( <>
- {editedCommentState === 'succeeded' && ( + {comment.removed ? ( <> - (Edited at {timestamp}, setIsOriginalCommentModalOpen(true) - }>show original) + (This post has been removed) - )} - {editedCommentState === 'pending' && ("(Pending Edit)")} - {editedCommentState === 'failed' && ("(Failed Edit)")} + ) : ( + <> + {comment.edit ? ( + <> + (Edited at {timestamp}, setIsOriginalCommentModalOpen(true) + }>show original) + + ) : null} + {editedCommentState === 'pending' && ("(Pending edit)")} + {editedCommentState === 'failed' && ("(Failed edit)")} + + )} - )} + ) : null} ); }; From 394c8c5825d0b38511563ffd4c68b73243bafc54 Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Thu, 8 Jun 2023 22:23:58 +0200 Subject: [PATCH 6/7] fix commentIndex for StateLabel and add timer --- src/components/StateLabel.jsx | 43 +++++++++++++++++++-------------- src/components/views/Board.jsx | 16 ++++++------ src/components/views/Thread.jsx | 8 +++--- 3 files changed, 37 insertions(+), 30 deletions(-) diff --git a/src/components/StateLabel.jsx b/src/components/StateLabel.jsx index 9a34357f..6bab4f64 100644 --- a/src/components/StateLabel.jsx +++ b/src/components/StateLabel.jsx @@ -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)) ? (
( @@ -20,16 +27,16 @@ const StateLabel = ({ commentCid, className }) => { Failed ) - + ) : ( - -
- ( - - {stateString} - - ) - + +
+ ( + + {stateString} + + ) + ) ) : null ); diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx index 0daa01d7..f6e07103 100755 --- a/src/components/views/Board.jsx +++ b/src/components/views/Board.jsx @@ -1019,7 +1019,7 @@ const Board = () => { commentCid={thread.cid} className="ttl"/>
Post too long.  @@ -1034,7 +1034,7 @@ const Board = () => { commentCid={thread.cid} className="ttl"/> ) : null} @@ -1337,7 +1337,7 @@ const Board = () => { commentCid={reply.cid} className="ttl"/>
Comment too long.  @@ -1377,7 +1377,7 @@ const Board = () => { commentCid={reply.cid} className="ttl"/> ) : null} @@ -1520,7 +1520,7 @@ const Board = () => { commentCid={thread.cid} className="ttl"/>
Post too long.  @@ -1534,7 +1534,7 @@ const Board = () => { commentCid={thread.cid} className="ttl"/> ) : null} @@ -1682,7 +1682,7 @@ const Board = () => { commentCid={reply.cid} className="ttl"/>
Comment too long.  @@ -1705,7 +1705,7 @@ const Board = () => { commentCid={reply.cid} className="ttl"/> ) : null} diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx index 4fc3533c..de9de0bf 100755 --- a/src/components/views/Thread.jsx +++ b/src/components/views/Thread.jsx @@ -972,7 +972,7 @@ const Thread = () => { commentCid={comment.cid} className="ttl"/> @@ -1251,7 +1251,7 @@ const Thread = () => { commentCid={reply.cid} className="ttl"/> @@ -1374,7 +1374,7 @@ const Thread = () => { commentCid={comment.cid} className="ttl"/> ) : null} @@ -1499,7 +1499,7 @@ const Thread = () => { commentCid={reply.cid} className="ttl"/> {reply.replyCount > 0 ? ( From 122e5a6262f1223d4a7f3b098cd1a0aa2a89a9d9 Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Thu, 8 Jun 2023 22:27:34 +0200 Subject: [PATCH 7/7] Update StateLabel.jsx --- src/components/StateLabel.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/StateLabel.jsx b/src/components/StateLabel.jsx index 6bab4f64..57243607 100644 --- a/src/components/StateLabel.jsx +++ b/src/components/StateLabel.jsx @@ -9,7 +9,7 @@ const StateLabel = ({ commentIndex, className }) => { const [isLoading, setIsLoading] = useState(true); useEffect(() => { - const timer = setTimeout(() => setIsLoading(false), 5000); + const timer = setTimeout(() => setIsLoading(false), 2000); return () => clearTimeout(timer); }, []);