From a6316ce71e7cbc79f3dcf725a06ae99daf795ed0 Mon Sep 17 00:00:00 2001
From: infinite-persistence
 <64950861+infinite-persistence@users.noreply.github.com>
Date: Fri, 18 Feb 2022 05:14:54 -0800
Subject: [PATCH] Fix header avatar stuck in pending mode when all channels are
 deleted (#911)

## Issue
535

## Change
- Header: Use the "channel list undefined" instead of "active channel url undefined" to determine if the button should be "pending".
- App: restore the use of `activeChannelClaim` instead of `activeChannelId`. In the existing design, the latter is never cleared is some situations, so the former is more accurate as it takes the current channel list into account. We might want to hide (not export) `activeChannelId` to avoid this mis-use again.
---
 ui/component/app/index.js                     | 4 ++--
 ui/component/app/view.jsx                     | 6 +++---
 ui/component/headerProfileMenuButton/index.js | 2 ++
 ui/component/headerProfileMenuButton/view.jsx | 7 ++++---
 4 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/ui/component/app/index.js b/ui/component/app/index.js
index 7be484546..d9a1dc33c 100644
--- a/ui/component/app/index.js
+++ b/ui/component/app/index.js
@@ -12,7 +12,7 @@ import {
   selectIsUpgradeAvailable,
   selectAutoUpdateDownloaded,
   selectModal,
-  selectActiveChannelId,
+  selectActiveChannelClaim,
   selectIsReloadRequired,
 } from 'redux/selectors/app';
 import { selectUploadCount } from 'redux/selectors/publish';
@@ -37,7 +37,7 @@ const select = (state) => ({
   isAuthenticated: selectUserVerifiedEmail(state),
   currentModal: selectModal(state),
   syncFatalError: selectSyncFatalError(state),
-  activeChannelId: selectActiveChannelId(state),
+  activeChannelClaim: selectActiveChannelClaim(state),
   myChannelClaimIds: selectMyChannelClaimIds(state),
   subscriptions: selectSubscriptions(state),
 });
diff --git a/ui/component/app/view.jsx b/ui/component/app/view.jsx
index df8e3b9c0..6a26464c1 100644
--- a/ui/component/app/view.jsx
+++ b/ui/component/app/view.jsx
@@ -79,7 +79,7 @@ type Props = {
   syncLoop: (?boolean) => void,
   currentModal: any,
   syncFatalError: boolean,
-  activeChannelId: ?string,
+  activeChannelClaim: ?ChannelClaim,
   myChannelClaimIds: ?Array<string>,
   subscriptions: Array<Subscription>,
   setActiveChannelIfNotSet: () => void,
@@ -114,7 +114,7 @@ function App(props: Props) {
     currentModal,
     syncFatalError,
     myChannelClaimIds,
-    activeChannelId,
+    activeChannelClaim,
     setActiveChannelIfNotSet,
     setIncognito,
     fetchModBlockedList,
@@ -154,7 +154,7 @@ function App(props: Props) {
   const hasMyChannels = myChannelClaimIds && myChannelClaimIds.length > 0;
   const hasNoChannels = myChannelClaimIds && myChannelClaimIds.length === 0;
   const shouldMigrateLanguage = LANGUAGE_MIGRATIONS[language];
-  const hasActiveChannelClaim = activeChannelId !== undefined;
+  const hasActiveChannelClaim = activeChannelClaim !== undefined;
   const isPersonalized = !IS_WEB || hasVerifiedEmail;
   const renderFiledrop = !isMobile && isAuthenticated;
   const connectionStatus = useConnectionStatus();
diff --git a/ui/component/headerProfileMenuButton/index.js b/ui/component/headerProfileMenuButton/index.js
index 2d3fedf27..f006a96f5 100644
--- a/ui/component/headerProfileMenuButton/index.js
+++ b/ui/component/headerProfileMenuButton/index.js
@@ -1,10 +1,12 @@
 import { connect } from 'react-redux';
 import { doSignOut } from 'redux/actions/app';
 import { selectActiveChannelClaim } from 'redux/selectors/app';
+import { selectMyChannelClaimIds } from 'redux/selectors/claims';
 import { selectUserEmail, selectUserVerifiedEmail } from 'redux/selectors/user';
 import HeaderProfileMenuButton from './view';
 
 const select = (state) => ({
+  myChannelClaimIds: selectMyChannelClaimIds(state),
   activeChannelClaim: selectActiveChannelClaim(state),
   authenticated: selectUserVerifiedEmail(state),
   email: selectUserEmail(state),
diff --git a/ui/component/headerProfileMenuButton/view.jsx b/ui/component/headerProfileMenuButton/view.jsx
index a455b858b..08fdb4b15 100644
--- a/ui/component/headerProfileMenuButton/view.jsx
+++ b/ui/component/headerProfileMenuButton/view.jsx
@@ -12,6 +12,7 @@ import React from 'react';
 import Skeleton from '@mui/material/Skeleton';
 
 type HeaderMenuButtonProps = {
+  myChannelClaimIds: ?Array<string>,
   activeChannelClaim: ?ChannelClaim,
   authenticated: boolean,
   email: ?string,
@@ -19,14 +20,14 @@ type HeaderMenuButtonProps = {
 };
 
 export default function HeaderProfileMenuButton(props: HeaderMenuButtonProps) {
-  const { activeChannelClaim, authenticated, email, signOut } = props;
-
+  const { myChannelClaimIds, activeChannelClaim, authenticated, email, signOut } = props;
+  const pendingChannelFetch = myChannelClaimIds === undefined;
   const activeChannelUrl = activeChannelClaim && activeChannelClaim.permanent_url;
 
   return (
     <div className="header__buttons">
       <Menu>
-        {activeChannelUrl === undefined ? (
+        {pendingChannelFetch ? (
           <Skeleton variant="circular" animation="wave" className="header__navigationItem--iconSkeleton" />
         ) : (
           <MenuButton