Adding Online Status Feature

src/App.js

@@ -1,77 +1,91 @@
-import { Route, Routes } from "react-router-dom";
-import "./App.css";
-import HomePage from "./Components/HomePage";
-import ChatPage from "./Components/ChatPage";
-import AnimatedCursor from "react-animated-cursor";
-
-import { useEffect, useState } from "react";
-import { WiDaySunny } from "react-icons/wi";
-import { MdModeNight } from "react-icons/md";
-import {UseAuthProvider} from "./Context/UserAuthContext";
-import {PrivateRoute} from "./Components/PrivateRoute";
+import { Route, Routes } from 'react-router-dom';
+import './App.css';
+import HomePage from './Components/HomePage';
+import ChatPage from './Components/ChatPage';
+import AnimatedCursor from 'react-animated-cursor';
 
+import { useEffect, useState } from 'react';
+import { WiDaySunny } from 'react-icons/wi';
+import { MdModeNight } from 'react-icons/md';
+import { UseAuthProvider } from './Context/UserAuthContext';
+import { PrivateRoute } from './Components/PrivateRoute';
+import useOnline from './hooks/useOnline';
+import toast from 'react-hot-toast';
 
 function App() {
-    // Retrieve dark mode state from local storage or default to false
-    const [darkMode, setDarkMode] = useState(() => {
-      const savedDarkMode = localStorage.getItem("darkMode");
-      return savedDarkMode ? JSON.parse(savedDarkMode) : false;
-    });
-
-    // Update local storage when dark mode state changes
-    useEffect(() => {
-      localStorage.setItem("darkMode", JSON.stringify(darkMode));
-    }, [darkMode]);
+  // Retrieve dark mode state from local storage or default to false
+  const [darkMode, setDarkMode] = useState(() => {
+    const savedDarkMode = localStorage.getItem('darkMode');
+    return savedDarkMode ? JSON.parse(savedDarkMode) : false;
+  });
 
+  // Update local storage when dark mode state changes
+  useEffect(() => {
+    localStorage.setItem('darkMode', JSON.stringify(darkMode));
+  }, [darkMode]);
 
-  const hanldeDarkMode=()=>{
+  const hanldeDarkMode = () => {
     setDarkMode(!darkMode);
+  };
+
+  // checks whether user is connected to Internet or not.
+  const isOnline = useOnline();
+  if (isOnline) {
+    toast.success('Back Online');
+  } else {
+    toast.error('Please Check Your Internet Connection!');
   }
-  
+
   return (
     <div className={`w-screen h-[100vh] ${darkMode ? 'bg-[#263238]' : 'bg-white'}  flex  flex-col font-inter`}>
-
       <div className="App">
-      <AnimatedCursor 
-        innerSize={8}
-        outerSize={8}
-        color='193, 11, 111'
-        outerAlpha={0.2}
-        innerScale={0.7}
-        outerScale={5}
-        clickables={[
-          'a',
-          'input[type="text"]',
-          'input[type="email"]',
-          'input[type="number"]',
-          'input[type="submit"]',
-          'input[type="image"]',
-          'label[for]',
-          'select',
-          'textarea',
-          'button',
-          '.link'
-
-        ]}
-      />
-    </div>
+        <AnimatedCursor
+          innerSize={8}
+          outerSize={8}
+          color="193, 11, 111"
+          outerAlpha={0.2}
+          innerScale={0.7}
+          outerScale={5}
+          clickables={[
+            'a',
+            'input[type="text"]',
+            'input[type="email"]',
+            'input[type="number"]',
+            'input[type="submit"]',
+            'input[type="image"]',
+            'label[for]',
+            'select',
+            'textarea',
+            'button',
+            '.link',
+          ]}
+        />
+      </div>
 
-    <button className=" flex justify-end absolute xl:top-2 xl:right-48 top-16 right-5 sm:top-2 sm:right-48 md:top-2 md:right-48  lg:top-2 lg:right-48 z-40  " onClick={hanldeDarkMode}>
-        {darkMode ? <MdModeNight className="xl:text-7xl lg:text-7xl md:text-7xl sm:text-7xl text-6xl  text-white" />: <WiDaySunny  className=" xl:text-7xl lg:text-7xl md:text-7xl sm:text-7xl text-6xl"/> }
+      <button
+        className=" flex justify-end absolute xl:top-2 xl:right-48 top-16 right-5 sm:top-2 sm:right-48 md:top-2 md:right-48  lg:top-2 lg:right-48 z-40  "
+        onClick={hanldeDarkMode}
+      >
+        {darkMode ? (
+          <MdModeNight className="xl:text-7xl lg:text-7xl md:text-7xl sm:text-7xl text-6xl  text-white" />
+        ) : (
+          <WiDaySunny className=" xl:text-7xl lg:text-7xl md:text-7xl sm:text-7xl text-6xl" />
+        )}
       </button>
-        <UseAuthProvider>
-          <Routes>
-            <Route path="/" element={<HomePage darkMode={darkMode}/>}/>
-            <Route path="chat" element={
-                <PrivateRoute>
-                    <ChatPage darkMode={darkMode} setDarkMode={setDarkMode} />
-                </PrivateRoute>
-            } />
-          </Routes>
-       </UseAuthProvider>
-
-      </div>
-
+      <UseAuthProvider>
+        <Routes>
+          <Route path="/" element={<HomePage darkMode={darkMode} />} />
+          <Route
+            path="chat"
+            element={
+              <PrivateRoute>
+                <ChatPage darkMode={darkMode} setDarkMode={setDarkMode} />
+              </PrivateRoute>
+            }
+          />
+        </Routes>
+      </UseAuthProvider>
+    </div>
   );
 }
 

src/hooks/useOnline.js

@@ -0,0 +1,26 @@
+import { useState, useEffect } from 'react';
+
+const useOnline = () => {
+  const [isOnline, setIsOnline] = useState(true);
+
+  const handleOnline = () => {
+    setIsOnline(true);
+  };
+  const handleOffline = () => {
+    setIsOnline(false);
+  };
+
+  useEffect(() => {
+    window.addEventListener('online', handleOnline);
+    window.addEventListener('offline', handleOffline);
+
+    return () => {
+      window.removeEventListener('online', handleOnline);
+      window.removeEventListener('offline', handleOffline);
+    };
+  });
+
+  return isOnline;
+};
+
+export default useOnline;