refactor: use HandleComments to read & write comments

components/konstitisyon/comments/handle-comments.js

@@ -0,0 +1,57 @@
+'use client'
+
+import PropTypes from 'prop-types'
+import WriteComment from './write-comment.js'
+import ReadComments from './read-comments.js'
+
+export default function HandleComments({
+  session,
+  selectedTitre,
+  isOpen,
+  setIsOpen,
+  setError,
+  setSuccess,
+  setIsErrorAlertOpen,
+  setIsSuccessAlertOpen,
+  operation
+}) {
+  if (operation === 'write') {
+    return (
+      <WriteComment
+        session={session}
+        selectedTitre={selectedTitre}
+        isOpen={isOpen}
+        setIsOpen={setIsOpen}
+        setError={setError}
+        setSuccess={setSuccess}
+        setIsErrorAlertOpen={setIsErrorAlertOpen}
+        setIsSuccessAlertOpen={setIsSuccessAlertOpen}
+      />
+    )
+  }
+
+  if (operation === 'read') {
+    return (
+      <ReadComments
+        session={session}
+        selectedTitre={selectedTitre}
+        isOpen={isOpen}
+        setIsOpen={setIsOpen}
+        setError={setError}
+        setIsErrorAlertOpen={setIsErrorAlertOpen}
+      />
+    )
+  }
+}
+
+HandleComments.propTypes = {
+  session: PropTypes.object,
+  selectedTitre: PropTypes.object.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  setIsOpen: PropTypes.func.isRequired,
+  setError: PropTypes.func.isRequired,
+  setSuccess: PropTypes.func.isRequired,
+  setIsErrorAlertOpen: PropTypes.func.isRequired,
+  setIsSuccessAlertOpen: PropTypes.func.isRequired,
+  operation: PropTypes.oneOf(['write', 'read']).isRequired
+}

components/konstitisyon/comments/read-comments.js

@@ -11,13 +11,13 @@ import Pagination from '@mui/material/Pagination'
 import Divider from '@mui/material/Divider'
 import Box from '@mui/material/Box'
 import {readItems, withToken} from '@directus/sdk'
-import LogoutCountdown from '../session/logout-countdown.js'
+import LogoutCountdown from '../../session/logout-countdown.js'
 import {directusClient} from '@/lib/directus.js'
 import {formatDate} from '@/lib/format.js'
 
 const commentsPerPage = process.env.NEXT_PUBLIC_COMMENTS_PER_PAGE || 2
 
-export default function CommentsList({session, selectedTitre, isOpen, setIsOpen, setError, setIsErrorAlertOpen}) {
+export default function ReadComments({session, selectedTitre, isOpen, setIsOpen, setError, setIsErrorAlertOpen}) {
   const countdownRef = useRef()
   const [comments, setComments] = useState([])
   const [page, setPage] = useState(1)
@@ -111,7 +111,7 @@ export default function CommentsList({session, selectedTitre, isOpen, setIsOpen,
   )
 }
 
-CommentsList.propTypes = {
+ReadComments.propTypes = {
   session: PropTypes.object,
   selectedTitre: PropTypes.object.isRequired,
   isOpen: PropTypes.bool.isRequired,

components/konstitisyon/comments/write-comment.js

@@ -10,7 +10,7 @@ import DialogContent from '@mui/material/DialogContent'
 import DialogContentText from '@mui/material/DialogContentText'
 import DialogTitle from '@mui/material/DialogTitle'
 import {createItem, withToken} from '@directus/sdk'
-import LogoutCountdown from '../session/logout-countdown.js'
+import LogoutCountdown from '../../session/logout-countdown.js'
 import {directusClient} from '@/lib/directus.js'
 
 function hasRestrictedChar(text) {
@@ -19,7 +19,7 @@ function hasRestrictedChar(text) {
   return Boolean(regex.test(text))
 }
 
-export default function HandleComments({session, selectedTitre, isOpen, setIsOpen, setError, setSuccess, setIsErrorAlertOpen, setIsSuccessAlertOpen}) {
+export default function WriteComment({session, selectedTitre, isOpen, setIsOpen, setError, setSuccess, setIsErrorAlertOpen, setIsSuccessAlertOpen}) {
   const countdownRef = useRef()
 
   const handleClose = () => {
@@ -102,11 +102,10 @@ export default function HandleComments({session, selectedTitre, isOpen, setIsOpe
       </Dialog>
       <LogoutCountdown ref={countdownRef} setError={setError} setIsErrorAlertOpen={setIsErrorAlertOpen} />
     </>
-
   )
 }
 
-HandleComments.propTypes = {
+WriteComment.propTypes = {
   session: PropTypes.object,
   selectedTitre: PropTypes.object.isRequired,
   isOpen: PropTypes.bool.isRequired,

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>
     </>