denozord
cd6a971991
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 1m43s
82 lines
2.8 KiB
React
82 lines
2.8 KiB
React
import { useState, useEffect } from 'react';
|
||
import { IconWifi, IconWifiOff } from '@tabler/icons-react';
|
||
|
||
/**
|
||
* NetworkErrorHandler - компонент для мониторинга состояния сети
|
||
* Показывает уведомление при потере соединения
|
||
*/
|
||
function NetworkErrorHandler() {
|
||
const [isOnline, setIsOnline] = useState(navigator.onLine);
|
||
const [wasOffline, setWasOffline] = useState(false);
|
||
const [showReconnected, setShowReconnected] = useState(false);
|
||
|
||
useEffect(() => {
|
||
const handleOnline = () => {
|
||
setIsOnline(true);
|
||
if (wasOffline) {
|
||
setShowReconnected(true);
|
||
// Показываем уведомление о восстановлении на 3 секунды
|
||
setTimeout(() => {
|
||
setShowReconnected(false);
|
||
setWasOffline(false);
|
||
}, 3000);
|
||
|
||
// Уведомляем через глобальную систему
|
||
if (window.notify?.success) {
|
||
window.notify.success('Соединение восстановлено');
|
||
}
|
||
}
|
||
};
|
||
|
||
const handleOffline = () => {
|
||
setIsOnline(false);
|
||
setWasOffline(true);
|
||
|
||
// Уведомляем через глобальную систему
|
||
if (window.notify?.warning) {
|
||
window.notify.warning('Нет соединения с интернетом');
|
||
}
|
||
};
|
||
|
||
window.addEventListener('online', handleOnline);
|
||
window.addEventListener('offline', handleOffline);
|
||
|
||
return () => {
|
||
window.removeEventListener('online', handleOnline);
|
||
window.removeEventListener('offline', handleOffline);
|
||
};
|
||
}, [wasOffline]);
|
||
|
||
// Не показываем ничего если онлайн и не было офлайна
|
||
if (isOnline && !showReconnected) {
|
||
return null;
|
||
}
|
||
|
||
return (
|
||
<div
|
||
className="position-fixed top-0 start-0 end-0"
|
||
style={{ zIndex: 1090 }}
|
||
>
|
||
{!isOnline ? (
|
||
<div className="alert alert-danger mb-0 rounded-0 border-0" role="alert">
|
||
<div className="d-flex align-items-center justify-content-center">
|
||
<IconWifiOff className="icon me-2" />
|
||
<strong>Нет соединения с интернетом</strong>
|
||
<span className="ms-2 text-muted">Ожидание восстановления...</span>
|
||
</div>
|
||
</div>
|
||
) : showReconnected ? (
|
||
<div className="alert alert-success mb-0 rounded-0 border-0" role="alert">
|
||
<div className="d-flex align-items-center justify-content-center">
|
||
<IconWifi className="icon me-2" />
|
||
<strong>Соединение восстановлено</strong>
|
||
</div>
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default NetworkErrorHandler;
|
||
|