Add 'articles' collection to create operation

app/page.js

@@ -59,7 +59,7 @@ export default async function Page() {
         <Typography mt={1} component='h1' textAlign='center' variant='h4'>{appTitle.toUpperCase()}</Typography>
         <Sign session={session} />
         {session && (
-          <Create session={session} />
+          <Create session={session} titres={titres} />
         )}
         <Konstitisyon session={session} titres={titres} articles={articles} />
       </Container>

components/konstitisyon/create/create-form.js

@@ -1,6 +1,6 @@
 'use client'
 
-import {useRef} from 'react'
+import {useRef, useState, useEffect} from 'react'
 import PropTypes from 'prop-types'
 import Button from '@mui/material/Button'
 import TextField from '@mui/material/TextField'
@@ -10,6 +10,7 @@ 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'
 
@@ -26,9 +27,17 @@ export default function CreateForm({
   collection,
   title,
   label,
-  hasMultiline = true
+  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)
@@ -40,17 +49,36 @@ export default function CreateForm({
 
     const formattedContent = formatFormContent(e.currentTarget)
 
-    if (collection === 'commentaires') {
+    switch (collection) {
+      case 'commentaires': {
         requestObject = {
           text: formattedContent,
           titre: selectedTitre,
           status: 'draft',
         }
-    } else if (collection === 'titres') {
+
+        break
+      }
+
+      case 'titres': {
         requestObject = {
           contenu: formattedContent,
           status: 'draft',
         }
+
+        break
+      }
+
+      case 'articles': {
+        requestObject = {
+          contenu: formattedContent,
+          titre: selectValue,
+          status: 'draft',
+        }
+
+        break
+      }
+    // No default
     }
 
     await handleSubmit({
@@ -83,6 +111,13 @@ export default function CreateForm({
           <DialogContentText sx={{color: 'white'}}>
             {dialogText}
           </DialogContentText>
+          {listItems && listItems.length > 0 && (
+            <ListItems
+              items={listItems}
+              selectLabel='Titre associé *'
+              setSelectValue={setSelectValue}
+            />
+          )}
           <TextField
             autoFocus
             required
@@ -118,5 +153,6 @@ CreateForm.propTypes = {
   collection: PropTypes.string.isRequired,
   title: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
-  hasMultiline: PropTypes.bool
+  hasMultiline: PropTypes.bool,
+  listItems: PropTypes.array.isRequired
 }

components/konstitisyon/create/handle-create.js

@@ -10,7 +10,8 @@ export default function HandleCreate({
   setSuccess,
   setIsErrorAlertOpen,
   setIsSuccessAlertOpen,
-  collection
+  collection,
+  listItems
 }) {
   if (collection === 'titres') {
     return (
@@ -49,6 +50,25 @@ export default function HandleCreate({
       />
     )
   }
+
+  if (collection === 'articles') {
+    return (
+      <CreateForm
+        session={session}
+        isOpen={isOpen}
+        setIsOpen={setIsOpen}
+        setError={setError}
+        setSuccess={setSuccess}
+        setIsErrorAlertOpen={setIsErrorAlertOpen}
+        setIsSuccessAlertOpen={setIsSuccessAlertOpen}
+        collection={collection}
+        listItems={listItems}
+        title='Article'
+        dialogText='Écrivez votre article'
+        label='article'
+      />
+    )
+  }
 }
 
 HandleCreate.propTypes = {
@@ -60,5 +80,6 @@ HandleCreate.propTypes = {
   setSuccess: PropTypes.func.isRequired,
   setIsErrorAlertOpen: PropTypes.func.isRequired,
   setIsSuccessAlertOpen: PropTypes.func.isRequired,
-  collection: PropTypes.oneOf(['titres', 'articles']).isRequired
+  collection: PropTypes.oneOf(['titres', 'articles']).isRequired,
+  listItems: PropTypes.array
 }

components/konstitisyon/create/index.js

@@ -16,7 +16,7 @@ const actions = [
   {id: 'articles', icon: <ArticleIcon />, name: 'Créer un article'}
 ]
 
-export default function Create({session}) {
+export default function Create({session, titres}) {
   const [collection, setCollection] = useState(null)
   const [isDialogOpen, setIsDialogOpen] = useState(false)
   const [isErrorAlertOpen, setIsErrorAlertOpen] = useState(false)
@@ -73,6 +73,7 @@ export default function Create({session}) {
           setIsErrorAlertOpen={setIsErrorAlertOpen}
           setIsSuccessAlertOpen={setIsSuccessAlertOpen}
           collection={collection}
+          listItems={titres}
         />
       )}
     </>
@@ -80,5 +81,6 @@ export default function Create({session}) {
 }
 
 Create.propTypes = {
-  session: PropTypes.object
+  session: PropTypes.object,
+  titres: PropTypes.array
 }