Create EkriKomante component

2021-06-26 12:27:06 +02:00
parent 1119d9a902
commit b6d7000ad5
1 changed files with 151 additions and 0 deletions
@@ -0,0 +1,151 @@
+import {useCallback, useEffect, useState} from 'react'
+import PropTypes from 'prop-types'
+import axios from 'axios'
+import {
+  TextField,
+  Container,
+  Button,
+  Snackbar,
+  LinearProgress,
+  Typography
+} from '@material-ui/core'
+import MuiAlert from '@material-ui/lab/Alert'
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:1337'
+
+function Alert(props) {
+  return <MuiAlert elevation={6} variant='filled' {...props} />
+}
+
+function EkriKomante({session, teks, meteEsKomanteOuve}) {
+  const {jwt, user} = session
+  const {_id} = teks
+  const [komante, meteKomante] = useState({kontni: ''})
+  const [ere, meteEre] = useState('')
+  const [sikse, meteSikse] = useState('')
+  const [chaje, meteChaje] = useState(false)
+  const [esOuve, meteEsOuve] = useState(false)
+
+  const handleClick = () => {
+    meteChaje(true)
+    const {kontni} = komante
+
+    if (kontni === '') {
+      meteEre({mesaj: 'Champ obligatoire'})
+      meteChaje(false)
+
+      return
+    }
+
+    const headers = {
+      'content-type': 'application/json',
+      Authorization: `Bearer ${jwt}`
+    }
+
+    axios.post(`${API_URL}/komante`, {
+      kontni,
+      teks: _id,
+      user: user._id
+    }, {
+      headers
+    })
+      .then(() => {
+        meteSikse('Commentaire envoyé avec succès. Il apparaîtra sur le site après validation.')
+        meteChaje(false)
+      })
+      .catch(error => {
+        meteEre(error)
+        meteChaje(false)
+      })
+  }
+
+  const handleUpdate = useCallback(update => {
+    meteKomante({...komante, ...update})
+  }, [komante])
+
+  const handleClose = (event, reason) => {
+    if (reason === 'clickaway') {
+      return
+    }
+
+    meteEsOuve(false)
+    meteSikse('')
+    meteEre('')
+    meteEsKomanteOuve(false)
+  }
+
+  const handleReset = () => {
+    meteKomante({kontni: ''})
+  }
+
+  useEffect(() => {
+    if (sikse) {
+      meteEsOuve(true)
+      handleReset()
+    }
+  }, [sikse])
+
+  useEffect(() => {
+    if (ere) {
+      meteEsOuve(true)
+    }
+  }, [ere])
+
+  return (
+    <Container maxWidth='sm'>
+      <form noValidate autoComplete='off'>
+        <TextField
+          fullWidth
+          multiline
+          required
+          helperText='Votre commentaire (obligatoire)'
+          style={{marginTop: '1em'}}
+          id='komante'
+          label='Kòmantè'
+          value={komante.kontni}
+          rows={8}
+          variant='outlined'
+          onChange={event => handleUpdate({kontni: event.target.value})}
+        />
+      </form>
+      <div>
+        <Button
+          fullWidth
+          disabled={chaje || komante.komante === ''}
+          style={{marginBlock: 20}}
+          variant='contained'
+          color='primary'
+          onClick={handleClick}
+        >
+          <Typography style={{fontWeight: 'bold'}}>
+            Valider
+          </Typography>
+        </Button>
+        {chaje && <LinearProgress size={24} style={{width: '100%', marginBlock: '1em'}} />}
+      </div>
+      {sikse && (
+        <Snackbar open={esOuve} autoHideDuration={3000} onClose={handleClose}>
+          <Alert severity='success' onClose={handleClose}>
+            <strong>{sikse}</strong>
+          </Alert>
+        </Snackbar>
+      )}
+      {ere && (
+        <Snackbar open={esOuve} autoHideDuration={3000} onClose={handleClose}>
+          <Alert severity='error' onClose={handleClose}>
+            <strong>Une erreur s’est produite</strong> : <i>{ere.mesaj}</i>
+          </Alert>
+        </Snackbar>
+      )}
+    </Container>
+  )
+}
+
+EkriKomante.propTypes = {
+  session: PropTypes.object.isRequired,
+  teks: PropTypes.object.isRequired,
+  meteEsKomanteOuve: PropTypes.func.isRequired
+}
+
+export default EkriKomante
+