From 75eb28d8338c1e0601c94640303f91ef09bd583a Mon Sep 17 00:00:00 2001
From: ilyayudovin <ilyayudovin123@gmail.com>
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<PropTypes> = ({ initialPoll }) => {
   const [poll, setPoll] = useState<Poll>(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 (
-    <NavigationProvider>
-      <AuthProvider>
-        <ThemeProvider theme={theme}>
-          <CssBaseline />
-          <Header />
-          <Page />
-          <ScrollTopArrow />
-        </ThemeProvider>
-      </AuthProvider>
-    </NavigationProvider>
+    <SnackbarProvider
+      maxSnack={3}
+      anchorOrigin={{
+        vertical: 'bottom',
+        horizontal: 'right',
+      }}
+    >
+      <NavigationProvider>
+        <AuthProvider>
+          <ThemeProvider theme={theme}>
+            <CssBaseline />
+            <Header />
+            <Page />
+            <ScrollTopArrow />
+          </ThemeProvider>
+        </AuthProvider>
+      </NavigationProvider>
+    </SnackbarProvider>
   );
 };
 
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<PropTypes> = ({ addPoll }) => {
   const classes = useStyles();
   const [expanded, setExpanded] = useState(false);
   const [contents, setContents] = useState<Contents>(emptyContents);
+  const { enqueueSnackbar, closeSnackbar } = useSnackbar();
   const { user } = useAuth();
 
   const readyToSubmit = contents.left.url && contents.right.url;
@@ -50,12 +52,19 @@ const PollSubmission: React.FC<PropTypes> = ({ 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 (
     <ClickAwayListener onClickAway={handleClickAway}>
       <Card>
-- 
cgit v1.2.3