lowercase connectiviy

src/components/Layout/Navigation/ConnectionStatusIcon.js

@@ -4,10 +4,10 @@ import StatusContext from '../../../context/StatusContext';
 import { FaXmark } from "react-icons/fa6";
 
 const ConnectionStatusIcon = ({ size = 'normal', backgroundColor = 'dark' }) => {
-	const { Connectivity } = useContext(StatusContext);
+	const { connectivity } = useContext(StatusContext);
 	const { t } = useTranslation();
 
-	const quality = Connectivity.speed;
+	const quality = connectivity.speed;
 	const bars = Array.from({ length: 5 }, (_, i) => i < quality);
 	const barHeights = size === 'normal' ? [4, 8, 12, 16, 20] : [3, 6, 9, 12, 16];
 	const filledColor = backgroundColor === 'light' ? 'bg-primary dark:bg-white' : 'bg-white';

src/context/StatusContext.tsx

@@ -11,14 +11,14 @@ interface Connectivity {
 interface StatusContextValue {
 	isOnline: boolean | null; // Allow null for initial state
 	updateAvailable: boolean;
-	Connectivity: Connectivity;
+	connectivity: Connectivity;
 	updateOnlineStatus: (forceCheck?: boolean) => Promise<void>; // Only takes `forceCheck` as an optional parameter
 }
 
 const StatusContext = createContext<StatusContextValue>({
 	isOnline: null,
 	updateAvailable: false,
-	Connectivity: { navigatorOnline: null, Internet: null, speed: 0 },
+	connectivity: { navigatorOnline: null, Internet: null, speed: 0 },
 	updateOnlineStatus: async () => { }, // Default to a no-op async function
 });
 
@@ -58,7 +58,7 @@ function getNavigatorOnlineStatus(): boolean {
 export const StatusProvider = ({ children }: { children: React.ReactNode }) => {
 	const [isOnline, setIsOnline] = useState<boolean | null>(null);
 	const [updateAvailable, setUpdateAvailable] = useState(false);
-	const [Connectivity, setConnectivity] = useState<Connectivity>({
+	const [connectivity, setConnectivity] = useState<Connectivity>({
 		navigatorOnline: null,
 		Internet: null,
 		speed: 0,
@@ -178,8 +178,8 @@ export const StatusProvider = ({ children }: { children: React.ReactNode }) => {
 
 	useEffect(() => {
 		console.log('Online status:', isOnline);
-		console.log('Internet connection status:', Connectivity);
-	}, [isOnline, Connectivity]);
+		console.log('Internet connection status:', connectivity);
+	}, [isOnline, connectivity]);
 
 	navigator.serviceWorker.addEventListener('message', (event) => {
 		if (event.data && event.data.type === 'NEW_CONTENT_AVAILABLE') {
@@ -194,7 +194,7 @@ export const StatusProvider = ({ children }: { children: React.ReactNode }) => {
 	});
 
 	return (
-		<StatusContext.Provider value={{ isOnline, updateAvailable, Connectivity, updateOnlineStatus }}>
+		<StatusContext.Provider value={{ isOnline, updateAvailable, connectivity, updateOnlineStatus }}>
 			{children}
 		</StatusContext.Provider>
 	);