ORGANISATION-KA-INTERNATIONALE/konstitisyon.nu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add LogoutCountdown to CommentList

Browse Source
This commit is contained in:
Cédric Famibelle-Pronzola
2024-06-19 09:11:29 +04:00
parent e14365da3c
commit 08d1c9be36
1 changed files with 42 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/konstitisyon/comments-list.js
+42 -37
View File
@@ -1,5 +1,5 @@
/* eslint-disable camelcase */
import React, {useEffect, useState} from 'react'
import React, {useEffect, useState, useRef} from 'react'
import PropTypes from 'prop-types'
import List from '@mui/material/List'
import ListItem from '@mui/material/ListItem'
@@ -11,12 +11,14 @@ 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 {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 countdownRef = useRef()
const [comments, setComments] = useState([])
const [page, setPage] = useState(1)
@@ -60,44 +62,47 @@ export default function CommentsList({session, selectedTitre, isOpen, setIsOpen,
}
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}
<>
<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>
{` — ${formatDate(date_created, 'PPPPpppp')}`}
</>
}
/>
</ListItem>
}
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>
<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>
<LogoutCountdown ref={countdownRef} setError={setError} setIsErrorAlertOpen={setIsErrorAlertOpen} />
</>
)
}