import React from 'react' ; import { useFirestoreConnectivity } from "../../../firebase/FirestoreHooks" ; import CloudOffIcon from '@material-ui/icons/CloudOff' ; import Button from '@material-ui/core/Button/Button' ; import { useComponentDidMount , useComponentWillUnmount } from "../../../hooks/ReactLifecycleHooks" ; import Tooltip from '@material-ui/core/Tooltip' ; import Icon from '@material-ui/core/Icon' ; import { CloudOffline } from './CloudOffline' ; export function useOnline ( ) { /**
     * Returns true of false if we are online or offline.
     */ const [ online , setOnline ] = React . useState < boolean > ( navigator . onLine ) ; const onConnectivityChange = React . useCallback ( ( ) => { setOnline ( navigator . onLine ) ; } , [ ] ) ; React . useEffect ( ( ) => { window . addEventListener ( 'online' , onConnectivityChange ) ; window . addEventListener ( 'offline' , onConnectivityChange ) ; return ( ) => { window . removeEventListener ( 'online' , onConnectivityChange ) ; window . removeEventListener ( 'offline' , onConnectivityChange ) ; } ; } , [ onConnectivityChange ] ) ; return online ; } export const CloudConnectivityButton = React . memo ( function CloudConnectivityButton ( ) { const online = useOnline ( ) ; if ( ! online ) { return ( < CloudOffline />); } return null ; } ) ;