refactor: Improve Create components

components/konstitisyon/create/create-form.js

@@ -1,6 +1,5 @@
 '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'
@@ -11,92 +10,25 @@ 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
+  listItems,
+  handleFormSubmit,
+  countdownRef,
+  setSelectValue
 }) {
-  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({
-      userId: session.user.userId,
-      accessToken: session.user.accessToken,
-      content: formattedContent,
-      collection,
-      requestObject,
-      setError,
-      setSuccess,
-      setIsErrorAlertOpen,
-      setIsSuccessAlertOpen,
-      countdownRef,
-    })
-
-    handleClose()
-  }
-
   return (
     <>
       <Dialog
@@ -142,16 +74,14 @@ export default function CreateForm({
 }
 
 CreateForm.propTypes = {
-  session: PropTypes.object,
-  selectedTitre: PropTypes.object,
   isOpen: PropTypes.bool.isRequired,
   setIsOpen: PropTypes.func.isRequired,
+  countdownRef: PropTypes.object,
   setError: PropTypes.func.isRequired,
-  setSuccess: PropTypes.func,
   setIsErrorAlertOpen: PropTypes.func.isRequired,
-  setIsSuccessAlertOpen: PropTypes.func,
+  handleFormSubmit: PropTypes.func.isRequired,
+  setSelectValue: PropTypes.func.isRequired,
   dialogText: PropTypes.string.isRequired,
-  collection: PropTypes.string.isRequired,
   title: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
   hasMultiline: PropTypes.bool,

components/konstitisyon/create/handle-create.js

@@ -1,5 +1,8 @@
 import PropTypes from 'prop-types'
+import {useEffect, useRef, useState} from 'react'
 import CreateForm from './create-form.js'
+import {handleSubmit} from '@/lib/directus.js'
+import {formatFormContent} from '@/lib/format.js'
 
 export default function HandleCreate({
   session,
@@ -13,6 +16,69 @@ export default function HandleCreate({
   collection,
   listItems
 }) {
+  const countdownRef = useRef()
+  const [selectValue, setSelectValue] = useState('')
+
+  useEffect(() => {
+    if (listItems && listItems.length > 0) {
+      setSelectValue(listItems[0].id)
+    }
+  }, [listItems])
+
+  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({
+      userId: session.user.userId,
+      accessToken: session.user.accessToken,
+      content: formattedContent,
+      collection,
+      requestObject,
+      setError,
+      setSuccess,
+      setIsErrorAlertOpen,
+      setIsSuccessAlertOpen,
+      countdownRef,
+    })
+
+    setIsOpen(false)
+  }
+
   if (collection === 'titres') {
     return (
       <CreateForm
@@ -24,6 +90,8 @@ export default function HandleCreate({
         setIsErrorAlertOpen={setIsErrorAlertOpen}
         setIsSuccessAlertOpen={setIsSuccessAlertOpen}
         hasMultiline={false}
+        handleFormSubmit={handleFormSubmit}
+        setSelectValue={setSelectValue}
         title='Titre'
         collection={collection}
         dialogText='Écrivez votre titre'
@@ -43,6 +111,8 @@ export default function HandleCreate({
         setSuccess={setSuccess}
         setIsErrorAlertOpen={setIsErrorAlertOpen}
         setIsSuccessAlertOpen={setIsSuccessAlertOpen}
+        handleFormSubmit={handleFormSubmit}
+        setSelectValue={setSelectValue}
         title={selectedTitre.titre}
         collection={collection}
         dialogText='Écrivez votre commentaire'
@@ -63,6 +133,8 @@ export default function HandleCreate({
         setIsSuccessAlertOpen={setIsSuccessAlertOpen}
         collection={collection}
         listItems={listItems}
+        handleFormSubmit={handleFormSubmit}
+        setSelectValue={setSelectValue}
         title='Article'
         dialogText='Écrivez votre article'
         label='article'