salief/channel pagination

apps/site/app/channel/[id]/[index]/page.tsx

@@ -6,7 +6,7 @@ import { kv } from '@vercel/kv'
 import { P, match } from 'ts-pattern'
 import { AudioPlayer, VideoPlayer } from '@/client'
 import { Flex, Stack, Typography, Separator } from '@/design-system'
-import { getChannelWithId, getAddWithChannelIndex } from '@/gql'
+import { getAddWithChannelIndex } from '@/gql'
 import {
   type MediaAssetObject,
   ipfsUrlToCid,

apps/site/app/channel/[id]/page.tsx

@@ -1,4 +1,4 @@
-import { ViewToggle } from '@/client'
+import { ViewToggle, PaginationControls } from '@/client'
 import { Flex, Stack, Typography } from '@/design-system'
 import { getChannelWithId } from '@/gql'
 import { getAddsMetadata } from '@/lib'
@@ -17,8 +17,13 @@ export default async function Channel({
   params: { id: string }
   searchParams: { [key: string]: string | string[] | undefined }
 }) {
-  const { channel } = await getChannelWithId({
+  // biome-ignore lint:
+  const after = searchParams['after'] as string | undefined
+
+  const { channel, pageInfo } = await getChannelWithId({
     id: params.id,
+    limit: 100,
+    after,
   })
 
   if (!channel) {
@@ -54,6 +59,10 @@ export default async function Channel({
             </Stack>
             {/* @ts-ignore */}
             <ChannelDetails channel={channel} />
+            <Flex className="pt-36 justify-center md:mr-[19%]">
+              {/* @ts-ignore */}
+              <PaginationControls pageInfo={pageInfo} />
+            </Flex>
           </Stack>
         </div>
         <div className="hidden md:w-[3%] md:block">{}</div>

apps/site/gql/queries/channelWithId.graphql

@@ -1,8 +1,7 @@
-query channelWithId($id: String!) {
+query channelWithId($id: String!, $limit: Int!, $after: String) {
   channel(id: $id) {
     id
     timestamp
-    addsCounter
     createdById
     uri
     name
@@ -14,12 +13,11 @@ query channelWithId($id: String!) {
         role
       }
     }
-    adds(limit: 100, orderBy: "channelIndex", orderDirection: "desc") {
+    adds(limit: $limit, orderBy: "timestamp", orderDirection: "desc", after: $after) {
       items {
         timestamp
         channelId
         itemId
-        channelIndex
         addedById
         removed
         item {
@@ -30,15 +28,16 @@ query channelWithId($id: String!) {
         }
         channel {
           name
-          addsCounter
-          adds(limit: 100, orderBy: "channelIndex", orderDirection: "desc") {
+          adds(limit: 100, orderBy: "timestamp", orderDirection: "desc") {
             items {
               itemId
-              channelIndex
             }
           }
         }
       }
+      pageInfo {
+        ...PageInfo
+      }
     }
   }
 }

apps/site/gql/requests/getChannelWithId.ts

@@ -2,12 +2,21 @@ import sdk from '../client'
 import { unstable_cache } from 'next/cache'
 
 export const getChannelWithId = unstable_cache(
-  async ({ id }: { id: string }) => {
+  async ({
+    id,
+    limit,
+    after,
+  }: { id: string; limit: number; after?: string }) => {
     const response = await sdk.channelWithId({
-      id: id,
+      id,
+      limit,
+      after,
     })
 
-    return { channel: response.channel }
+    return {
+      channel: response.channel,
+      pageInfo: response.channel?.adds?.pageInfo,
+    }
   },
   ['channelWithId'],
 )

apps/site/gql/sdk.generated.ts

@@ -1189,10 +1189,12 @@ export type AllUsersQuery = { __typename?: 'Query', users: { __typename?: 'UserP
 
 export type ChannelWithIdQueryVariables = Exact<{
   id: Scalars['String']['input'];
+  limit: Scalars['Int']['input'];
+  after?: InputMaybe<Scalars['String']['input']>;
 }>;
 
 
-export type ChannelWithIdQuery = { __typename?: 'Query', channel?: { __typename?: 'Channel', id: string, timestamp: any, addsCounter: any, createdById: any, uri: string, name: string, description: string, roles?: { __typename?: 'ChannelRolesPage', items: Array<{ __typename?: 'ChannelRoles', timestamp: any, rid: any, role: any }> } | null, adds?: { __typename?: 'AddsPage', items: Array<{ __typename?: 'Adds', timestamp: any, channelId: string, itemId: string, channelIndex: any, addedById: any, removed?: boolean | null, item: { __typename?: 'Item', id: string, uri: string, timestamp: any, createdById: any }, channel: { __typename?: 'Channel', name: string, addsCounter: any, adds?: { __typename?: 'AddsPage', items: Array<{ __typename?: 'Adds', itemId: string, channelIndex: any }> } | null } }> } | null } | null };
+export type ChannelWithIdQuery = { __typename?: 'Query', channel?: { __typename?: 'Channel', id: string, timestamp: any, createdById: any, uri: string, name: string, description: string, roles?: { __typename?: 'ChannelRolesPage', items: Array<{ __typename?: 'ChannelRoles', timestamp: any, rid: any, role: any }> } | null, adds?: { __typename?: 'AddsPage', items: Array<{ __typename?: 'Adds', timestamp: any, channelId: string, itemId: string, addedById: any, removed?: boolean | null, item: { __typename?: 'Item', id: string, uri: string, timestamp: any, createdById: any }, channel: { __typename?: 'Channel', name: string, adds?: { __typename?: 'AddsPage', items: Array<{ __typename?: 'Adds', itemId: string }> } | null } }>, pageInfo: { __typename?: 'PageInfo', startCursor?: string | null, endCursor?: string | null, hasPreviousPage: boolean, hasNextPage: boolean } } | null } | null };
 
 export type ChannelsForItemQueryVariables = Exact<{
   id: Scalars['String']['input'];
@@ -1442,11 +1444,10 @@ export const AllUsersDocument = gql`
 }
     `;
 export const ChannelWithIdDocument = gql`
-    query channelWithId($id: String!) {
+    query channelWithId($id: String!, $limit: Int!, $after: String) {
   channel(id: $id) {
     id
     timestamp
-    addsCounter
     createdById
     uri
     name
@@ -1458,12 +1459,11 @@ export const ChannelWithIdDocument = gql`
         role
       }
     }
-    adds(limit: 100, orderBy: "channelIndex", orderDirection: "desc") {
+    adds(limit: $limit, orderBy: "timestamp", orderDirection: "desc", after: $after) {
       items {
         timestamp
         channelId
         itemId
-        channelIndex
         addedById
         removed
         item {
@@ -1474,19 +1474,20 @@ export const ChannelWithIdDocument = gql`
         }
         channel {
           name
-          addsCounter
-          adds(limit: 100, orderBy: "channelIndex", orderDirection: "desc") {
+          adds(limit: 100, orderBy: "timestamp", orderDirection: "desc") {
             items {
               itemId
-              channelIndex
             }
           }
         }
       }
+      pageInfo {
+        ...PageInfo
+      }
     }
   }
 }
-    `;
+    ${PageInfoFragmentDoc}`;
 export const ChannelsForItemDocument = gql`
     query channelsForItem($id: String!) {
   addss(where: {itemId: $id}) {