Create titres

app/page.js

@@ -6,7 +6,7 @@ import {auth} from '../auth.js'
 import Konstitisyon from '@/components/konstitisyon/index.js'
 import Footer from '@/components/footer.js'
 import Sign from '@/components/session/sign.js'
-import Create from '@/components/konstitisyon/create.js'
+import Create from '@/components/konstitisyon/create/index.js'
 
 const apiUrl = process.env.DIRECTUS_API_URL
 const appTitle = process.env.APP_TITLE
@@ -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 />
+          <Create session={session} />
         )}
         <Konstitisyon session={session} titres={titres} articles={articles} />
       </Container>

components/konstitisyon/create.js

@@ -1,33 +0,0 @@
-import Box from '@mui/material/Box'
-import SpeedDial from '@mui/material/SpeedDial'
-import SpeedDialIcon from '@mui/material/SpeedDialIcon'
-import SpeedDialAction from '@mui/material/SpeedDialAction'
-import ArticleIcon from '@mui/icons-material/Article'
-import TitleIcon from '@mui/icons-material/Title'
-
-const actions = [
-  {icon: <TitleIcon />, name: 'Créer un titre'},
-  {icon: <ArticleIcon />, name: 'Créer un article'}
-]
-
-export default function Create() {
-  return (
-    <Box sx={{height: 18, transform: 'translateZ(0px)', flexGrow: 1}}>
-      <SpeedDial
-        FabProps={{color: 'success'}}
-        direction='left'
-        ariaLabel='Créer un titre ou un article'
-        sx={{position: 'absolute', bottom: 18, right: 0}}
-        icon={<SpeedDialIcon />}
-      >
-        {actions.map(action => (
-          <SpeedDialAction
-            key={action.name}
-            icon={action.icon}
-            tooltipTitle={action.name}
-          />
-        ))}
-      </SpeedDial>
-    </Box>
-  )
-}

components/konstitisyon/create/create-titre.js

@@ -0,0 +1,14 @@
+'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

@@ -0,0 +1,41 @@
+import PropTypes from 'prop-types'
+import CreateTitre from './create-titre.js'
+
+export default function HandleCreate({
+  session,
+  isOpen,
+  setIsOpen,
+  setError,
+  setSuccess,
+  setIsErrorAlertOpen,
+  setIsSuccessAlertOpen,
+  collection
+}) {
+  if (collection === 'titres') {
+    return (
+      <CreateTitre
+        session={session}
+        isOpen={isOpen}
+        setIsOpen={setIsOpen}
+        setError={setError}
+        setSuccess={setSuccess}
+        setIsErrorAlertOpen={setIsErrorAlertOpen}
+        setIsSuccessAlertOpen={setIsSuccessAlertOpen}
+        title='Titre'
+        label='Écrivez votre titre'
+        hasMultiline={false}
+      />
+    )
+  }
+}
+
+HandleCreate.propTypes = {
+  session: PropTypes.object,
+  isOpen: PropTypes.bool.isRequired,
+  setIsOpen: PropTypes.func.isRequired,
+  setError: PropTypes.func.isRequired,
+  setSuccess: PropTypes.func.isRequired,
+  setIsErrorAlertOpen: PropTypes.func.isRequired,
+  setIsSuccessAlertOpen: PropTypes.func.isRequired,
+  collection: PropTypes.oneOf(['titres', 'articles']).isRequired
+}

components/konstitisyon/create/index.js

@@ -0,0 +1,84 @@
+'use client'
+
+import PropTypes from 'prop-types'
+import Box from '@mui/material/Box'
+import SpeedDial from '@mui/material/SpeedDial'
+import SpeedDialIcon from '@mui/material/SpeedDialIcon'
+import SpeedDialAction from '@mui/material/SpeedDialAction'
+import ArticleIcon from '@mui/icons-material/Article'
+import TitleIcon from '@mui/icons-material/Title'
+import {useState} from 'react'
+import HandleCreate from './handle-create.js'
+import AuthAlert from '@/components/auth-form/auth-alert.js'
+
+const actions = [
+  {id: 'titres', icon: <TitleIcon />, name: 'Créer un titre'},
+  {id: 'articles', icon: <ArticleIcon />, name: 'Créer un article'}
+]
+
+export default function Create({session}) {
+  const [collection, setCollection] = useState(null)
+  const [isDialogOpen, setIsDialogOpen] = useState(false)
+  const [isErrorAlertOpen, setIsErrorAlertOpen] = useState(false)
+  const [isSuccessAlertOpen, setIsSuccessAlertOpen] = useState(false)
+  const [error, setError] = useState('')
+  const [success, setSuccess] = useState('')
+
+  const handleTitresDialog = collection => {
+    setCollection(collection)
+    setIsDialogOpen(true)
+  }
+
+  return (
+    <>
+      {error && <AuthAlert
+        isOpen={isErrorAlertOpen}
+        setIsOpen={setIsErrorAlertOpen}
+        message={error}
+        severity='error'
+      />}
+
+      {success && <AuthAlert
+        isOpen={isSuccessAlertOpen}
+        setIsOpen={setIsSuccessAlertOpen}
+        message={success}
+        severity='success'
+      />}
+
+      <Box sx={{height: 18, transform: 'translateZ(0px)', flexGrow: 1}}>
+        <SpeedDial
+          FabProps={{color: 'success'}}
+          direction='left'
+          ariaLabel='Créer un titre ou un article'
+          sx={{position: 'absolute', bottom: 18, right: 0}}
+          icon={<SpeedDialIcon />}
+        >
+          {actions.map(({id, icon, name}) => (
+            <SpeedDialAction
+              key={name}
+              icon={icon}
+              tooltipTitle={name}
+              onClick={() => handleTitresDialog(id)}
+            />
+          ))}
+        </SpeedDial>
+      </Box>
+      {collection && (
+        <HandleCreate
+          session={session}
+          isOpen={isDialogOpen}
+          setIsOpen={setIsDialogOpen}
+          setError={setError}
+          setSuccess={setSuccess}
+          setIsErrorAlertOpen={setIsErrorAlertOpen}
+          setIsSuccessAlertOpen={setIsSuccessAlertOpen}
+          collection={collection}
+        />
+      )}
+    </>
+  )
+}
+
+Create.propTypes = {
+  session: PropTypes.object
+}

components/konstitisyon/forms/create-form.js

@@ -25,7 +25,8 @@ export default function CreateForm({
   dialogText,
   collection,
   title,
-  label
+  label,
+  hasMultiline = true
 }) {
   const countdownRef = useRef()
 
@@ -45,6 +46,11 @@ export default function CreateForm({
         titre: selectedTitre,
         status: 'draft',
       }
+    } else if (collection === 'titres') {
+      requestObject = {
+        contenu: formattedContent,
+        status: 'draft',
+      }
     }
 
     await handleSubmit({
@@ -80,8 +86,8 @@ export default function CreateForm({
           <TextField
             autoFocus
             required
-            multiline
             fullWidth
+            multiline={Boolean(hasMultiline)}
             mt={2}
             rows={4}
             id='content'
@@ -101,7 +107,7 @@ export default function CreateForm({
 
 CreateForm.propTypes = {
   session: PropTypes.object,
-  selectedTitre: PropTypes.object.isRequired,
+  selectedTitre: PropTypes.object,
   isOpen: PropTypes.bool.isRequired,
   setIsOpen: PropTypes.func.isRequired,
   setError: PropTypes.func.isRequired,
@@ -111,5 +117,6 @@ CreateForm.propTypes = {
   dialogText: PropTypes.string.isRequired,
   collection: PropTypes.string.isRequired,
   title: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired
+  label: PropTypes.string.isRequired,
+  hasMultiline: PropTypes.bool
 }