diff --git a/package.json b/package.json index 79ba5142..42e7ca66 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "react-modal": "^3.16.1", "react-router-dom": "^6.8.0", "react-scripts": "5.0.1", + "react-toastify": "^9.1.1", "react-tooltip": "^5.8.3", "styled-components": "^5.3.6", "web-vitals": "^2.1.0", diff --git a/src/App.js b/src/App.js index 39d4a49a..c374e497 100644 --- a/src/App.js +++ b/src/App.js @@ -7,9 +7,11 @@ import Board from './components/Board'; import Thread from './components/Thread'; import Catalog from './components/Catalog'; import NotFound from './components/NotFound'; -import { createGlobalStyle } from 'styled-components'; +import styled, { createGlobalStyle } from 'styled-components'; import 'react-tooltip/dist/react-tooltip.css'; +import 'react-toastify/dist/ReactToastify.css'; import preloadImages from './utils/preloadImages'; +import { ToastContainer } from 'react-toastify'; const GlobalStyle = createGlobalStyle` @@ -30,6 +32,13 @@ const GlobalStyle = createGlobalStyle` } `; +const StyledContainer = styled(ToastContainer)` + .Toastify__toast { + border-radius: 0px; + font-size: 11pt; + } +`; + export default function App() { const { bodyStyle, setBodyStyle } = useBoardStore(state => state); @@ -69,5 +78,6 @@ export default function App() { } /> + )} \ No newline at end of file diff --git a/src/components/Board.jsx b/src/components/Board.jsx index b22d5a07..91935474 100644 --- a/src/components/Board.jsx +++ b/src/components/Board.jsx @@ -7,6 +7,7 @@ import CaptchaModal from './CaptchaModal'; 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 getDate from '../utils/getDate'; import renderComments from '../utils/renderComments'; @@ -181,9 +182,6 @@ const Board = ({ setBodyStyle }) => { } - const onError = (error) => console.error(error) - - const getChallengeAnswersFromUser = async (challenges) => { return new Promise((resolve, reject) => { const imageString = challenges?.challenges[0].challenge; @@ -268,14 +266,14 @@ const Board = ({ setBodyStyle }) => { subplebbitAddress: selectedAddress, onChallengeVerification, onChallenge, - onError, + onError: onError, }); console.log(`Comment pending with index: ${pendingComment.index}`); setName(''); setSubject(''); setComment(''); } catch (error) { - console.error(error); + onError(error); } }; diff --git a/src/components/Catalog.jsx b/src/components/Catalog.jsx index d25cc568..47191a62 100644 --- a/src/components/Catalog.jsx +++ b/src/components/Catalog.jsx @@ -7,6 +7,7 @@ import { Threads } from './styles/Catalog.styled'; import { useFeed, useAccountsActions } from '@plebbit/plebbit-react-hooks'; import ImageBanner from './ImageBanner'; import CaptchaModal from './CaptchaModal'; +import onError from '../utils/onError'; import InfiniteScroll from 'react-infinite-scroller'; @@ -241,14 +242,14 @@ const Catalog = ({ setBodyStyle }) => { subplebbitAddress: selectedAddress, onChallengeVerification, onChallenge, - onError, + onError: onError, }); console.log(`Comment pending with index: ${pendingComment.index}`); setName(''); setSubject(''); setComment(''); } catch (error) { - console.error(error); + onError(error); } }; diff --git a/src/components/Thread.jsx b/src/components/Thread.jsx index 28f0061d..3e0a890e 100644 --- a/src/components/Thread.jsx +++ b/src/components/Thread.jsx @@ -7,6 +7,7 @@ import { useComment, useAccountsActions } from '@plebbit/plebbit-react-hooks'; import ImageBanner from './ImageBanner'; import CaptchaModal from './CaptchaModal'; import { Tooltip } from 'react-tooltip'; +import onError from '../utils/onError'; import getDate from '../utils/getDate'; import renderThreadComments from '../utils/renderThreadComments'; @@ -156,9 +157,6 @@ const Thread = ({ setBodyStyle }) => { await comment.publishChallengeAnswers(challengeAnswers) } } - - - const onError = (error) => console.error(error) const getChallengeAnswersFromUser = async (challenges) => { @@ -241,14 +239,14 @@ const Thread = ({ setBodyStyle }) => { subplebbitAddress: selectedAddress, onChallengeVerification, onChallenge, - onError, + onError: onError, }); console.log(`Comment pending with index: ${pendingComment.index}`); setName(''); setSubject(''); setCommentContent(''); } catch (error) { - console.error(error); + onError(error); } }; diff --git a/src/utils/onError.js b/src/utils/onError.js new file mode 100644 index 00000000..81d9f07d --- /dev/null +++ b/src/utils/onError.js @@ -0,0 +1,16 @@ +import { toast } from 'react-toastify'; + +const onError = (error) => { + return toast.error(error.toString(), { + position: "bottom-center", + autoClose: false, + hideProgressBar: false, + closeOnClick: false, + pauseOnHover: true, + draggable: false, + progress: undefined, + theme: "dark", + }); +}; + +export default onError; \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index f13c97d9..5da3e39f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4344,6 +4344,11 @@ clone-deep@^4.0.1: kind-of "^6.0.2" shallow-clone "^3.0.0" +clsx@^1.1.1: + version "1.2.1" + resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12" + integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg== + co@^4.6.0: version "4.6.0" resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184" @@ -10159,6 +10164,13 @@ react-scripts@5.0.1: optionalDependencies: fsevents "^2.3.2" +react-toastify@^9.1.1: + version "9.1.1" + resolved "https://registry.yarnpkg.com/react-toastify/-/react-toastify-9.1.1.tgz#9280caea4a13dc1739c350d90660a630807bf10b" + integrity sha512-pkFCla1z3ve045qvjEmn2xOJOy4ZciwRXm1oMPULVkELi5aJdHCN/FHnuqXq8IwGDLB7PPk2/J6uP9D8ejuiRw== + dependencies: + clsx "^1.1.1" + react-tooltip@^5.8.3: version "5.8.3" resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-5.8.3.tgz#d9c94eafb6c3d4d7be43b4acfe6f3cbde82df9ab"