diff --git a/src/App.js b/src/App.js old mode 100644 new mode 100755 index c596dd4f..91612c47 --- a/src/App.js +++ b/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 [successMessage, setSuccessMessage] = useState(null); - useError(errorMessage, [errorMessage]); - useSuccess(successMessage, [successMessage]); + const setErrorMessage = useError(); + const setSuccessMessage = useSuccess(); useEffect(() => { diff --git a/src/components/modals/ModerationModal.jsx b/src/components/modals/ModerationModal.jsx old mode 100644 new mode 100755 index 24cdac0b..62cc0f42 --- a/src/components/modals/ModerationModal.jsx +++ b/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 [successMessage, setSuccessMessage] = useState(null); - useError(errorMessage, [errorMessage]); - useSuccess(successMessage, [successMessage]); + const setErrorMessage = useError(); + const setSuccessMessage = useSuccess(); useEffect(() => { @@ -126,7 +124,7 @@ const ModerationModal = ({ isOpen, closeModal, deletePost }) => { if (error) { setErrorMessage(error); } - }, [error]); + }, [error, setErrorMessage]); useEffect(() => { diff --git a/src/components/modals/ReplyModal.jsx b/src/components/modals/ReplyModal.jsx old mode 100644 new mode 100755 index 8ccbdb09..225de91b --- a/src/components/modals/ReplyModal.jsx +++ b/src/components/modals/ReplyModal.jsx @@ -22,19 +22,18 @@ const ReplyModal = ({ isOpen, closeModal }) => { } = useGeneralStore(state => state); 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); diff --git a/src/components/modals/SettingsModal.jsx b/src/components/modals/SettingsModal.jsx old mode 100644 new mode 100755 index db6bc189..a34e015c --- a/src/components/modals/SettingsModal.jsx +++ b/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 [successMessage, setSuccessMessage] = useState(null); - useError(errorMessage, [errorMessage]); - useSuccess(successMessage, [successMessage]); + const setErrorMessage = useError(); + const setSuccessMessage = useSuccess(); const account = useAccount(); const { accounts } = useAccounts(); @@ -149,7 +147,7 @@ const SettingsModal = ({ isOpen, closeModal }) => { setSuccessMessage("Cache Cleared"); localStorage.removeItem("cacheCleared"); } - }, []); + }, [setSuccessMessage]); const handleExport = async () => { diff --git a/src/components/views/All.jsx b/src/components/views/All.jsx old mode 100644 new mode 100755 index 9b2263b9..d4667c86 --- a/src/components/views/All.jsx +++ b/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(() => { diff --git a/src/components/views/AllCatalog.jsx b/src/components/views/AllCatalog.jsx old mode 100644 new mode 100755 index d7b076d5..45f19728 --- a/src/components/views/AllCatalog.jsx +++ b/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(() => { diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx old mode 100644 new mode 100755 index 5cbf4dd7..45bc6f84 --- a/src/components/views/Board.jsx +++ b/src/components/views/Board.jsx @@ -68,6 +68,9 @@ const Board = () => { const account = useAccount(); const navigate = useNavigate(); const { subplebbitAddress } = useParams(); + + const setErrorMessage = useError(); + const setSuccessMessage = useSuccess(); const nameRef = useRef(); const subjectRef = 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(() => { @@ -358,6 +356,7 @@ const Board = () => { await publishComment(); resetFields(); })(); + setTriggerPublishComment(false); } }, [publishCommentOptions, triggerPublishComment, publishComment, resetFields]); @@ -415,7 +414,7 @@ const Board = () => { if (error) { setErrorMessage(error); } - }, [error]); + }, [error, setErrorMessage]); const handleAuthorDeleteClick = (commentCid) => { diff --git a/src/components/views/Catalog.jsx b/src/components/views/Catalog.jsx old mode 100644 new mode 100755 index bf17a3c3..0b7be8d8 --- a/src/components/views/Catalog.jsx +++ b/src/components/views/Catalog.jsx @@ -60,10 +60,8 @@ const Catalog = () => { const navigate = useNavigate(); - const [errorMessage, setErrorMessage] = useState(null); - const [successMessage, setSuccessMessage] = useState(null); - useError(errorMessage, [errorMessage]); - useSuccess(successMessage, [successMessage]); + const setErrorMessage = useError(); + const setSuccessMessage = useSuccess(); 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}); @@ -283,6 +281,7 @@ const Catalog = () => { await publishComment(); resetFields(); })(); + setTriggerPublishComment(false); } }, [publishCommentOptions, triggerPublishComment, publishComment, resetFields]); @@ -340,7 +339,7 @@ const Catalog = () => { if (error) { setErrorMessage(error); } - }, [error]); + }, [error, setErrorMessage]); const handleAuthorDeleteClick = (commentCid) => { diff --git a/src/components/views/Pending.jsx b/src/components/views/Pending.jsx old mode 100644 new mode 100755 index 8b45c364..6777c196 --- a/src/components/views/Pending.jsx +++ b/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"; diff --git a/src/components/views/Subscriptions.jsx b/src/components/views/Subscriptions.jsx old mode 100644 new mode 100755 index 256663f9..cbeff154 --- a/src/components/views/Subscriptions.jsx +++ b/src/components/views/Subscriptions.jsx @@ -46,6 +46,8 @@ const Subscriptions = () => { const account = useAccount(); const navigate = useNavigate(); + + const setErrorMessage = useError(); const threadMenuRefs = useRef({}); const replyMenuRefs = 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(() => { diff --git a/src/components/views/SubscriptionsCatalog.jsx b/src/components/views/SubscriptionsCatalog.jsx old mode 100644 new mode 100755 index 252f629c..300a9e20 --- a/src/components/views/SubscriptionsCatalog.jsx +++ b/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(() => { diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx old mode 100644 new mode 100755 index 3e717ca0..9db177d5 --- a/src/components/views/Thread.jsx +++ b/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,8 +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(); @@ -175,7 +174,7 @@ const Thread = () => { if (errorString) { setErrorMessage(errorString); } - }, [errorString]); + }, [errorString, setErrorMessage]); const flattenedReplies = useMemo(() => @@ -388,7 +387,7 @@ const Thread = () => { if (error) { setErrorMessage(error); } - }, [error]); + }, [error, setErrorMessage]); const handleAuthorDeleteClick = (commentCid) => { diff --git a/src/hooks/useError.js b/src/hooks/useError.js old mode 100644 new mode 100755 index eaaf279c..aa90c163 --- a/src/hooks/useError.js +++ b/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; \ No newline at end of file diff --git a/src/hooks/useSuccess.js b/src/hooks/useSuccess.js old mode 100644 new mode 100755 index e42aa62d..23b465bd --- a/src/hooks/useSuccess.js +++ b/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; \ No newline at end of file