From cb53ec2cde15c606e25715992f3fac777d005567 Mon Sep 17 00:00:00 2001
From: Alexander <alexanderweichart@fastmail.com>
Date: Fri, 8 Mar 2024 08:13:27 +0100
Subject: [PATCH] add: pagination

---
 Cargo.toml                                    |  2 +-
 manifest.json                                 |  2 +-
 package.json                                  |  4 +-
 .../lists/LinkFinderResultsListComponent.tsx  | 39 +++++++++++++++++--
 styles.css                                    |  6 +++
 5 files changed, 45 insertions(+), 8 deletions(-)

diff --git a/Cargo.toml b/Cargo.toml
index 35910a7..8d3e795 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "obisidian-note-linker"
-version = "1.1.4"
+version = "1.2.4"
 authors = ["Alexander Weichart"]
 edition = "2018"
 
diff --git a/manifest.json b/manifest.json
index 791015b..fb9b731 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,7 +1,7 @@
 {
 	"id": "obisidian-note-linker",
 	"name": "Note Linker",
-	"version": "1.1.4",
+	"version": "1.2.4",
 	"description": "Automatically find and link notes in Obsidian",
 	"author": "Alexander Weichart",
 	"authorUrl": "https://github.com/AlexW00",
diff --git a/package.json b/package.json
index f2b14da..c14455d 100644
--- a/package.json
+++ b/package.json
@@ -1,11 +1,11 @@
 {
 	"name": "obisidian-note-linker",
-	"version": "1.1.4",
+	"version": "1.2.4",
 	"description": "Automatically find and link notes in Obsidian",
 	"main": "main.js",
 	"scripts": {
 		"build": "wasm-pack build --target web && rollup --config rollup.config.js",
-		"build:copy": "npm run build && ./copy_to_vault.sh /home/aw/Dropbox/Documents/Other/Obsidian/YouTube"
+		"build:copy": "npm run build && ./copy_to_vault.sh /home/aw/Documents/Obsidian/obs"
 	},
 	"keywords": [],
 	"author": "",
diff --git a/src/ts/components/lists/LinkFinderResultsListComponent.tsx b/src/ts/components/lists/LinkFinderResultsListComponent.tsx
index 9c25514..3cdab55 100644
--- a/src/ts/components/lists/LinkFinderResultsListComponent.tsx
+++ b/src/ts/components/lists/LinkFinderResultsListComponent.tsx
@@ -1,8 +1,7 @@
 import * as React from "react";
 import { LinkFinderResult, Note, NoteChangeOperation } from "../../../../pkg";
-import { LinkMatchesListComponent } from "./LinkMatchesListComponent";
 import { LinkFinderResultContext } from "../../context";
-import { useCallback } from "react";
+import { LinkMatchesListComponent } from "./LinkMatchesListComponent";
 
 interface LinkFinderResultsListProps {
 	linkFinderResults: Array<LinkFinderResult>;
@@ -19,6 +18,16 @@ export const LinkFinderResultsList = ({
 	noteChangeOperations,
 	setNoteChangeOperations,
 }: LinkFinderResultsListProps) => {
+	const [currentPage, setCurrentPage] = React.useState(0);
+	const itemsPerPage = 30;
+
+	const totalPages = Math.ceil(linkFinderResults.length / itemsPerPage);
+
+	const currentItems = linkFinderResults.slice(
+		currentPage * itemsPerPage,
+		(currentPage + 1) * itemsPerPage
+	);
+
 	const findNoteChangeOperation = (
 		note: Note
 	): NoteChangeOperation | undefined => {
@@ -29,7 +38,7 @@ export const LinkFinderResultsList = ({
 		return findNoteChangeOperation(note)?.replacements ?? [];
 	};
 
-	const totalReplacements = useCallback(() => {
+	const totalReplacements = React.useCallback(() => {
 		let total = 0;
 		noteChangeOperations?.forEach(
 			(noteChangeOperation: NoteChangeOperation) => {
@@ -39,12 +48,20 @@ export const LinkFinderResultsList = ({
 		return total;
 	}, [noteChangeOperations]);
 
+	const handlePrevPage = () => {
+		setCurrentPage((prevPage) => Math.max(prevPage - 1, 0));
+	};
+
+	const handleNextPage = () => {
+		setCurrentPage((prevPage) => Math.min(prevPage + 1, totalPages - 1));
+	};
+
 	if (linkFinderResults.length !== 0)
 		return (
 			<div className="note-matching-result-list">
 				<h1>Note Link Matches</h1>
 				<ul className={"hide-list-styling"}>
-					{linkFinderResults.map((linkFinderResult: LinkFinderResult) => {
+					{currentItems.map((linkFinderResult: LinkFinderResult) => {
 						const selectedReplacements = findReplacements(
 							linkFinderResult.note
 						);
@@ -62,6 +79,20 @@ export const LinkFinderResultsList = ({
 						);
 					})}
 				</ul>
+				<div className="pagination-controls">
+					<button onClick={handlePrevPage} disabled={currentPage === 0}>
+						Previous
+					</button>
+					<span>
+						Page {currentPage + 1} of {totalPages}
+					</span>
+					<button
+						onClick={handleNextPage}
+						disabled={currentPage === totalPages - 1}
+					>
+						Next
+					</button>
+				</div>
 				<button onClick={onClickReplaceButton}>
 					🔗 Link {totalReplacements()} notes
 				</button>
diff --git a/styles.css b/styles.css
index 03380a8..a177a44 100644
--- a/styles.css
+++ b/styles.css
@@ -212,3 +212,9 @@ button {
 	border-radius: var(--small-round-borders);
 	padding: var(--small-padding);
 }
+
+.pagination-controls {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+}