Add components to write comments

components/session/logout-countdown.js

@@ -0,0 +1,45 @@
+import PropTypes from 'prop-types'
+import {
+  useState, useEffect, forwardRef, useImperativeHandle
+} from 'react'
+import {signOut} from 'next-auth/react'
+
+const LogoutCountdown = forwardRef(({setError, setIsErrorAlertOpen}, ref) => {
+  const [counter, setCounter] = useState(5)
+  const [isCountdownActive, setIsCountdownActive] = useState(false)
+
+  useEffect(() => {
+    let timer
+
+    if (isCountdownActive) {
+      if (counter > 0) {
+        timer = setInterval(() => {
+          setCounter(prevCounter => prevCounter - 1)
+        }, 1000)
+      } else if (counter === 0) {
+        signOut()
+      }
+
+      setError(`Session expirée, reconnectez-vous ! Déconnexion dans... ${counter} sec`)
+      setIsErrorAlertOpen(true)
+    }
+
+    return () => clearInterval(timer)
+  }, [isCountdownActive, counter, setError, setIsErrorAlertOpen])
+
+  useImperativeHandle(ref, () => ({
+    startCountdown() {
+      setCounter(5)
+      setIsCountdownActive(true)
+    }
+  }))
+
+  return null
+})
+
+LogoutCountdown.propTypes = {
+  setError: PropTypes.func.isRequired,
+  setIsErrorAlertOpen: PropTypes.func.isRequired
+}
+
+export default LogoutCountdown