Adjust followed channels on home page to meet design requirements (#1012)

src/components/InfiniteGrids/InfiniteVideoGrid.tsx

@@ -31,6 +31,7 @@ type InfiniteVideoGridProps = {
   showChannel?: boolean
   className?: string
   currentlyWatchedVideoId?: string
+  onDemand?: boolean
   additionalLink?: {
     name: string
     url: string
@@ -55,6 +56,7 @@ export const InfiniteVideoGrid: React.FC<InfiniteVideoGridProps> = ({
   showChannel = true,
   className,
   currentlyWatchedVideoId,
+  onDemand = false,
   additionalLink,
 }) => {
   const [videosPerRow, setVideosPerRow] = useState(INITIAL_VIDEOS_PER_ROW)
@@ -85,7 +87,7 @@ export const InfiniteVideoGrid: React.FC<InfiniteVideoGridProps> = ({
     }))
   }, [cachedCategoryId, targetRowsCount])
 
-  const { placeholdersCount, displayedItems, error, allItemsLoaded, loading } = useInfiniteGrid<
+  const { placeholdersCount, displayedItems, error, totalCount, loading } = useInfiniteGrid<
     GetVideosConnectionQuery,
     GetVideosConnectionQuery['videosConnection'],
     GetVideosConnectionQueryVariables
@@ -95,7 +97,8 @@ export const InfiniteVideoGrid: React.FC<InfiniteVideoGridProps> = ({
     skipCount,
     queryVariables,
     targetRowsCount,
-    onDemand: true,
+    onDemand,
+    onScrollToBottom: !onDemand ? fetchMore : undefined,
     dataAccessor: (rawData) => {
       if (currentlyWatchedVideoId) {
         return (
@@ -157,6 +160,8 @@ export const InfiniteVideoGrid: React.FC<InfiniteVideoGridProps> = ({
     return null
   }
 
+  const shouldShowLoadMoreButton = onDemand && !loading && displayedItems.length < totalCount
+
   // TODO: We should probably postpone doing first fetch until `onResize` gets called.
   // Right now we'll make the first request and then right after another one based on the resized columns
   return (
@@ -178,7 +183,7 @@ export const InfiniteVideoGrid: React.FC<InfiniteVideoGridProps> = ({
         </GridHeadingContainer>
       )}
       <Grid onResize={(sizes) => setVideosPerRow(sizes.length)}>{gridContent}</Grid>
-      {!allItemsLoaded && !loading && (
+      {shouldShowLoadMoreButton && (
         <LoadMoreButtonWrapper>
           <LoadMoreButton onClick={fetchMore} />
         </LoadMoreButtonWrapper>

src/components/InfiniteGrids/useInfiniteGrid.ts

@@ -35,10 +35,11 @@ type UseInfiniteGridParams<TRawData, TPaginatedData extends PaginatedData<unknow
   targetRowsCount: number
   itemsPerRow: number
   skipCount: number
-  onScrollToBottom: () => void
   onError?: (error: unknown) => void
   queryVariables: TArgs
-} & ({ onDemand?: false; onScrollToBottom: () => void } | { onDemand: true; onScrollToBottom?: undefined })
+  onDemand?: boolean
+  onScrollToBottom?: () => void
+}
 
 type UseInfiniteGridReturn<TPaginatedData extends PaginatedData<unknown>> = {
   displayedItems: TPaginatedData['edges'][0]['node'][]
@@ -46,6 +47,7 @@ type UseInfiniteGridReturn<TPaginatedData extends PaginatedData<unknown>> = {
   error?: ApolloError
   allItemsLoaded: boolean
   loading: boolean
+  totalCount: number
 }
 
 export const useInfiniteGrid = <
@@ -143,5 +145,6 @@ export const useInfiniteGrid = <
     allItemsLoaded,
     error,
     loading,
+    totalCount: data?.totalCount || 0,
   }
 }

src/views/viewer/HomeView.tsx

@@ -1,24 +1,18 @@
 import styled from '@emotion/styled'
-import { sub } from 'date-fns'
 import React from 'react'
 
 import useVideosConnection from '@/api/hooks/videosConnection'
 import {
   InfiniteVideoGrid,
-  InterruptedVideosGallery,
   LimitedWidthContainer,
-  VideoHero,
   OfficialJoystreamUpdate,
+  VideoHero,
   ViewErrorFallback,
 } from '@/components'
 import { usePersonalDataStore } from '@/providers'
 import { transitions } from '@/shared/theme'
 import { SentryLogger } from '@/utils/logs'
 
-const MIN_FOLLOWED_CHANNELS_VIDEOS = 16
-// last three months
-const MIN_DATE_FOLLOWED_CHANNELS_VIDEOS = sub(new Date(), { months: 3 })
-
 export const HomeView: React.FC = () => {
   const followedChannels = usePersonalDataStore((state) => state.followedChannels)
 
@@ -29,15 +23,12 @@ export const HomeView: React.FC = () => {
     {
       where: {
         channelId_in: channelIdIn,
-        createdAt_gte: MIN_DATE_FOLLOWED_CHANNELS_VIDEOS,
       },
     },
     { skip: !anyFollowedChannels, onError: (error) => SentryLogger.error('Failed to fetch videos', 'HomeView', error) }
   )
 
   const followedChannelsVideosCount = videosConnection?.totalCount
-  const shouldShowFollowedChannels =
-    followedChannelsVideosCount && followedChannelsVideosCount > MIN_FOLLOWED_CHANNELS_VIDEOS
 
   if (error) {
     return <ViewErrorFallback />
@@ -47,13 +38,9 @@ export const HomeView: React.FC = () => {
     <LimitedWidthContainer big>
       <VideoHero />
       <Container className={transitions.names.slide}>
-        <InterruptedVideosGallery />
-        <StyledInfiniteVideoGrid
-          title={shouldShowFollowedChannels ? 'Recent Videos From Followed Channels' : 'Recent Videos'}
-          channelIdIn={shouldShowFollowedChannels ? channelIdIn : null}
-          createdAtGte={shouldShowFollowedChannels ? MIN_DATE_FOLLOWED_CHANNELS_VIDEOS : null}
-          ready={!loading}
-        />
+        {!loading && followedChannelsVideosCount ? (
+          <StyledInfiniteVideoGrid title="Followed channels" channelIdIn={channelIdIn} ready={!loading} onDemand />
+        ) : null}
         <OfficialJoystreamUpdate />
       </Container>
     </LimitedWidthContainer>