Fix "you are offline" nag being stuck

Was trying to save one event listener in the previous implementation and rely on other redux state-changes to spark a GUI update, but turns out there are scenarios where nothing is updated and the "offline" nag is stuck on screen.

## Change
Do it properly using the event listeners. The nag should now update promptly.
This commit is contained in:
infinite-persistence 2021-12-20 16:42:19 +08:00
parent 74126623c7
commit 7d6c91c15a
No known key found for this signature in database
GPG key ID: B9C3252EDC3D0AA0
2 changed files with 29 additions and 3 deletions

View file

@ -20,6 +20,7 @@ import usePrevious from 'effects/use-previous';
import Nag from 'component/common/nag';
import REWARDS from 'rewards';
import usePersistedState from 'effects/use-persisted-state';
import useConnectionStatus from 'effects/use-connection-status';
import Spinner from 'component/spinner';
import LANGUAGES from 'constants/languages';
import YoutubeWelcome from 'web/component/youtubeReferralWelcome';
@ -157,7 +158,7 @@ function App(props: Props) {
const hasActiveChannelClaim = activeChannelId !== undefined;
const isPersonalized = !IS_WEB || hasVerifiedEmail;
const renderFiledrop = !isMobile && isAuthenticated;
const isOnline = navigator.onLine;
const connectionStatus = useConnectionStatus();
let uri;
try {
@ -171,7 +172,7 @@ function App(props: Props) {
function getStatusNag() {
// Handle "offline" first. Everything else is meaningless if it's offline.
if (!isOnline) {
if (!connectionStatus.online) {
return <Nag type="helpful" message={__('You are offline. Check your internet connection.')} />;
}
@ -491,7 +492,7 @@ function App(props: Props) {
);
}
if (isOnline && lbryTvApiStatus === STATUS_DOWN) {
if (connectionStatus.online && lbryTvApiStatus === STATUS_DOWN) {
// TODO: Rename `SyncFatalError` since it has nothing to do with syncing.
return (
<React.Suspense fallback={null}>

View file

@ -0,0 +1,25 @@
import React from 'react';
export default function useConnectionStatus() {
const [online, setOnline] = React.useState(window.navigator.onLine);
React.useEffect(() => {
function handleOnline(event) {
setOnline(true);
}
function handleOffline(event) {
setOnline(false);
}
window.addEventListener('online', handleOnline);
window.addEventListener('offline', handleOffline);
return () => {
window.removeEventListener('online', handleOnline);
window.removeEventListener('offline', handleOffline);
};
}, []);
return { online };
}