refactor: Improve edit components

components/konstitisyon/edit/article.js

@@ -0,0 +1,28 @@
+import PropTypes from 'prop-types'
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+import Edit from './index.js'
+
+export default function Article({session, articleId, numero, contenu}) {
+  const formattedContent = contenu.replaceAll('\n', '<br />')
+
+  return (
+    <Box textAlign='justify' p={0.5}>
+      <Box sx={{display: 'flex', alignItems: 'center'}}>
+        <Typography marginBlock={1} fontWeight='bold'>{!numero || numero === 0 ? 'Article ...' : `Article ${numero}`}</Typography>
+        {session && (
+          <Edit session={session} id={articleId} contenu={contenu} collection='articles' />
+        )}
+      </Box>
+
+      <Typography dangerouslySetInnerHTML={{__html: formattedContent}} />
+    </Box>
+  )
+}
+
+Article.propTypes = {
+  session: PropTypes.object,
+  articleId: PropTypes.string.isRequired,
+  numero: PropTypes.number,
+  contenu: PropTypes.string.isRequired
+}

components/konstitisyon/edit/index.js

@@ -0,0 +1,56 @@
+'use client'
+
+import PropTypes from 'prop-types'
+import {useRouter} from 'next/navigation'
+import IconButton from '@mui/material/IconButton'
+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'
+
+const LightTooltip = styled(({className, ...props}) => (
+  <Tooltip {...props} classes={{popper: className}} />
+))(({theme}) => ({
+  [`& .${tooltipClasses.tooltip}`]: {
+    backgroundColor: theme.palette.common.white,
+    color: 'rgba(0, 0, 0, 0.87)',
+    boxShadow: theme.shadows[1],
+    fontSize: 15,
+  },
+}))
+
+export default function Edit({id, session, contenu, collection}) {
+  const router = useRouter()
+
+  const handleClick = () => {
+    console.log('🚀 ~ Edit ~ id:', id)
+    console.log('🚀 ~ Edit ~ contenu:', contenu)
+    console.log('🚀 ~ Edit ~ collection:', collection)
+    if (!session) {
+      router.push('/login')
+    }
+  }
+
+  return (
+    <IconButton size='large' aria-label='edit' onClick={handleClick}>
+      {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>
+      )}
+    </IconButton>
+  )
+}
+
+Edit.propTypes = {
+  id: PropTypes.string.isRequired,
+  session: PropTypes.object.isRequired,
+  contenu: PropTypes.string.isRequired,
+  collection: PropTypes.oneOf(['titres', 'articles']).isRequired
+}

components/konstitisyon/edit/titre.js

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