From 219abf5c6ba86e505b3dd9d4e3ed1171fc4126db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= <c.pronzola@tuta.io>
Date: Mon, 20 May 2024 14:48:52 +0400
Subject: [PATCH] Add Edit component to Titre & Article

---
 components/konstitisyon/article.js | 14 ++++++++++----
 components/konstitisyon/index.js   |  7 ++++---
 components/konstitisyon/titre.js   | 10 ++++++++--
 3 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/components/konstitisyon/article.js b/components/konstitisyon/article.js
index b03995f..6bee531 100644
--- a/components/konstitisyon/article.js
+++ b/components/konstitisyon/article.js
@@ -1,15 +1,19 @@
 import PropTypes from 'prop-types'
 import Box from '@mui/material/Box'
 import Typography from '@mui/material/Typography'
+import Edit from './edit.js'
 
-export default function Article({numero, contenu}) {
+export default function Article({session, articleId, numero, contenu}) {
   const formattedContent = contenu.replaceAll('\n', '<br />')
 
   return (
     <Box textAlign='justify' p={0.5}>
-      {numero > 0 && (
-        <Typography marginBlock={1} fontWeight='bold'>Article {numero}</Typography>
-      )}
+      <Box sx={{display: 'flex', alignItems: 'center'}}>
+        <Typography marginBlock={1} fontWeight='bold'>{numero === 0 ? 'Article 1' : `Article ${numero}`}</Typography>
+        {session && (
+          <Edit session={session} article={articleId} />
+        )}
+      </Box>
 
       <Typography dangerouslySetInnerHTML={{__html: formattedContent}} />
     </Box>
@@ -17,6 +21,8 @@ export default function Article({numero, contenu}) {
 }
 
 Article.propTypes = {
+  session: PropTypes.object,
+  articleId: PropTypes.string.isRequired,
   numero: PropTypes.number,
   contenu: PropTypes.string.isRequired
 }
diff --git a/components/konstitisyon/index.js b/components/konstitisyon/index.js
index 622e50c..5e53ff8 100644
--- a/components/konstitisyon/index.js
+++ b/components/konstitisyon/index.js
@@ -5,16 +5,16 @@ import Titre from './titre.js'
 import Article from './article.js'
 import {formatKonstitisyon} from '@/lib/format.js'
 
-export default function Konstitisyon({titres, articles}) {
+export default function Konstitisyon({session, titres, articles}) {
   const konstitisyon = formatKonstitisyon(titres, articles)
 
   return (
     <Box>
       {konstitisyon.map(({titreId, titre, articles}) => (
         <Paper key={titreId} variant='outlined' sx={{p: 1, marginBlock: 2}} p={2} >
-          <Titre titre={titre} />
+          <Titre session={session} titreId={titreId} titre={titre} />
           {articles.map(({id, numero, contenu}) => (
-            <Article key={id} numero={numero} contenu={contenu} />
+            <Article key={id} session={session} articleId={id} numero={numero} contenu={contenu} />
           ))}
         </Paper>
       ))}
@@ -23,6 +23,7 @@ export default function Konstitisyon({titres, articles}) {
 }
 
 Konstitisyon.propTypes = {
+  session: PropTypes.object,
   titres: PropTypes.object.isRequired,
   articles: PropTypes.object.isRequired
 }
diff --git a/components/konstitisyon/titre.js b/components/konstitisyon/titre.js
index a3e9fb0..24f4c97 100644
--- a/components/konstitisyon/titre.js
+++ b/components/konstitisyon/titre.js
@@ -1,15 +1,21 @@
 import PropTypes from 'prop-types'
 import Box from '@mui/material/Box'
 import Typography from '@mui/material/Typography'
+import Edit from './edit.js'
 
-export default function Titre({titre}) {
+export default function Titre({session, titreId, titre}) {
   return (
-    <Box p={1} marginBlock={1}>
+    <Box p={1} marginBlock={1} sx={{display: 'flex', alignItems: 'center'}}>
       <Typography sx={{textDecoration: 'underline'}} fontWeight='bold'>{titre}</Typography>
+      {session && (
+        <Edit session={session} titre={titreId} />
+      )}
     </Box>
   )
 }
 
 Titre.propTypes = {
+  session: PropTypes.object,
+  titreId: PropTypes.string.isRequired,
   titre: PropTypes.string.isRequired
 }