chore(react/collections/list): display pagination

apps/client/src/widgets/collections/NoteList.css

@@ -16,3 +16,10 @@
 .note-list-widget video {
     height: 100%;
 }
+
+/* #region Pagination */
+.note-list-pager span.current-page {
+    text-decoration: underline;
+    font-weight: bold;
+}
+/* #endregion */

apps/client/src/widgets/collections/legacy/ListView.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from "preact/hooks";
+import { Dispatch, StateUpdater, useEffect, useMemo, useRef, useState } from "preact/hooks";
 import FNote from "../../../entities/fnote";
 import Icon from "../../react/Icon";
 import { ViewModeProps } from "../interface";
@@ -7,6 +7,7 @@ import froca from "../../../services/froca";
 import NoteLink from "../../react/NoteLink";
 import "./ListOrGridView.css";
 import content_renderer from "../../../services/content_renderer";
+import { ComponentChildren, VNode } from "preact";
 
 export default function ListView({ note, noteIds }: ViewModeProps) {
     const [ isExpanded ] = useNoteLabelBoolean(note, "expanded");
@@ -16,12 +17,12 @@ export default function ListView({ note, noteIds }: ViewModeProps) {
         const includedNoteIds = new Set(includedLinks.map((rel) => rel.value));   
         return noteIds.filter((noteId) => !includedNoteIds.has(noteId) && noteId !== "_hidden");
     }, noteIds);
-    const { pageNotes } = usePagination(note, filteredNoteIds);
+    const { pageNotes, ...pagination } = usePagination(note, filteredNoteIds);
 
     return (
         <div class="note-list">
             <div class="note-list-wrapper">
-                <div class="note-list-pager"></div>
+                <Pager {...pagination} />
         
                 <div class="note-list-container use-tn-links">
                     {pageNotes?.map(note => (
@@ -29,7 +30,7 @@ export default function ListView({ note, noteIds }: ViewModeProps) {
                     ))}
                 </div>
         
-                <div class="note-list-pager"></div>
+                <Pager {...pagination} />
             </div>
         </div>
     );
@@ -97,7 +98,57 @@ function NoteChildren({ note }: { note: FNote}) {
     return childNotes?.map(childNote => <NoteCard note={childNote} />)
 }
 
-function usePagination(note: FNote, noteIds: string[]) {
+function Pager({ page, pageSize, setPage, pageCount, totalNotes }: Omit<PaginationContext, "pageNotes">) {
+    if (pageCount < 1) return;
+
+    let lastPrinted = false;
+    let children: ComponentChildren[] = [];
+    for (let i = 1; i <= pageCount; i++) {
+        if (pageCount < 20 || i <= 5 || pageCount - i <= 5 || Math.abs(page - i) <= 2) {
+            lastPrinted = true;
+
+            const startIndex = (i - 1) * pageSize + 1;
+            const endIndex = Math.min(totalNotes, i * pageSize);
+
+            if (i !== page) {
+                children.push((
+                    <a
+                        href="javascript:"
+                        title={`Page of ${startIndex} - ${endIndex}`}
+                        onClick={() => setPage(i)}
+                    >
+                    {i}    
+                    </a>
+                ))
+            } else {            
+                // Current page
+                children.push(<span className="current-page">{i}</span>)
+            }
+
+            children.push(<>{" "}&nbsp;{" "}</>);
+        } else if (lastPrinted) {
+            children.push(<>{"... "}&nbsp;{" "}</>);
+            lastPrinted = false;
+        }
+    }
+
+    return (
+        <div class="note-list-pager">
+            {children}
+        </div>
+    )
+}
+
+interface PaginationContext {
+    page: number;
+    setPage: Dispatch<StateUpdater<number>>;
+    pageNotes?: FNote[];
+    pageCount: number;
+    pageSize: number;
+    totalNotes: number;
+}
+
+function usePagination(note: FNote, noteIds: string[]): PaginationContext {
     const [ page, setPage ] = useState(1);
     const [ pageNotes, setPageNotes ] = useState<FNote[]>();    
 
@@ -109,6 +160,7 @@ function usePagination(note: FNote, noteIds: string[]) {
     // Calculate start/end index.
     const startIdx = (page - 1) * normalizedPageSize;
     const endIdx = startIdx + normalizedPageSize;
+    const pageCount = Math.ceil(noteIds.length / normalizedPageSize);
 
     // Obtain notes within the range.
     const pageNoteIds = noteIds.slice(startIdx, Math.min(endIdx, noteIds.length));    
@@ -118,8 +170,8 @@ function usePagination(note: FNote, noteIds: string[]) {
     }, [ note, noteIds, page, pageSize ]);
 
     return {
-        page,
+        page, setPage, pageNotes, pageCount,
-        setPage,
+        pageSize: normalizedPageSize,
-        pageNotes
+        totalNotes: noteIds.length
-    }
+    };
 }

apps/client/src/widgets/view_widgets/list_or_grid_view.ts

@@ -45,42 +45,8 @@ class ListOrGridView extends ViewMode<{}> {
     }
 
     renderPager() {
-        const $pager = this.$noteList.find(".note-list-pager").empty();
-        if (!this.page || !this.pageSize) {
-            return;
-        }
 
-        const pageCount = Math.ceil(this.filteredNoteIds.length / this.pageSize);
 
-        $pager.toggle(pageCount > 1);
-
-        let lastPrinted;
-
-        for (let i = 1; i <= pageCount; i++) {
-            if (pageCount < 20 || i <= 5 || pageCount - i <= 5 || Math.abs(this.page - i) <= 2) {
-                lastPrinted = true;
-
-                const startIndex = (i - 1) * this.pageSize + 1;
-                const endIndex = Math.min(this.filteredNoteIds.length, i * this.pageSize);
-
-                $pager.append(
-                    i === this.page
-                        ? $("<span>").text(i).css("text-decoration", "underline").css("font-weight", "bold")
-                        : $('<a href="javascript:">')
-                            .text(i)
-                            .attr("title", `Page of ${startIndex} - ${endIndex}`)
-                            .on("click", () => {
-                                this.page = i;
-                                this.renderList();
-                            }),
-                    " &nbsp; "
-                );
-            } else if (lastPrinted) {
-                $pager.append("... &nbsp; ");
-
-                lastPrinted = false;
-            }
-        }
 
         // no need to distinguish "note" vs "notes" since in case of one result, there's no paging at all
         $pager.append(`<span class="note-list-pager-total-count">(${this.filteredNoteIds.length} notes)</span>`);