app works when id api fails

ui/component/app/view.jsx

@@ -30,6 +30,7 @@ import OpenInAppLink from 'web/component/openInAppLink';
 import YoutubeWelcome from 'web/component/youtubeReferralWelcome';
 import NagDegradedPerformance from 'web/component/nag-degraded-performance';
 import NagDataCollection from 'web/component/nag-data-collection';
+import NagNoUser from 'web/component/nag-no-user';
 import {
   useDegradedPerformance,
   STATUS_OK,
@@ -363,7 +364,7 @@ function App(props: Props) {
   // Require an internal-api user on lbry.tv
   // This also prevents the site from loading in the un-authed state while we wait for internal-apis to return for the first time
   // It's not needed on desktop since there is no un-authed state
-  if (!user) {
+  if (user === undefined) {
     return (
       <div className="main--empty">
         <Spinner delayed />
@@ -428,6 +429,7 @@ function App(props: Props) {
           {!SIMPLE_SITE && lbryTvApiStatus === STATUS_OK && showAnalyticsNag && !shouldHideNag && (
             <NagDataCollection onClose={handleAnalyticsDismiss} />
           )}
+          {user === null && <NagNoUser />}
           {/* @endif */}
         </React.Fragment>
       )}

ui/component/button/index.js

@@ -1,11 +1,12 @@
 import Button from './view';
 import React, { forwardRef } from 'react';
 import { connect } from 'react-redux';
-import { selectUserVerifiedEmail } from 'redux/selectors/user';
+import { selectUser, selectUserVerifiedEmail } from 'redux/selectors/user';
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state) => ({
   pathname: state.router.location.pathname,
   emailVerified: selectUserVerifiedEmail(state),
+  user: selectUser(state),
 });
 
 const ConnectedButton = connect(mapStateToProps)(Button);

ui/component/button/view.jsx

@@ -38,6 +38,7 @@ type Props = {
   myref: any,
   dispatch: any,
   'aria-label'?: string,
+  user: ?User,
 };
 
 // use forwardRef to allow consumers to pass refs to the button content if they want to
@@ -69,10 +70,14 @@ const Button = forwardRef<any, {}>((props: Props, ref: any) => {
     myref,
     dispatch, // <button> doesn't know what to do with dispatch
     pathname,
+    user,
     authSrc,
     ...otherProps
   } = props;
 
+  console.log('user', user);
+  const disable = disabled || (user === null && requiresAuth);
+
   const combinedClassName = classnames(
     'button',
     button
@@ -82,7 +87,7 @@ const Button = forwardRef<any, {}>((props: Props, ref: any) => {
           'button--alt': button === 'alt',
           'button--inverse': button === 'inverse',
           'button--close': button === 'close',
-          'button--disabled': disabled,
+          'button--disabled': disable,
           'button--link': button === 'link',
         }
       : 'button--no-style',
@@ -184,12 +189,12 @@ const Button = forwardRef<any, {}>((props: Props, ref: any) => {
     return (
       <NavLink
         exact
-        onClick={e => {
+        onClick={(e) => {
           e.stopPropagation();
         }}
         to={redirectUrl}
         title={title || defaultTooltip}
-        disabled={disabled}
+        disabled={disable}
         className={combinedClassName}
         activeClassName={activeClass}
       >
@@ -203,8 +208,8 @@ const Button = forwardRef<any, {}>((props: Props, ref: any) => {
       exact
       to={path}
       title={title || defaultTooltip}
-      disabled={disabled}
-      onClick={e => {
+      disabled={disable}
+      onClick={(e) => {
         e.stopPropagation();
         if (onClick) {
           onClick();
@@ -222,13 +227,13 @@ const Button = forwardRef<any, {}>((props: Props, ref: any) => {
       title={title || defaultTooltip}
       aria-label={description || label || title}
       className={combinedClassName}
-      onClick={e => {
+      onClick={(e) => {
         if (onClick) {
           e.stopPropagation();
           onClick(e);
         }
       }}
-      disabled={disabled}
+      disabled={disable}
       type={type}
       {...otherProps}
     >

ui/component/header/view.jsx

@@ -170,8 +170,14 @@ const Header = (props: Props) => {
 
   const loginButtons = (
     <div className="header__auth-buttons">
-      <Button navigate={`/$/${PAGES.AUTH_SIGNIN}`} button="link" label={__('Log In')} className="mobile-hidden" />
-      <Button navigate={`/$/${PAGES.AUTH}`} button="primary" label={__('Sign Up')} />
+      <Button
+        navigate={`/$/${PAGES.AUTH_SIGNIN}`}
+        button="link"
+        label={__('Log In')}
+        className="mobile-hidden"
+        disabled={user === null}
+      />
+      <Button navigate={`/$/${PAGES.AUTH}`} button="primary" label={__('Sign Up')} disabled={user === null} />
     </div>
   );
 

ui/component/sideNavigation/view.jsx

@@ -295,7 +295,13 @@ function SideNavigation(props: Props) {
             Sign up to earn %lbc% for you and your favorite creators.
           </I18nMessage>
         </span>
-        <Button button="secondary" label={__('Sign Up')} navigate={`/$/${PAGES.AUTH}?src=sidenav_nudge`} />
+        <Button
+          button="secondary"
+          label={__('Sign Up')}
+          navigate={`/$/${PAGES.AUTH}?src=sidenav_nudge`}
+          disabled={user === null}
+        />{' '}
+        //
       </div>
     );
 

ui/redux/actions/app.js

@@ -503,17 +503,18 @@ export function doAnalyticsBuffer(uri, bufferData) {
     const fileSize = source.size; // size in bytes
     const fileSizeInBits = fileSize * 8;
     const bitRate = parseInt(fileSizeInBits / fileDurationInSeconds);
-    const userId = user.id.toString();
-
-    analytics.videoBufferEvent(claim, {
-      timeAtBuffer,
-      bufferDuration,
-      bitRate,
-      userId,
-      duration: fileDurationInSeconds,
-      playerPoweredBy: bufferData.playerPoweredBy,
-      readyState: bufferData.readyState,
-    });
+    const userId = user && user.id.toString();
+    if (userId) {
+      analytics.videoBufferEvent(claim, {
+        timeAtBuffer,
+        bufferDuration,
+        bitRate,
+        userId,
+        duration: fileDurationInSeconds,
+        playerPoweredBy: bufferData.playerPoweredBy,
+        readyState: bufferData.readyState,
+      });
+    }
   };
 }
 

ui/redux/actions/user.js

@@ -101,7 +101,7 @@ export function doInstallNewWithParams(
 
 function checkAuthBusy() {
   let time = Date.now();
-  return new Promise(function(resolve, reject) {
+  return new Promise(function (resolve, reject) {
     (function waitForAuth() {
       try {
         sessionStorage.setItem('test', 'available');

web/component/nag-no-user.jsx

@@ -0,0 +1,25 @@
+// @flow
+import { SITE_NAME } from 'config';
+import React from 'react';
+import Nag from 'component/common/nag';
+import I18nMessage from 'component/i18nMessage';
+
+export default function NagNoUser() {
+
+  return (
+    <Nag
+      type="error"
+      message={
+        <I18nMessage
+          tokens={{
+            SITE_NAME,
+          }}
+        >
+          %DOMAIN% id not available. Account functions will be unavailable. Refresh to try again.
+        </I18nMessage>
+      }
+      actionText={__('Refresh')}
+      onClick={() => window.location.reload()}
+    />
+  );
+}

web/effects/use-degraded-performance.js

@@ -14,7 +14,7 @@ export const STATUS_DOWN = 'down';
 const getParams = (user) => {
   const headers = {};
   const token = getAuthToken();
-  if (token && user.has_verified_email) {
+  if (token && user && user.has_verified_email) {
     headers[X_LBRY_AUTH_TOKEN] = token;
   }
   const params = { headers };
@@ -22,7 +22,7 @@ const getParams = (user) => {
 };
 
 export function useDegradedPerformance(onDegradedPerformanceCallback, user) {
-  const hasUser = user !== undefined;
+  const hasUser = user !== undefined && user !== null;
 
   useEffect(() => {
     if (hasUser) {