Convert ServerSidePaging to React

VocaDbWeb/Scripts/Bootstrap/PageItem.tsx

@@ -33,7 +33,7 @@ const PageItem: BsPrefixRefForwardingComponent<
 		}: PageItemProps,
 		ref,
 	) => {
-		const Component = active || disabled ? 'span' : SafeAnchor;
+		const Component = SafeAnchor;
 		return (
 			<li
 				ref={ref}

VocaDbWeb/Scripts/Components/Shared/Partials/EntryCountBox.tsx

@@ -0,0 +1,25 @@
+import ServerSidePagingStore from '@Stores/ServerSidePagingStore';
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+
+import EntryCount from './Knockout/EntryCount';
+
+interface EntryCountBoxProps {
+	pagingStore: ServerSidePagingStore;
+	selections?: number[];
+}
+
+const EntryCountBox = observer(
+	({
+		pagingStore,
+		selections = [10, 20, 40, 100],
+	}: EntryCountBoxProps): React.ReactElement => {
+		return (
+			<div className="pull-right">
+				<EntryCount pagingStore={pagingStore} selections={selections} />
+			</div>
+		);
+	},
+);
+
+export default EntryCountBox;

VocaDbWeb/Scripts/Components/Shared/Partials/Knockout/EntryCount.tsx

@@ -0,0 +1,43 @@
+import Dropdown from '@Bootstrap/Dropdown';
+import SafeAnchor from '@Bootstrap/SafeAnchor';
+import ServerSidePagingStore from '@Stores/ServerSidePagingStore';
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+interface EntryCountProps {
+	pagingStore: ServerSidePagingStore;
+	selections?: number[];
+}
+
+const EntryCount = observer(
+	({
+		pagingStore,
+		selections = [10, 20, 40, 100],
+	}: EntryCountProps): React.ReactElement => {
+		const { t } = useTranslation(['ViewRes.Search']);
+
+		return (
+			<Dropdown>
+				<Dropdown.Toggle as={SafeAnchor}>
+					{t('ViewRes.Search:Index.ShowingItemsOf', {
+						0: pagingStore.pageSize,
+						1: pagingStore.totalItems,
+					})}
+				</Dropdown.Toggle>
+				<Dropdown.Menu>
+					{selections.map((selection) => (
+						<Dropdown.Item
+							onClick={(): void => pagingStore.setPageSize(selection)}
+							key={selection}
+						>
+							{t('ViewRes.Search:Index.ItemsPerPage', { 0: selection })}
+						</Dropdown.Item>
+					))}
+				</Dropdown.Menu>
+			</Dropdown>
+		);
+	},
+);
+
+export default EntryCount;

VocaDbWeb/Scripts/Components/Shared/Partials/Knockout/ServerSidePaging.tsx

@@ -0,0 +1,61 @@
+import Pagination from '@Bootstrap/Pagination';
+import ServerSidePagingStore from '@Stores/ServerSidePagingStore';
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+interface ServerSidePagingProps {
+	pagingStore: ServerSidePagingStore;
+}
+
+const ServerSidePaging = observer(
+	({ pagingStore }: ServerSidePagingProps): React.ReactElement => {
+		const { t } = useTranslation(['VocaDb.Web.Resources.Other']);
+
+		return (
+			<Pagination>
+				<Pagination.First
+					disabled={pagingStore.isFirstPage}
+					onClick={pagingStore.goToFirstPage}
+				>
+					&laquo;&laquo; {t('VocaDb.Web.Resources.Other:PagedList.First')}
+				</Pagination.First>
+				<Pagination.Prev
+					disabled={pagingStore.isFirstPage}
+					onClick={pagingStore.previousPage}
+				>
+					&laquo; {t('VocaDb.Web.Resources.Other:PagedList.Previous')}
+				</Pagination.Prev>
+
+				{pagingStore.showMoreBegin && <Pagination.Ellipsis disabled />}
+
+				{pagingStore.pages.map((page) => (
+					<Pagination.Item
+						active={page === pagingStore.page}
+						onClick={(): void => pagingStore.setPage(page)}
+						key={page}
+					>
+						{page}
+					</Pagination.Item>
+				))}
+
+				{pagingStore.showMoreEnd && <Pagination.Ellipsis disabled />}
+
+				<Pagination.Next
+					disabled={pagingStore.isLastPage}
+					onClick={pagingStore.nextPage}
+				>
+					{t('VocaDb.Web.Resources.Other:PagedList.Next')} &raquo;
+				</Pagination.Next>
+				<Pagination.Last
+					disabled={pagingStore.isLastPage}
+					onClick={pagingStore.goToLastPage}
+				>
+					{t('VocaDb.Web.Resources.Other:PagedList.Last')} &raquo;&raquo;
+				</Pagination.Last>
+			</Pagination>
+		);
+	},
+);
+
+export default ServerSidePaging;

VocaDbWeb/Scripts/Stores/ServerSidePagingStore.ts

@@ -0,0 +1,87 @@
+import PagingProperties from '@DataContracts/PagingPropertiesContract';
+import _ from 'lodash';
+import { action, computed, makeObservable, observable } from 'mobx';
+
+export default class ServerSidePagingStore {
+	@observable public page = 1;
+	@action public setPage = (value: number): void => {
+		this.page = value;
+	};
+
+	@observable public totalItems = 0;
+	@action public setTotalItems = (value: number): void => {
+		this.totalItems = value;
+	};
+
+	@observable public pageSize = 10;
+	@action public setPageSize = (value: number): void => {
+		this.pageSize = value;
+	};
+
+	public constructor(pageSize: number = 10) {
+		makeObservable(this);
+
+		this.pageSize = pageSize;
+	}
+
+	@computed public get firstItem(): number {
+		return (this.page - 1) * this.pageSize;
+	}
+
+	@computed public get totalPages(): number {
+		return Math.ceil(this.totalItems / this.pageSize);
+	}
+
+	@computed public get hasMultiplePages(): boolean {
+		return this.totalPages > 1;
+	}
+
+	@computed public get isFirstPage(): boolean {
+		return this.page <= 1;
+	}
+
+	@computed public get isLastPage(): boolean {
+		return this.page >= this.totalPages;
+	}
+
+	@computed public get pages(): number[] {
+		const start = Math.max(this.page - 4, 1);
+		const end = Math.min(this.page + 4, this.totalPages);
+
+		return _.range(start, end + 1);
+	}
+
+	@computed public get showMoreBegin(): boolean {
+		return this.page > 5;
+	}
+
+	@computed public get showMoreEnd(): boolean {
+		return this.page < this.totalPages - 4;
+	}
+
+	public getPagingProperties = (
+		clearResults: boolean = false,
+	): PagingProperties => {
+		return {
+			start: this.firstItem,
+			maxEntries: this.pageSize,
+			getTotalCount: clearResults || this.totalItems === 0,
+		};
+	};
+
+	@action public goToFirstPage = (): void => {
+		this.page = 1;
+	};
+
+	@action public goToLastPage = (): void => {
+		this.page = this.totalPages;
+	};
+
+	@action public nextPage = (): void => {
+		if (!this.isLastPage) this.page = this.page + 1;
+	};
+
+	@action public previousPage = (): void => {
+		if (!this.isFirstPage) this.page = this.page - 1;
+	};
+}

VocaDbWeb/package.json

@@ -64,6 +64,8 @@
         "knockout-punches": "^0.5.1",
         "lodash": "^4.17.19",
         "marked": "^0.3.18",
+        "mobx": "^6.3.2",
+        "mobx-react-lite": "^3.2.0",
         "moment": "^2.17.0",
         "qtip2": "^3.0.3",
         "react": "^17.0.2",

VocaDbWeb/tsconfig.json

@@ -20,9 +20,12 @@
 			"@Models/*": ["Scripts/Models/*"],
 			"@Repositories/*": ["Scripts/Repositories/*"],
 			"@Shared/*": ["Scripts/Shared/*"],
+			"@Stores/*": ["Scripts/Stores/*"],
 			"@ViewModels/*": ["Scripts/ViewModels/*"]
 		},
-		"resolveJsonModule": true
+		"resolveJsonModule": true,
+		"experimentalDecorators": true,
+		"emitDecoratorMetadata": true
 	},
 	"include": ["Scripts/**/*"]
 }

VocaDbWeb/webpack.mix.js

@@ -34,6 +34,7 @@ mix
 		'@Models': path.join(__dirname, 'Scripts/Models'),
 		'@Repositories': path.join(__dirname, 'Scripts/Repositories'),
 		'@Shared': path.join(__dirname, 'Scripts/Shared'),
+		'@Stores': path.join(__dirname, 'Scripts/Stores'),
 		'@ViewModels': path.join(__dirname, 'Scripts/ViewModels'),
 	})
 	.eslint({