Channel view pagination fix (#1069)

* Channel view details (#1019)

* channel details

* unfollow dialog

* details

* typo

* Pagination fix

* Fix pagination

* cr

* fix pagination issue

* improve video query filters

Co-authored-by: Klaudiusz Dembler <dev@kdembler.com>

src/api/client/cache.ts

@@ -17,6 +17,7 @@ import {
 
 const getVideoKeyArgs = (args: Record<string, GetVideosQueryVariables['where']> | null) => {
   // make sure queries asking for a specific category are separated in cache
+  const onlyCount = args?.first === 0
   const channelId = args?.where?.channelId_eq || ''
   const categoryId = args?.where?.categoryId_eq || ''
   const idEq = args?.where?.id_eq || ''
@@ -29,7 +30,7 @@ const getVideoKeyArgs = (args: Record<string, GetVideosQueryVariables['where']>
     return `${createdAtGte}:${channelIdIn}`
   }
 
-  return `${channelId}:${categoryId}:${channelIdIn}:${createdAtGte}:${isPublic}:${idEq}`
+  return `${onlyCount}:${channelId}:${categoryId}:${channelIdIn}:${createdAtGte}:${isPublic}:${idEq}`
 }
 
 const createDateHandler = () => ({

src/api/client/resolvers.ts

@@ -92,6 +92,7 @@ export const queryNodeStitchingResolvers = (
       try {
         const channelsResolver = createResolverWithTransforms(queryNodeSchema, 'channels', [
           RemoveQueryNodeFollowsField,
+          RemoveQueryNodeChannelViewsField,
         ])
         const channels = await channelsResolver(parent, args, context, info)
 

src/views/viewer/ChannelView/ChannelView.tsx

@@ -9,7 +9,13 @@ import {
   useUnfollowChannel,
   useVideosConnection,
 } from '@/api/hooks'
-import { AssetAvailability, SearchQuery, VideoOrderByInput, useSearchLazyQuery } from '@/api/queries'
+import {
+  AssetAvailability,
+  SearchQuery,
+  VideoFieldsFragment,
+  VideoOrderByInput,
+  useSearchLazyQuery,
+} from '@/api/queries'
 import { LimitedWidthContainer, VideoTile, ViewWrapper } from '@/components'
 import { SORT_OPTIONS } from '@/config/sorting'
 import { AssetType, useAsset, useDialog, usePersonalDataStore } from '@/providers'
@@ -77,16 +83,28 @@ export const ChannelView: React.FC = () => {
     assetType: AssetType.COVER,
   })
   const { currentPage, setCurrentPage, currentSearchPage, setCurrentSearchPage } = usePagination(0)
-  const { edges, totalCount, loading: loadingVideos, error: videosError, refetch } = useVideosConnection(
+  const {
+    edges,
+    totalCount,
+    loading: loadingVideos,
+    error: videosError,
+    fetchMore,
+    refetch,
+    variables,
+    pageInfo,
+  } = useVideosConnection(
     {
       first: INITIAL_FIRST,
       orderBy: sortVideosBy,
       where: {
         channelId_eq: id,
         isPublic_eq: true,
+        isCensored_eq: false,
+        thumbnailPhotoAvailability_eq: AssetAvailability.Accepted,
+        mediaAvailability_eq: AssetAvailability.Accepted,
       },
     },
-    { notifyOnNetworkStatusChange: true, fetchPolicy: 'cache-and-network' }
+    { notifyOnNetworkStatusChange: true }
   )
   const { videoCount: videosLastMonth } = useChannelVideoCount(id, DATE_ONE_MONTH_PAST)
   useEffect(() => {
@@ -109,16 +127,20 @@ export const ChannelView: React.FC = () => {
               <br /> Cancel to follow for more fresh content!
             </>
           ),
-          primaryButtonText: 'Unfollow',
-          onPrimaryButtonClick: () => {
-            updateChannelFollowing(id, false)
-            unfollowChannel(id)
-            setFollowing(false)
-            closeUnfollowDialog()
+          primaryButton: {
+            text: 'Unfollow',
+            onClick: () => {
+              updateChannelFollowing(id, false)
+              unfollowChannel(id)
+              setFollowing(false)
+              closeUnfollowDialog()
+            },
           },
-          secondaryButtonText: 'Keep following',
-          onSecondaryButtonClick: () => {
-            closeUnfollowDialog()
+          secondaryButton: {
+            text: 'Keep following',
+            onClick: () => {
+              closeUnfollowDialog()
+            },
           },
         })
       } else {
@@ -155,7 +177,20 @@ export const ChannelView: React.FC = () => {
   }
   const handleOnResizeGrid = (sizes: number[]) => setVideosPerRow(sizes.length)
   const handleChangePage = (page: number) => {
-    isSearching ? setCurrentSearchPage(page) : setCurrentPage(page)
+    if (isSearching) {
+      setCurrentSearchPage(page)
+    } else {
+      setCurrentPage(page)
+      if (!!edges && page * videosPerPage + videosPerPage > edges?.length) {
+        fetchMore({
+          variables: {
+            ...variables,
+            first: page * videosPerPage + videosPerPage * 3 - edges.length,
+            after: pageInfo?.endCursor,
+          },
+        })
+      }
+    }
   }
 
   const videosPerPage = ROWS_AMOUNT * videosPerRow
@@ -301,7 +336,9 @@ const getVideosFromSearch = (loading: boolean, data: SearchQuery['search'] | und
   if (loading || !data) {
     return { channels: [], videos: [] }
   }
-  const searchVideos = data.flatMap((result) => (result.item.__typename === 'Video' ? [result.item] : []))
+  const searchVideos: Array<{ __typename?: 'Video' } & VideoFieldsFragment> = data.flatMap((result) =>
+    result.item.__typename === 'Video' ? [result.item] : []
+  )
   return { searchVideos }
 }
 type UseSearchVideosParams = {