Create Version

components/konstitisyon/edit/handle-edit.js

@@ -0,0 +1,93 @@
+'use client'
+
+import PropTypes from 'prop-types'
+import {useRef} from 'react'
+import FormHandler from '../form-handler.js'
+import {formatFormContent} from '@/lib/format.js'
+import {createVersion} from '@/lib/directus.js'
+
+export default function HandleEdit({
+  id,
+  session,
+  isOpen,
+  setIsOpen,
+  collection,
+  contenu,
+  setError,
+  setSuccess,
+  setIsSuccessAlertOpen,
+  setIsErrorAlertOpen
+}) {
+  const countdownRef = useRef()
+
+  const handleFormSubmit = async e => {
+    e.preventDefault()
+    console.log('e', e)
+
+    const formattedContent = formatFormContent(e.currentTarget)
+
+    const {accessToken, userId} = session.user
+
+    await createVersion({
+      accessToken,
+      userId,
+      collection,
+      id,
+      formattedContent,
+      setIsErrorAlertOpen,
+      setSuccess,
+      setIsSuccessAlertOpen,
+      setError,
+      countdownRef
+    })
+  }
+
+  if (collection === 'titres') {
+    return (
+      <FormHandler
+        handleFormSubmit={handleFormSubmit}
+        session={session}
+        isOpen={isOpen}
+        setIsOpen={setIsOpen}
+        collection={collection}
+        setError={setError}
+        setSuccess={setSuccess}
+        contenu={contenu}
+        title='Titre'
+        dialogText='Modifiez le titre'
+        label='titre'
+      />
+    )
+  }
+
+  if (collection === 'articles') {
+    return (
+      <FormHandler
+        handleFormSubmit={handleFormSubmit}
+        session={session}
+        isOpen={isOpen}
+        setIsOpen={setIsOpen}
+        collection={collection}
+        setError={setError}
+        setSuccess={setSuccess}
+        contenu={contenu}
+        title='Article'
+        dialogText='Modifiez l’article'
+        label='titre'
+      />
+    )
+  }
+}
+
+HandleEdit.propTypes = {
+  id: PropTypes.string.isRequired,
+  session: PropTypes.object.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  setIsOpen: PropTypes.func.isRequired,
+  setSuccess: PropTypes.func.isRequired,
+  setIsErrorAlertOpen: PropTypes.func.isRequired,
+  setIsSuccessAlertOpen: PropTypes.func.isRequired,
+  setError: PropTypes.func.isRequired,
+  contenu: PropTypes.string,
+  collection: PropTypes.oneOf(['titres', 'articles']).isRequired
+}

components/konstitisyon/edit/index.js

@@ -1,5 +1,6 @@
 'use client'
 
+import {useState} from 'react'
 import PropTypes from 'prop-types'
 import {useRouter} from 'next/navigation'
 import IconButton from '@mui/material/IconButton'
@@ -7,6 +8,8 @@ import {styled} from '@mui/material/styles'
 import Tooltip, {tooltipClasses} from '@mui/material/Tooltip'
 import ArticleIcon from '@mui/icons-material/Article'
 import TitleIcon from '@mui/icons-material/Title'
+import HandleEdit from './handle-edit.js'
+import AuthAlert from '@/components/auth-form/auth-alert.js'
 
 const LightTooltip = styled(({className, ...props}) => (
   <Tooltip {...props} classes={{popper: className}} />
@@ -21,17 +24,38 @@ const LightTooltip = styled(({className, ...props}) => (
 
 export default function Edit({id, session, contenu, collection}) {
   const router = useRouter()
+  const [isDialogOpen, setIsDialogOpen] = useState(false)
+  const [isErrorAlertOpen, setIsErrorAlertOpen] = useState(false)
+  const [isSuccessAlertOpen, setIsSuccessAlertOpen] = useState(false)
+  const [error, setError] = useState('')
+  const [success, setSuccess] = useState('')
 
   const handleClick = () => {
     console.log('🚀 ~ Edit ~ id:', id)
     console.log('🚀 ~ Edit ~ contenu:', contenu)
     console.log('🚀 ~ Edit ~ collection:', collection)
+    setIsDialogOpen(true)
     if (!session) {
       router.push('/login')
     }
   }
 
   return (
+    <>
+      {error && <AuthAlert
+        isOpen={isErrorAlertOpen}
+        setIsOpen={setIsErrorAlertOpen}
+        message={error}
+        severity='error'
+      />}
+
+      {success && <AuthAlert
+        isOpen={isSuccessAlertOpen}
+        setIsOpen={setIsSuccessAlertOpen}
+        message={success}
+        severity='success'
+      />}
+
       <IconButton size='large' aria-label='edit' onClick={handleClick}>
         {collection === 'titres' && (
           <LightTooltip title='Éditer un titre'>
@@ -45,6 +69,19 @@ export default function Edit({id, session, contenu, collection}) {
           </LightTooltip>
         )}
       </IconButton>
+      <HandleEdit
+        id={id}
+        session={session}
+        contenu={contenu}
+        collection={collection}
+        isOpen={isDialogOpen}
+        setIsOpen={setIsDialogOpen}
+        setError={setError}
+        setSuccess={setSuccess}
+        setIsErrorAlertOpen={setIsErrorAlertOpen}
+        setIsSuccessAlertOpen={setIsSuccessAlertOpen}
+      />
+    </>
   )
 }
 

components/konstitisyon/form-handler.js

@@ -23,7 +23,8 @@ export default function FormHandler({
   listItems,
   handleFormSubmit,
   countdownRef,
-  setSelectValue
+  setSelectValue,
+  contenu
 }) {
   const handleClose = () => {
     setIsOpen(false)
@@ -55,6 +56,7 @@ export default function FormHandler({
             autoFocus
             required
             fullWidth
+            value={contenu}
             multiline={Boolean(hasMultiline)}
             mt={2}
             rows={4}
@@ -85,5 +87,6 @@ FormHandler.propTypes = {
   title: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
   hasMultiline: PropTypes.bool,
-  listItems: PropTypes.array.isRequired
+  listItems: PropTypes.array.isRequired,
+  contenu: PropTypes.string
 }

lib/directus.js

@@ -1,6 +1,7 @@
+/* eslint-disable camelcase */
 import {
   createDirectus, rest, authentication, withToken, createItem,
-  readUser
+  readUser, createContentVersion, readContentVersions
 } from '@directus/sdk'
 import {signOut} from 'next-auth/react'
 import {hasRestrictedChar} from './format.js'
@@ -67,3 +68,61 @@ export async function handleSubmit({
     }
   }
 }
+
+export async function createVersion({
+  accessToken,
+  userId,
+  collection,
+  id,
+  content,
+  countdownRef,
+  setSuccess,
+  setError,
+  setIsErrorAlertOpen,
+  setIsSuccessAlertOpen
+}) {
+  try {
+    if (hasRestrictedChar(content)) {
+      throw new Error('Le texte ne doit pas contenir certains caractères spéciaux : <, >, ", .')
+    }
+
+    await handleUserStatus(accessToken, userId)
+
+    const versions = await directusClient.request(
+      withToken(
+        accessToken,
+        readContentVersions()
+      )
+    )
+
+    const versionsCount = versions.length + 1
+
+    const date = Date.now()
+    const name = `v${versionsCount}-${date}`
+    const key = `${id}-${date}`
+
+    await directusClient.request(
+      withToken(
+        accessToken,
+        createContentVersion({
+          key,
+          name,
+          item: id,
+          user_created: userId,
+          collection,
+        })
+      )
+    )
+
+    setSuccess(`Version créée avec succès : ${name}`)
+    setIsSuccessAlertOpen(true)
+  } catch (error) {
+    if (error?.errors[0]?.message === 'Token expired.') {
+      countdownRef.current.startCountdown()
+    } else {
+      console.log(error?.errors[0]?.message)
+      setError(error?.errors[0]?.message)
+      setIsErrorAlertOpen(true)
+    }
+  }
+}