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:
parent
74126623c7
commit
7d6c91c15a
2 changed files with 29 additions and 3 deletions
|
@ -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}>
|
||||
|
|
25
ui/effects/use-connection-status.js
Normal file
25
ui/effects/use-connection-status.js
Normal 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 };
|
||||
}
|
Loading…
Reference in a new issue