Following: handle removed channels better (#2986)

ui/component/sideNavigation/index.js

@@ -11,14 +11,14 @@ import {
   selectSubscriptionUris,
   selectSubscriptions,
 } from 'redux/selectors/subscriptions';
-import { doClearClaimSearch, doResolveUris } from 'redux/actions/claims';
+import { doClearClaimSearch } from 'redux/actions/claims';
 import { doClearPurchasedUriSuccess } from 'redux/actions/file';
 import { selectFollowedTags } from 'redux/selectors/tags';
 import { selectUserVerifiedEmail, selectUser } from 'redux/selectors/user';
 import { selectClientSettings, selectHomepageData } from 'redux/selectors/settings';
 import { doOpenModal, doSignOut } from 'redux/actions/app';
 import { selectUnseenNotificationCount } from 'redux/selectors/notifications';
-import { selectClaimsByUri, selectPurchaseUriSuccess } from 'redux/selectors/claims';
+import { selectClaimsByUri, selectPurchaseUriSuccess, selectResolvingUris } from 'redux/selectors/claims';
 import { selectUserHasValidOdyseeMembership } from 'redux/selectors/memberships';
 import { GetLinksData } from 'util/buildHomepage';
 
@@ -60,6 +60,8 @@ const selectSidebarCategories = createSelector(
 
 function doGetDisplayedSubs(filter) {
   return async (dispatch, getState) => {
+    await waitIfResolving(1000, 5, getState);
+
     const state = getState();
     const claimsByUri = selectClaimsByUri(state);
     const subs = selectSubscriptions(state);
@@ -69,7 +71,6 @@ function doGetDisplayedSubs(filter) {
     if (subs) {
       if (filter) {
         const f = filter.toLowerCase();
-
         subs.forEach((sub) => {
           const claim = claimsByUri[sub?.uri];
           if (claim) {
@@ -80,13 +81,22 @@ function doGetDisplayedSubs(filter) {
         });
       } else {
         filteredSubs = lastActiveSubs?.length > 0 ? lastActiveSubs : subs.slice(0, SIDEBAR_SUBS_DISPLAYED);
+        filteredSubs = filteredSubs.filter((sub) => claimsByUri[sub?.uri]);
       }
     }
 
     return filteredSubs;
   };
 }
 
+async function waitIfResolving(waitMs, maxAttempts, getState) {
+  let isResolvingUris = selectResolvingUris(getState()).length > 0;
+  for (let waitCount = 0; isResolvingUris && waitCount < maxAttempts; ++waitCount) {
+    await new Promise((resolve) => setTimeout(resolve, waitMs));
+    isResolvingUris = selectResolvingUris(getState()).length > 0;
+  }
+}
+
 // ****************************************************************************
 // SideNavigation
 // ****************************************************************************
@@ -110,6 +120,5 @@ export default connect(select, {
   doClearPurchasedUriSuccess,
   doOpenModal,
   doGetDisplayedSubs,
-  doResolveUris,
   doBeginPublish,
 })(SideNavigation);

ui/component/sideNavigation/view.jsx

@@ -182,7 +182,6 @@ function SideNavigation(props: Props) {
     doClearPurchasedUriSuccess,
     doOpenModal,
     doGetDisplayedSubs,
-    doResolveUris,
     doBeginPublish,
   } = props;
 
@@ -550,16 +549,11 @@ function SideNavigation(props: Props) {
 
   React.useEffect(() => {
     if (showSubsSection) {
+      // Done this way to avoid over-render from claimsByUris[].
       doGetDisplayedSubs(subscriptionFilter).then((result) => setDisplayedSubs(result));
     }
   }, [subscriptionFilter, showSubsSection, doGetDisplayedSubs]);
 
-  // --- Resolve subscriptions
-  React.useEffect(() => {
-    doResolveUris(subscriptionUris, true);
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- on mount
-  }, []);
-
   // **************************************************************************
   // **************************************************************************
 

ui/index.jsx

@@ -23,6 +23,7 @@ import {
 import Lbry, { apiCall } from 'lbry';
 import { isURIValid } from 'util/lbryURI';
 import { setSearchApi } from 'redux/actions/search';
+import { doResolveSubscriptions } from 'redux/actions/subscriptions';
 import {
   doSetLanguage,
   doFetchLanguage,
@@ -252,6 +253,7 @@ function AppWrapper() {
         app.store.dispatch(doBlackListedOutpointsSubscribe());
         app.store.dispatch(doFilteredOutpointsSubscribe());
         app.store.dispatch(doFetchUserLocale());
+        app.store.dispatch(doResolveSubscriptions());
       }, 25);
 
       const nonCriticalTimer = setTimeout(() => {

ui/page/channelsFollowingManage/view.jsx

@@ -125,6 +125,7 @@ export default function ChannelsFollowingManage(props: Props) {
                 loading={isLoadingPage}
                 useLoadingSpinner
                 showHiddenByUser
+                showUnresolvedClaims
               />
             </>
           )}

ui/redux/actions/subscriptions.js

@@ -4,13 +4,13 @@ import { MS } from 'constants/date-time';
 import { SIDEBAR_SUBS_DISPLAYED } from 'constants/subscriptions';
 import REWARDS from 'rewards';
 import { Lbryio } from 'lbryinc';
-import { doClaimSearch } from 'redux/actions/claims';
+import { doClaimSearch, doResolveUris } from 'redux/actions/claims';
 import { doClaimRewardType } from 'redux/actions/rewards';
 import { getChannelFromClaim } from 'util/claim';
 import { parseURI } from 'util/lbryURI';
 import { doAlertWaitingForSync } from 'redux/actions/app';
 import { doToast } from 'redux/actions/notifications';
-import { selectSubscriptionIds } from 'redux/selectors/subscriptions';
+import { selectSubscriptionIds, selectSubscriptionUris } from 'redux/selectors/subscriptions';
 
 type SubscriptionArgs = {
   channelName: string,
@@ -97,6 +97,14 @@ export function doChannelUnsubscribe(subscription: SubscriptionArgs, followToast
   };
 }
 
+export function doResolveSubscriptions() {
+  return (dispatch: Dispatch, getState: GetState) => {
+    const state = getState();
+    const subscriptionUris = selectSubscriptionUris(state);
+    dispatch(doResolveUris(subscriptionUris, true));
+  };
+}
+
 export function doFetchLastActiveSubs(forceFetch: boolean = false, count: number = SIDEBAR_SUBS_DISPLAYED) {
   return (dispatch: Dispatch, getState: GetState) => {
     const now = Date.now();