feat: add snackbar for showing messages to a user

3 files changed, 42 insertions, 12 deletions

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>