119 lines
3.4 KiB
JavaScript
119 lines
3.4 KiB
JavaScript
'use client'
|
||
|
||
import {useRef} from 'react'
|
||
import PropTypes from 'prop-types'
|
||
import Button from '@mui/material/Button'
|
||
import TextField from '@mui/material/TextField'
|
||
import Dialog from '@mui/material/Dialog'
|
||
import DialogActions from '@mui/material/DialogActions'
|
||
import DialogContent from '@mui/material/DialogContent'
|
||
import DialogContentText from '@mui/material/DialogContentText'
|
||
import DialogTitle from '@mui/material/DialogTitle'
|
||
import {createItem, withToken} from '@directus/sdk'
|
||
import LogoutCountdown from '../session/logout-countdown.js'
|
||
import {directusClient} from '@/lib/directus.js'
|
||
|
||
function hasRestrictedChar(text) {
|
||
const regex = /[<>&"]/g
|
||
|
||
return Boolean(regex.test(text))
|
||
}
|
||
|
||
export default function HandleComments({session, selectedTitre, isOpen, setIsOpen, setError, setSuccess, setIsErrorAlertOpen, setIsSuccessAlertOpen}) {
|
||
const countdownRef = useRef()
|
||
|
||
const handleClose = () => {
|
||
setIsOpen(false)
|
||
}
|
||
|
||
const handleFormSubmit = async e => {
|
||
e.preventDefault()
|
||
|
||
const formData = new FormData(e.currentTarget)
|
||
const formJson = Object.fromEntries(formData.entries())
|
||
const {comment} = formJson
|
||
const formattedComment = comment.replaceAll('\'', '’')
|
||
|
||
try {
|
||
if (hasRestrictedChar(formattedComment)) {
|
||
setError('Le texte ne doit pas contenir certains caractères spéciaux : <, >, ", .')
|
||
setIsErrorAlertOpen(true)
|
||
|
||
return
|
||
}
|
||
|
||
await directusClient.request(withToken(
|
||
session.user.accessToken,
|
||
createItem('commentaires', {
|
||
text: formattedComment,
|
||
titre: selectedTitre,
|
||
status: 'draft'
|
||
})
|
||
))
|
||
|
||
setSuccess('Envoyé avec succès. Commentaire en attente de validation.')
|
||
setIsSuccessAlertOpen(true)
|
||
} catch (error) {
|
||
if (error?.errors[0]?.message === 'Token expired.') {
|
||
countdownRef.current.startCountdown()
|
||
} else {
|
||
console.log(error?.errors[0]?.message)
|
||
setError(error?.errors[0]?.message)
|
||
setIsErrorAlertOpen(true)
|
||
}
|
||
}
|
||
|
||
handleClose()
|
||
}
|
||
|
||
return (
|
||
<>
|
||
<Dialog
|
||
open={isOpen}
|
||
PaperProps={{
|
||
component: 'form',
|
||
onSubmit(event) {
|
||
handleFormSubmit(event)
|
||
},
|
||
}}
|
||
onClose={handleClose}
|
||
>
|
||
<DialogTitle>{selectedTitre.titre}</DialogTitle>
|
||
<DialogContent sx={{color: 'white'}}>
|
||
<DialogContentText sx={{color: 'white'}}>
|
||
Écrivez votre commentaire
|
||
</DialogContentText>
|
||
<TextField
|
||
autoFocus
|
||
required
|
||
multiline
|
||
fullWidth
|
||
mt={2}
|
||
rows={4}
|
||
id='comment'
|
||
name='comment'
|
||
label='Commentaire'
|
||
/>
|
||
</DialogContent>
|
||
<DialogActions>
|
||
<Button variant='contained' color='success' onClick={handleClose}>Annuler</Button>
|
||
<Button variant='contained' color='error' type='submit'>Valider</Button>
|
||
</DialogActions>
|
||
</Dialog>
|
||
<LogoutCountdown ref={countdownRef} setError={setError} setIsErrorAlertOpen={setIsErrorAlertOpen} />
|
||
</>
|
||
|
||
)
|
||
}
|
||
|
||
HandleComments.propTypes = {
|
||
session: PropTypes.object,
|
||
selectedTitre: PropTypes.object.isRequired,
|
||
isOpen: PropTypes.bool.isRequired,
|
||
setIsOpen: PropTypes.func.isRequired,
|
||
setError: PropTypes.func.isRequired,
|
||
setSuccess: PropTypes.func.isRequired,
|
||
setIsErrorAlertOpen: PropTypes.func.isRequired,
|
||
setIsSuccessAlertOpen: PropTypes.func.isRequired
|
||
}
|