add gerbil when apis are down and move components into lbrytv/

2020-03-17 11:21:26 -04:00 · 2020-03-17 11:21:26 -04:00 · 4d2e841fcd
commit 4d2e841fcd
parent 48a441aae8
6 changed files with 151 additions and 97 deletions
--- a/.eslintrc.json
+++ b/.eslintrc.json
@ -2,13 +2,6 @@
  "parser": "babel-eslint",
  "extends": ["standard", "standard-jsx", "plugin:react/recommended", "plugin:flowtype/recommended"],
  "plugins": ["flowtype", "import", "react-hooks"],
-  "settings": {
-    "import/resolver": {
-      "webpack": {
-        "config": "webpack.base.config.js"
-      }
-    }
-  },
  "env": {
    "browser": true,
    "node": true
--- a/.flowconfig
+++ b/.flowconfig
@ -28,5 +28,6 @@ module.name_mapper='^i18n\(.*\)$' -> '<PROJECT_ROOT>/ui/i18n\1'
 module.name_mapper='^effects\(.*\)$' -> '<PROJECT_ROOT>/ui/effects\1'
 module.name_mapper='^config\(.*\)$' -> '<PROJECT_ROOT>/config\1'
 module.name_mapper='^lbrytv\/component\(.*\)$' -> '<PROJECT_ROOT>/lbrytv/component\1'
+module.name_mapper='^lbrytv\/effects\(.*\)$' -> '<PROJECT_ROOT>/lbrytv/effects\1'

 [strict]
--- a/lbrytv/component/nag-data-collection.jsx
+++ b/lbrytv/component/nag-data-collection.jsx
@ -0,0 +1,55 @@
+// @flow
+import React from 'react';
+import Nag from 'component/common/nag';
+import I18nMessage from 'component/i18nMessage';
+import Button from 'component/button';
+import useIsMobile from 'effects/use-is-mobile';
+
+type Props = {
+  onClose: () => void,
+};
+
+export default function NagDegradedPerformance(props: Props) {
+  const { onClose } = props;
+  const isMobile = useIsMobile();
+
+  return (
+    <React.Fragment>
+      {isMobile ? (
+        <Nag
+          message={
+            <I18nMessage
+              tokens={{
+                more_information: (
+                  <Button button="link" label={__('more')} href="https://lbry.com/faq/privacy-and-data" />
+                ),
+              }}
+            >
+              lbry.tv collects usage information for itself and third parties (%more_information%).
+            </I18nMessage>
+          }
+          actionText={__('OK')}
+          onClick={onClose}
+        />
+      ) : (
+        <Nag
+          message={
+            <I18nMessage
+              tokens={{
+                more_information: (
+                  <Button button="link" label={__('more')} href="https://lbry.com/faq/privacy-and-data" />
+                ),
+              }}
+            >
+              lbry.tv collects usage information for itself and third parties (%more_information%). Want control over
+              this and more?
+            </I18nMessage>
+          }
+          actionText={__('Get The App')}
+          href="https://lbry.com/get"
+          onClose={onClose}
+        />
+      )}
+    </React.Fragment>
+  );
+}
--- a/lbrytv/component/nag-degraded-performance.jsx
+++ b/lbrytv/component/nag-degraded-performance.jsx
@ -0,0 +1,31 @@
+// @flow
+import React from 'react';
+import Nag from 'component/common/nag';
+import I18nMessage from 'component/i18nMessage';
+import Button from 'component/button';
+
+type Props = {
+  onClose: () => void,
+};
+
+export default function NagDegradedPerformance(props: Props) {
+  const { onClose } = props;
+
+  return (
+    <Nag
+      type="error"
+      message={
+        <I18nMessage
+          tokens={{
+            more_information: <Button button="link" label={__('more')} href="https://status.lbry.com/" />,
+          }}
+        >
+          lbry.tv performance may be degraded. You can try to use it, or wait 5 minutes and refresh. Please no crush us.
+        </I18nMessage>
+      }
+      actionText={__('Refresh')}
+      onClick={() => window.location.reload()}
+      onClose={onClose}
+    />
+  );
+}
--- a/lbrytv/effects/use-degraded-performance.js
+++ b/lbrytv/effects/use-degraded-performance.js
@ -0,0 +1,25 @@
+import { LBRY_TV_API } from 'config';
+import { useEffect } from 'react';
+import fetchWithTimeout from 'util/fetch';
+
+const STATUS_TIMEOUT_LIMIT = 10000;
+export const STATUS_OK = 'ok';
+export const STATUS_DEGRADED = 'degraded';
+export const STATUS_DOWN = 'down';
+
+export function useDegradedPerformance(onDegradedPerformanceCallback) {
+  useEffect(() => {
+    fetchWithTimeout(STATUS_TIMEOUT_LIMIT, fetch(`${LBRY_TV_API}/internal/status`))
+      .then(response => response.json())
+      .then(status => {
+        if (status.general_state === STATUS_DEGRADED) {
+          onDegradedPerformanceCallback(STATUS_DEGRADED);
+        } else {
+          onDegradedPerformanceCallback(STATUS_OK);
+        }
+      })
+      .catch(() => {
+        onDegradedPerformanceCallback(STATUS_DOWN);
+      });
+  }, []);
+}
--- a/ui/component/app/view.jsx
+++ b/ui/component/app/view.jsx
@ -1,6 +1,5 @@
 // @flow
 import * as PAGES from 'constants/pages';
-import { LBRY_TV_API } from 'config';
 import React, { useEffect, useRef, useState } from 'react';
 import classnames from 'classnames';
 import analytics from 'analytics';
@ -15,17 +14,20 @@ import FloatingViewer from 'component/floatingViewer';
 import { withRouter } from 'react-router';
 import usePrevious from 'effects/use-previous';
 import Nag from 'component/common/nag';
-import Button from 'component/button';
-import I18nMessage from 'component/i18nMessage';
 import { rewards as REWARDS } from 'lbryinc';
 import usePersistedState from 'effects/use-persisted-state';
-import useIsMobile from 'effects/use-is-mobile';
 // @if TARGET='web'
 import OpenInAppLink from 'component/openInAppLink';
 import YoutubeWelcome from 'component/youtubeWelcome';
-import fetchWithTimeout from 'util/fetch';
+import NagDegradedPerformance from 'lbrytv/component/nag-degraded-performance';
+import NagDataCollection from 'lbrytv/component/nag-data-collection';
 // @endif
-
+import {
+  useDegradedPerformance,
+  STATUS_OK,
+  STATUS_DEGRADED,
+  STATUS_DOWN,
+} from 'lbrytv/effects/use-degraded-performance';
 export const MAIN_WRAPPER_CLASS = 'main-wrapper';
 // @if TARGET='app'
 export const IS_MAC = process.platform === 'darwin';
@ -101,17 +103,16 @@ function App(props: Props) {
  const appRef = useRef();
  const isEnhancedLayout = useKonamiListener();
  const [hasSignedIn, setHasSignedIn] = useState(false);
-  const [currentlyDegradedPerformance, setCurrentlyDegradedPerformance] = useState(false);
  const userId = user && user.id;
  const hasVerifiedEmail = user && user.has_verified_email;
  const isRewardApproved = user && user.is_reward_approved;
  const previousUserId = usePrevious(userId);
  const previousHasVerifiedEmail = usePrevious(hasVerifiedEmail);
  const previousRewardApproved = usePrevious(isRewardApproved);
-  const isMobile = useIsMobile();
  // @if TARGET='web'
  const [showAnalyticsNag, setShowAnalyticsNag] = usePersistedState('analytics-nag', true);
  // @endif
+  const [lbryTvApiStatus, setLbryTvApiStatus] = useState(STATUS_OK);
  const { pathname, hash, search } = props.location;
  const showUpgradeButton = autoUpdateDownloaded || (process.platform === 'linux' && isUpgradeAvailable);
  // referral claiming
@ -120,6 +121,7 @@ function App(props: Props) {
  const rawReferrerParam = urlParams.get('r');
  const sanitizedReferrerParam = rawReferrerParam && rawReferrerParam.replace(':', '#');
  const wrapperElement = appRef.current;
+  const shouldHideNag = pathname.startsWith(`/$/${PAGES.EMBED}`) || pathname.startsWith(`/$/${PAGES.AUTH_VERIFY}`);

  let uri;
  try {
@ -127,7 +129,6 @@ function App(props: Props) {
    uri = newpath + hash;
  } catch (e) {}

-  const noNagOnPage = pathname.startsWith(`/$/${PAGES.EMBED}`) || pathname.startsWith(`/$/${PAGES.AUTH_VERIFY}`);
  // @if TARGET='web'
  function handleAnalyticsDismiss() {
    setShowAnalyticsNag(false);
@ -252,20 +253,7 @@ function App(props: Props) {
  }, [syncError, pathname, isAuthenticated]);

  // @if TARGET='web'
-  // This should all be moved into lbrytv/component/...
-  useEffect(() => {
-    fetchWithTimeout(10000, fetch(`${LBRY_TV_API}/internal/status`))
-      .then(response => response.json())
-      .then(status => {
-        if (status.general_state !== 'ok') {
-          throw Error();
-        }
-      })
-      .catch(err => {
-        console.log('err', err);
-        setCurrentlyDegradedPerformance(true);
-      });
-  }, []);
+  useDegradedPerformance(setLbryTvApiStatus);
  // @endif

  // @if TARGET='web'
@ -287,80 +275,41 @@ function App(props: Props) {
      ref={appRef}
      onContextMenu={IS_WEB ? undefined : e => openContextMenu(e)}
    >
-      <Router />
-      <ModalRouter />
-      <FloatingViewer pageUri={uri} />
-
-      {/* @if TARGET='web' */}
-      <YoutubeWelcome />
-      <OpenInAppLink uri={uri} />
-      {/* @endif */}
-
-      {/* @if TARGET='app' */}
-      {showUpgradeButton && (
-        <Nag message={__('An upgrade is available.')} actionText={__('Install Now')} onClick={requestDownloadUpgrade} />
-      )}
-      {/* @endif */}
-      {/* @if TARGET='web' */}
-      {currentlyDegradedPerformance && (
-        <Nag
-          type="error"
-          message={
-            <I18nMessage
-              tokens={{
-                more_information: <Button button="link" label={__('more')} href="https://status.lbry.com/" />,
-              }}
-            >
-              lbry.tv performance may be degraded. You can try to use it, or wait 5 minutes and refresh. Please no crush
-              us.
-            </I18nMessage>
-          }
-          actionText={__('Refresh')}
-          onClick={() => window.location.reload()}
-          onClose={() => setCurrentlyDegradedPerformance(false)}
+      {IS_WEB && lbryTvApiStatus === STATUS_DOWN ? (
+        <Yrbl
+          className="main--empty"
+          title={__('lbry.tv is currently down')}
+          subtitle={__('Something about fixing the squeeky wheel or something')}
        />
-      )}
-      {!currentlyDegradedPerformance && showAnalyticsNag && !noNagOnPage && (
+      ) : (
        <React.Fragment>
-          {isMobile ? (
+          <Router />
+          <ModalRouter />
+          <FloatingViewer pageUri={uri} />
+          {isEnhancedLayout && <Yrbl className="yrbl--enhanced" />}
+
+          {/* @if TARGET='app' */}
+          {showUpgradeButton && (
            <Nag
-              message={
-                <I18nMessage
-                  tokens={{
-                    more_information: (
-                      <Button button="link" label={__('more')} href="https://lbry.com/faq/privacy-and-data" />
-                    ),
-                  }}
-                >
-                  lbry.tv collects usage information for itself and third parties (%more_information%).
-                </I18nMessage>
-              }
-              actionText={__('OK')}
-              onClick={handleAnalyticsDismiss}
-            />
-          ) : (
-            <Nag
-              message={
-                <I18nMessage
-                  tokens={{
-                    more_information: (
-                      <Button button="link" label={__('more')} href="https://lbry.com/faq/privacy-and-data" />
-                    ),
-                  }}
-                >
-                  lbry.tv collects usage information for itself and third parties (%more_information%). Want control
-                  over this and more?
-                </I18nMessage>
-              }
-              actionText={__('Get The App')}
-              href="https://lbry.com/get"
-              onClose={handleAnalyticsDismiss}
+              message={__('An upgrade is available.')}
+              actionText={__('Install Now')}
+              onClick={requestDownloadUpgrade}
            />
          )}
+          {/* @endif */}
+
+          {/* @if TARGET='web' */}
+          <YoutubeWelcome />
+          <OpenInAppLink uri={uri} />
+          {lbryTvApiStatus === STATUS_DEGRADED && (
+            <NagDegradedPerformance onClose={() => setLbryTvApiStatus(STATUS_OK)} />
+          )}
+          {lbryTvApiStatus === STATUS_OK && showAnalyticsNag && !shouldHideNag && (
+            <NagDataCollection onClose={handleAnalyticsDismiss} />
+          )}
+          {/* @endif */}
        </React.Fragment>
      )}
-      {/* @endif */}
-      {isEnhancedLayout && <Yrbl className="yrbl--enhanced" />}
    </div>
  );
 }