Merge pull request #55 from which-ecosystem/snackbar

snackbar

6 files changed, 37 insertions, 8 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..12f7198 100644
--- a/src/components/PollCard/PollCard.tsx
+++ b/src/components/PollCard/PollCard.tsx
@@ -6,7 +6,7 @@ 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';
@@ -57,10 +57,16 @@ const PollCard: React.FC<PropTypes> = ({ initialPoll }) => {
   const [poll, setPoll] = useState<Poll>(initialPoll);
   const classes = useStyles();
   const { author, contents: { left, right }, vote } = poll;
+  const { enqueueSnackbar } = useSnackbar();
   const date: string = new Date(poll.createdAt).toLocaleString('default', DATE_FORMAT);
 
   const handleVote = (which: Which) => {
-    if (vote) return;
+    if (vote) {
+      enqueueSnackbar('You have already voted', {
+        variant: 'error'
+      });
+      return;
+    }
     post('votes/', { which, pollId: poll._id }).then(response => {
       poll.contents[which].votes += 1;
       poll.vote = response.data;
diff --git a/src/index.tsx b/src/index.tsx
index 180f80c..e8fbce1 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -11,7 +11,6 @@ import Page from './pages/Page';
 import { AuthProvider } from './hooks/useAuth';
 import { NavigationProvider } from './hooks/useNavigate';
 
-
 const theme = createMuiTheme({
   palette: {
     primary: {
diff --git a/src/pages/FeedPage/PollSubmission.tsx b/src/pages/FeedPage/PollSubmission.tsx
index 18f029c..b067914 100644
--- a/src/pages/FeedPage/PollSubmission.tsx
+++ b/src/pages/FeedPage/PollSubmission.tsx
@@ -8,6 +8,7 @@ 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';
@@ -34,6 +35,7 @@ const PollSubmission: React.FC<PropTypes> = ({ addPoll }) => {
   const classes = useStyles();
   const [expanded, setExpanded] = useState(false);
   const [contents, setContents] = useState<Contents>(emptyContents);
+  const { enqueueSnackbar } = useSnackbar();
   const { user } = useAuth();
 
   const readyToSubmit = contents.left.url && contents.right.url;
@@ -50,6 +52,9 @@ const PollSubmission: React.FC<PropTypes> = ({ addPoll }) => {
     if (expanded && readyToSubmit) {
       post('/polls/', { contents }).then(response => {
         addPoll(response.data);
+        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 (
-    <div className={classes.root}>
-      { page.prefix === 'profile' && <ProfilePage />}
-      { page.prefix === 'feed' && <FeedPage /> }
-      { page.prefix === 'auth' && <AuthPage /> }
-    </div>
+    <SnackbarProvider
+      maxSnack={3}
+      anchorOrigin={{
+        vertical: 'bottom',
+        horizontal: 'right'
+      }}
+    >
+      <div className={classes.root}>
+        { page.prefix === 'profile' && <ProfilePage />}
+        { page.prefix === 'feed' && <FeedPage /> }
+        { page.prefix === 'auth' && <AuthPage /> }
+      </div>
+    </SnackbarProvider>
   );
 };