From 827e68866e66d164e2160108efbfe4ade8d3c6cf Mon Sep 17 00:00:00 2001 From: Asher <141028690+No-bodyq@users.noreply.github.com> Date: Fri, 29 May 2026 09:38:14 +0100 Subject: [PATCH 1/3] Implement offline status banner --- .../src/components/OfflineBanner.tsx | 127 +++++++----------- 1 file changed, 47 insertions(+), 80 deletions(-) diff --git a/wata-board-frontend/src/components/OfflineBanner.tsx b/wata-board-frontend/src/components/OfflineBanner.tsx index a83a4b6a..04dee3a8 100644 --- a/wata-board-frontend/src/components/OfflineBanner.tsx +++ b/wata-board-frontend/src/components/OfflineBanner.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react'; +import { useEffect, useState } from 'react'; import { useConnectivity } from '../hooks/useConnectivity'; interface OfflineBannerProps { @@ -8,21 +8,25 @@ interface OfflineBannerProps { export function OfflineBanner({ className = '', showDetails = false }: OfflineBannerProps) { const { connectivity, offlineActions, checkConnectivity } = useConnectivity(); - const [isVisible, setIsVisible] = useState(false); + const [dismissed, setDismissed] = useState(false); const [isRetrying, setIsRetrying] = useState(false); - // Show banner when offline or when there are queued actions + const queuedCount = offlineActions.length; + const shouldShow = !dismissed && (connectivity.isOffline || queuedCount > 0); + useEffect(() => { - setIsVisible(connectivity.isOffline || offlineActions.length > 0); - }, [connectivity.isOffline, offlineActions.length]); + if (connectivity.isOffline || queuedCount > 0) { + setDismissed(false); + } + }, [connectivity.isOffline, queuedCount]); - // Auto-hide when coming back online and no queued actions useEffect(() => { - if (connectivity.isOnline && offlineActions.length === 0) { - const timer = setTimeout(() => setIsVisible(false), 3000); - return () => clearTimeout(timer); + if (connectivity.isOnline && queuedCount === 0) { + const timer = window.setTimeout(() => setDismissed(true), 3000); + return () => window.clearTimeout(timer); } - }, [connectivity.isOnline, offlineActions.length]); + return undefined; + }, [connectivity.isOnline, queuedCount]); const handleRetryConnection = async () => { setIsRetrying(true); @@ -33,99 +37,62 @@ export function OfflineBanner({ className = '', showDetails = false }: OfflineBa } }; - const getConnectionIcon = () => { - if (connectivity.isOffline) { - return '📱'; - } - if (offlineActions.length > 0) { - return '⏳'; - } - return '🌐'; - }; + const stateStyles = connectivity.isOffline + ? 'bg-amber-500 border-amber-600 text-amber-950' + : 'bg-sky-500 border-sky-600 text-sky-950'; - const getConnectionMessage = () => { - if (connectivity.isOffline) { - return 'You are offline. Some features may not be available.'; - } - if (offlineActions.length > 0) { - return `Back online! Processing ${offlineActions.length} queued action${offlineActions.length === 1 ? '' : 's'}...`; - } - return 'Connection restored'; - }; - - const getConnectionColor = () => { - if (connectivity.isOffline) { - return 'bg-amber-500 border-amber-600 text-amber-50'; - } - if (offlineActions.length > 0) { - return 'bg-sky-500 border-sky-600 text-sky-50'; - } - return 'bg-green-500 border-green-600 text-green-50'; - }; + const message = connectivity.isOffline + ? 'You are offline. Some actions will sync when your connection returns.' + : `Back online. Syncing ${queuedCount} queued action${queuedCount === 1 ? '' : 's'}.`; - if (!isVisible) return null; + if (!shouldShow) return null; return (
-
-
-