refactor: use HandleComments to read & write comments

components/konstitisyon/index.js

@@ -11,8 +11,7 @@ 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 HandleComments from './comments/handle-comments.js'
 import {formatKonstitisyon} from '@/lib/format.js'
 
 const LightTooltip = styled(({className, ...props}) => (
@@ -28,8 +27,8 @@ const LightTooltip = styled(({className, ...props}) => (
 
 export default function Konstitisyon({session, titres, articles}) {
   const konstitisyon = formatKonstitisyon(titres, articles)
-  const [isWriteCommentsOpen, setIsWriteCommentsOpen] = useState(false)
-  const [isReadCommentsOpen, setIsReadCommentsOpen] = useState(false)
+  const [isDialogOpen, setIsDialogOpen] = useState(false)
+  const [operation, setOperation] = useState(null)
   const [isErrorAlertOpen, setIsErrorAlertOpen] = useState(false)
   const [isSuccessAlertOpen, setIsSuccessAlertOpen] = useState(false)
   const [selectedTitre, setSelectedTitre] = useState(null)
@@ -38,13 +37,8 @@ export default function Konstitisyon({session, titres, articles}) {
 
   const handleCommentsDialog = (titreId, titre, action) => {
     setSelectedTitre({id: titreId, titre})
-
-    if (action === 'write') {
-      setIsWriteCommentsOpen(true)
-    } else if (action === 'read') {
-      console.log('read comment')
-      setIsReadCommentsOpen(true)
-    }
+    setOperation(action)
+    setIsDialogOpen(true)
   }
 
   return (
@@ -91,28 +85,17 @@ export default function Konstitisyon({session, titres, articles}) {
           </Paper>
         ))}
         {selectedTitre && (
-          <>
-            <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}
-            />
-          </>
+          <HandleComments
+            session={session}
+            selectedTitre={selectedTitre}
+            isOpen={isDialogOpen}
+            setIsOpen={setIsDialogOpen}
+            setError={setError}
+            setSuccess={setSuccess}
+            setIsErrorAlertOpen={setIsErrorAlertOpen}
+            setIsSuccessAlertOpen={setIsSuccessAlertOpen}
+            operation={operation}
+          />
         )}
       </Box>
     </>