Add collection list pager.

lsst-dm · Feb 4, 2025 · bbee466 · bbee466
1 parent 158f222
commit bbee466
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 39 deletions.
diff --git a/app/_components/listPager.js b/app/_components/listPager.js
@@ -0,0 +1,70 @@
+
+
+'use client'
+
+import Link from 'next/link'
+import React from 'react';
+import { useState } from 'react'
+
+export default function ListPager({listEntries, entriesPerPage = 10}) {
+
+    const [currentPage, setCurrentPage] = useState(1)
+
+    const totalPages = () => {
+        return Math.ceil(listEntries.length/entriesPerPage)
+    }
+
+    const previousPage = () => {
+        if(currentPage > 1) {
+            setCurrentPage(currentPage - 1)
+        }
+    }
+
+    const nextPage = () => {
+        if(currentPage < totalPages()) {
+            setCurrentPage(currentPage + 1)
+        }
+    }
+
+    const getSlice = (currentPage) => {
+
+        return listEntries.slice((currentPage - 1) * entriesPerPage, currentPage * entriesPerPage)
+    }
+    const cellClassNames = "px-2 py-3"
+
+    return (
+        <div>
+        <div className="border-2 rounded px-2 inline-block my-0 " >
+            <table className="divide-y">
+            <thead>
+                <tr>
+                    <td className={cellClassNames}>Collection</td>
+                    <td className={cellClassNames}>Repo</td>
+                    <td className={`text-right ${cellClassNames}`}>Last Updated</td>
+                </tr>
+            </thead>
+            <tbody>
+                {getSlice(currentPage).map((summary, n) =>
+                (<tr key={n}><td className={cellClassNames}><Link href={`/collection/${encodeURIComponent(summary.repo)}/${encodeURIComponent(summary.collection)}`}>{summary.collection}</Link></td>
+                     <td className={`${cellClassNames}`}>{summary.repo}</td>
+                     <td className={`text-right ${cellClassNames}`}>{summary.lastModified.toDateString()}</td>
+                    </tr>))}
+            </tbody>
+            </table>
+
+            <div className="flex flex-row items-center justify-center">
+                <div className="m-3">
+                    { currentPage > 1 ? <button className="p-2 rounded-md text-white bg-sky-600" onClick={previousPage}>Prev</button> :
+                        <div>Prev</div> }
+                </div>
+                <div className="m-3">Page {currentPage}/{totalPages()}</div>
+                <div className="m-3">
+                    { currentPage < totalPages() ? <button className="p-2 rounded-md text-white bg-sky-600" onClick={nextPage}>Next</button> :
+                        <div>Next</div> }
+                </div>
+            </div>
+        </div>
+        </div>
+    )
+
+}
diff --git a/app/page.js b/app/page.js
@@ -2,6 +2,7 @@
 import Link from 'next/link'
 
 import {ListSummaries, GetSummary, ListReports} from '@/lib/summaries'
+import ListPager from '@/components/listPager'
 
 export const revalidate = 60
 
@@ -22,10 +23,6 @@ export default async function Collections() {
         return decodeURIComponent(uriEncodedCollection)
     }
 
-    /*
-    const reportFilenames = await ListReports()
-    const reports = reportFilenames.map(decodeReportFilename)
-    */
 
     const cellClassNames = "px-2 py-3"
 
@@ -41,44 +38,12 @@ export default async function Collections() {
                     </div>
                 </div>
                 <div className="clear-both"></div>
-                <div className="border-2 rounded px-2 inline-block my-0 " >
-                    <table className="divide-y">
-                    <thead>
-                        <tr>
-                            <td className={cellClassNames}>Collection</td>
-                            <td className={cellClassNames}>Repo</td>
-                            <td className={`text-right ${cellClassNames}`}>Last Updated</td>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {officialSummaryRefs.map((summary, n) =>
-                        (<tr key={n}><td className={cellClassNames}><Link href={`/collection/${encodeURIComponent(summary.repo)}/${encodeURIComponent(summary.collection)}`}>{summary.collection}</Link></td>
-                             <td className={`${cellClassNames}`}>{summary.repo}</td>
-                             <td className={`text-right ${cellClassNames}`}>{summary.lastModified.toDateString()}</td>
-                            </tr>))}
-                    </tbody>
-                    </table>
-                </div>
+                <ListPager listEntries={officialSummaryRefs} />
             </div>
 
             <h1 className="text-2xl m-5">User Collections</h1>
-            <div className="m-5 border-2 rounded px-2 inline-block my-0" >
-                <table className="divide-y">
-                <thead>
-                    <tr>
-                        <td className={cellClassNames}>Collection</td>
-                        <td className={`${cellClassNames}`}>Repo</td>
-                        <td className={`text-right ${cellClassNames}`}>Last Updated</td>
-                    </tr>
-                </thead>
-                <tbody>
-                    {userSummaryRefs.map((summary, n) =>
-                    (<tr key={n}><td className={cellClassNames}><Link href={`/collection/${encodeURIComponent(summary.repo)}/${encodeURIComponent(summary.collection)}`}>{summary.collection}</Link></td>
-                         <td className={`${cellClassNames}`}>{summary.repo}</td>
-                         <td className={`text-right ${cellClassNames}`}>{summary.lastModified.toDateString()}</td>
-                        </tr>))}
-                </tbody>
-                </table>
+            <div className="m-5 inline-block">
+                <ListPager listEntries={userSummaryRefs} />
             </div>
 
         </div>