Include Pataje to TeksDrawer

components/teks/teks-drawer.js

@@ -1,4 +1,4 @@
-import {useState} from 'react'
+import {useEffect, useState} from 'react'
 import PropTypes from 'prop-types'
 import Link from 'next/link'
 
@@ -12,7 +12,8 @@ import {
   Hidden,
   IconButton,
   Box,
-  useMediaQuery
+  useMediaQuery,
+  Snackbar
 } from '@material-ui/core'
 
 import KeyboardBackspaceIcon from '@material-ui/icons/KeyboardBackspace'
@@ -26,6 +27,13 @@ import DrawerBar from './drawer-bar'
 import DenyeTeks from './denye-teks'
 import VweKouteAchte from './vwe-koute-achte'
 import OkiMizik from './oki-mizik'
+import Pataje from './pataje'
+
+import MuiAlert from '@material-ui/lab/Alert'
+
+function Alert(props) {
+  return <MuiAlert elevation={6} variant='filled' {...props} />
+}
 
 const drawerWidth = 240
 
@@ -96,6 +104,14 @@ const useStyles = makeStyles(theme => ({
     [theme.breakpoints.up('sm')]: {
       top: '10px'
     }
+  },
+  pataje: {
+    position: 'absolute',
+    top: '140px',
+    left: '10px',
+    [theme.breakpoints.up('sm')]: {
+      left: '275px'
+    }
   }
 }))
 
@@ -149,6 +165,19 @@ export default function TeksDrawer({teks, anTeks}) {
   const classes = useStyles()
   const theme = useTheme()
   const [esMobilOuve, meteEsMobilOuve] = useState(false)
+  const [open, setOpen] = useState(false)
+  const [error, setError] = useState('')
+  const [success, setSuccess] = useState('')
+
+  const handleClose = (event, reason) => {
+    if (reason === 'clickaway') {
+      return
+    }
+
+    setOpen(false)
+    setSuccess('')
+    setError('')
+  }
 
   const handleDrawerToggle = () => {
     meteEsMobilOuve(!esMobilOuve)
@@ -156,6 +185,12 @@ export default function TeksDrawer({teks, anTeks}) {
 
   const container = typeof window === 'undefined' ? undefined : () => window.document.body
 
+  useEffect(() => {
+    if (error || success) {
+      setOpen(true)
+    }
+  }, [error, success, setOpen])
+
   return (
     <div className={classes.root}>
       <CssBaseline />
@@ -234,6 +269,9 @@ export default function TeksDrawer({teks, anTeks}) {
                 {anTeks.eksplisit && (
                   <ExplicitIcon style={{marginLeft: 10}} color='secondary' />
                 )}
+                <div className={classes.pataje}>
+                  <Pataje teks={anTeks} setError={setError} setSuccess={setSuccess} />
+                </div>
               </Typography>
               <Typography variant='caption'>
                 {anTeks.user && (
@@ -268,6 +306,20 @@ export default function TeksDrawer({teks, anTeks}) {
                 </Grid>
               ))}
             </Grid>
+            {success && (
+              <Snackbar open={open} autoHideDuration={3000} onClose={handleClose}>
+                <Alert severity='success' onClose={handleClose}>
+                  <strong>{success}</strong>
+                </Alert>
+              </Snackbar>
+            )}
+            {error && (
+              <Snackbar open={open} autoHideDuration={3000} onClose={handleClose}>
+                <Alert severity='error' onClose={handleClose}>
+                  <strong>Une erreur s’est produite</strong> : <i>{error.message}</i>
+                </Alert>
+              </Snackbar>
+            )}
           </>
         ) : (
           <DenyeTeks {...teks} />