From 59cffb9dfc33a3d5965e7f6f801bbf229ebd11f4 Mon Sep 17 00:00:00 2001 From: plebbitor Date: Wed, 15 Mar 2023 17:34:31 +0100 Subject: [PATCH] added success toast --- src/App.js | 1 + src/components/Board.jsx | 11 ++++++----- src/components/Catalog.jsx | 11 ++++++----- src/components/Thread.jsx | 11 ++++++----- src/utils/onSuccess.js | 16 ++++++++++++++++ 5 files changed, 35 insertions(+), 15 deletions(-) create mode 100644 src/utils/onSuccess.js diff --git a/src/App.js b/src/App.js index 1a349efa..549b26ba 100644 --- a/src/App.js +++ b/src/App.js @@ -38,6 +38,7 @@ const StyledContainer = styled(ToastContainer)` font-size: 11pt; animation-duration: 0s; border: 1px solid #fee9cd; + color: #c5c8c6; } `; diff --git a/src/components/Board.jsx b/src/components/Board.jsx index 4fd958c1..c4822558 100644 --- a/src/components/Board.jsx +++ b/src/components/Board.jsx @@ -8,6 +8,7 @@ import { useFeed, useAccountsActions } from '@plebbit/plebbit-react-hooks'; import InfiniteScroll from 'react-infinite-scroller'; import { Tooltip } from 'react-tooltip'; import onError from '../utils/onError'; +import onSuccess from '../utils/onSuccess'; import getDate from '../utils/getDate'; import renderComments from '../utils/renderComments'; import SettingsModal from './SettingsModal'; @@ -169,11 +170,11 @@ const Board = ({ setBodyStyle }) => { const onChallengeVerification = (challengeVerification) => { if (challengeVerification.challengeSuccess === true) { - console.log('challenge success', {publishedCid: challengeVerification.publication.cid}) + onSuccess('challenge success', {publishedCid: challengeVerification.publication.cid}) } else if (challengeVerification.challengeSuccess === false) { - console.error('challenge failed', {reason: challengeVerification.reason, errors: challengeVerification.errors}); - alert("Error: You seem to have mistyped the CAPTCHA. Please try again."); + onError('challenge failed', {reason: challengeVerification.reason, errors: challengeVerification.errors}); + onError("Error: You seem to have mistyped the CAPTCHA. Please try again."); } } @@ -184,7 +185,7 @@ const Board = ({ setBodyStyle }) => { challengeAnswers = await getChallengeAnswersFromUser(challenges) } catch (error) { - console.log(error); + onError(error); } if (challengeAnswers) { await comment.publishChallengeAnswers(challengeAnswers) @@ -217,7 +218,7 @@ const Board = ({ setBodyStyle }) => { }; challengeImg.onerror = () => { - reject(new Error('Could not load challenge image')); + reject(onError('Could not load challenge image')); }; }); }; diff --git a/src/components/Catalog.jsx b/src/components/Catalog.jsx index 98decf9d..4d76cd28 100644 --- a/src/components/Catalog.jsx +++ b/src/components/Catalog.jsx @@ -8,6 +8,7 @@ import { useFeed, useAccountsActions } from '@plebbit/plebbit-react-hooks'; import ImageBanner from './ImageBanner'; import CaptchaModal from './CaptchaModal'; import onError from '../utils/onError'; +import onSuccess from '../utils/onSuccess'; import InfiniteScroll from 'react-infinite-scroller'; @@ -140,11 +141,11 @@ const Catalog = ({ setBodyStyle }) => { const onChallengeVerification = (challengeVerification) => { if (challengeVerification.challengeSuccess === true) { - console.log('challenge success', {publishedCid: challengeVerification.publication.cid}) + onSuccess('challenge success', {publishedCid: challengeVerification.publication.cid}) } else if (challengeVerification.challengeSuccess === false) { - console.error('challenge failed', {reason: challengeVerification.reason, errors: challengeVerification.errors}); - alert("Error: You seem to have mistyped the CAPTCHA. Please try again."); + onError('challenge failed', {reason: challengeVerification.reason, errors: challengeVerification.errors}); + onError("Error: You seem to have mistyped the CAPTCHA. Please try again."); } } @@ -155,7 +156,7 @@ const Catalog = ({ setBodyStyle }) => { challengeAnswers = await getChallengeAnswersFromUser(challenges) } catch (error) { - console.log(error); + onError(error); } if (challengeAnswers) { await comment.publishChallengeAnswers(challengeAnswers) @@ -188,7 +189,7 @@ const Catalog = ({ setBodyStyle }) => { }; challengeImg.onerror = () => { - reject(new Error('Could not load challenge image')); + reject(onError('Could not load challenge image')); }; }); }; diff --git a/src/components/Thread.jsx b/src/components/Thread.jsx index 3e0a890e..b38a51b1 100644 --- a/src/components/Thread.jsx +++ b/src/components/Thread.jsx @@ -8,6 +8,7 @@ import ImageBanner from './ImageBanner'; import CaptchaModal from './CaptchaModal'; import { Tooltip } from 'react-tooltip'; import onError from '../utils/onError'; +import onSuccess from '../utils/onSuccess'; import getDate from '../utils/getDate'; import renderThreadComments from '../utils/renderThreadComments'; @@ -136,11 +137,11 @@ const Thread = ({ setBodyStyle }) => { const onChallengeVerification = (challengeVerification) => { if (challengeVerification.challengeSuccess === true) { - console.log('challenge success', {publishedCid: challengeVerification.publication.cid}) + onSuccess('challenge success', {publishedCid: challengeVerification.publication.cid}) } else if (challengeVerification.challengeSuccess === false) { - console.error('challenge failed', {reason: challengeVerification.reason, errors: challengeVerification.errors}); - alert("Error: You seem to have mistyped the CAPTCHA. Please try again."); + onError('challenge failed', {reason: challengeVerification.reason, errors: challengeVerification.errors}); + onError("Error: You seem to have mistyped the CAPTCHA. Please try again."); } } @@ -151,7 +152,7 @@ const Thread = ({ setBodyStyle }) => { challengeAnswers = await getChallengeAnswersFromUser(challenges) } catch (error) { - console.log(error); + onError(error); } if (challengeAnswers) { await comment.publishChallengeAnswers(challengeAnswers) @@ -184,7 +185,7 @@ const Thread = ({ setBodyStyle }) => { }; challengeImg.onerror = () => { - reject(new Error('Could not load challenge image')); + reject(onError('Could not load challenge image')); }; }); }; diff --git a/src/utils/onSuccess.js b/src/utils/onSuccess.js new file mode 100644 index 00000000..337f95be --- /dev/null +++ b/src/utils/onSuccess.js @@ -0,0 +1,16 @@ +import { toast } from 'react-toastify'; + +const onSuccess = (success) => { + return toast.success(success.toString(), { + position: "top-right", + autoClose: 3000, + hideProgressBar: false, + closeOnClick: false, + pauseOnHover: true, + draggable: false, + progress: undefined, + theme: "dark", + }); +}; + +export default onSuccess; \ No newline at end of file