Revert "refactor toasts"

This reverts commit db2e273ea6.

src/App.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } 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,8 +40,10 @@ export default function App() {
 
   const account = useAccount();
 
-  const setErrorMessage = useError();
+  const [errorMessage, setErrorMessage] = useState(null);
-  const setSuccessMessage = useSuccess();
+  const [successMessage, setSuccessMessage] = useState(null);
+  useError(errorMessage, [errorMessage]);
+  useSuccess(successMessage, [successMessage]);
 
 
   useEffect(() => {

src/components/modals/ModerationModal.jsx

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

src/components/modals/ReplyModal.jsx

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

src/components/views/All.jsx

@@ -46,7 +46,6 @@ const All = () => {
 
   const account = useAccount();
   const navigate = useNavigate();
-  const setErrorMessage = useError();
 
   const threadMenuRefs = useRef({});
   const replyMenuRefs = useRef({});
@@ -58,11 +57,13 @@ 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'});
@@ -88,7 +89,7 @@ const All = () => {
     if (errorString) {
       setErrorMessage(errorString)
     }
-  }, [errorString, setErrorMessage])
+  }, [errorString])
 
 
   useEffect(() => {

src/components/views/AllCatalog.jsx

@@ -14,6 +14,7 @@ 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
@@ -30,7 +31,6 @@ 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,6 +40,9 @@ 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,9 +69,6 @@ const Board = () => {
   const navigate = useNavigate();
   const { subplebbitAddress } = useParams();
 
-  const setErrorMessage = useError();
-  const setSuccessMessage = useSuccess();
-
   const nameRef = useRef();
   const subjectRef = useRef();
   const commentRef = useRef();
@@ -106,6 +103,11 @@ 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) { 
@@ -160,7 +162,7 @@ const Board = () => {
     if (errorString) {
       setErrorMessage(errorString);
     }
-  }, [errorString, setErrorMessage]);
+  }, [errorString]);
 
 
   const flattenedRepliesByThread = useMemo(() => {
@@ -353,17 +355,11 @@ const Board = () => {
   useEffect(() => {
     if (publishCommentOptions && triggerPublishComment) {
       (async () => {
-        try {
+        await publishComment();
-          await publishComment();
+        resetFields();
-          resetFields();
-        } catch (error) {
-          setErrorMessage(error);
-        } finally {
-          setTriggerPublishComment(false);
-        }
       })();
     }
-  }, [publishCommentOptions, triggerPublishComment, publishComment, resetFields, setErrorMessage]);
+  }, [publishCommentOptions, triggerPublishComment, publishComment, resetFields]);
   
   
   const getChallengeAnswersFromUser = async (challenges) => {
@@ -419,7 +415,7 @@ const Board = () => {
     if (error) {
       setErrorMessage(error);
     }
-  }, [error, setErrorMessage]);
+  }, [error]);
 
 
   const handleAuthorDeleteClick = (commentCid) => {
@@ -485,19 +481,11 @@ const Board = () => {
   useEffect(() => {
     if (publishCommentEditOptions && triggerPublishCommentEdit) {
       (async () => {
-        try {
+        await publishCommentEdit();
-          await publishCommentEdit();
+        setTriggerPublishCommentEdit(false);
-          setTriggerPublishCommentEdit(false);
-        } catch (error) {
-          setErrorMessage(error);
-        } finally {
-          setIsAuthorEdit(false);
-          setIsAuthorDelete(false);
-          setTriggerPublishCommentEdit(false);
-        }
       })();
     }
-  }, [publishCommentEditOptions, triggerPublishCommentEdit, publishCommentEdit, setIsAuthorEdit, setIsAuthorDelete, setTriggerPublishCommentEdit, setErrorMessage]);
+  }, [publishCommentEditOptions, triggerPublishCommentEdit, publishCommentEdit]);
   
   // desktop navbar board select functionality
   const handleClickTitle = (title, address) => {

src/components/views/Catalog.jsx

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

src/components/views/Pending.jsx

@@ -34,7 +34,6 @@ const Pending = () => {
 
   const account = useAccount();
   const comment = useAccountComment({commentIndex: index});
-  const setErrorMessage = useError();
 
   useEffect(() => {
     setSelectedAddress(comment?.subplebbitAddress);
@@ -56,10 +55,13 @@ const Pending = () => {
     if (errorString) {
       setErrorMessage(errorString);
     }
-  }, [errorString, setErrorMessage]);
+  }, [errorString]);
 
   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,8 +47,6 @@ const Subscriptions = () => {
   const account = useAccount();
   const navigate = useNavigate();
 
-  const setErrorMessage = useError();
-
   const threadMenuRefs = useRef({});
   const replyMenuRefs = useRef({});
   const backlinkRefs = useRef({});
@@ -64,6 +62,9 @@ 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'});
@@ -87,7 +88,7 @@ const Subscriptions = () => {
     if (errorString) {
       setErrorMessage(errorString)
     }
-  }, [errorString, setErrorMessage])
+  }, [errorString])
 
 
   useEffect(() => {

src/components/views/SubscriptionsCatalog.jsx

@@ -14,6 +14,7 @@ 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
@@ -30,8 +31,8 @@ const SubscriptionsCatalog = () => {
   } = useGeneralStore(state => state);
 
   const account = useAccount();
-  const navigate = useNavigate();
 
+  const navigate = useNavigate();
   const [prevScrollPos, setPrevScrollPos] = useState(0);
   const [visible, setVisible] = useState(true);
   const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: account?.subscriptions, sortType: 'new'});
@@ -40,6 +41,9 @@ 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,9 +68,6 @@ const Thread = () => {
   const navigate = useNavigate();
   const handleClickForm = useClickForm();
 
-  const setErrorMessage = useError();
-  const setSuccessMessage = useSuccess();
-
   const nameRef = useRef();
   const commentRef = useRef();
   const linkRef = useRef();
@@ -85,6 +82,8 @@ 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);
@@ -99,6 +98,9 @@ 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});
@@ -173,7 +175,7 @@ const Thread = () => {
     if (errorString) {
       setErrorMessage(errorString);
     }
-  }, [errorString, setErrorMessage]);
+  }, [errorString]);
 
 
   const flattenedReplies = useMemo(() => 
@@ -325,17 +327,12 @@ const Thread = () => {
   useEffect(() => {
     if (publishCommentOptions && triggerPublishComment) {
       (async () => {
-        try {
+        await publishComment();
-          await publishComment();
+        resetFields();
-          resetFields();
-        } catch (error) {
-          setErrorMessage(error);
-        } finally {
-          setTriggerPublishComment(false);
-        }
       })();
+      setTriggerPublishComment(false);
     }
-  }, [publishCommentOptions, triggerPublishComment, publishComment, resetFields, setErrorMessage]);
+  }, [publishCommentOptions, triggerPublishComment, publishComment, resetFields]);
 
 
   const getChallengeAnswersFromUser = async (challenges) => {
@@ -391,7 +388,7 @@ const Thread = () => {
     if (error) {
       setErrorMessage(error);
     }
-  }, [error, setErrorMessage]);
+  }, [error]);
 
 
   const handleAuthorDeleteClick = (commentCid) => {
@@ -457,19 +454,11 @@ const Thread = () => {
   useEffect(() => {
     if (publishCommentEditOptions && triggerPublishCommentEdit) {
       (async () => {
-        try {
+        await publishCommentEdit();
-          await publishCommentEdit();
+        setTriggerPublishCommentEdit(false);
-          setTriggerPublishCommentEdit(false);
-        } catch (error) {
-          setErrorMessage(error);
-        } finally {
-          setIsAuthorEdit(false);
-          setIsAuthorDelete(false);
-          setTriggerPublishCommentEdit(false);
-        }
       })();
     }
-  }, [publishCommentEditOptions, triggerPublishCommentEdit, publishCommentEdit, setIsAuthorEdit, setIsAuthorDelete, setTriggerPublishCommentEdit, setErrorMessage]);
+  }, [publishCommentEditOptions, triggerPublishCommentEdit, publishCommentEdit]);
 
 
   // mobile navbar board select functionality

src/hooks/useError.js

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

src/hooks/useSuccess.js

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