Use a modal manager

frontend/src/pages/Nginx/DeadHosts/Empty.tsx

@@ -14,7 +14,7 @@ export default function Empty({ tableInstance, onNew, isFiltered }: Props) {
 				<div className="text-center my-4">
 					{isFiltered ? (
 						<h2>
-							<T id="empty.search" />
+							<T id="empty-search" />
 						</h2>
 					) : (
 						<>

frontend/src/pages/Nginx/DeadHosts/TableWrapper.tsx

@@ -6,15 +6,13 @@ import { deleteDeadHost, toggleDeadHost } from "src/api/backend";
 import { Button, LoadingPage } from "src/components";
 import { useDeadHosts } from "src/hooks";
 import { intl, T } from "src/locale";
-import { DeadHostModal, DeleteConfirmModal } from "src/modals";
+import { showDeadHostModal, showDeleteConfirmModal } from "src/modals";
 import { showSuccess } from "src/notifications";
 import Table from "./Table";
 
 export default function TableWrapper() {
 	const queryClient = useQueryClient();
 	const [search, setSearch] = useState("");
-	const [deleteId, setDeleteId] = useState(0);
-	const [editId, setEditId] = useState(0 as number | "new");
 	const { isFetching, isLoading, isError, error, data } = useDeadHosts(["owner", "certificate"]);
 
 	if (isLoading) {
@@ -25,8 +23,8 @@ export default function TableWrapper() {
 		return <Alert variant="danger">{error?.message || "Unknown error"}</Alert>;
 	}
 
-	const handleDelete = async () => {
-		await deleteDeadHost(deleteId);
+	const handleDelete = async (id: number) => {
+		await deleteDeadHost(id);
 		showSuccess(intl.formatMessage({ id: "notification.host-deleted" }));
 	};
 
@@ -73,7 +71,7 @@ export default function TableWrapper() {
 											onChange={(e: any) => setSearch(e.target.value.toLowerCase().trim())}
 										/>
 									</div>
-									<Button size="sm" className="btn-red" onClick={() => setEditId("new")}>
+									<Button size="sm" className="btn-red" onClick={() => showDeadHostModal("new")}>
 										<T id="dead-hosts.add" />
 									</Button>
 								</div>
@@ -85,22 +83,18 @@ export default function TableWrapper() {
 					data={filtered ?? data ?? []}
 					isFiltered={!!search}
 					isFetching={isFetching}
-					onEdit={(id: number) => setEditId(id)}
-					onDelete={(id: number) => setDeleteId(id)}
+					onEdit={(id: number) => showDeadHostModal(id)}
+					onDelete={(id: number) =>
+						showDeleteConfirmModal({
+							title: "dead-host.delete.title",
+							onConfirm: () => handleDelete(id),
+							invalidations: [["dead-hosts"], ["dead-host", id]],
+							children: <T id="dead-host.delete.content" />,
+						})
+					}
 					onDisableToggle={handleDisableToggle}
-					onNew={() => setEditId("new")}
+					onNew={() => showDeadHostModal("new")}
 				/>
-				{editId ? <DeadHostModal id={editId} onClose={() => setEditId(0)} /> : null}
-				{deleteId ? (
-					<DeleteConfirmModal
-						title="dead-host.delete.title"
-						onConfirm={handleDelete}
-						onClose={() => setDeleteId(0)}
-						invalidations={[["dead-hosts"], ["dead-host", deleteId]]}
-					>
-						<T id="dead-host.delete.content" />
-					</DeleteConfirmModal>
-				) : null}
 			</div>
 		</div>
 	);

frontend/src/pages/Nginx/ProxyHosts/Empty.tsx

@@ -14,7 +14,7 @@ export default function Empty({ tableInstance, onNew, isFiltered }: Props) {
 				<div className="text-center my-4">
 					{isFiltered ? (
 						<h2>
-							<T id="empty.search" />
+							<T id="empty-search" />
 						</h2>
 					) : (
 						<>

frontend/src/pages/Nginx/ProxyHosts/TableWrapper.tsx

@@ -6,15 +6,13 @@ import { deleteProxyHost, toggleProxyHost } from "src/api/backend";
 import { Button, LoadingPage } from "src/components";
 import { useProxyHosts } from "src/hooks";
 import { intl, T } from "src/locale";
-import { DeleteConfirmModal, ProxyHostModal } from "src/modals";
+import { showDeleteConfirmModal, showProxyHostModal } from "src/modals";
 import { showSuccess } from "src/notifications";
 import Table from "./Table";
 
 export default function TableWrapper() {
 	const queryClient = useQueryClient();
 	const [search, setSearch] = useState("");
-	const [deleteId, setDeleteId] = useState(0);
-	const [editId, setEditId] = useState(0 as number | "new");
 	const { isFetching, isLoading, isError, error, data } = useProxyHosts(["owner", "access_list", "certificate"]);
 
 	if (isLoading) {
@@ -25,8 +23,8 @@ export default function TableWrapper() {
 		return <Alert variant="danger">{error?.message || "Unknown error"}</Alert>;
 	}
 
-	const handleDelete = async () => {
-		await deleteProxyHost(deleteId);
+	const handleDelete = async (id: number) => {
+		await deleteProxyHost(id);
 		showSuccess(intl.formatMessage({ id: "notification.host-deleted" }));
 	};
 
@@ -74,9 +72,10 @@ export default function TableWrapper() {
 											type="text"
 											className="form-control form-control-sm"
 											autoComplete="off"
+											onChange={(e: any) => setSearch(e.target.value.toLowerCase().trim())}
 										/>
 									</div>
-									<Button size="sm" className="btn-lime">
+									<Button size="sm" className="btn-lime" onClick={() => showProxyHostModal("new")}>
 										<T id="proxy-hosts.add" />
 									</Button>
 								</div>
@@ -88,22 +87,18 @@ export default function TableWrapper() {
 					data={filtered ?? data ?? []}
 					isFiltered={!!search}
 					isFetching={isFetching}
-					onEdit={(id: number) => setEditId(id)}
-					onDelete={(id: number) => setDeleteId(id)}
+					onEdit={(id: number) => showProxyHostModal(id)}
+					onDelete={(id: number) =>
+						showDeleteConfirmModal({
+							title: "proxy-host.delete.title",
+							onConfirm: () => handleDelete(id),
+							invalidations: [["proxy-hosts"], ["proxy-host", id]],
+							children: <T id="proxy-host.delete.content" />,
+						})
+					}
 					onDisableToggle={handleDisableToggle}
-					onNew={() => setEditId("new")}
+					onNew={() => showProxyHostModal("new")}
 				/>
-				{editId ? <ProxyHostModal id={editId} onClose={() => setEditId(0)} /> : null}
-				{deleteId ? (
-					<DeleteConfirmModal
-						title="proxy-host.delete.title"
-						onConfirm={handleDelete}
-						onClose={() => setDeleteId(0)}
-						invalidations={[["proxy-hosts"], ["proxy-host", deleteId]]}
-					>
-						<T id="proxy-host.delete.content" />
-					</DeleteConfirmModal>
-				) : null}
 			</div>
 		</div>
 	);

frontend/src/pages/Nginx/RedirectionHosts/Empty.tsx

@@ -14,7 +14,7 @@ export default function Empty({ tableInstance, onNew, isFiltered }: Props) {
 				<div className="text-center my-4">
 					{isFiltered ? (
 						<h2>
-							<T id="empty.search" />
+							<T id="empty-search" />
 						</h2>
 					) : (
 						<>

frontend/src/pages/Nginx/RedirectionHosts/TableWrapper.tsx

@@ -6,15 +6,13 @@ import { deleteRedirectionHost, toggleRedirectionHost } from "src/api/backend";
 import { Button, LoadingPage } from "src/components";
 import { useRedirectionHosts } from "src/hooks";
 import { intl, T } from "src/locale";
-import { DeleteConfirmModal, RedirectionHostModal } from "src/modals";
+import { showDeleteConfirmModal, showRedirectionHostModal } from "src/modals";
 import { showSuccess } from "src/notifications";
 import Table from "./Table";
 
 export default function TableWrapper() {
 	const queryClient = useQueryClient();
 	const [search, setSearch] = useState("");
-	const [deleteId, setDeleteId] = useState(0);
-	const [editId, setEditId] = useState(0 as number | "new");
 	const { isFetching, isLoading, isError, error, data } = useRedirectionHosts(["owner", "certificate"]);
 
 	if (isLoading) {
@@ -25,8 +23,8 @@ export default function TableWrapper() {
 		return <Alert variant="danger">{error?.message || "Unknown error"}</Alert>;
 	}
 
-	const handleDelete = async () => {
-		await deleteRedirectionHost(deleteId);
+	const handleDelete = async (id: number) => {
+		await deleteRedirectionHost(id);
 		showSuccess(intl.formatMessage({ id: "notification.host-deleted" }));
 	};
 
@@ -76,7 +74,11 @@ export default function TableWrapper() {
 											onChange={(e: any) => setSearch(e.target.value.toLowerCase().trim())}
 										/>
 									</div>
-									<Button size="sm" className="btn-yellow" onClick={() => setEditId("new")}>
+									<Button
+										size="sm"
+										className="btn-yellow"
+										onClick={() => showRedirectionHostModal("new")}
+									>
 										<T id="redirection-hosts.add" />
 									</Button>
 								</div>
@@ -88,22 +90,18 @@ export default function TableWrapper() {
 					data={filtered ?? data ?? []}
 					isFiltered={!!search}
 					isFetching={isFetching}
-					onEdit={(id: number) => setEditId(id)}
-					onDelete={(id: number) => setDeleteId(id)}
+					onEdit={(id: number) => showRedirectionHostModal(id)}
+					onDelete={(id: number) =>
+						showDeleteConfirmModal({
+							title: "redirection-host.delete.title",
+							onConfirm: () => handleDelete(id),
+							invalidations: [["redirection-hosts"], ["redirection-host", id]],
+							children: <T id="redirection-host.delete.content" />,
+						})
+					}
 					onDisableToggle={handleDisableToggle}
-					onNew={() => setEditId("new")}
+					onNew={() => showRedirectionHostModal("new")}
 				/>
-				{editId ? <RedirectionHostModal id={editId} onClose={() => setEditId(0)} /> : null}
-				{deleteId ? (
-					<DeleteConfirmModal
-						title="redirection-host.delete.title"
-						onConfirm={handleDelete}
-						onClose={() => setDeleteId(0)}
-						invalidations={[["redirection-hosts"], ["redirection-host", deleteId]]}
-					>
-						<T id="redirection-host.delete.content" />
-					</DeleteConfirmModal>
-				) : null}
 			</div>
 		</div>
 	);

frontend/src/pages/Nginx/Streams/Empty.tsx

@@ -14,7 +14,7 @@ export default function Empty({ tableInstance, onNew, isFiltered }: Props) {
 				<div className="text-center my-4">
 					{isFiltered ? (
 						<h2>
-							<T id="empty.search" />
+							<T id="empty-search" />
 						</h2>
 					) : (
 						<>

frontend/src/pages/Nginx/Streams/TableWrapper.tsx

@@ -6,15 +6,14 @@ import { deleteStream, toggleStream } from "src/api/backend";
 import { Button, LoadingPage } from "src/components";
 import { useStreams } from "src/hooks";
 import { intl, T } from "src/locale";
-import { DeleteConfirmModal, StreamModal } from "src/modals";
+import { showDeleteConfirmModal, showStreamModal } from "src/modals";
 import { showSuccess } from "src/notifications";
 import Table from "./Table";
 
 export default function TableWrapper() {
 	const queryClient = useQueryClient();
 	const [search, setSearch] = useState("");
-	const [editId, setEditId] = useState(0 as number | "new");
-	const [deleteId, setDeleteId] = useState(0);
+	const [_deleteId, _setDeleteIdd] = useState(0);
 	const { isFetching, isLoading, isError, error, data } = useStreams(["owner", "certificate"]);
 
 	if (isLoading) {
@@ -25,8 +24,8 @@ export default function TableWrapper() {
 		return <Alert variant="danger">{error?.message || "Unknown error"}</Alert>;
 	}
 
-	const handleDelete = async () => {
-		await deleteStream(deleteId);
+	const handleDelete = async (id: number) => {
+		await deleteStream(id);
 		showSuccess(intl.formatMessage({ id: "notification.stream-deleted" }));
 	};
 
@@ -79,7 +78,7 @@ export default function TableWrapper() {
 											onChange={(e: any) => setSearch(e.target.value.toLowerCase().trim())}
 										/>
 									</div>
-									<Button size="sm" className="btn-blue" onClick={() => setEditId("new")}>
+									<Button size="sm" className="btn-blue" onClick={() => showStreamModal("new")}>
 										<T id="streams.add" />
 									</Button>
 								</div>
@@ -91,22 +90,18 @@ export default function TableWrapper() {
 					data={filtered ?? data ?? []}
 					isFetching={isFetching}
 					isFiltered={!!filtered}
-					onEdit={(id: number) => setEditId(id)}
-					onDelete={(id: number) => setDeleteId(id)}
+					onEdit={(id: number) => showStreamModal(id)}
+					onDelete={(id: number) =>
+						showDeleteConfirmModal({
+							title: "stream.delete.title",
+							onConfirm: () => handleDelete(id),
+							invalidations: [["streams"], ["stream", id]],
+							children: <T id="stream.delete.content" />,
+						})
+					}
 					onDisableToggle={handleDisableToggle}
-					onNew={() => setEditId("new")}
+					onNew={() => showStreamModal("new")}
 				/>
-				{editId ? <StreamModal id={editId} onClose={() => setEditId(0)} /> : null}
-				{deleteId ? (
-					<DeleteConfirmModal
-						title="stream.delete.title"
-						onConfirm={handleDelete}
-						onClose={() => setDeleteId(0)}
-						invalidations={[["streams"], ["stream", deleteId]]}
-					>
-						<T id="stream.delete.content" />
-					</DeleteConfirmModal>
-				) : null}
 			</div>
 		</div>
 	);