diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx index 26b6d20a..3da950a1 100644 --- a/src/components/views/Board.jsx +++ b/src/components/views/Board.jsx @@ -15,10 +15,10 @@ import SettingsModal from '../SettingsModal'; import getCommentMediaInfo from '../../utils/getCommentMediaInfo'; import getDate from '../../utils/getDate'; import handleStyleChange from '../../utils/handleStyleChange'; -import onError from '../../utils/onError'; -import onSuccess from '../../utils/onSuccess'; import renderComments from '../../utils/renderComments'; import useClickForm from '../../hooks/useClickForm'; +import useError from '../../hooks/useError'; +import useSuccess from '../../hooks/useSuccess'; const Board = () => { @@ -49,6 +49,11 @@ const Board = () => { const [selectedFeed, setSelectedFeed] = useState(feed); const { subplebbitAddress } = useParams(); + const [errorMessage, setErrorMessage] = useState(null); + const [successMessage, setSuccessMessage] = useState(null); + useError(errorMessage, [errorMessage]); + useSuccess(successMessage, [successMessage]); + // useEffect(() => { // console.log(selectedFeed[3]); @@ -93,11 +98,13 @@ const Board = () => { const onChallengeVerification = (challengeVerification) => { if (challengeVerification.challengeSuccess === true) { - onSuccess('challenge success', {publishedCid: challengeVerification.publication.cid}) + setSuccessMessage('challenge success', {publishedCid: challengeVerification.publication.cid}); + setSelectedThread(challengeVerification.publication.cid); + navigate(`/${selectedAddress}/thread/${challengeVerification.publication.cid}`); } else if (challengeVerification.challengeSuccess === false) { - onError('challenge failed', {reason: challengeVerification.reason, errors: challengeVerification.errors}); - onError("Error: You seem to have mistyped the CAPTCHA. Please try again."); + setErrorMessage('challenge failed', {reason: challengeVerification.reason, errors: challengeVerification.errors}); + setErrorMessage("Error: You seem to have mistyped the CAPTCHA. Please try again."); } } @@ -109,7 +116,7 @@ const Board = () => { challengeAnswers = await getChallengeAnswersFromUser(challenges) } catch (error) { - onError(error); + setErrorMessage(error); } if (challengeAnswers) { await comment.publishChallengeAnswers(challengeAnswers) @@ -125,7 +132,9 @@ const Board = () => { subplebbitAddress: selectedAddress, onChallenge, onChallengeVerification, - onError + onError: (error) => { + setErrorMessage(error); + } }; @@ -166,7 +175,7 @@ const Board = () => { }; challengeImg.onerror = () => { - reject(onError('Could not load challenge image')); + reject(setErrorMessage('Could not load challenge image')); }; }); }; diff --git a/src/components/views/Catalog.jsx b/src/components/views/Catalog.jsx index efbab50c..983ebe08 100644 --- a/src/components/views/Catalog.jsx +++ b/src/components/views/Catalog.jsx @@ -14,9 +14,9 @@ import Post from '../Post'; import SettingsModal from '../SettingsModal'; import getCommentMediaInfo from '../../utils/getCommentMediaInfo'; import handleStyleChange from '../../utils/handleStyleChange'; -import onError from '../../utils/onError'; -import onSuccess from '../../utils/onSuccess'; import useClickForm from '../../hooks/useClickForm'; +import useError from '../../hooks/useError'; +import useSuccess from '../../hooks/useSuccess'; const Catalog = () => { @@ -45,6 +45,11 @@ const Catalog = () => { const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: [`${selectedAddress}`], sortType: 'new'}); const { subplebbitAddress } = useParams(); + const [errorMessage, setErrorMessage] = useState(null); + const [successMessage, setSuccessMessage] = useState(null); + useError(errorMessage, [errorMessage]); + useSuccess(successMessage, [successMessage]); + // temporary title from JSON, gets subplebbitAddress from URL useEffect(() => { setSelectedAddress(subplebbitAddress); @@ -77,11 +82,11 @@ const Catalog = () => { const onChallengeVerification = (challengeVerification) => { if (challengeVerification.challengeSuccess === true) { - onSuccess('challenge success', {publishedCid: challengeVerification.publication.cid}) + setSuccessMessage('challenge success', {publishedCid: challengeVerification.publication.cid}) } else if (challengeVerification.challengeSuccess === false) { - onError('challenge failed', {reason: challengeVerification.reason, errors: challengeVerification.errors}); - onError("Error: You seem to have mistyped the CAPTCHA. Please try again."); + setErrorMessage('challenge failed', {reason: challengeVerification.reason, errors: challengeVerification.errors}); + setErrorMessage("Error: You seem to have mistyped the CAPTCHA. Please try again."); } }; @@ -93,7 +98,7 @@ const Catalog = () => { challengeAnswers = await getChallengeAnswersFromUser(challenges) } catch (error) { - onError(error); + setErrorMessage(error); } if (challengeAnswers) { await comment.publishChallengeAnswers(challengeAnswers) @@ -109,7 +114,6 @@ const Catalog = () => { subplebbitAddress: selectedAddress, onChallenge, onChallengeVerification, - onError }; @@ -150,7 +154,7 @@ const Catalog = () => { }; challengeImg.onerror = () => { - reject(onError('Could not load challenge image')); + reject(setErrorMessage('Could not load challenge image')); }; }); }; diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx index 03e208bb..b7adee8f 100644 --- a/src/components/views/Thread.jsx +++ b/src/components/views/Thread.jsx @@ -15,10 +15,10 @@ import SettingsModal from '../SettingsModal'; import getCommentMediaInfo from '../../utils/getCommentMediaInfo'; import getDate from '../../utils/getDate'; import handleStyleChange from '../../utils/handleStyleChange'; -import onError from '../../utils/onError'; -import onSuccess from '../../utils/onSuccess'; import renderThreadComments from '../../utils/renderThreadComments'; import useClickForm from '../../hooks/useClickForm'; +import useError from '../../hooks/useError'; +import useSuccess from '../../hooks/useSuccess'; const Thread = () => { @@ -38,7 +38,6 @@ const Thread = () => { const commentRef = useRef(); const linkRef = useRef(); - const [commentContent, setCommentContent] = useState(''); const [isCaptchaOpen, setIsCaptchaOpen] = useState(false); const [isReplyOpen, setIsReplyOpen] = useState(false); const [captchaImage, setCaptchaImage] = useState(''); @@ -52,6 +51,11 @@ const Thread = () => { const commentMediaInfo = getCommentMediaInfo(comment); const fallbackImgUrl = "/assets/filedeleted-res.gif"; + const [errorMessage, setErrorMessage] = useState(null); + const [successMessage, setSuccessMessage] = useState(null); + useError(errorMessage, [errorMessage]); + useSuccess(successMessage, [successMessage]); + // useEffect(() => { // console.log(comment); @@ -83,11 +87,11 @@ const Thread = () => { const onChallengeVerification = (challengeVerification) => { if (challengeVerification.challengeSuccess === true) { - onSuccess('challenge success', {publishedCid: challengeVerification.publication.cid}) + setSuccessMessage('challenge success', {publishedCid: challengeVerification.publication.cid}) } else if (challengeVerification.challengeSuccess === false) { - onError('challenge failed', {reason: challengeVerification.reason, errors: challengeVerification.errors}); - onError("Error: You seem to have mistyped the CAPTCHA. Please try again."); + setErrorMessage('challenge failed', {reason: challengeVerification.reason, errors: challengeVerification.errors}); + setErrorMessage("Error: You seem to have mistyped the CAPTCHA. Please try again."); } }; @@ -99,7 +103,7 @@ const Thread = () => { challengeAnswers = await getChallengeAnswersFromUser(challenges) } catch (error) { - onError(error); + setErrorMessage(error); } if (challengeAnswers) { await comment.publishChallengeAnswers(challengeAnswers) @@ -115,7 +119,6 @@ const Thread = () => { subplebbitAddress: selectedAddress, onChallenge, onChallengeVerification, - onError }; @@ -155,7 +158,7 @@ const Thread = () => { }; challengeImg.onerror = () => { - reject(onError('Could not load challenge image')); + reject(setErrorMessage('Could not load challenge image')); }; }); }; diff --git a/src/hooks/useError.js b/src/hooks/useError.js new file mode 100644 index 00000000..1264d072 --- /dev/null +++ b/src/hooks/useError.js @@ -0,0 +1,25 @@ +import { useEffect } from "react"; +import { toast } from "react-toastify"; + +const useError = (message, deps) => { + useEffect(() => { + if (message) { + const toastId = toast.error(message.toString(), { + position: "top-right", + autoClose: false, + hideProgressBar: false, + closeOnClick: false, + pauseOnHover: true, + draggable: false, + progress: undefined, + theme: "dark", + }); + + return () => { + toast.dismiss(toastId); + }; + } + }, deps); +}; + +export default useError; \ No newline at end of file diff --git a/src/hooks/useSuccess.js b/src/hooks/useSuccess.js new file mode 100644 index 00000000..8e87a53c --- /dev/null +++ b/src/hooks/useSuccess.js @@ -0,0 +1,25 @@ +import { useEffect } from "react"; +import { toast } from "react-toastify"; + +const useSuccess = (message, deps) => { + useEffect(() => { + if (message) { + const toastId = toast.success(message.toString(), { + position: "top-right", + autoClose: 3000, + hideProgressBar: false, + closeOnClick: false, + pauseOnHover: false, + draggable: false, + progress: undefined, + theme: "dark", + }); + + return () => { + toast.dismiss(toastId); + }; + } + }, deps); +}; + +export default useSuccess; \ No newline at end of file diff --git a/src/utils/onError.js b/src/utils/onError.js deleted file mode 100644 index edb10830..00000000 --- a/src/utils/onError.js +++ /dev/null @@ -1,16 +0,0 @@ -import { toast } from 'react-toastify'; - -const onError = (error) => { - return toast.error(error.toString(), { - position: "top-right", - autoClose: false, - hideProgressBar: false, - closeOnClick: false, - pauseOnHover: true, - draggable: false, - progress: undefined, - theme: "dark", - }); -}; - -export default onError; \ No newline at end of file diff --git a/src/utils/onSuccess.js b/src/utils/onSuccess.js deleted file mode 100644 index 55c16744..00000000 --- a/src/utils/onSuccess.js +++ /dev/null @@ -1,16 +0,0 @@ -import { toast } from 'react-toastify'; - -const onSuccess = (success) => { - return toast.success(success.toString(), { - position: "top-right", - autoClose: 3000, - hideProgressBar: false, - closeOnClick: false, - pauseOnHover: false, - draggable: false, - progress: undefined, - theme: "dark", - }); -}; - -export default onSuccess; \ No newline at end of file