File "useOnlineStatus.ts"

Full Path: /home/trinadezambia/public_html/student_panel/src/components/lib/useOnlineStatus.ts
File size: 1.59 KB
MIME-type: text/x-java
Charset: utf-8

'use client';

import { useEffect, useState } from 'react';

/**
 * Custom hook to detect internet connectivity status
 * Returns an object with:
 * - isOnline: true if online, false if offline
 * - isMounted: true after first client-side render (prevents hydration mismatch)
 *
 * This hook listens to browser's online/offline events
 * and updates the status in real-time
 */
export function useOnlineStatus() {
  // Track if component has mounted on client side
  // This prevents hydration mismatch between server and client
  const [isMounted, setIsMounted] = useState(false);

  // Initialize with true to match server-side render
  // Will be updated after mount to actual status
  const [isOnline, setIsOnline] = useState<boolean>(true);

  useEffect(() => {
    // Mark as mounted (client-side only)
    setIsMounted(true);

    // Set the actual online status after mounting
    // This happens after hydration, so no mismatch occurs
    setIsOnline(navigator.onLine);

    // Handler when internet connection is restored
    const handleOnline = () => {
      setIsOnline(true);
    };

    // Handler when internet connection is lost
    const handleOffline = () => {
      setIsOnline(false);
    };

    // Add event listeners for online/offline events
    window.addEventListener('online', handleOnline);
    window.addEventListener('offline', handleOffline);

    // Cleanup: Remove event listeners on component unmount
    return () => {
      window.removeEventListener('online', handleOnline);
      window.removeEventListener('offline', handleOffline);
    };
  }, []);

  return { isOnline, isMounted };
}