From 75eb28d8338c1e0601c94640303f91ef09bd583a Mon Sep 17 00:00:00 2001 From: ilyayudovin Date: Tue, 30 Jun 2020 18:41:28 +0300 Subject: feat: add snackbar for showing messages to a user --- package-lock.json | 9 +++++++++ package.json | 1 + src/components/PollCard/PollCard.tsx | 15 +++++++++++++-- src/index.tsx | 30 ++++++++++++++++++++---------- src/pages/FeedPage/PollSubmission.tsx | 9 +++++++++ 5 files changed, 52 insertions(+), 12 deletions(-) diff --git a/package-lock.json b/package-lock.json index e7f7059..dc2f8b5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8673,6 +8673,15 @@ "sort-keys": "^1.0.0" } }, + "notistack": { + "version": "0.9.17", + "resolved": "https://registry.npmjs.org/notistack/-/notistack-0.9.17.tgz", + "integrity": "sha512-nypTN6sEe+q98wMaxF/UwatA1yAq948+bZOo9JKYR+tU65DW0ipWyx8DseJ3UJYvb6VDD+Fqo83qwayQ46bEEA==", + "requires": { + "clsx": "^1.1.0", + "hoist-non-react-statics": "^3.3.0" + } + }, "npm-run-path": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz", diff --git a/package.json b/package.json index f75c0e8..72bec20 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "@material-ui/icons": "^4.9.1", "axios": "^0.19.2", "lodash": "^4.17.15", + "notistack": "^0.9.17", "react": "^16.13.1", "react-dom": "^16.13.1", "react-icons": "^3.10.0", diff --git a/src/components/PollCard/PollCard.tsx b/src/components/PollCard/PollCard.tsx index 2a23522..aab0261 100644 --- a/src/components/PollCard/PollCard.tsx +++ b/src/components/PollCard/PollCard.tsx @@ -6,10 +6,10 @@ import { CardMedia } from '@material-ui/core/'; import { Which, Poll } from 'which-types'; - import PercentageBar from './PercentageBar'; import UserStrip from '../UserStrip/UserStrip'; import { post } from '../../requests'; +import {useSnackbar} from "notistack"; interface PropTypes { initialPoll: Poll; @@ -57,17 +57,28 @@ const PollCard: React.FC = ({ initialPoll }) => { const [poll, setPoll] = useState(initialPoll); const classes = useStyles(); const { author, contents: { left, right }, vote } = poll; + const { enqueueSnackbar, closeSnackbar } = useSnackbar(); const date: string = new Date(poll.createdAt).toLocaleString('default', DATE_FORMAT); const handleVote = (which: Which) => { - if (vote) return; + if (vote) { + showSnackBar('You have voted already'); + return; + } post('votes/', { which, pollId: poll._id }).then(response => { + console.log(response.data); poll.contents[which].votes += 1; poll.vote = response.data; setPoll({ ...poll }); }); }; + const showSnackBar = (message: string) => { + enqueueSnackbar(message, { + variant: 'warning', + }); + }; + const handleLeft = () => handleVote('left'); const handleRight = () => handleVote('right'); diff --git a/src/index.tsx b/src/index.tsx index 180f80c..c304043 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -10,6 +10,8 @@ import ScrollTopArrow from './components/ScrollTopArrow/ScrollTopArrow'; import Page from './pages/Page'; import { AuthProvider } from './hooks/useAuth'; import { NavigationProvider } from './hooks/useNavigate'; +import { SnackbarProvider } from 'notistack'; + const theme = createMuiTheme({ @@ -24,16 +26,24 @@ const theme = createMuiTheme({ const App: React.FC = () => { return ( - - - - -
- - - - - + + + + + +
+ + + + + + ); }; diff --git a/src/pages/FeedPage/PollSubmission.tsx b/src/pages/FeedPage/PollSubmission.tsx index 18f029c..f8ba26b 100644 --- a/src/pages/FeedPage/PollSubmission.tsx +++ b/src/pages/FeedPage/PollSubmission.tsx @@ -13,6 +13,7 @@ import UserStrip from '../../components/UserStrip/UserStrip'; import { post } from '../../requests'; import { Contents } from './types'; import { useAuth } from '../../hooks/useAuth'; +import {useSnackbar} from "notistack"; interface PropTypes{ addPoll: (poll: Poll) => void; @@ -34,6 +35,7 @@ const PollSubmission: React.FC = ({ addPoll }) => { const classes = useStyles(); const [expanded, setExpanded] = useState(false); const [contents, setContents] = useState(emptyContents); + const { enqueueSnackbar, closeSnackbar } = useSnackbar(); const { user } = useAuth(); const readyToSubmit = contents.left.url && contents.right.url; @@ -50,12 +52,19 @@ const PollSubmission: React.FC = ({ addPoll }) => { if (expanded && readyToSubmit) { post('/polls/', { contents }).then(response => { addPoll(response.data); + showSnackBar('Your poll has been successfully created!'); }); setContents({ ...emptyContents }); } setExpanded(!expanded); }; + const showSnackBar = (message: string) => { + enqueueSnackbar(message, { + variant: 'success', + }); + }; + return ( -- cgit v1.2.3 From 75c1dac4bceddab1d94b9e43c2fb2035297eb6bd Mon Sep 17 00:00:00 2001 From: ilyayudovin Date: Wed, 1 Jul 2020 14:38:39 +0300 Subject: fix eslint errors --- src/components/PollCard/PollCard.tsx | 20 ++++++++++---------- src/index.tsx | 6 ++---- src/pages/FeedPage/PollSubmission.tsx | 17 +++++++++-------- 3 files changed, 21 insertions(+), 22 deletions(-) diff --git a/src/components/PollCard/PollCard.tsx b/src/components/PollCard/PollCard.tsx index aab0261..ef7391e 100644 --- a/src/components/PollCard/PollCard.tsx +++ b/src/components/PollCard/PollCard.tsx @@ -6,10 +6,10 @@ import { CardMedia } from '@material-ui/core/'; import { Which, Poll } from 'which-types'; +import { useSnackbar } from 'notistack'; import PercentageBar from './PercentageBar'; import UserStrip from '../UserStrip/UserStrip'; import { post } from '../../requests'; -import {useSnackbar} from "notistack"; interface PropTypes { initialPoll: Poll; @@ -57,28 +57,28 @@ const PollCard: React.FC = ({ initialPoll }) => { const [poll, setPoll] = useState(initialPoll); const classes = useStyles(); const { author, contents: { left, right }, vote } = poll; - const { enqueueSnackbar, closeSnackbar } = useSnackbar(); + const { enqueueSnackbar } = useSnackbar(); const date: string = new Date(poll.createdAt).toLocaleString('default', DATE_FORMAT); + + const showSnackBar = (message: string) => { + enqueueSnackbar(message, { + variant: 'error' + }); + }; + const handleVote = (which: Which) => { if (vote) { - showSnackBar('You have voted already'); + showSnackBar('You have already voted'); return; } post('votes/', { which, pollId: poll._id }).then(response => { - console.log(response.data); poll.contents[which].votes += 1; poll.vote = response.data; setPoll({ ...poll }); }); }; - const showSnackBar = (message: string) => { - enqueueSnackbar(message, { - variant: 'warning', - }); - }; - const handleLeft = () => handleVote('left'); const handleRight = () => handleVote('right'); diff --git a/src/index.tsx b/src/index.tsx index c304043..0ab06f5 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -5,14 +5,12 @@ import { CssBaseline } from '@material-ui/core'; import teal from '@material-ui/core/colors/teal'; import 'typeface-roboto'; +import { SnackbarProvider } from 'notistack'; import Header from './components/Header/Header'; import ScrollTopArrow from './components/ScrollTopArrow/ScrollTopArrow'; import Page from './pages/Page'; import { AuthProvider } from './hooks/useAuth'; import { NavigationProvider } from './hooks/useNavigate'; -import { SnackbarProvider } from 'notistack'; - - const theme = createMuiTheme({ palette: { @@ -30,7 +28,7 @@ const App: React.FC = () => { maxSnack={3} anchorOrigin={{ vertical: 'bottom', - horizontal: 'right', + horizontal: 'right' }} > diff --git a/src/pages/FeedPage/PollSubmission.tsx b/src/pages/FeedPage/PollSubmission.tsx index f8ba26b..3088279 100644 --- a/src/pages/FeedPage/PollSubmission.tsx +++ b/src/pages/FeedPage/PollSubmission.tsx @@ -8,12 +8,12 @@ import { Divider } from '@material-ui/core'; import { Poll, Which } from 'which-types'; +import { useSnackbar } from 'notistack'; import PollSubmissionImage from './PollSubmissionImage'; import UserStrip from '../../components/UserStrip/UserStrip'; import { post } from '../../requests'; import { Contents } from './types'; import { useAuth } from '../../hooks/useAuth'; -import {useSnackbar} from "notistack"; interface PropTypes{ addPoll: (poll: Poll) => void; @@ -35,7 +35,7 @@ const PollSubmission: React.FC = ({ addPoll }) => { const classes = useStyles(); const [expanded, setExpanded] = useState(false); const [contents, setContents] = useState(emptyContents); - const { enqueueSnackbar, closeSnackbar } = useSnackbar(); + const { enqueueSnackbar } = useSnackbar(); const { user } = useAuth(); const readyToSubmit = contents.left.url && contents.right.url; @@ -48,6 +48,13 @@ const PollSubmission: React.FC = ({ addPoll }) => { setExpanded(false); }; + const showSnackBar = (message: string) => { + enqueueSnackbar(message, { + variant: 'success' + }); + }; + + const handleClick = () => { if (expanded && readyToSubmit) { post('/polls/', { contents }).then(response => { @@ -59,12 +66,6 @@ const PollSubmission: React.FC = ({ addPoll }) => { setExpanded(!expanded); }; - const showSnackBar = (message: string) => { - enqueueSnackbar(message, { - variant: 'success', - }); - }; - return ( -- cgit v1.2.3 From f9999d6da7752a55ad01f85dce34086c1acbff5a Mon Sep 17 00:00:00 2001 From: ilyayudovin Date: Wed, 1 Jul 2020 15:26:08 +0300 Subject: move snack provider to Page component --- src/components/PollCard/PollCard.tsx | 11 +++-------- src/index.tsx | 29 ++++++++++------------------- src/pages/FeedPage/PollSubmission.tsx | 11 +++-------- src/pages/Page.tsx | 19 ++++++++++++++----- 4 files changed, 30 insertions(+), 40 deletions(-) diff --git a/src/components/PollCard/PollCard.tsx b/src/components/PollCard/PollCard.tsx index ef7391e..12f7198 100644 --- a/src/components/PollCard/PollCard.tsx +++ b/src/components/PollCard/PollCard.tsx @@ -60,16 +60,11 @@ const PollCard: React.FC = ({ initialPoll }) => { const { enqueueSnackbar } = useSnackbar(); const date: string = new Date(poll.createdAt).toLocaleString('default', DATE_FORMAT); - - const showSnackBar = (message: string) => { - enqueueSnackbar(message, { - variant: 'error' - }); - }; - const handleVote = (which: Which) => { if (vote) { - showSnackBar('You have already voted'); + enqueueSnackbar('You have already voted', { + variant: 'error' + }); return; } post('votes/', { which, pollId: poll._id }).then(response => { diff --git a/src/index.tsx b/src/index.tsx index 0ab06f5..e8fbce1 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -5,7 +5,6 @@ import { CssBaseline } from '@material-ui/core'; import teal from '@material-ui/core/colors/teal'; import 'typeface-roboto'; -import { SnackbarProvider } from 'notistack'; import Header from './components/Header/Header'; import ScrollTopArrow from './components/ScrollTopArrow/ScrollTopArrow'; import Page from './pages/Page'; @@ -24,24 +23,16 @@ const theme = createMuiTheme({ const App: React.FC = () => { return ( - - - - - -
- - - - - - + + + + +
+ + + + + ); }; diff --git a/src/pages/FeedPage/PollSubmission.tsx b/src/pages/FeedPage/PollSubmission.tsx index 3088279..b067914 100644 --- a/src/pages/FeedPage/PollSubmission.tsx +++ b/src/pages/FeedPage/PollSubmission.tsx @@ -48,18 +48,13 @@ const PollSubmission: React.FC = ({ addPoll }) => { setExpanded(false); }; - const showSnackBar = (message: string) => { - enqueueSnackbar(message, { - variant: 'success' - }); - }; - - const handleClick = () => { if (expanded && readyToSubmit) { post('/polls/', { contents }).then(response => { addPoll(response.data); - showSnackBar('Your poll has been successfully created!'); + enqueueSnackbar('Your poll has been successfully created!', { + variant: 'success' + }); }); setContents({ ...emptyContents }); } diff --git a/src/pages/Page.tsx b/src/pages/Page.tsx index 6d4315e..f6353b2 100644 --- a/src/pages/Page.tsx +++ b/src/pages/Page.tsx @@ -1,5 +1,6 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; +import { SnackbarProvider } from 'notistack'; import ProfilePage from './ProfilePage/ProfilePage'; import FeedPage from './FeedPage/FeedPage'; import AuthPage from './AuthPage/AuthPage'; @@ -18,11 +19,19 @@ const Page: React.FC = () => { const classes = useStyles(); return ( -
- { page.prefix === 'profile' && } - { page.prefix === 'feed' && } - { page.prefix === 'auth' && } -
+ +
+ { page.prefix === 'profile' && } + { page.prefix === 'feed' && } + { page.prefix === 'auth' && } +
+ ); }; -- cgit v1.2.3