profile refactor

src/shared/ui/Notification/Notification.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import styles from './Notification.module.css'
 
 type Status = 'success' | 'error' | 'info' | 'warning'
@@ -7,6 +7,8 @@ interface Props {
   message: string
   status: Status
   onClose: () => void
+  title?: string
+  duration?: number
 }
 
 const ICONS: Record<Status, string> = {
@@ -16,8 +18,16 @@ const ICONS: Record<Status, string> = {
   warning: '!',
 }
 
-export function Notification({ message, status, onClose }: Props) {
+const DEFAULT_TITLES: Record<Status, string> = {
+  success: 'Успех',
+  error: 'Ошибка',
+  info: 'Информация',
+  warning: 'Внимание',
+}
+
+export function Notification({ message, status, onClose, title, duration }: Props) {
   const [closing, setClosing] = useState(false)
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
   function handleClose() {
     setClosing(true)
@@ -27,16 +37,56 @@ export function Notification({ message, status, onClose }: Props) {
     if (closing) onClose()
   }
 
+  function clearTimer() {
+    if (timerRef.current !== null) {
+      clearTimeout(timerRef.current)
+      timerRef.current = null
+    }
+  }
+
+  function startTimer() {
+    if (duration) {
+      clearTimer()
+      timerRef.current = setTimeout(() => setClosing(true), duration)
+    }
+  }
+
+  useEffect(() => {
+    startTimer()
+
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.key === 'Escape') setClosing(true)
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+
+    return () => {
+      clearTimer()
+      window.removeEventListener('keydown', handleKeyDown)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [duration])
+
+  const heading = title ?? DEFAULT_TITLES[status]
+  const ariaLive = status === 'error' || status === 'warning' ? 'assertive' : 'polite'
+
   return (
     <div
       className={`${styles.notification} ${styles[status]} ${closing ? styles.closing : ''}`}
       onAnimationEnd={handleAnimationEnd}
+      onMouseEnter={clearTimer}
+      onMouseLeave={startTimer}
+      role="alert"
+      aria-live={ariaLive}
     >
       <div className={styles.notificationWrapper}>
         <span className={styles.icon}>{ICONS[status]}</span>
-        <p className={styles.message}>{message}</p>
+        <div className={styles.content}>
+          <p className={styles.title}>{heading}</p>
+          <p className={styles.message}>{message}</p>
+        </div>
       </div>
-      <button className={styles.close} onClick={handleClose}>✕</button>
+      <button className={styles.close} onClick={handleClose} aria-label="Закрыть">✕</button>
     </div>
   )
 }