From 37d49668e4f4ae80bc9129a1061a00932bb63abd Mon Sep 17 00:00:00 2001 From: Tom Date: Wed, 7 Jun 2023 18:26:03 +0200 Subject: [PATCH] Revert "refactor toasts" This reverts commit db2e273ea6f4be05f0e24612cc0ce920fabed5f0. --- src/App.js | 8 ++-- src/components/modals/ModerationModal.jsx | 19 ++++----- src/components/modals/ReplyModal.jsx | 5 ++- src/components/modals/SettingsModal.jsx | 8 ++-- src/components/views/All.jsx | 5 ++- src/components/views/AllCatalog.jsx | 5 ++- src/components/views/Board.jsx | 38 +++++++----------- src/components/views/Catalog.jsx | 22 +++++------ src/components/views/Pending.jsx | 6 ++- src/components/views/Subscriptions.jsx | 7 ++-- src/components/views/SubscriptionsCatalog.jsx | 6 ++- src/components/views/Thread.jsx | 39 +++++++------------ src/hooks/useError.js | 20 +++------- src/hooks/useSuccess.js | 20 +++------- 14 files changed, 87 insertions(+), 121 deletions(-) diff --git a/src/App.js b/src/App.js index 91612c47..c596dd4f 100644 --- a/src/App.js +++ b/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 setSuccessMessage = useSuccess(); + const [errorMessage, setErrorMessage] = useState(null); + const [successMessage, setSuccessMessage] = useState(null); + useError(errorMessage, [errorMessage]); + useSuccess(successMessage, [successMessage]); useEffect(() => { diff --git a/src/components/modals/ModerationModal.jsx b/src/components/modals/ModerationModal.jsx index 65f57125..24cdac0b 100644 --- a/src/components/modals/ModerationModal.jsx +++ b/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 setSuccessMessage = useSuccess(); + const [errorMessage, setErrorMessage] = useState(null); + 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(); - } catch (error) { - setErrorMessage(error); - } finally { - setTriggerPublishCommentEdit(false); - } + await publishCommentEdit(); + setTriggerPublishCommentEdit(false); })(); } - }, [publishCommentEditOptions, triggerPublishCommentEdit, publishCommentEdit, setErrorMessage]); + }, [publishCommentEditOptions, triggerPublishCommentEdit, publishCommentEdit]); diff --git a/src/components/modals/ReplyModal.jsx b/src/components/modals/ReplyModal.jsx index 225de91b..8ccbdb09 100644 --- a/src/components/modals/ReplyModal.jsx +++ b/src/components/modals/ReplyModal.jsx @@ -22,18 +22,19 @@ 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 index a34e015c..db6bc189 100644 --- a/src/components/modals/SettingsModal.jsx +++ b/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 setSuccessMessage = useSuccess(); + const [errorMessage, setErrorMessage] = useState(null); + 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 () => { diff --git a/src/components/views/All.jsx b/src/components/views/All.jsx index d4667c86..9b2263b9 100644 --- a/src/components/views/All.jsx +++ b/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(() => { diff --git a/src/components/views/AllCatalog.jsx b/src/components/views/AllCatalog.jsx index 45f19728..d7b076d5 100644 --- a/src/components/views/AllCatalog.jsx +++ b/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(() => { diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx index ebbc4530..5cbf4dd7 100644 --- a/src/components/views/Board.jsx +++ b/src/components/views/Board.jsx @@ -68,9 +68,6 @@ const Board = () => { const account = useAccount(); const navigate = useNavigate(); const { subplebbitAddress } = useParams(); - - const setErrorMessage = useError(); - const setSuccessMessage = useSuccess(); const nameRef = useRef(); const subjectRef = 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(); - resetFields(); - } catch (error) { - setErrorMessage(error); - } finally { - setTriggerPublishComment(false); - } + await publishComment(); + resetFields(); })(); } - }, [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(); - setTriggerPublishCommentEdit(false); - } catch (error) { - setErrorMessage(error); - } finally { - setIsAuthorEdit(false); - setIsAuthorDelete(false); - setTriggerPublishCommentEdit(false); - } + await publishCommentEdit(); + setTriggerPublishCommentEdit(false); })(); } - }, [publishCommentEditOptions, triggerPublishCommentEdit, publishCommentEdit, setIsAuthorEdit, setIsAuthorDelete, setTriggerPublishCommentEdit, setErrorMessage]); + }, [publishCommentEditOptions, triggerPublishCommentEdit, publishCommentEdit]); // desktop navbar board select functionality const handleClickTitle = (title, address) => { diff --git a/src/components/views/Catalog.jsx b/src/components/views/Catalog.jsx index 2a1ff893..bf17a3c3 100644 --- a/src/components/views/Catalog.jsx +++ b/src/components/views/Catalog.jsx @@ -60,8 +60,10 @@ const Catalog = () => { const navigate = useNavigate(); - const setErrorMessage = useError(); - const setSuccessMessage = useSuccess(); + const [errorMessage, setErrorMessage] = useState(null); + 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(); - resetFields(); - } catch (error) { - setErrorMessage(error); - } finally { - setTriggerPublishComment(false); - } + await publishComment(); + resetFields(); })(); } - }, [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) => { diff --git a/src/components/views/Pending.jsx b/src/components/views/Pending.jsx index 6777c196..8b45c364 100644 --- a/src/components/views/Pending.jsx +++ b/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"; diff --git a/src/components/views/Subscriptions.jsx b/src/components/views/Subscriptions.jsx index cbeff154..256663f9 100644 --- a/src/components/views/Subscriptions.jsx +++ b/src/components/views/Subscriptions.jsx @@ -46,8 +46,6 @@ const Subscriptions = () => { const account = useAccount(); const navigate = useNavigate(); - - const setErrorMessage = useError(); const threadMenuRefs = useRef({}); const replyMenuRefs = 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(() => { diff --git a/src/components/views/SubscriptionsCatalog.jsx b/src/components/views/SubscriptionsCatalog.jsx index 300a9e20..252f629c 100644 --- a/src/components/views/SubscriptionsCatalog.jsx +++ b/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(() => { diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx index a8510070..3e717ca0 100644 --- a/src/components/views/Thread.jsx +++ b/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); @@ -98,6 +97,9 @@ const Thread = () => { const [outOfViewCid, setOutOfViewCid] = useState(null); 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(); @@ -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(); - resetFields(); - } catch (error) { - setErrorMessage(error); - } finally { - setTriggerPublishComment(false); - } + await publishComment(); + resetFields(); })(); + 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(); - setTriggerPublishCommentEdit(false); - } catch (error) { - setErrorMessage(error); - } finally { - setIsAuthorEdit(false); - setIsAuthorDelete(false); - setTriggerPublishCommentEdit(false); - } + await publishCommentEdit(); + setTriggerPublishCommentEdit(false); })(); } - }, [publishCommentEditOptions, triggerPublishCommentEdit, publishCommentEdit, setIsAuthorEdit, setIsAuthorDelete, setTriggerPublishCommentEdit, setErrorMessage]); + }, [publishCommentEditOptions, triggerPublishCommentEdit, publishCommentEdit]); // mobile navbar board select functionality diff --git a/src/hooks/useError.js b/src/hooks/useError.js index aa90c163..eaaf279c 100644 --- a/src/hooks/useError.js +++ b/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 [errorMessage, setErrorMessage] = useState(''); - const [renderCount, setRenderCount] = useState(0); - +const useError = (message) => { 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]); - - const setNewErrorMessage = (message) => { - setErrorMessage(message); - setRenderCount(prevCount => prevCount + 1); - }; - - return setNewErrorMessage; + }, [message]); }; export default useError; \ No newline at end of file diff --git a/src/hooks/useSuccess.js b/src/hooks/useSuccess.js index 23b465bd..e42aa62d 100644 --- a/src/hooks/useSuccess.js +++ b/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 [successMessage, setSuccessMessage] = useState(''); - const [renderCount, setRenderCount] = useState(0); - +const useSuccess = (message) => { 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]); - - const setNewSuccessMessage = (message) => { - setSuccessMessage(message); - setRenderCount(prevCount => prevCount + 1); - }; - - return setNewSuccessMessage; + }, [message]); }; export default useSuccess; \ No newline at end of file