refactor: Improve edit components

components/konstitisyon/edit/article.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import Box from '@mui/material/Box'
 import Typography from '@mui/material/Typography'
-import Edit from './edit.js'
+import Edit from './index.js'
 
 export default function Article({session, articleId, numero, contenu}) {
   const formattedContent = contenu.replaceAll('\n', '<br />')
@@ -11,7 +11,7 @@ export default function Article({session, articleId, numero, contenu}) {
       <Box sx={{display: 'flex', alignItems: 'center'}}>
         <Typography marginBlock={1} fontWeight='bold'>{!numero || numero === 0 ? 'Article ...' : `Article ${numero}`}</Typography>
         {session && (
-          <Edit session={session} article={articleId} />
+          <Edit session={session} id={articleId} contenu={contenu} collection='articles' />
         )}
       </Box>
 

components/konstitisyon/edit/index.js

@@ -19,12 +19,13 @@ const LightTooltip = styled(({className, ...props}) => (
   },
 }))
 
-export default function Edit({titre, article, session}) {
+export default function Edit({id, session, contenu, collection}) {
   const router = useRouter()
 
   const handleClick = () => {
-    console.log('titre', titre)
-    console.log('article', article)
+    console.log('🚀 ~ Edit ~ id:', id)
+    console.log('🚀 ~ Edit ~ contenu:', contenu)
+    console.log('🚀 ~ Edit ~ collection:', collection)
     if (!session) {
       router.push('/login')
     }
@@ -32,11 +33,13 @@ export default function Edit({titre, article, session}) {
 
   return (
     <IconButton size='large' aria-label='edit' onClick={handleClick}>
-      {titre ? (
+      {collection === 'titres' && (
         <LightTooltip title='Éditer un titre'>
           <TitleIcon color='warning' fontSize='inherit' />
         </LightTooltip>
-      ) : (
+      )}
+
+      {collection === 'articles' && (
         <LightTooltip title='Éditer un article'>
           <ArticleIcon color='warning' fontSize='inherit' />
         </LightTooltip>
@@ -46,7 +49,8 @@ export default function Edit({titre, article, session}) {
 }
 
 Edit.propTypes = {
-  titre: PropTypes.string,
-  article: PropTypes.string,
-  session: PropTypes.object.isRequired
+  id: PropTypes.string.isRequired,
+  session: PropTypes.object.isRequired,
+  contenu: PropTypes.string.isRequired,
+  collection: PropTypes.oneOf(['titres', 'articles']).isRequired
 }

components/konstitisyon/edit/titre.js

@@ -1,14 +1,14 @@
 import PropTypes from 'prop-types'
 import Box from '@mui/material/Box'
 import Typography from '@mui/material/Typography'
-import Edit from './edit.js'
+import Edit from './index.js'
 
-export default function Titre({session, titreId, titre}) {
+export default function Titre({session, titreId, contenu}) {
   return (
     <Box p={1} marginBlock={1} sx={{display: 'flex', alignItems: 'center'}}>
-      <Typography sx={{textDecoration: 'underline'}} fontWeight='bold'>{titre}</Typography>
+      <Typography sx={{textDecoration: 'underline'}} fontWeight='bold'>{contenu}</Typography>
       {session && (
-        <Edit session={session} titre={titreId} />
+        <Edit session={session} id={titreId} contenu={contenu} collection='titres' />
       )}
     </Box>
   )
@@ -17,5 +17,5 @@ export default function Titre({session, titreId, titre}) {
 Titre.propTypes = {
   session: PropTypes.object,
   titreId: PropTypes.string.isRequired,
-  titre: PropTypes.string.isRequired
+  contenu: PropTypes.string.isRequired
 }

components/konstitisyon/index.js

@@ -9,8 +9,8 @@ import AddCommentIcon from '@mui/icons-material/AddComment'
 import CommentIcon from '@mui/icons-material/Comment'
 import Tooltip, {tooltipClasses} from '@mui/material/Tooltip'
 import AuthAlert from '../auth-form/auth-alert.js'
-import Titre from './titre.js'
-import Article from './article.js'
+import Titre from './edit/titre.js'
+import Article from './edit/article.js'
 import HandleCreate from './create/handle-create.js'
 import ListComments from './list-comments.js'
 import {formatKonstitisyon} from '@/lib/format.js'
@@ -61,7 +61,7 @@ export default function Konstitisyon({session, titres, articles}) {
       <Box>
         {konstitisyon.map(({titreId, titre, articles}) => (
           <Paper key={titreId} variant='outlined' sx={{p: 1, marginBlock: 2}} p={2} >
-            <Titre session={session} titreId={titreId} titre={titre} />
+            <Titre session={session} titreId={titreId} contenu={titre} />
             {articles.map(({id, numero, contenu}) => (
               <Article key={id} session={session} articleId={id} numero={numero} contenu={contenu} />
             ))}