Cédric FAMIBELLE-PRONZOLA
152 lines
3.6 KiB
JavaScript
152 lines
3.6 KiB
JavaScript
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
|
||
|