gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-28 01:59:04 +01:00
Code Issues Actions 11 Packages Projects Releases Wiki Activity

refactor(react/collections/list): split pagination into separate file

Browse Source
This commit is contained in:
Elian Doran 2025-08-30 16:58:23 +03:00
parent 12f805c020
commit c13f5a9b04
No known key found for this signature in database
2 changed files with 86 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
apps/client/src/widgets/collections/Pagination.tsx Normal file
View File

@ -0,0 +1,83 @@
import { ComponentChildren } from "preact";
import { Dispatch, StateUpdater, useEffect, useState } from "preact/hooks";
import FNote from "../../entities/fnote";
import froca from "../../services/froca";
import { useNoteLabel } from "../react/hooks";
interface PaginationContext {
page: number;
setPage: Dispatch<StateUpdater<number>>;
pageNotes?: FNote[];
pageCount: number;
pageSize: number;
totalNotes: number;
}
export 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>
)
}
export function usePagination(note: FNote, noteIds: string[]): PaginationContext {
const [ page, setPage ] = useState(1);
const [ pageNotes, setPageNotes ] = useState<FNote[]>();
// Parse page size.
const [ pageSize ] = useNoteLabel(note, "pageSize");
const pageSizeNum = parseInt(pageSize ?? "", 10);
const normalizedPageSize = (pageSizeNum && pageSizeNum > 0 ? pageSizeNum : 20);
// 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));
useEffect(() => {
froca.getNotes(pageNoteIds).then(setPageNotes);
}, [ note, noteIds, page, pageSize ]);
return {
page, setPage, pageNotes, pageCount,
pageSize: normalizedPageSize,
totalNotes: noteIds.length
};
}

85
apps/client/src/widgets/collections/legacy/ListView.tsx
View File

@ -1,13 +1,12 @@
import { Dispatch, StateUpdater, useEffect, useMemo, useRef, useState } from "preact/hooks";
import { useEffect, useMemo, useRef, useState } from "preact/hooks";
import FNote from "../../../entities/fnote";
import Icon from "../../react/Icon";
import { ViewModeProps } from "../interface";
import { useNoteLabel, useNoteLabelBoolean, useNoteProperty } from "../../react/hooks";
import froca from "../../../services/froca";
import { useNoteLabelBoolean, useNoteProperty } from "../../react/hooks";
import NoteLink from "../../react/NoteLink";
import "./ListOrGridView.css";
import content_renderer from "../../../services/content_renderer";
import { ComponentChildren, VNode } from "preact";
import { Pager, usePagination } from "../Pagination";
export default function ListView({ note, noteIds }: ViewModeProps) {
const [ isExpanded ] = useNoteLabelBoolean(note, "expanded");
@ -97,81 +96,3 @@ function NoteChildren({ note }: { note: FNote}) {
return childNotes?.map(childNote => <NoteCard note={childNote} />)
}
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[]>();
// Parse page size.
const [ pageSize ] = useNoteLabel(note, "pageSize");
const pageSizeNum = parseInt(pageSize ?? "", 10);
const normalizedPageSize = (pageSizeNum && pageSizeNum > 0 ? pageSizeNum : 20);
// 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));
useEffect(() => {
froca.getNotes(pageNoteIds).then(setPageNotes);
}, [ note, noteIds, page, pageSize ]);
return {
page, setPage, pageNotes, pageCount,
pageSize: normalizedPageSize,
totalNotes: noteIds.length
};
}