full-page-network-error.tsx
'use client'

import { useEffect, useState } from 'react'
import { isOnline } from '@/lib/utils'
import { Button } from '../ui/button'
import Link from 'next/link'
import { Routes } from '@/app/routes'
import { toast } from 'sonner'

interface ErrorBoundaryProps {
  error: Error & { digest?: string }
  reset: () => void
}

export function FullPageErrorBoundary({ error, reset }: ErrorBoundaryProps) {
  const [isNetworkError, setIsNetworkError] = useState(false)

  useEffect(() => {
    const handleNetworkChange = () => {
      setIsNetworkError(!navigator.onLine)
    }

    window.addEventListener('online', handleNetworkChange)
    window.addEventListener('offline', handleNetworkChange)

    setIsNetworkError(!navigator.onLine)

    return () => {
      window.removeEventListener('online', handleNetworkChange)
      window.removeEventListener('offline', handleNetworkChange)
    }
  }, [])

  const handleRetry = () => {
    if (navigator.onLine) {
      reset() // Rerun the action after the network is back
    } else {
      toast.error('Réseau indisponible') // Show error if network is still down
    }
  }

  return (
    <div className="flex min-h-screen flex-col items-center justify-center">
      <h2 className="mb-4 text-2xl font-bold">Oops! Une erreur est survenue</h2>
      <p className="mb-4 text-gray-600">
        {isNetworkError
          ? 'Il semble que vous êtes hors-ligne. Vérifier votre connexion internet.'
          : 'Nous avons des difficultés à charger cette page. Veuillez réessayer.'}
      </p>
      <Button onClick={handleRetry} className="">
        Réessayer
      </Button>
      <Button variant={'link'} className="mt-4 hover:underline" asChild>
        <Link href={Routes.HOME}>Aller à l&apos;accueil</Link>
      </Button>
    </div>
  )
}

'use client'

import { useState, useEffect } from 'react'
import { isOnline } from '@/lib/utils'

export default function NetworkStatusBar() {
  const [online, setOnline] = useState(true)
  const [visible, setVisible] = useState(false)

  useEffect(() => {
    const updateOnlineStatus = () => {
      const status = isOnline()
      setOnline(status)
      setVisible(!status)
    }

    window.addEventListener('online', updateOnlineStatus)
    window.addEventListener('offline', updateOnlineStatus)

    return () => {
      window.removeEventListener('online', updateOnlineStatus)
      window.removeEventListener('offline', updateOnlineStatus)
    }
  }, [])

  useEffect(() => {
    if (online && visible) {
      const timer = setTimeout(() => setVisible(false), 3000)
      return () => clearTimeout(timer)
    }
  }, [online, visible])

  if (!visible) return null

  return (
    <div
      className={`fixed left-0 right-0 top-0 p-2 text-center text-sm ${online ? 'bg-green-500' : 'bg-red-500'} text-white transition-all duration-300`}>
      {online ? 'Back online' : 'You are currently offline'}
    </div>
  )
}

'use client'

import { FullPageErrorBoundary } from '@/components/network-status/full-page-network-error'
import { useEffect } from 'react'

export default function GlobalError({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  useEffect(() => {
    // Log the error to an error reporting service
    console.error(error)
  }, [error])

  return <FullPageErrorBoundary error={error} reset={reset} />
}