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,6 +62,7 @@ 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'}}>
@@ -98,6 +101,8 @@ export default function CommentsList({session, selectedTitre, isOpen, setIsOpen,
           <Pagination size='small' sx={{marginBlock: 3}} color='success' count={pageCount} page={page} onChange={handleChange} />
         </Box>
       </Dialog>
+      <LogoutCountdown ref={countdownRef} setError={setError} setIsErrorAlertOpen={setIsErrorAlertOpen} />
+    </>
   )
 }