diff --git a/src/components/ReplyModal.jsx b/src/components/ReplyModal.jsx index 4fbbb70d..6777ff4c 100644 --- a/src/components/ReplyModal.jsx +++ b/src/components/ReplyModal.jsx @@ -1,4 +1,4 @@ -import React, { useRef, useState, useEffect } from 'react'; +import React, { useCallback, useEffect, useRef, useState } from 'react'; import { useLocation } from 'react-router-dom'; import { usePublishComment } from '@plebbit/plebbit-react-hooks'; import { StyledModal } from './styled/ReplyModal.styled'; @@ -30,6 +30,8 @@ const ReplyModal = ({ isOpen, closeModal }) => { const [errorMessage, setErrorMessage] = useState(null); useError(errorMessage, [errorMessage]); + + const [triggerPublishComment, setTriggerPublishComment] = useState(false); const location = useLocation(); @@ -86,7 +88,7 @@ const ReplyModal = ({ isOpen, closeModal }) => { }, [index, location, setPendingCommentIndex]); - const resetFields = () => { + const resetFields = useCallback(() => { if (nameRef.current) { nameRef.current.value = ''; } @@ -96,7 +98,7 @@ const ReplyModal = ({ isOpen, closeModal }) => { if (linkRef.current) { linkRef.current.value = ''; } - }; + }, []); const handleSubmit = async (event) => { @@ -111,18 +113,21 @@ const ReplyModal = ({ isOpen, closeModal }) => { link: linkRef.current.value || undefined, parentCid: selectedParentCid, })); + + setTriggerPublishComment(true); }; useEffect(() => { - if (publishCommentOptions.content) { + if (publishCommentOptions.content && triggerPublishComment) { (async () => { await publishComment(); resetFields(); closeModal(); })(); + setTriggerPublishComment(false); } - }, [publishCommentOptions]); + }, [publishCommentOptions, triggerPublishComment, publishComment, resetFields, closeModal]); const getChallengeAnswersFromUser = async (challenges) => { diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx index e2db73a4..9a5f80b8 100644 --- a/src/components/views/Board.jsx +++ b/src/components/views/Board.jsx @@ -1,4 +1,4 @@ -import React, { Fragment, useEffect, useMemo, useRef, useState } from 'react'; +import React, { Fragment, useCallback, 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'; @@ -64,6 +64,9 @@ const Board = () => { const account = useAccount(); + const [triggerPublishComment, setTriggerPublishComment] = useState(false); + + const flattenedRepliesByThread = useMemo(() => { return selectedFeed.reduce((acc, thread) => { const replies = flattenCommentsPages(thread.replies); @@ -209,7 +212,7 @@ const Board = () => { }, [index, navigate, setPendingCommentIndex]); - const resetFields = () => { + const resetFields = useCallback(() => { if (nameRef.current) { nameRef.current.value = ''; } @@ -222,7 +225,7 @@ const Board = () => { if (linkRef.current) { linkRef.current.value = ''; } - }; + }, []); const handleSubmit = async (event) => { @@ -237,17 +240,19 @@ const Board = () => { content: commentRef.current.value || undefined, link: linkRef.current.value || undefined, })); + + setTriggerPublishComment(true); }; useEffect(() => { - if (publishCommentOptions.content) { + if (publishCommentOptions.content && triggerPublishComment) { (async () => { await publishComment(); resetFields(); })(); } - }, [publishCommentOptions]); + }, [publishCommentOptions, triggerPublishComment, publishComment, resetFields]); const getChallengeAnswersFromUser = async (challenges) => { diff --git a/src/components/views/Catalog.jsx b/src/components/views/Catalog.jsx index 848891fe..dc9ce1f6 100644 --- a/src/components/views/Catalog.jsx +++ b/src/components/views/Catalog.jsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect, useRef, Fragment } from 'react'; +import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react'; import { Helmet } from 'react-helmet-async'; import InfiniteScroll from 'react-infinite-scroller'; import { Link, useNavigate, useParams } from 'react-router-dom'; @@ -51,6 +51,8 @@ const Catalog = () => { const [errorMessage, setErrorMessage] = useState(null); useError(errorMessage, [errorMessage]); + const [triggerPublishComment, setTriggerPublishComment] = useState(false); + // temporary title from JSON, gets subplebbitAddress from URL useEffect(() => { setSelectedAddress(subplebbitAddress); @@ -136,7 +138,7 @@ const Catalog = () => { }, [index, navigate, setPendingCommentIndex]); - const resetFields = () => { + const resetFields = useCallback(() => { if (nameRef.current) { nameRef.current.value = ''; } @@ -149,7 +151,7 @@ const Catalog = () => { if (linkRef.current) { linkRef.current.value = ''; } - }; + }, []); const handleSubmit = async (event) => { @@ -164,17 +166,19 @@ const Catalog = () => { content: commentRef.current.value || undefined, link: linkRef.current.value || undefined, })); + + setTriggerPublishComment(true); }; useEffect(() => { - if (publishCommentOptions.content) { + if (publishCommentOptions.content && triggerPublishComment) { (async () => { await publishComment(); resetFields(); })(); } - }, [publishCommentOptions]); + }, [publishCommentOptions, triggerPublishComment, publishComment, resetFields]); const getChallengeAnswersFromUser = async (challenges) => { diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx index 93b5df88..2b6c893d 100644 --- a/src/components/views/Thread.jsx +++ b/src/components/views/Thread.jsx @@ -1,4 +1,4 @@ -import React, { useEffect, useMemo, useRef, useState } from 'react'; +import React, { useCallback, 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'; @@ -65,6 +65,8 @@ const Thread = () => { const [errorMessage, setErrorMessage] = useState(null); useError(errorMessage, [errorMessage]); + const [triggerPublishComment, setTriggerPublishComment] = useState(false); + const flattenedReplies = useMemo(() => flattenCommentsPages(comment.replies), [comment.replies] @@ -170,7 +172,7 @@ const Thread = () => { }, [index, setPendingCommentIndex]); - const resetFields = () => { + const resetFields = useCallback(() => { if (nameRef.current) { nameRef.current.value = ''; } @@ -180,7 +182,7 @@ const Thread = () => { if (linkRef.current) { linkRef.current.value = ''; } - }; + }, []); const handleSubmit = async (event) => { @@ -195,17 +197,19 @@ const Thread = () => { link: linkRef.current.value || undefined, parentCid: selectedThread, })); + + setTriggerPublishComment(true); }; useEffect(() => { - if (publishCommentOptions.content) { + if (publishCommentOptions.content && triggerPublishComment) { (async () => { await publishComment(); resetFields(); })(); } - }, [publishCommentOptions]); + }, [publishCommentOptions, triggerPublishComment, publishComment, resetFields]); const getChallengeAnswersFromUser = async (challenges) => {