Moved v3 code from NginxProxyManager/nginx-proxy-manager-3 to NginxProxyManager/nginx-proxy-manager

frontend/src/pages/DNSProviders/Table.tsx

@@ -0,0 +1,152 @@
+import { useEffect, useMemo } from "react";
+
+import {
+	tableEvents,
+	ActionsFormatter,
+	DNSProviderFormatter,
+	IDFormatter,
+	SecondsFormatter,
+	TableFilter,
+	TableLayout,
+	TablePagination,
+	TableSortBy,
+	TextFilter,
+} from "components";
+import { intl } from "locale";
+import { FiEdit } from "react-icons/fi";
+import { useSortBy, useFilters, useTable, usePagination } from "react-table";
+
+export interface TableProps {
+	data: any;
+	pagination: TablePagination;
+	sortBy: TableSortBy[];
+	filters: TableFilter[];
+	onTableEvent: any;
+}
+function Table({
+	data,
+	pagination,
+	onTableEvent,
+	sortBy,
+	filters,
+}: TableProps) {
+	const [columns, tableData] = useMemo(() => {
+		const columns = [
+			{
+				Header: intl.formatMessage({ id: "column.id" }),
+				accessor: "id",
+				Cell: IDFormatter(),
+				sortable: true,
+			},
+			{
+				Header: intl.formatMessage({ id: "column.name" }),
+				accessor: "name",
+				sortable: true,
+				Filter: TextFilter,
+			},
+			{
+				Header: intl.formatMessage({ id: "column.acmesh-name" }),
+				accessor: "acmeShName",
+				Cell: DNSProviderFormatter(),
+				sortable: true,
+				Filter: TextFilter,
+			},
+			{
+				Header: intl.formatMessage({ id: "column.dns-sleep" }),
+				accessor: "dnsSleep",
+				Cell: SecondsFormatter(),
+				sortable: true,
+			},
+			{
+				id: "actions",
+				accessor: "id",
+				Cell: ActionsFormatter([
+					{
+						title: intl.formatMessage({ id: "action.edit" }),
+						onClick: (e: any, data: any) => {
+							alert(JSON.stringify(data, null, 2));
+						},
+						icon: <FiEdit />,
+						show: (data: any) => !data.isSystem,
+					},
+				]),
+				className: "w-80",
+			},
+		];
+		return [columns, data];
+	}, [data]);
+
+	const tableInstance = useTable(
+		{
+			columns,
+			data: tableData,
+			initialState: {
+				pageIndex: Math.floor(pagination.offset / pagination.limit),
+				pageSize: pagination.limit,
+				sortBy,
+				filters,
+			},
+			// Tell the usePagination
+			// hook that we'll handle our own data fetching
+			// This means we'll also have to provide our own
+			// pageCount.
+			pageCount: Math.ceil(pagination.total / pagination.limit),
+			manualPagination: true,
+			// Sorting options
+			manualSortBy: true,
+			disableMultiSort: true,
+			disableSortRemove: true,
+			autoResetSortBy: false,
+			// Filter options
+			manualFilters: true,
+			autoResetFilters: false,
+		},
+		useFilters,
+		useSortBy,
+		usePagination,
+	);
+
+	const gotoPage = tableInstance.gotoPage;
+
+	useEffect(() => {
+		onTableEvent({
+			type: tableEvents.PAGE_CHANGED,
+			payload: tableInstance.state.pageIndex,
+		});
+	}, [onTableEvent, tableInstance.state.pageIndex]);
+
+	useEffect(() => {
+		onTableEvent({
+			type: tableEvents.PAGE_SIZE_CHANGED,
+			payload: tableInstance.state.pageSize,
+		});
+		gotoPage(0);
+	}, [gotoPage, onTableEvent, tableInstance.state.pageSize]);
+
+	useEffect(() => {
+		if (pagination.total) {
+			onTableEvent({
+				type: tableEvents.TOTAL_COUNT_CHANGED,
+				payload: pagination.total,
+			});
+		}
+	}, [pagination.total, onTableEvent]);
+
+	useEffect(() => {
+		onTableEvent({
+			type: tableEvents.SORT_CHANGED,
+			payload: tableInstance.state.sortBy,
+		});
+	}, [onTableEvent, tableInstance.state.sortBy]);
+
+	useEffect(() => {
+		onTableEvent({
+			type: tableEvents.FILTERS_CHANGED,
+			payload: tableInstance.state.filters,
+		});
+	}, [onTableEvent, tableInstance.state.filters]);
+
+	return <TableLayout pagination={pagination} {...tableInstance} />;
+}
+
+export default Table;

frontend/src/pages/DNSProviders/TableWrapper.tsx

@@ -0,0 +1,97 @@
+import { useEffect, useReducer, useState } from "react";
+
+import { Alert, AlertIcon } from "@chakra-ui/react";
+import {
+	EmptyList,
+	PrettyButton,
+	SpinnerPage,
+	tableEventReducer,
+} from "components";
+import { useDNSProviders } from "hooks";
+import { intl } from "locale";
+
+import Table from "./Table";
+
+const initialState = {
+	offset: 0,
+	limit: 10,
+	sortBy: [
+		{
+			id: "name",
+			desc: false,
+		},
+	],
+	filters: [],
+};
+
+interface TableWrapperProps {
+	onCreateClick: () => void;
+}
+function TableWrapper({ onCreateClick }: TableWrapperProps) {
+	const [{ offset, limit, sortBy, filters }, dispatch] = useReducer(
+		tableEventReducer,
+		initialState,
+	);
+
+	const [tableData, setTableData] = useState(null);
+	const { isFetching, isLoading, isError, error, data } = useDNSProviders(
+		offset,
+		limit,
+		sortBy,
+		filters,
+	);
+
+	useEffect(() => {
+		setTableData(data as any);
+	}, [data]);
+
+	if (isFetching || isLoading || !tableData) {
+		return <SpinnerPage />;
+	}
+
+	if (isError) {
+		return (
+			<Alert status="error">
+				<AlertIcon />
+				{error?.message || "Unknown error"}
+			</Alert>
+		);
+	}
+
+	if (isFetching || isLoading || !tableData) {
+		return <SpinnerPage />;
+	}
+
+	// When there are no items and no filters active, show the nicer empty view
+	if (data?.total === 0 && filters?.length === 0) {
+		return (
+			<EmptyList
+				title={intl.formatMessage({ id: "create-dns-provider-title" })}
+				summary={intl.formatMessage({ id: "create-hint" })}
+				createButton={
+					<PrettyButton mt={5} onClick={onCreateClick}>
+						{intl.formatMessage({ id: "lets-go" })}
+					</PrettyButton>
+				}
+			/>
+		);
+	}
+
+	const pagination = {
+		offset: data?.offset || initialState.offset,
+		limit: data?.limit || initialState.limit,
+		total: data?.total || 0,
+	};
+
+	return (
+		<Table
+			data={data?.items || []}
+			pagination={pagination}
+			sortBy={sortBy}
+			filters={filters}
+			onTableEvent={dispatch}
+		/>
+	);
+}
+
+export default TableWrapper;

frontend/src/pages/DNSProviders/index.tsx

@@ -0,0 +1,35 @@
+import { useState } from "react";
+
+import { Heading, HStack } from "@chakra-ui/react";
+import { HelpDrawer, PrettyButton } from "components";
+import { intl } from "locale";
+import { DNSProviderCreateModal } from "modals";
+
+import TableWrapper from "./TableWrapper";
+
+function DNSProviders() {
+	const [createShown, setCreateShown] = useState(false);
+
+	return (
+		<>
+			<HStack mx={6} my={4} justifyContent="space-between">
+				<Heading mb={2}>
+					{intl.formatMessage({ id: "dns-providers.title" })}
+				</Heading>
+				<HStack>
+					<HelpDrawer section="DNSProviders" />
+					<PrettyButton size="sm" onClick={() => setCreateShown(true)}>
+						{intl.formatMessage({ id: "create-dns-provider" })}
+					</PrettyButton>
+				</HStack>
+			</HStack>
+			<TableWrapper onCreateClick={() => setCreateShown(true)} />
+			<DNSProviderCreateModal
+				isOpen={createShown}
+				onClose={() => setCreateShown(false)}
+			/>
+		</>
+	);
+}
+
+export default DNSProviders;