add pagination to dashboard

Author: al3xnag

packages/jsrepl/src/app/dashboard/page.tsx

@@ -2,7 +2,6 @@
 
 import { useState } from 'react'
 import { useRouter, useSearchParams } from 'next/navigation'
-import { usePrefetchQuery } from '@tanstack/react-query'
 import { LucideLibrary, LucidePlus } from 'lucide-react'
 import IconLanguageCss from '~icons/mdi/language-css3.jsx'
 import IconLanguageHtml from '~icons/mdi/language-html5.jsx'
@@ -15,14 +14,10 @@ import ReplStarterDialog from '@/components/repl-starter-dialog'
 import { Button } from '@/components/ui/button'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { useAuthHelpers } from '@/hooks/useAuthHelpers'
-import { useSupabaseClient } from '@/hooks/useSupabaseClient'
 import { useUser } from '@/hooks/useUser'
-import { loadRecentlyViewedRepls, loadUserRepls } from '@/lib/repl-stored-state/adapter-supabase'
 import { RecentlyViewed } from './recently-viewed'
 import { YourWork } from './your-work'
 
-export const dynamic = 'force-dynamic'
-
 enum Tab {
   RecentlyViewed = 'recently-viewed',
   YourWork = 'your-work',
@@ -34,35 +29,24 @@ export default function DashboardPage() {
   const searchParams = useSearchParams()
   const router = useRouter()
   const user = useUser()
-  const supabase = useSupabaseClient()
   const { signInWithGithub } = useAuthHelpers()
   const [starterDialogOpen, setStarterDialogOpen] = useState(false)
 
   const activeTab: Tab = (searchParams.get('tab') as Tab | null) ?? defaultTab
 
   function setActiveTab(tab: Tab) {
     const newSearchParams = new URLSearchParams(searchParams)
+    newSearchParams.delete('page')
+
     if (tab === defaultTab) {
       newSearchParams.delete('tab')
     } else {
       newSearchParams.set('tab', tab)
     }
 
-    router.push(`?${newSearchParams.toString()}`)
+    router.push(`?${newSearchParams.toString()}`, { scroll: false })
   }
 
-  usePrefetchQuery({
-    queryKey: ['recently-viewed-repls', user?.id],
-    queryFn: ({ signal }) => (user ? loadRecentlyViewedRepls({ supabase, signal }) : []),
-    staleTime: 60_000,
-  })
-
-  usePrefetchQuery({
-    queryKey: ['user-repls', user?.id],
-    queryFn: ({ signal }) => (user ? loadUserRepls(user.id, { supabase, signal }) : []),
-    staleTime: 60_000,
-  })
-
   if (!user) {
     return (
       <>

packages/jsrepl/src/app/dashboard/recently-viewed.tsx

@@ -1,30 +1,50 @@
 'use client'
 
+import { useRef } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { LucideTelescope } from 'lucide-react'
 import ErrorComponent from '@/components/error'
-import { RelativeTime } from '@/components/relative-time'
+import { Pagination } from '@/components/pagination'
+import { useSearchParamsPagination } from '@/hooks/useSearchParamsPagination'
 import { useSupabaseClient } from '@/hooks/useSupabaseClient'
 import { useUser } from '@/hooks/useUser'
 import { loadRecentlyViewedRepls } from '@/lib/repl-stored-state/adapter-supabase'
-import { ReplStoredState } from '@/types'
 import ReplCard from './repl-card'
 import { ReplCardSkeleton } from './repl-card-skeleton'
 
 export function RecentlyViewed() {
   const user = useUser()
   const supabase = useSupabaseClient()
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  const [pagination, consumePageData] = useSearchParamsPagination({
+    scroll() {
+      containerRef.current?.scrollIntoView({ behavior: 'smooth' })
+    },
+  })
 
   const { data, isLoading, error } = useQuery({
-    queryKey: ['recently-viewed-repls', user?.id],
-    queryFn: ({ signal }) => (user ? loadRecentlyViewedRepls({ supabase, signal }) : []),
+    queryKey: ['recently-viewed-repls', user?.id, pagination.page, pagination.pageSize],
+    queryFn: ({ signal }) =>
+      user
+        ? loadRecentlyViewedRepls({
+            supabase,
+            page: pagination.page,
+            pageSize: pagination.pageSize,
+            signal,
+          })
+        : { data: [], hasMore: false },
     staleTime: 60_000,
   })
 
+  const repls = data?.data
+  const hasMore = data?.hasMore ?? false
+  consumePageData({ hasMore })
+
   return (
-    <>
+    <div ref={containerRef} className="scroll-mt-24">
       {error && <ErrorComponent error={error} />}
-      {data && data.length === 0 && (
+      {repls && repls.length === 0 && (
         <div className="flex flex-col items-center justify-center gap-2">
           <LucideTelescope size={84} className="my-8 opacity-10" />
           <p className="text-muted-foreground/60">
@@ -33,28 +53,14 @@ export function RecentlyViewed() {
         </div>
       )}
       <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-        {data &&
-          data.map((repl) => (
-            <ReplCard
-              key={repl.id}
-              repl={repl}
-              customTimestamp={<RecentlyViewedTimestamp repl={repl} />}
-            />
+        {repls &&
+          repls.map((repl) => <ReplCard key={repl.id} repl={repl} mode="recently-viewed" />)}
+        {isLoading &&
+          Array.from({ length: pagination.pageSize }).map((_, index) => (
+            <ReplCardSkeleton key={index} />
           ))}
-        {isLoading && Array.from({ length: 8 }).map((_, index) => <ReplCardSkeleton key={index} />)}
       </div>
-    </>
-  )
-}
-
-function RecentlyViewedTimestamp({ repl }: { repl: ReplStoredState & { viewed_at: string } }) {
-  return (
-    <>
-      {repl.viewed_at && (
-        <span className="text-muted-foreground text-nowrap text-xs">
-          <RelativeTime date={new Date(repl.viewed_at)} />
-        </span>
-      )}
-    </>
+      <Pagination value={pagination} className="mt-10" />
+    </div>
   )
 }

packages/jsrepl/src/app/dashboard/repl-card.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { Dispatch, SetStateAction, useMemo, useState } from 'react'
 import Link from 'next/link'
 import { useRouter } from 'next/navigation'
@@ -26,13 +28,19 @@ import * as ReplFS from '@/lib/repl-fs'
 import { fork, getPageUrl, remove } from '@/lib/repl-stored-state/adapter-supabase'
 import { ReplStoredState } from '@/types'
 
-export default function ReplCard({
-  repl,
-  customTimestamp,
-}: {
-  repl: ReplStoredState
-  customTimestamp?: React.ReactNode
-}) {
+type Props =
+  | {
+      repl: ReplStoredState
+      mode?: undefined
+    }
+  | {
+      repl: ReplStoredState & {
+        viewed_at: string
+      }
+      mode: 'recently-viewed'
+    }
+
+export default function ReplCard({ repl, mode }: Props) {
   const user = useUser()
   const supabase = useSupabaseClient()
   const queryClient = useQueryClient()
@@ -46,6 +54,7 @@ export default function ReplCard({
   const url = useMemo(() => getPageUrl(repl), [repl])
 
   const filePath = repl.activeModel
+  const datetime = mode === 'recently-viewed' ? repl.viewed_at : repl.updated_at
 
   const code = useMemo(() => {
     const file = filePath ? ReplFS.getFile(repl.fs, filePath) : null
@@ -102,10 +111,7 @@ export default function ReplCard({
         },
       })
 
-      const queryKey = ['user-repls', user?.id]
-      queryClient.setQueryData<ReplStoredState[]>(queryKey, (prev) => {
-        return prev ? [forkedRepl, ...prev] : prev
-      })
+      queryClient.invalidateQueries({ queryKey: ['user-repls', user?.id] })
     } catch (error) {
       console.error(error)
       toast.error('Failed to fork.')
@@ -151,7 +157,11 @@ export default function ReplCard({
         <h2 className="font-medium">{repl.title || 'Untitled'}</h2>
         <p className="text-muted-foreground line-clamp-3 text-sm">{repl.description}</p>
         <div className="mt-auto flex flex-wrap items-center justify-between gap-2 pt-2">
-          {customTimestamp ?? <Timestamp repl={repl} />}
+          {datetime && (
+            <span className="text-muted-foreground text-nowrap text-xs">
+              <RelativeTime date={new Date(datetime)} />
+            </span>
+          )}
           {repl.user && (
             <div className="text-muted-foreground flex min-w-0 items-center gap-1 text-xs">
               <UserAvatar user={repl.user} size={18} />
@@ -166,18 +176,6 @@ export default function ReplCard({
   )
 }
 
-function Timestamp({ repl }: { repl: ReplStoredState }) {
-  return (
-    <>
-      {repl.updated_at && (
-        <span className="text-muted-foreground text-nowrap text-xs">
-          <RelativeTime date={new Date(repl.updated_at)} />
-        </span>
-      )}
-    </>
-  )
-}
-
 function RemoveButton({
   repl,
   isBusy,
@@ -203,13 +201,8 @@ function RemoveButton({
       await remove(repl.id, { supabase })
       toast('Deleted.')
 
-      queryClient.setQueryData<ReplStoredState[]>(['user-repls', user?.id], (prev) => {
-        return prev ? prev.filter((x) => x.id !== repl.id) : prev
-      })
-
-      queryClient.setQueryData<ReplStoredState[]>(['recently-viewed-repls', user?.id], (prev) => {
-        return prev ? prev.filter((x) => x.id !== repl.id) : prev
-      })
+      queryClient.invalidateQueries({ queryKey: ['user-repls', user?.id] })
+      queryClient.invalidateQueries({ queryKey: ['recently-viewed-repls', user?.id] })
     } catch (error) {
       console.error(error)
       toast.error('Failed to delete.')

packages/jsrepl/src/app/dashboard/your-work.tsx

@@ -1,6 +1,9 @@
+import { useRef } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { LucideLampDesk } from 'lucide-react'
 import ErrorComponent from '@/components/error'
+import { Pagination } from '@/components/pagination'
+import { useSearchParamsPagination } from '@/hooks/useSearchParamsPagination'
 import { useSupabaseClient } from '@/hooks/useSupabaseClient'
 import { useUser } from '@/hooks/useUser'
 import { loadUserRepls } from '@/lib/repl-stored-state/adapter-supabase'
@@ -10,17 +13,36 @@ import { ReplCardSkeleton } from './repl-card-skeleton'
 export function YourWork() {
   const user = useUser()
   const supabase = useSupabaseClient()
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  const [pagination, consumePageData] = useSearchParamsPagination({
+    scroll() {
+      containerRef.current?.scrollIntoView({ behavior: 'smooth' })
+    },
+  })
 
   const { data, isLoading, error } = useQuery({
-    queryKey: ['user-repls', user?.id],
-    queryFn: ({ signal }) => (user ? loadUserRepls(user.id, { supabase, signal }) : []),
+    queryKey: ['user-repls', user?.id, pagination.page, pagination.pageSize],
+    queryFn: ({ signal }) =>
+      user
+        ? loadUserRepls(user.id, {
+            supabase,
+            page: pagination.page,
+            pageSize: pagination.pageSize,
+            signal,
+          })
+        : { data: [], hasMore: false },
     staleTime: 60_000,
   })
 
+  const repls = data?.data
+  const hasMore = data?.hasMore ?? false
+  consumePageData({ hasMore })
+
   return (
-    <>
+    <div ref={containerRef} className="scroll-mt-24">
       {error && <ErrorComponent error={error} />}
-      {data && data.length === 0 && (
+      {repls && repls.length === 0 && (
         <div className="flex flex-col items-center justify-center gap-2">
           <LucideLampDesk size={84} className="my-8 opacity-10" />
           <p className="text-muted-foreground/60">
@@ -29,9 +51,13 @@ export function YourWork() {
         </div>
       )}
       <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-        {data && data.map((repl) => <ReplCard key={repl.id} repl={repl} />)}
-        {isLoading && Array.from({ length: 8 }).map((_, index) => <ReplCardSkeleton key={index} />)}
+        {repls && repls.map((repl) => <ReplCard key={repl.id} repl={repl} />)}
+        {isLoading &&
+          Array.from({ length: pagination.pageSize }).map((_, index) => (
+            <ReplCardSkeleton key={index} />
+          ))}
       </div>
-    </>
+      <Pagination value={pagination} className="mt-10" />
+    </div>
   )
 }

packages/jsrepl/src/app/layout.tsx

@@ -36,7 +36,7 @@ export default async function RootLayout({
 
   return (
     // suppressHydrationWarning: https://github.com/pacocoursey/next-themes?tab=readme-ov-file#with-app
-    <html lang="en" suppressHydrationWarning>
+    <html lang="en" suppressHydrationWarning className="scroll-pt-24">
       <body>
         <NavigationGuardProvider>
           <SessionProvider initialSession={session}>

packages/jsrepl/src/components/pagination.tsx

@@ -0,0 +1,62 @@
+import { LucideChevronLeft, LucideChevronRight } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { PaginationProps } from '@/hooks/useSearchParamsPagination'
+import { cn } from '@/lib/utils'
+
+type Props = {
+  value: PaginationProps
+  className?: string
+}
+
+export function Pagination({ value, className }: Props) {
+  const { page, goPrevious, goNext, hasPrevious, hasNext, scroll } = value
+
+  function handleScroll(e: React.MouseEvent<HTMLButtonElement>) {
+    if (typeof scroll === 'function') {
+      const button = e.target as HTMLButtonElement
+      button.blur()
+
+      requestAnimationFrame(() => {
+        scroll()
+      })
+    }
+  }
+
+  function onNextClick(e: React.MouseEvent<HTMLButtonElement>) {
+    goNext()
+    handleScroll(e)
+  }
+
+  function onPreviousClick(e: React.MouseEvent<HTMLButtonElement>) {
+    goPrevious()
+    handleScroll(e)
+  }
+
+  return (
+    <div className={cn('flex items-center justify-center gap-2', className)}>
+      <Button
+        variant="ghost-primary"
+        onClick={onPreviousClick}
+        disabled={!hasPrevious}
+        className="min-w-28 justify-end"
+      >
+        <LucideChevronLeft size={18} className="mr-1" />
+        Previous
+      </Button>
+
+      <span className="text-muted-foreground flex h-9 items-center justify-center rounded border px-3 py-1 text-sm">
+        Page {page}
+      </span>
+
+      <Button
+        variant="ghost-primary"
+        onClick={onNextClick}
+        disabled={!hasNext}
+        className="min-w-28 justify-start"
+      >
+        Next
+        <LucideChevronRight size={18} className="ml-1" />
+      </Button>
+    </div>
+  )
+}