Create CommentsList component

components/konstitisyon/index.js

@@ -6,11 +6,13 @@ import Paper from '@mui/material/Paper'
 import {styled} from '@mui/material/styles'
 import IconButton from '@mui/material/IconButton'
 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 HandleComments from './handle-comments.js'
+import CommentsList from './comments-list.js'
 import {formatKonstitisyon} from '@/lib/format.js'
 
 const LightTooltip = styled(({className, ...props}) => (
@@ -26,16 +28,23 @@ const LightTooltip = styled(({className, ...props}) => (
 
 export default function Konstitisyon({session, titres, articles}) {
   const konstitisyon = formatKonstitisyon(titres, articles)
-  const [isOpen, setIsOpen] = useState(false)
+  const [isWriteCommentsOpen, setIsWriteCommentsOpen] = useState(false)
+  const [isReadCommentsOpen, setIsReadCommentsOpen] = useState(false)
   const [isErrorAlertOpen, setIsErrorAlertOpen] = useState(false)
   const [isSuccessAlertOpen, setIsSuccessAlertOpen] = useState(false)
   const [selectedTitre, setSelectedTitre] = useState(null)
   const [error, setError] = useState('')
   const [success, setSuccess] = useState('')
 
-  const handleCommentsDialog = (titreId, titre) => {
+  const handleCommentsDialog = (titreId, titre, action) => {
     setSelectedTitre({id: titreId, titre})
-    setIsOpen(true)
+
+    if (action === 'write') {
+      setIsWriteCommentsOpen(true)
+    } else if (action === 'read') {
+      console.log('read comment')
+      setIsReadCommentsOpen(true)
+    }
   }
 
   return (
@@ -62,27 +71,48 @@ export default function Konstitisyon({session, titres, articles}) {
               <Article key={id} session={session} articleId={id} numero={numero} contenu={contenu} />
             ))}
             {session && (
-              <Box sx={{textAlign: 'right'}}>
-                <IconButton size='large' aria-label='commenter' onClick={() => handleCommentsDialog(titreId, titre)}>
-                  <LightTooltip title='Commenter'>
-                    <AddCommentIcon color='warning' fontSize='inherit' />
-                  </LightTooltip>
-                </IconButton>
+              <Box sx={{display: 'flex', justifyContent: 'space-between'}}>
+                <Box>
+                  <IconButton size='large' aria-label='Voir les commentaires' onClick={() => handleCommentsDialog(titreId, titre, 'read')}>
+                    <LightTooltip title='Voir les commentaires'>
+                      <CommentIcon color='warning' fontSize='inherit' />
+                    </LightTooltip>
+                  </IconButton>
+                </Box>
+                <Box>
+                  <IconButton size='large' aria-label='commenter' onClick={() => handleCommentsDialog(titreId, titre, 'write')}>
+                    <LightTooltip title='Commenter'>
+                      <AddCommentIcon color='warning' fontSize='inherit' />
+                    </LightTooltip>
+                  </IconButton>
+                </Box>
               </Box>
             )}
           </Paper>
         ))}
         {selectedTitre && (
-          <HandleComments
-            session={session}
-            selectedTitre={selectedTitre}
-            isOpen={isOpen}
-            setIsOpen={setIsOpen}
-            setError={setError}
-            setSuccess={setSuccess}
-            setIsErrorAlertOpen={setIsErrorAlertOpen}
-            setIsSuccessAlertOpen={setIsSuccessAlertOpen}
-          />
+          <>
+            <HandleComments
+              session={session}
+              selectedTitre={selectedTitre}
+              isOpen={isWriteCommentsOpen}
+              setIsOpen={setIsWriteCommentsOpen}
+              setError={setError}
+              setSuccess={setSuccess}
+              setIsErrorAlertOpen={setIsErrorAlertOpen}
+              setIsSuccessAlertOpen={setIsSuccessAlertOpen}
+            />
+            <CommentsList
+              session={session}
+              selectedTitre={selectedTitre}
+              isOpen={isReadCommentsOpen}
+              setIsOpen={setIsReadCommentsOpen}
+              setError={setError}
+              setSuccess={setSuccess}
+              setIsErrorAlertOpen={setIsErrorAlertOpen}
+              setIsSuccessAlertOpen={setIsSuccessAlertOpen}
+            />
+          </>
         )}
       </Box>
     </>