konstitisyon.nu/components/konstitisyon/create/create-form.js

'use client'

import {useRef, useState, useEffect} 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 LogoutCountdown from '../../session/logout-countdown.js'
import ListItems from './list-items.js'
import {handleSubmit} from '@/lib/directus.js'
import {formatFormContent} from '@/lib/format.js'

export default function CreateForm({
  session,
  selectedTitre,
  isOpen,
  setIsOpen,
  setError,
  setSuccess,
  setIsErrorAlertOpen,
  setIsSuccessAlertOpen,
  dialogText,
  collection,
  title,
  label,
  hasMultiline = true,
  listItems
}) {
  const countdownRef = useRef()
  const [selectValue, setSelectValue] = useState('')

  useEffect(() => {
    if (listItems && listItems.length > 0) {
      setSelectValue(listItems[0].id)
    }
  }, [listItems])

  const handleClose = () => {
    setIsOpen(false)
  }

  const handleFormSubmit = async e => {
    e.preventDefault()
    let requestObject

    const formattedContent = formatFormContent(e.currentTarget)

    switch (collection) {
      case 'commentaires': {
        requestObject = {
          contenu: formattedContent,
          titre: selectedTitre,
          status: 'draft',
        }

        break
      }

      case 'titres': {
        requestObject = {
          contenu: formattedContent,
          status: 'draft',
        }

        break
      }

      case 'articles': {
        requestObject = {
          contenu: formattedContent,
          titre: selectValue,
          status: 'draft',
        }

        break
      }
    // No default
    }

    await handleSubmit({
      accessToken: session.user.accessToken,
      content: formattedContent,
      collection,
      requestObject,
      setError,
      setSuccess,
      setIsErrorAlertOpen,
      setIsSuccessAlertOpen,
      countdownRef,
    })

    handleClose()
  }

  return (
    <>
      <Dialog
        open={isOpen}
        PaperProps={{
          component: 'form',
          onSubmit: handleFormSubmit,
        }}
        onClose={handleClose}
      >
        <DialogTitle>{title}</DialogTitle>
        <DialogContent sx={{color: 'white'}}>
          <DialogContentText sx={{color: 'white'}}>
            {dialogText}
          </DialogContentText>
          {listItems && listItems.length > 0 && (
            <ListItems
              items={listItems}
              selectLabel='Titre associé *'
              setSelectValue={setSelectValue}
            />
          )}
          <TextField
            autoFocus
            required
            fullWidth
            multiline={Boolean(hasMultiline)}
            mt={2}
            rows={4}
            id='content'
            name='content'
            label={label}
          />
        </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} />
    </>
  )
}

CreateForm.propTypes = {
  session: PropTypes.object,
  selectedTitre: PropTypes.object,
  isOpen: PropTypes.bool.isRequired,
  setIsOpen: PropTypes.func.isRequired,
  setError: PropTypes.func.isRequired,
  setSuccess: PropTypes.func,
  setIsErrorAlertOpen: PropTypes.func.isRequired,
  setIsSuccessAlertOpen: PropTypes.func,
  dialogText: PropTypes.string.isRequired,
  collection: PropTypes.string.isRequired,
  title: PropTypes.string.isRequired,
  label: PropTypes.string.isRequired,
  hasMultiline: PropTypes.bool,
  listItems: PropTypes.array.isRequired
}