akanealw/caddy-proxy-manager
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

Fix UI state management issues with data refresh

Browse Source 
- Add router.refresh() to proxy-hosts and redirects dialogs
- Auto-close dialogs 1 second after successful form submission
- Fixes stale data not refreshing after create/edit/delete operations
- Fixes localhost redirect issues (requires BASE_URL env var to be set)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
fuomag9
2025-11-03 22:30:08 +01:00
parent 9354cd9407
commit 2cd8ace6bf
2 changed files with 58 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
app/(dashboard)/proxy-hosts/ProxyHostsClient.tsx
View File

@@ -1,6 +1,7 @@
"use client";
import { useMemo, useState } from "react";
import { useMemo, useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import {
Alert,
Box,
@@ -236,8 +237,16 @@ function CreateHostDialog({
certificates: Certificate[];
accessLists: AccessList[];
}) {
const router = useRouter();
const [state, formAction] = useFormState(createProxyHostAction, INITIAL_ACTION_STATE);
useEffect(() => {
if (state.status === "success") {
router.refresh();
setTimeout(onClose, 1000);
}
}, [state.status, router, onClose]);
return (
<Dialog
open={open}
@@ -263,7 +272,7 @@ function CreateHostDialog({
<DialogContent dividers>
<Stack component="form" id="create-form" action={formAction} spacing={2.5}>
{state.status !== "idle" && state.message && (
<Alert severity={state.status === "error" ? "error" : "success"} onClose={() => state.status === "success" && onClose()}>
<Alert severity={state.status === "error" ? "error" : "success"}>
{state.message}
</Alert>
)}
@@ -355,8 +364,16 @@ function EditHostDialog({
certificates: Certificate[];
accessLists: AccessList[];
}) {
const router = useRouter();
const [state, formAction] = useFormState(updateProxyHostAction.bind(null, host.id), INITIAL_ACTION_STATE);
useEffect(() => {
if (state.status === "success") {
router.refresh();
setTimeout(onClose, 1000);
}
}, [state.status, router, onClose]);
return (
<Dialog
open={open}
@@ -382,7 +399,7 @@ function EditHostDialog({
<DialogContent dividers>
<Stack component="form" id="edit-form" action={formAction} spacing={2.5}>
{state.status !== "idle" && state.message && (
<Alert severity={state.status === "error" ? "error" : "success"} onClose={() => state.status === "success" && onClose()}>
<Alert severity={state.status === "error" ? "error" : "success"}>
{state.message}
</Alert>
)}
@@ -468,8 +485,16 @@ function DeleteHostDialog({
host: ProxyHost;
onClose: () => void;
}) {
const router = useRouter();
const [state, formAction] = useFormState(deleteProxyHostAction.bind(null, host.id), INITIAL_ACTION_STATE);
useEffect(() => {
if (state.status === "success") {
router.refresh();
setTimeout(onClose, 1000);
}
}, [state.status, router, onClose]);
return (
<Dialog
open={open}
@@ -494,7 +519,7 @@ function DeleteHostDialog({
<DialogContent dividers>
<Stack spacing={2}>
{state.status !== "idle" && state.message && (
<Alert severity={state.status === "error" ? "error" : "success"} onClose={() => state.status === "success" && onClose()}>
<Alert severity={state.status === "error" ? "error" : "success"}>
{state.message}
</Alert>
)}