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

fix: ajout d'un cercle circulaire lors du chargement des commentaires

Browse Source
This commit is contained in:
Cédric Famibelle-Pronzola
2026-01-24 12:23:04 +04:00
parent 315c71baa4
commit 8ec761b2c8
3 changed files with 60 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/konstitisyon/list-comments.js
+56 -35
View File
@@ -10,6 +10,7 @@ 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 CircularProgress from '@mui/material/CircularProgress'
import {readItems, withToken} from '@directus/sdk'
import SessionExpired from '../session/session-expired.js'
import {directusClient, handleUserStatus} from '@/lib/directus.js'
@@ -20,6 +21,7 @@ const commentsPerPage = process.env.NEXT_PUBLIC_COMMENTS_PER_PAGE || 2
export default function ListComments({session, selectedTitre, isOpen, setIsOpen, setError, setIsErrorAlertOpen}) {
const countdownRef = useRef()
const [comments, setComments] = useState([])
const [isLoading, setIsLoading] = useState(false)
const [page, setPage] = useState(1)
const pageCount = Math.ceil(comments.length / commentsPerPage)
@@ -27,8 +29,15 @@ export default function ListComments({session, selectedTitre, isOpen, setIsOpen,
const startIndex = (page - 1) * commentsPerPage
const selectedComments = comments.slice(startIndex, startIndex + commentsPerPage)
useEffect(() => {
setComments([])
setPage(1)
}, [selectedTitre?.id])
useEffect(() => {
async function fetchComments() {
setIsLoading(true)
try {
await handleUserStatus(session.user.accessToken, session.user.userId)
@@ -54,6 +63,8 @@ export default function ListComments({session, selectedTitre, isOpen, setIsOpen,
setError(error?.errors[0]?.message)
setIsErrorAlertOpen(true)
}
} finally {
setIsLoading(false)
}
}
@@ -74,42 +85,52 @@ export default function ListComments({session, selectedTitre, isOpen, setIsOpen,
<>
<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, contenu, 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'
>
{contenu}
</Typography>
<br />
{formatDate(date_created, 'PPPPpp')}
</>
}
/>
</ListItem>
{isLoading ? (
<Box sx={{display: 'flex', justifyContent: 'center', p: 4}}>
<CircularProgress />
</Box>
) : (
<>
<List sx={{width: '100%', maxWidth: 360, bgcolor: 'background.paper'}}>
{selectedComments && selectedComments.length > 0 ? selectedComments.map(({id, date_created, contenu, 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'
>
{contenu}
</Typography>
<br />
{formatDate(date_created, 'PPPPpp')}
</>
}
/>
</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>
<Divider component='li' />
</React.Fragment>
)) : (
<Typography textAlign='center' sx={{p: 2}}>Aucun commentaire</Typography>
)}
</List>
{pageCount > 1 && (
<Box sx={{display: 'flex', justifyContent: 'center'}}>
<Pagination size='small' sx={{marginBlock: 3}} color='success' count={pageCount} page={page} onChange={handleChange} />
</Box>
)}
</>
)}
</Dialog>
<SessionExpired ref={countdownRef} setError={setError} setIsErrorAlertOpen={setIsErrorAlertOpen} />
</>