Channel::Home tab missing thumbnails (#3017)

Ticket: 3015

## Symptom
In Channel::Home tab, a Playlist row that contains playlists without a thumbnail should be showing the first claim's thumbnail instead.

## Root
- If ClaimListDiscover is used, it's supposed to handle the search part (which also covers the thumbnail fetch). Clients just pass in the params.
- The Home tab is handling the search instead, so some logic was missed.

## Fix
Just mimic the missed logic for now.

There is an open ticket to make ClaimListDiscover to be more customizable/composible so that logic remains centralized, but that probably won't be happening soon. Ideas from https://www.youtube.com/watch?v=vot0nJJ2Qdo seem useful.

ui/page/claim/internal/claimPageComponent/internal/channelPage/tabs/homeTab/internal/homeTabSection/index.js

@@ -1,5 +1,6 @@
 import { connect } from 'react-redux';
 import { doClaimSearch, doResolveClaimId, doResolveUris } from 'redux/actions/claims';
+import { doFetchThumbnailClaimsForCollectionIds } from 'redux/actions/collections';
 import { selectActiveLivestreamForChannel } from 'redux/selectors/livestream';
 import { createNormalizedClaimSearchKey } from 'util/claim';
 import {
@@ -86,6 +87,7 @@ const perform = {
   doClaimSearch,
   doResolveClaimId,
   doResolveUris,
+  doFetchThumbnailClaimsForCollectionIds,
 };
 
 export default connect(select, perform)(HomeTabSection);

ui/page/claim/internal/claimPageComponent/internal/channelPage/tabs/homeTab/internal/homeTabSection/view.jsx

@@ -37,9 +37,10 @@ type Props = {
   activeLivestreamUri: ?ClaimUri,
   hasPremiumPlus: boolean,
   // --- perform ---
-  doClaimSearch: (ClaimSearchOptions, ?DoClaimSearchSettings) => void,
+  doClaimSearch: (ClaimSearchOptions, ?DoClaimSearchSettings) => Promise<any>,
   doResolveClaimId: (claimId: string) => void,
   doResolveUris: (Array<string>) => Promise<any>,
+  doFetchThumbnailClaimsForCollectionIds: (params: { collectionIds: Array<string> }) => void,
 };
 
 function HomeTabSection(props: Props) {
@@ -67,6 +68,7 @@ function HomeTabSection(props: Props) {
     doClaimSearch,
     doResolveClaimId,
     doResolveUris,
+    doFetchThumbnailClaimsForCollectionIds,
   } = props;
 
   const timedOut = claimSearchResults === null;
@@ -92,7 +94,14 @@ function HomeTabSection(props: Props) {
     if (shouldPerformSearch) {
       const searchOptions = JSON.parse(optionsStringified);
       const searchSettings = { fetch: { viewCount: true } };
-      doClaimSearch(searchOptions, searchSettings);
+      doClaimSearch(searchOptions, searchSettings).then((res) => {
+        if (section.type === 'playlists' && res) {
+          const streams = Object.values(res);
+          // $FlowIgnore flow bug
+          const claimIds = streams.map((s) => s?.stream?.claim_id);
+          doFetchThumbnailClaimsForCollectionIds({ collectionIds: claimIds });
+        }
+      });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps -- DOESN'T FEEL RIGHT WITHOUT optionsStringified
   }, [doClaimSearch, shouldPerformSearch]);