refactor toasts

src/App.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import { Route, Routes, useLocation } from 'react-router-dom';
 import { Helmet } from 'react-helmet-async';
 import { useAccount, useBufferedFeeds } from '@plebbit/plebbit-react-hooks';
@@ -40,10 +40,8 @@ export default function App() {
 
   const account = useAccount();
 
-  const [errorMessage, setErrorMessage] = useState(null);
+  const setErrorMessage = useError();
-  const [successMessage, setSuccessMessage] = useState(null);
+  const setSuccessMessage = useSuccess();
-  useError(errorMessage, [errorMessage]);
-  useSuccess(successMessage, [successMessage]);
 
 
   useEffect(() => {

src/components/modals/ModerationModal.jsx

@@ -26,10 +26,8 @@ const ModerationModal = ({ isOpen, closeModal, deletePost }) => {
   const [reason, setReason] = useState('');
   const [triggerPublishCommentEdit, setTriggerPublishCommentEdit] = useState(false);
 
-  const [errorMessage, setErrorMessage] = useState(null);
+  const setErrorMessage = useError();
-  const [successMessage, setSuccessMessage] = useState(null);
+  const setSuccessMessage = useSuccess();
-  useError(errorMessage, [errorMessage]);
-  useSuccess(successMessage, [successMessage]);
 
 
   useEffect(() => {
@@ -126,7 +124,7 @@ const ModerationModal = ({ isOpen, closeModal, deletePost }) => {
     if (error) {
       setErrorMessage(error);
     }
-  }, [error]);
+  }, [error, setErrorMessage]);
 
   
   useEffect(() => {
@@ -140,11 +138,16 @@ const ModerationModal = ({ isOpen, closeModal, deletePost }) => {
   useEffect(() => {
     if (publishCommentEditOptions && triggerPublishCommentEdit) {
       (async () => {
+        try {
           await publishCommentEdit();
+        } catch (error) {
+          setErrorMessage(error);
+        } finally {
           setTriggerPublishCommentEdit(false);
+        }
       })();
     }
-  }, [publishCommentEditOptions, triggerPublishCommentEdit, publishCommentEdit]);
+  }, [publishCommentEditOptions, triggerPublishCommentEdit, publishCommentEdit, setErrorMessage]);
 
 
 

src/components/modals/ReplyModal.jsx

@@ -23,18 +23,17 @@ const ReplyModal = ({ isOpen, closeModal }) => {
 
   const account = useAccount();
 
+  const setErrorMessage = useError();
+  
   const nodeRef = useRef(null);
   const nameRef = useRef();
   const commentRef = useRef();
   const linkRef = useRef();
 
-  const [errorMessage, setErrorMessage] = useState(null);
   const [triggerPublishComment, setTriggerPublishComment] = useState(false);
   const [selectedText, setSelectedText] = useState('');
   const [isMobile, setIsMobile] = useState(window.innerWidth <= 480);
   
-  useError(errorMessage, [errorMessage]);
-
 
   useEffect(() => {
     const handleResize = () => setIsMobile(window.innerWidth <= 480);

src/components/modals/SettingsModal.jsx

@@ -20,10 +20,8 @@ const SettingsModal = ({ isOpen, closeModal }) => {
   const [expanded, setExpanded] = useState([]);
   const [accountJson, setAccountJson] = useState(null);
 
-  const [errorMessage, setErrorMessage] = useState(null);
+  const setErrorMessage = useError();
-  const [successMessage, setSuccessMessage] = useState(null);
+  const setSuccessMessage = useSuccess();
-  useError(errorMessage, [errorMessage]);
-  useSuccess(successMessage, [successMessage]);
 
   const account = useAccount();
   const { accounts } = useAccounts();
@@ -149,7 +147,7 @@ const SettingsModal = ({ isOpen, closeModal }) => {
       setSuccessMessage("Cache Cleared");
       localStorage.removeItem("cacheCleared");
     }
-  }, []);
+  }, [setSuccessMessage]);
 
 
   const handleExport = async () => {

src/components/views/All.jsx

@@ -46,6 +46,7 @@ const All = () => {
 
   const account = useAccount();
   const navigate = useNavigate();
+  const setErrorMessage = useError();
 
   const threadMenuRefs = useRef({});
   const replyMenuRefs = useRef({});
@@ -57,13 +58,11 @@ const All = () => {
   const [prevScrollPos, setPrevScrollPos] = useState(0);
   const [visible, setVisible] = useState(true);
   const [rotatedStates, setRotatedStates] = useState({});
-  const [errorMessage, setErrorMessage] = useState(null);
   const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
   const [outOfViewCid, setOutOfViewCid] = useState(null);
   const [outOfViewPosition, setOutOfViewPosition] = useState({top: 0, left: 0});
   const [postOnHoverHeight, setPostOnHoverHeight] = useState(0);
 
-  useError(errorMessage, [errorMessage]);
 
   const addresses = defaultSubplebbits.map(subplebbit => subplebbit.address);
   const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: addresses, sortType: 'new'});
@@ -89,7 +88,7 @@ const All = () => {
     if (errorString) {
       setErrorMessage(errorString)
     }
-  }, [errorString])
+  }, [errorString, setErrorMessage])
 
 
   useEffect(() => {

src/components/views/AllCatalog.jsx

@@ -14,7 +14,6 @@ import OfflineIndicator from '../OfflineIndicator';
 import SettingsModal from '../modals/SettingsModal';
 import getCommentMediaInfo from '../../utils/getCommentMediaInfo';
 import handleStyleChange from '../../utils/handleStyleChange';
-import useError from '../../hooks/useError';
 import useFeedStateString from '../../hooks/useFeedStateString';
 import packageJson from '../../../package.json'
 const {version} = packageJson
@@ -31,6 +30,7 @@ const AllCatalog = () => {
   } = useGeneralStore(state => state);
 
   const navigate = useNavigate();
+
   const [prevScrollPos, setPrevScrollPos] = useState(0);
   const [visible, setVisible] = useState(true);
   const addresses = defaultSubplebbits.map(subplebbit => subplebbit.address);
@@ -40,9 +40,6 @@ const AllCatalog = () => {
 
   const stateString = useFeedStateString(subplebbits);
 
-  const [errorMessage] = useState(null);
-  useError(errorMessage, [errorMessage]);
-
   // mobile navbar scroll effect
   useEffect(() => {
     const debouncedHandleScroll = debounce(() => {

src/components/views/Board.jsx

@@ -69,6 +69,9 @@ const Board = () => {
   const navigate = useNavigate();
   const { subplebbitAddress } = useParams();
   
+  const setErrorMessage = useError();
+  const setSuccessMessage = useSuccess();
+
   const nameRef = useRef();
   const subjectRef = useRef();
   const commentRef = useRef();
@@ -103,11 +106,6 @@ const Board = () => {
   const [outOfViewPosition, setOutOfViewPosition] = useState({top: 0, left: 0});
   const [postOnHoverHeight, setPostOnHoverHeight] = useState(0);
 
-  const [errorMessage, setErrorMessage] = useState(null);
-  const [successMessage, setSuccessMessage] = useState(null);
-  useError(errorMessage, [errorMessage]);
-  useSuccess(successMessage, [successMessage]);
-
 
   useEffect(() => {
     if (subplebbit.roles !== undefined) { 
@@ -162,7 +160,7 @@ const Board = () => {
     if (errorString) {
       setErrorMessage(errorString);
     }
-  }, [errorString]);
+  }, [errorString, setErrorMessage]);
 
 
   const flattenedRepliesByThread = useMemo(() => {
@@ -355,11 +353,17 @@ const Board = () => {
   useEffect(() => {
     if (publishCommentOptions && triggerPublishComment) {
       (async () => {
+        try {
           await publishComment();
           resetFields();
+        } catch (error) {
+          setErrorMessage(error);
+        } finally {
+          setTriggerPublishComment(false);
+        }
       })();
     }
-  }, [publishCommentOptions, triggerPublishComment, publishComment, resetFields]);
+  }, [publishCommentOptions, triggerPublishComment, publishComment, resetFields, setErrorMessage]);
   
   
   const getChallengeAnswersFromUser = async (challenges) => {
@@ -415,7 +419,7 @@ const Board = () => {
     if (error) {
       setErrorMessage(error);
     }
-  }, [error]);
+  }, [error, setErrorMessage]);
 
 
   const handleAuthorDeleteClick = (commentCid) => {
@@ -481,11 +485,19 @@ const Board = () => {
   useEffect(() => {
     if (publishCommentEditOptions && triggerPublishCommentEdit) {
       (async () => {
+        try {
           await publishCommentEdit();
           setTriggerPublishCommentEdit(false);
+        } catch (error) {
+          setErrorMessage(error);
+        } finally {
+          setIsAuthorEdit(false);
+          setIsAuthorDelete(false);
+          setTriggerPublishCommentEdit(false);
+        }
       })();
     }
-  }, [publishCommentEditOptions, triggerPublishCommentEdit, publishCommentEdit]);
+  }, [publishCommentEditOptions, triggerPublishCommentEdit, publishCommentEdit, setIsAuthorEdit, setIsAuthorDelete, setTriggerPublishCommentEdit, setErrorMessage]);
   
   // desktop navbar board select functionality
   const handleClickTitle = (title, address) => {

src/components/views/Catalog.jsx

@@ -60,10 +60,8 @@ const Catalog = () => {
 
   const navigate = useNavigate();
   
-  const [errorMessage, setErrorMessage] = useState(null);
+  const setErrorMessage = useError();
-  const [successMessage, setSuccessMessage] = useState(null);
+  const setSuccessMessage = useSuccess();
-  useError(errorMessage, [errorMessage]);
-  useSuccess(successMessage, [successMessage]);
   
   const [triggerPublishComment, setTriggerPublishComment] = useState(false);
   const [prevScrollPos, setPrevScrollPos] = useState(0);
@@ -145,7 +143,7 @@ const Catalog = () => {
     if (errorString) {
       setErrorMessage(errorString);
     }
-  }, [errorString]);
+  }, [errorString, setErrorMessage]);
 
   
   const { subscribed, subscribe, unsubscribe } = useSubscribe({subplebbitAddress: selectedAddress});
@@ -280,11 +278,17 @@ const Catalog = () => {
   useEffect(() => {
     if (publishCommentOptions && triggerPublishComment) {
       (async () => {
+        try {
           await publishComment();
           resetFields();
+        } catch (error) {
+          setErrorMessage(error);
+        } finally {
+          setTriggerPublishComment(false);
+        }
       })();
     }
-  }, [publishCommentOptions, triggerPublishComment, publishComment, resetFields]);
+  }, [publishCommentOptions, triggerPublishComment, publishComment, resetFields, setErrorMessage]);
   
   
   const getChallengeAnswersFromUser = async (challenges) => {
@@ -340,7 +344,7 @@ const Catalog = () => {
     if (error) {
       setErrorMessage(error);
     }
-  }, [error]);
+  }, [error, setErrorMessage]);
 
 
   const handleAuthorDeleteClick = (commentCid) => {

src/components/views/Pending.jsx

@@ -34,6 +34,7 @@ const Pending = () => {
 
   const account = useAccount();
   const comment = useAccountComment({commentIndex: index});
+  const setErrorMessage = useError();
 
   useEffect(() => {
     setSelectedAddress(comment?.subplebbitAddress);
@@ -55,13 +56,10 @@ const Pending = () => {
     if (errorString) {
       setErrorMessage(errorString);
     }
-  }, [errorString]);
+  }, [errorString, setErrorMessage]);
 
   const [visible] = useState(true);
 
-  const [errorMessage, setErrorMessage] = useState(null);
-  useError(errorMessage, [errorMessage]);
-
   const navigate = useNavigate();
   const [commentMediaInfo, setCommentMediaInfo] = useState(null);
   const fallbackImgUrl = "assets/filedeleted-res.gif";

src/components/views/Subscriptions.jsx

@@ -47,6 +47,8 @@ const Subscriptions = () => {
   const account = useAccount();
   const navigate = useNavigate();
   
+  const setErrorMessage = useError();
+
   const threadMenuRefs = useRef({});
   const replyMenuRefs = useRef({});
   const backlinkRefs = useRef({});
@@ -62,9 +64,6 @@ const Subscriptions = () => {
   const [outOfViewPosition, setOutOfViewPosition] = useState({top: 0, left: 0});
   const [postOnHoverHeight, setPostOnHoverHeight] = useState(0);
 
-  const [errorMessage, setErrorMessage] = useState(null);
-  useError(errorMessage, [errorMessage]);
-
   const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: account?.subscriptions, sortType: 'new'});
   const [selectedFeed, setSelectedFeed] = useState(feed.sort((a, b) => b.timestamp - a.timestamp));
   const {subplebbits} = useSubplebbits({subplebbitAddresses: account?.subscriptions, sortType: 'new'});
@@ -88,7 +87,7 @@ const Subscriptions = () => {
     if (errorString) {
       setErrorMessage(errorString)
     }
-  }, [errorString])
+  }, [errorString, setErrorMessage])
 
 
   useEffect(() => {

src/components/views/SubscriptionsCatalog.jsx

@@ -14,7 +14,6 @@ import OfflineIndicator from '../OfflineIndicator';
 import SettingsModal from '../modals/SettingsModal';
 import getCommentMediaInfo from '../../utils/getCommentMediaInfo';
 import handleStyleChange from '../../utils/handleStyleChange';
-import useError from '../../hooks/useError';
 import useFeedStateString from '../../hooks/useFeedStateString';
 import packageJson from '../../../package.json'
 const {version} = packageJson
@@ -31,8 +30,8 @@ const SubscriptionsCatalog = () => {
   } = useGeneralStore(state => state);
 
   const account = useAccount();
-
   const navigate = useNavigate();
+
   const [prevScrollPos, setPrevScrollPos] = useState(0);
   const [visible, setVisible] = useState(true);
   const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: account?.subscriptions, sortType: 'new'});
@@ -41,9 +40,6 @@ const SubscriptionsCatalog = () => {
 
   const stateString = useFeedStateString(subplebbits);
 
-  const [errorMessage] = useState(null);
-  useError(errorMessage, [errorMessage]);
-
   // mobile navbar scroll effect
   useEffect(() => {
     const debouncedHandleScroll = debounce(() => {

src/components/views/Thread.jsx

@@ -68,6 +68,9 @@ const Thread = () => {
   const navigate = useNavigate();
   const handleClickForm = useClickForm();
 
+  const setErrorMessage = useError();
+  const setSuccessMessage = useSuccess();
+
   const nameRef = useRef();
   const commentRef = useRef();
   const linkRef = useRef();
@@ -82,8 +85,6 @@ const Thread = () => {
   const [triggerPublishComment, setTriggerPublishComment] = useState(false);
   const [triggerPublishCommentEdit, setTriggerPublishCommentEdit] = useState(false);
   const [deletePost, setDeletePost] = useState(false);
-  const [errorMessage, setErrorMessage] = useState(null);
-  const [successMessage, setSuccessMessage] = useState(null);
   const [isReplyOpen, setIsReplyOpen] = useState(false);
   const [isEditModalOpen, setIsEditModalOpen] = useState(false);
   const [originalCommentContent, setOriginalCommentContent] = useState(null);
@@ -98,9 +99,6 @@ const Thread = () => {
   const [outOfViewPosition, setOutOfViewPosition] = useState({top: 0, left: 0});
   const [postOnHoverHeight, setPostOnHoverHeight] = useState(0);
 
-  useError(errorMessage, [errorMessage]);
-  useSuccess(successMessage, [successMessage]);
-
   const comment = useComment({commentCid: selectedThread});
   const { subplebbitAddress, threadCid } = useParams();
   const subplebbit = useSubplebbit({subplebbitAddress: comment.subplebbitAddress});
@@ -175,7 +173,7 @@ const Thread = () => {
     if (errorString) {
       setErrorMessage(errorString);
     }
-  }, [errorString]);
+  }, [errorString, setErrorMessage]);
 
 
   const flattenedReplies = useMemo(() => 
@@ -327,12 +325,17 @@ const Thread = () => {
   useEffect(() => {
     if (publishCommentOptions && triggerPublishComment) {
       (async () => {
+        try {
           await publishComment();
           resetFields();
-      })();
+        } catch (error) {
+          setErrorMessage(error);
+        } finally {
           setTriggerPublishComment(false);
         }
-  }, [publishCommentOptions, triggerPublishComment, publishComment, resetFields]);
+      })();
+    }
+  }, [publishCommentOptions, triggerPublishComment, publishComment, resetFields, setErrorMessage]);
 
 
   const getChallengeAnswersFromUser = async (challenges) => {
@@ -388,7 +391,7 @@ const Thread = () => {
     if (error) {
       setErrorMessage(error);
     }
-  }, [error]);
+  }, [error, setErrorMessage]);
 
 
   const handleAuthorDeleteClick = (commentCid) => {
@@ -454,11 +457,19 @@ const Thread = () => {
   useEffect(() => {
     if (publishCommentEditOptions && triggerPublishCommentEdit) {
       (async () => {
+        try {
           await publishCommentEdit();
           setTriggerPublishCommentEdit(false);
+        } catch (error) {
+          setErrorMessage(error);
+        } finally {
+          setIsAuthorEdit(false);
+          setIsAuthorDelete(false);
+          setTriggerPublishCommentEdit(false);
+        }
       })();
     }
-  }, [publishCommentEditOptions, triggerPublishCommentEdit, publishCommentEdit]);
+  }, [publishCommentEditOptions, triggerPublishCommentEdit, publishCommentEdit, setIsAuthorEdit, setIsAuthorDelete, setTriggerPublishCommentEdit, setErrorMessage]);
 
 
   // mobile navbar board select functionality

src/hooks/useError.js

@@ -1,11 +1,14 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { toast } from "react-toastify";
 
-const useError = (message) => {
+const useError = () => {
+  const [errorMessage, setErrorMessage] = useState('');
+  const [renderCount, setRenderCount] = useState(0);
+
   useEffect(() => {
-    if (message && message.length > 0) {
+    if (errorMessage && errorMessage.length > 0) {
       const showErrorToast = () => {
-        const toastId = toast.error(message.toString(), {
+        const toastId = toast.error(errorMessage.toString(), {
           position: "top-right",
           autoClose: false,
           hideProgressBar: true,
@@ -27,7 +30,14 @@ const useError = (message) => {
         clearTimeout(timeoutId);
       };
     }
-  }, [message]);
+  }, [errorMessage, renderCount]);
+
+  const setNewErrorMessage = (message) => {
+    setErrorMessage(message);
+    setRenderCount(prevCount => prevCount + 1);
+  };
+
+  return setNewErrorMessage;
 };
 
 export default useError;

src/hooks/useSuccess.js

@@ -1,11 +1,14 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { toast } from "react-toastify";
 
-const useSuccess = (message) => {
+const useSuccess = () => {
+  const [successMessage, setSuccessMessage] = useState('');
+  const [renderCount, setRenderCount] = useState(0);
+  
   useEffect(() => {
-    if (message && message.length > 0) {
+    if (successMessage && successMessage.length > 0) {
       const showSuccessToast = () => {
-        const toastId = toast.success(message.toString(), {
+        const toastId = toast.success(successMessage.toString(), {
           position: "top-right",
           autoClose: 3000,
           hideProgressBar: false,
@@ -27,7 +30,14 @@ const useSuccess = (message) => {
         clearTimeout(timeoutId);
       };
     }
-  }, [message]);
+  }, [successMessage, renderCount]);
+
+  const setNewSuccessMessage = (message) => {
+    setSuccessMessage(message);
+    setRenderCount(prevCount => prevCount + 1);
+  };
+
+  return setNewSuccessMessage;
 };
 
 export default useSuccess;