From 1e587b5d6b1b1e5705505fcd74baf503fb965854 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= Date: Wed, 19 Jun 2024 14:44:49 +0400 Subject: [PATCH] refactor: use HandleComments to read & write comments --- .../konstitisyon/comments/handle-comments.js | 57 +++++++++++++++++++ .../read-comments.js} | 6 +- .../write-comment.js} | 7 +-- components/konstitisyon/index.js | 49 ++++++---------- 4 files changed, 79 insertions(+), 40 deletions(-) create mode 100644 components/konstitisyon/comments/handle-comments.js rename components/konstitisyon/{comments-list.js => comments/read-comments.js} (96%) rename components/konstitisyon/{handle-comments.js => comments/write-comment.js} (93%) diff --git a/components/konstitisyon/comments/handle-comments.js b/components/konstitisyon/comments/handle-comments.js new file mode 100644 index 0000000..949e3e9 --- /dev/null +++ b/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 ( + + ) + } + + if (operation === 'read') { + return ( + + ) + } +} + +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 +} diff --git a/components/konstitisyon/comments-list.js b/components/konstitisyon/comments/read-comments.js similarity index 96% rename from components/konstitisyon/comments-list.js rename to components/konstitisyon/comments/read-comments.js index 558caab..798c5b0 100644 --- a/components/konstitisyon/comments-list.js +++ b/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, diff --git a/components/konstitisyon/handle-comments.js b/components/konstitisyon/comments/write-comment.js similarity index 93% rename from components/konstitisyon/handle-comments.js rename to components/konstitisyon/comments/write-comment.js index 6252276..641cc9f 100644 --- a/components/konstitisyon/handle-comments.js +++ b/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 - ) } -HandleComments.propTypes = { +WriteComment.propTypes = { session: PropTypes.object, selectedTitre: PropTypes.object.isRequired, isOpen: PropTypes.bool.isRequired, diff --git a/components/konstitisyon/index.js b/components/konstitisyon/index.js index 5b329a8..82d1778 100644 --- a/components/konstitisyon/index.js +++ b/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}) { ))} {selectedTitre && ( - <> - - - + )}