Patrick Plate
f42c166329
- @tanstack/react-query with QueryClientProvider in providers/index.tsx - Typed api-client.ts fetch wrapper with ApiError class + apiDownload - Service modules: members, distributions, stock, reports, dashboard, portal, staff - Offline banner component (onlineManager subscription) - API error boundary with retry button - Loading skeleton components (card, table, chart, form, dashboard) - i18n for error/loading states (de/en)
47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect, useState } from "react"
|
|
import { onlineManager } from "@tanstack/react-query"
|
|
import { useTranslations } from "next-intl"
|
|
import { WifiOff } from "lucide-react"
|
|
|
|
import type { ReactNode } from "react"
|
|
|
|
export function OfflineBanner() {
|
|
const t = useTranslations("api")
|
|
const [isOnline, setIsOnline] = useState(true)
|
|
|
|
useEffect(() => {
|
|
// Subscribe to online manager state changes
|
|
const unsubscribe = onlineManager.subscribe((online) => {
|
|
setIsOnline(online)
|
|
})
|
|
// Set initial state
|
|
setIsOnline(onlineManager.isOnline())
|
|
return () => unsubscribe()
|
|
}, [])
|
|
|
|
if (isOnline) return null
|
|
|
|
return (
|
|
<div
|
|
role="alert"
|
|
aria-live="polite"
|
|
className="bg-destructive/10 border-destructive/30 text-destructive flex items-center gap-2 border-b px-4 py-2 text-sm"
|
|
>
|
|
<WifiOff className="h-4 w-4 shrink-0" />
|
|
<span>{t("offline")}</span>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
/**
|
|
* Wrapper that prevents hydration mismatch for online/offline state.
|
|
*/
|
|
export function OfflineBannerWrapper({ children }: { children: ReactNode }) {
|
|
const [mounted, setMounted] = useState(false)
|
|
useEffect(() => setMounted(true), [])
|
|
if (!mounted) return null
|
|
return <>{children}</>
|
|
}
|