konstitisyon.nu/components/konstitisyon/handle-comments.js

'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
}