Add LogoutCountdown to CommentList

components/konstitisyon/comments-list.js

@@ -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>
+      <Dialog open={isOpen} onClose={handleClose}>
-      <List sx={{width: '100%', maxWidth: 360, bgcolor: 'background.paper'}}>
+        <DialogTitle>Commentaires</DialogTitle>
-        {selectedComments && selectedComments.length > 0 ? selectedComments.map(({id, date_created, text, user_created}) => (
+        <List sx={{width: '100%', maxWidth: 360, bgcolor: 'background.paper'}}>
-          <React.Fragment key={id}>
+          {selectedComments && selectedComments.length > 0 ? selectedComments.map(({id, date_created, text, user_created}) => (
-            <ListItem alignItems='flex-start'>
+            <React.Fragment key={id}>
-              <ListItemText
+              <ListItem alignItems='flex-start'>
-                primary={
+                <ListItemText
-                  <Typography sx={{textDecoration: 'underline'}} component='span' variant='body2'>
+                  primary={
-                    {user_created.split('-')[0]}
+                    <Typography sx={{textDecoration: 'underline'}} component='span' variant='body2'>
-                  </Typography>
+                      {user_created.split('-')[0]}
-                }
-                secondary={
-                  <>
-                    <Typography
-                      sx={{display: 'inline'}}
-                      component='span'
-                      variant='body2'
-                      color='text.primary'
-                    >
-                      {text}
                     </Typography>
-                    {` — ${formatDate(date_created, 'PPPPpppp')}`}
+                  }
-                  </>
+                  secondary={
-                }
+                    <>
-              />
+                      <Typography
-            </ListItem>
+                        sx={{display: 'inline'}}
+                        component='span'
+                        variant='body2'
+                        color='text.primary'
+                      >
+                        {text}
+                      </Typography>
+                      {` — ${formatDate(date_created, 'PPPPpppp')}`}
+                    </>
+                  }
+                />
+              </ListItem>
 
-            <Divider component='li' />
+              <Divider component='li' />
-          </React.Fragment>
+            </React.Fragment>
-        )) : (
+          )) : (
-          <Typography textAlign='center'>Aucun commentaire</Typography>
+            <Typography textAlign='center'>Aucun commentaire</Typography>
-        )}
+          )}
-      </List>
+        </List>
-      <Box sx={{display: 'flex', justifyContent: 'center'}}>
+        <Box sx={{display: 'flex', justifyContent: 'center'}}>
-        <Pagination size='small' sx={{marginBlock: 3}} color='success' count={pageCount} page={page} onChange={handleChange} />
+          <Pagination size='small' sx={{marginBlock: 3}} color='success' count={pageCount} page={page} onChange={handleChange} />
-      </Box>
+        </Box>
-    </Dialog>
+      </Dialog>
+      <LogoutCountdown ref={countdownRef} setError={setError} setIsErrorAlertOpen={setIsErrorAlertOpen} />
+    </>
   )
 }