127 lines
4.4 KiB
JavaScript
127 lines
4.4 KiB
JavaScript
'use client'
|
|
import PropTypes from 'prop-types'
|
|
import {useState} from 'react'
|
|
import Box from '@mui/material/Box'
|
|
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}) => (
|
|
<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 Konstitisyon({session, titres, articles}) {
|
|
const konstitisyon = formatKonstitisyon(titres, articles)
|
|
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, action) => {
|
|
setSelectedTitre({id: titreId, titre})
|
|
|
|
if (action === 'write') {
|
|
setIsWriteCommentsOpen(true)
|
|
} else if (action === 'read') {
|
|
console.log('read comment')
|
|
setIsReadCommentsOpen(true)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{error && <AuthAlert
|
|
isOpen={isErrorAlertOpen}
|
|
setIsOpen={setIsErrorAlertOpen}
|
|
message={error}
|
|
severity='error'
|
|
/>}
|
|
|
|
{success && <AuthAlert
|
|
isOpen={isSuccessAlertOpen}
|
|
setIsOpen={setIsSuccessAlertOpen}
|
|
message={success}
|
|
severity='success'
|
|
/>}
|
|
|
|
<Box>
|
|
{konstitisyon.map(({titreId, titre, articles}) => (
|
|
<Paper key={titreId} variant='outlined' sx={{p: 1, marginBlock: 2}} p={2} >
|
|
<Titre session={session} titreId={titreId} titre={titre} />
|
|
{articles.map(({id, numero, contenu}) => (
|
|
<Article key={id} session={session} articleId={id} numero={numero} contenu={contenu} />
|
|
))}
|
|
{session && (
|
|
<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={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>
|
|
</>
|
|
)
|
|
}
|
|
|
|
Konstitisyon.propTypes = {
|
|
session: PropTypes.object,
|
|
titres: PropTypes.object.isRequired,
|
|
articles: PropTypes.object.isRequired
|
|
}
|