salief/channel page pagination

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

@@ -44,6 +44,7 @@ export default async function ItemPage({
 }) {
   const { channel } = await getChannelWithId({
     id: params.id,
+    limit: 100,
   })
 
   const totalItems = channel?.adds?.items?.length ?? 0

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) {
@@ -58,6 +63,10 @@ export default async function Channel({
         </div>
         <div className="hidden md:w-[3%] md:block">{}</div>
       </Flex>
+      <Flex className="pt-32 pb-8 justify-center">
+        {/* @ts-ignore */}
+        <PaginationControls pageInfo={pageInfo} />
+      </Flex>
     </section>
   )
 }

apps/site/gql/queries/channelWithId.graphql

@@ -1,4 +1,4 @@
-query channelWithId($id: String!) {
+query channelWithId($id: String!, $limit: Int!, $after: String) {
   channel(id: $id) {
     id
     timestamp
@@ -13,7 +13,7 @@ query channelWithId($id: String!) {
         role
       }
     }
-    adds(limit: 100, orderBy: "timestamp", orderDirection: "desc") {
+    adds(limit: $limit, orderBy: "timestamp", orderDirection: "desc", after: $after) {
       items {
         timestamp
         channelId
@@ -35,6 +35,9 @@ query channelWithId($id: String!) {
           }
         }
       }
+      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'],
 )