refactor: improve HandleCreate

components/konstitisyon/create/create-form.js

@@ -0,0 +1,122 @@
+'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 LogoutCountdown from '../../session/logout-countdown.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
+}) {
+  const countdownRef = useRef()
+
+  const handleClose = () => {
+    setIsOpen(false)
+  }
+
+  const handleFormSubmit = async e => {
+    e.preventDefault()
+    let requestObject
+
+    const formattedContent = formatFormContent(e.currentTarget)
+
+    if (collection === 'commentaires') {
+      requestObject = {
+        text: formattedContent,
+        titre: selectedTitre,
+        status: 'draft',
+      }
+    } else if (collection === 'titres') {
+      requestObject = {
+        contenu: formattedContent,
+        status: 'draft',
+      }
+    }
+
+    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>
+          <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
+}

components/konstitisyon/create/create-titre.js

@@ -1,14 +0,0 @@
-'use client'
-
-import CreateForm from '../forms/create-form.js'
-
-export default function CreateTitre(props) {
-  return (
-    <CreateForm
-      {...props}
-      collection='titres'
-      dialogText='Écrivez votre titre'
-      label='titre'
-    />
-  )
-}

components/konstitisyon/create/handle-create.js

@@ -1,8 +1,9 @@
 import PropTypes from 'prop-types'
-import CreateTitre from './create-titre.js'
+import CreateForm from './create-form.js'
 
 export default function HandleCreate({
   session,
+  selectedTitre,
   isOpen,
   setIsOpen,
   setError,
@@ -13,7 +14,7 @@ export default function HandleCreate({
 }) {
   if (collection === 'titres') {
     return (
-      <CreateTitre
+      <CreateForm
         session={session}
         isOpen={isOpen}
         setIsOpen={setIsOpen}
@@ -21,9 +22,30 @@ export default function HandleCreate({
         setSuccess={setSuccess}
         setIsErrorAlertOpen={setIsErrorAlertOpen}
         setIsSuccessAlertOpen={setIsSuccessAlertOpen}
-        title='Titre'
-        label='Écrivez votre titre'
         hasMultiline={false}
+        title='Titre'
+        collection={collection}
+        dialogText='Écrivez votre titre'
+        label='titre'
+      />
+    )
+  }
+
+  if (collection === 'commentaires') {
+    return (
+      <CreateForm
+        session={session}
+        selectedTitre={selectedTitre}
+        isOpen={isOpen}
+        setIsOpen={setIsOpen}
+        setError={setError}
+        setSuccess={setSuccess}
+        setIsErrorAlertOpen={setIsErrorAlertOpen}
+        setIsSuccessAlertOpen={setIsSuccessAlertOpen}
+        title={selectedTitre.titre}
+        collection={collection}
+        dialogText='Écrivez votre commentaire'
+        label='commentaire'
       />
     )
   }
@@ -31,6 +53,7 @@ export default function HandleCreate({
 
 HandleCreate.propTypes = {
   session: PropTypes.object,
+  selectedTitre: PropTypes.object,
   isOpen: PropTypes.bool.isRequired,
   setIsOpen: PropTypes.func.isRequired,
   setError: PropTypes.func.isRequired,