fix react-toastify mounting error

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});
+      setErrorMessage('challenge failed', {reason: challengeVerification.reason, errors: challengeVerification.errors});
-      onError("Error: You seem to have mistyped the CAPTCHA. Please try again.");
+      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'));
       };
     });
   };

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});
+      setErrorMessage('challenge failed', {reason: challengeVerification.reason, errors: challengeVerification.errors});
-      onError("Error: You seem to have mistyped the CAPTCHA. Please try again.");
+      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'));
       };
     });
   };

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});
+      setErrorMessage('challenge failed', {reason: challengeVerification.reason, errors: challengeVerification.errors});
-      onError("Error: You seem to have mistyped the CAPTCHA. Please try again.");
+      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'));
       };
     });
   };

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;

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;

src/utils/onError.js

@@ -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;

src/utils/onSuccess.js

@@ -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;