Cédric FAMIBELLE-PRONZOLA
157 lines
3.8 KiB
JavaScript
157 lines
3.8 KiB
JavaScript
import {useCallback, useEffect, useState, forwardRef} from 'react'
|
||
import PropTypes from 'prop-types'
|
||
import axios from 'axios'
|
||
import {
|
||
TextField,
|
||
Container,
|
||
Button,
|
||
Snackbar,
|
||
LinearProgress,
|
||
Typography
|
||
} from '@mui/material'
|
||
import MuiAlert from '@mui/material/Alert'
|
||
|
||
const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:1337/api'
|
||
|
||
const Alert = forwardRef(function Alert(props, ref) {
|
||
return <MuiAlert ref={ref} elevation={6} variant='filled' {...props} />
|
||
})
|
||
function EkriKomante({session, paroleId, meteEsKomanteOuve}) {
|
||
const {jwt, user} = session
|
||
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 = async () => {
|
||
meteChaje(true)
|
||
const {kontni} = komante
|
||
|
||
if (kontni === '') {
|
||
meteEre({error: {message: 'Champ obligatoire'}})
|
||
meteChaje(false)
|
||
|
||
return
|
||
}
|
||
|
||
const headers = {
|
||
'content-type': 'application/json',
|
||
Authorization: `Bearer ${jwt}`
|
||
}
|
||
|
||
try {
|
||
await axios.post(`${API_URL}/commentaires`, {
|
||
data: {
|
||
contenu: kontni,
|
||
parole: paroleId,
|
||
user: {
|
||
id: user.id,
|
||
username: user.username,
|
||
email: user.email
|
||
},
|
||
datePublication: new Date()
|
||
}
|
||
}, {
|
||
headers
|
||
})
|
||
|
||
meteSikse('Commentaire envoyé avec succès. Il apparaîtra sur le site après validation.')
|
||
meteChaje(false)
|
||
} catch (error) {
|
||
meteEre(error?.response?.data)
|
||
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='*Obligatoire. 500 caractères maximum'
|
||
style={{marginTop: '1em'}}
|
||
id='komante'
|
||
label='Commentaire'
|
||
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={10_000} onClose={handleClose}>
|
||
<Alert severity='success' onClose={handleClose}>
|
||
<strong>{sikse}</strong>
|
||
</Alert>
|
||
</Snackbar>
|
||
)}
|
||
{ere && (
|
||
<Snackbar open={esOuve} autoHideDuration={10_000} onClose={handleClose}>
|
||
<Alert severity='error' onClose={handleClose}>
|
||
<strong>Une erreur s’est produite</strong> : <i>{ere?.error?.message}</i>
|
||
</Alert>
|
||
</Snackbar>
|
||
)}
|
||
</Container>
|
||
)
|
||
}
|
||
|
||
EkriKomante.propTypes = {
|
||
session: PropTypes.object.isRequired,
|
||
paroleId: PropTypes.number.isRequired,
|
||
meteEsKomanteOuve: PropTypes.func.isRequired
|
||
}
|
||
|
||
export default EkriKomante
|
||
|