//src/components/MainApp.js
import React, { useEffect } from 'react';
import { Routes, Route } from 'react-router-dom';
import { AlertProvider, useAlert } from '../widgets/Alert';
import { setupConnectivityAlerts } from '../utils/Connectivity';

function MainApp() {
	
	return (
		
		<div id="app" className="app">
			<Header />
				
			<AlertProvider>
				<MainContent />
			</AlertProvider>
				
			<Footer />
		</div>
	);
}

const MainContent = () => {
	
	const { showAlert, dismissAlert } = useAlert();// Get showAlert function from context
	
	useEffect(() => {
	
		setupConnectivityAlerts(showAlert, dismissAlert);
		
		// Optionally, you could return a cleanup function if needed
		return () => {
		
			// If setupConnectivityAlerts logs or holds onto event listeners,
			// ensure to remove them here by implementing a cleanup in that function.
		};
		
	 }, [showAlert, dismissAlert]);// Dependency on showAlert to avoid stale closure
	 
	 return (
	 
	 	<main className="container-lg">
	 		<Routes>
				<Route path="/" element={<Account />} />
				<Route path="/tutorials" element={<Tutorials />} />
				<Route path="/showcase" element={<Showcase />} />
				<Route path="/share" element={<Share />} />
						
				<Route path="/view" element={<View />} />
			</Routes>
	 	</main>
	 );
};

export default MainApp;


//src/utils/Connectivity.js
let isOnline = navigator.onLine;
let currentAlertId = null;// Track current alert ID for dismissing

const updateOnlineStatus = (showAlert, dismissAlert) => {

	const wasOnline = isOnline;
	isOnline = navigator.onLine;
		
	if (wasOnline && !isOnline) {
		
		// Dismiss the current alert if it was showing an online status
		if (currentAlertId) {
			
			dismissAlert(currentAlertId);
		}
		
		currentAlertId = showAlert('warning', 'You are now offline.');
	}
	else if (!wasOnline && isOnline) {
		
		if (currentAlertId) {
			showAlert('success', 'You are back online!');
		}
		
		currentAlertId = showAlert('success', 'You are back online!');
	}
};

const setupConnectivityListeners = (showAlert, dismissAlert) => {
	window.addEventListener('load', () => updateOnlineStatus(showAlert, dismissAlert));
	window.addEventListener('online', () => updateOnlineStatus(showAlert, dismissAlert));
	window.addEventListener('offline', () => updateOnlineStatus(showAlert, dismissAlert));
};

export const checkOnlineStatus = () => isOnline;
export const setupConnectivityAlerts = (showAlert, dismissAlert) => {
	
	setupConnectivityListeners(showAlert, dismissAlert);
};


//src/widgets/Alert.js
import React, { createContext, useContext, useState } from 'react';

// Create a Context for the alert system
const AlertContext = createContext();

// Custom hook to use the AlertContext in any component
export const useAlert = () => {
	
	return useContext(AlertContext);
};

// AlertProvider component that wraps the application to provide alert functionality
export const AlertProvider = ({ children }) => {
	
	const [alerts, setAlerts] = useState([]);
	
	// Mapping of alert types to Bootstrap classes
	const alertTypeClass = {
		error: 'alert-danger',
		danger: 'alert-danger',
		success: 'alert-success',
		info: 'alert-info',
		warning: 'alert-warning',
	};
	
	const showAlert = (type, message, duration = 3000) => {
		
		const id = Date.now();// Unique ID for the alert
		const alertClass = alertTypeClass[type] || 'alert-info';
		
		// Add the new alert to the alerts state
		setAlerts(prevAlerts => [...prevAlerts, { id, type: alertClass, message }]);
		
		// Automatically dismiss the alert after a certain duration
		setTimeout(() => {
			
			dismissAlert(id);
		}, duration);
		
		return id;// Return the ID for future reference
	};
	
	const dismissAlert = (id) => {
		
		// Filter out the alert with the specified ID from the alerts state
		setAlerts(prevAlerts => prevAlerts.filter(alert => alert.id !== id));
	};
	
	return (
		
		<AlertContext.Provider value={{ alerts, showAlert, dismissAlert }}>
		
			{children}
			
			{/* Render alerts */}
			<>
				{alerts.map((alert) => (
					<div
						key={alert.id}
						className={`alert ${alert.type} alert-dismissible fade show`}
						role="alert"
					>
						{alert.message}
						
						<button 
							type="button"
							className="btn-close"
							onClick={() => dismissAlert(alert.id)}
							aria-label="Close"
						></button>
					</div>
				))}
			</>
			
		</AlertContext.Provider>
	);
};


the alert shows up for a split second and then disapears behind things.