112 lines
3.6 KiB
JavaScript
112 lines
3.6 KiB
JavaScript
/* eslint-disable camelcase */
|
|
import React, {useEffect, useState} from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import List from '@mui/material/List'
|
|
import ListItem from '@mui/material/ListItem'
|
|
import ListItemText from '@mui/material/ListItemText'
|
|
import DialogTitle from '@mui/material/DialogTitle'
|
|
import Dialog from '@mui/material/Dialog'
|
|
import Typography from '@mui/material/Typography'
|
|
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 {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}) {
|
|
const [comments, setComments] = useState([])
|
|
const [page, setPage] = useState(1)
|
|
|
|
const pageCount = Math.ceil(comments.length / commentsPerPage)
|
|
|
|
const startIndex = (page - 1) * commentsPerPage
|
|
const selectedComments = comments.slice(startIndex, startIndex + commentsPerPage)
|
|
|
|
useEffect(() => {
|
|
async function fetchComments() {
|
|
try {
|
|
const result = await directusClient.request(withToken(
|
|
session.user.accessToken,
|
|
readItems('commentaires', {
|
|
filter: {
|
|
titre: selectedTitre.id
|
|
},
|
|
sort: '-date_created'
|
|
}))
|
|
)
|
|
|
|
setComments(result)
|
|
} catch (error) {
|
|
console.error('Failed to fetch comments', error)
|
|
setError(error.message)
|
|
setIsErrorAlertOpen(true)
|
|
}
|
|
}
|
|
|
|
if (isOpen) {
|
|
fetchComments()
|
|
}
|
|
}, [isOpen, selectedTitre, setError, setIsErrorAlertOpen, session])
|
|
|
|
const handleClose = () => {
|
|
setIsOpen(false)
|
|
}
|
|
|
|
const handleChange = (event, value) => {
|
|
setPage(value)
|
|
}
|
|
|
|
return (
|
|
<Dialog open={isOpen} onClose={handleClose}>
|
|
<DialogTitle>Commentaires</DialogTitle>
|
|
<List sx={{width: '100%', maxWidth: 360, bgcolor: 'background.paper'}}>
|
|
{selectedComments && selectedComments.length > 0 ? selectedComments.map(({id, date_created, text, user_created}) => (
|
|
<React.Fragment key={id}>
|
|
<ListItem alignItems='flex-start'>
|
|
<ListItemText
|
|
primary={
|
|
<Typography sx={{textDecoration: 'underline'}} component='span' variant='body2'>
|
|
{user_created.split('-')[0]}
|
|
</Typography>
|
|
}
|
|
secondary={
|
|
<>
|
|
<Typography
|
|
sx={{display: 'inline'}}
|
|
component='span'
|
|
variant='body2'
|
|
color='text.primary'
|
|
>
|
|
{text}
|
|
</Typography>
|
|
{` — ${formatDate(date_created, 'PPPPpppp')}`}
|
|
</>
|
|
}
|
|
/>
|
|
</ListItem>
|
|
|
|
<Divider component='li' />
|
|
</React.Fragment>
|
|
)) : (
|
|
<Typography textAlign='center'>Aucun commentaire</Typography>
|
|
)}
|
|
</List>
|
|
<Box sx={{display: 'flex', justifyContent: 'center'}}>
|
|
<Pagination size='small' sx={{marginBlock: 3}} color='success' count={pageCount} page={page} onChange={handleChange} />
|
|
</Box>
|
|
</Dialog>
|
|
)
|
|
}
|
|
|
|
CommentsList.propTypes = {
|
|
session: PropTypes.object,
|
|
selectedTitre: PropTypes.object.isRequired,
|
|
isOpen: PropTypes.bool.isRequired,
|
|
setIsOpen: PropTypes.func.isRequired,
|
|
setError: PropTypes.func.isRequired,
|
|
setIsErrorAlertOpen: PropTypes.func.isRequired
|
|
}
|