From 2cd8ace6bf15b1dcee5de37e03bbed6e62dc10c4 Mon Sep 17 00:00:00 2001
From: fuomag9 <1580624+fuomag9@users.noreply.github.com>
Date: Mon, 3 Nov 2025 22:30:08 +0100
Subject: [PATCH] Fix UI state management issues with data refresh
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 .../proxy-hosts/ProxyHostsClient.tsx          | 33 ++++++++++++++++---
 app/(dashboard)/redirects/RedirectsClient.tsx | 33 ++++++++++++++++---
 2 files changed, 58 insertions(+), 8 deletions(-)

diff --git a/app/(dashboard)/proxy-hosts/ProxyHostsClient.tsx b/app/(dashboard)/proxy-hosts/ProxyHostsClient.tsx
index 38bc7411..ec6c9366 100644
--- a/app/(dashboard)/proxy-hosts/ProxyHostsClient.tsx
+++ b/app/(dashboard)/proxy-hosts/ProxyHostsClient.tsx
@@ -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>
           )}
diff --git a/app/(dashboard)/redirects/RedirectsClient.tsx b/app/(dashboard)/redirects/RedirectsClient.tsx
index 3434e0c6..4faa3f70 100644
--- a/app/(dashboard)/redirects/RedirectsClient.tsx
+++ b/app/(dashboard)/redirects/RedirectsClient.tsx
@@ -1,6 +1,7 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
 import {
   Alert,
   Box,
@@ -207,6 +208,14 @@ export default function RedirectsClient({ redirects }: Props) {
 
 function CreateRedirectDialog({ open, onClose }: { open: boolean; onClose: () => void }) {
   const [state, formAction] = useFormState(createRedirectAction, INITIAL_ACTION_STATE);
+  const router = useRouter();
+
+  useEffect(() => {
+    if (state.status === "success") {
+      router.refresh();
+      setTimeout(onClose, 1000);
+    }
+  }, [state.status, router, onClose]);
 
   return (
     <Dialog
@@ -233,7 +242,7 @@ function CreateRedirectDialog({ open, onClose }: { open: boolean; onClose: () =>
       <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>
           )}
@@ -291,6 +300,14 @@ function EditRedirectDialog({
   onClose: () => void;
 }) {
   const [state, formAction] = useFormState(updateRedirectAction.bind(null, redirect.id), INITIAL_ACTION_STATE);
+  const router = useRouter();
+
+  useEffect(() => {
+    if (state.status === "success") {
+      router.refresh();
+      setTimeout(onClose, 1000);
+    }
+  }, [state.status, router, onClose]);
 
   return (
     <Dialog
@@ -317,7 +334,7 @@ function EditRedirectDialog({
       <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>
           )}
@@ -373,6 +390,14 @@ function DeleteRedirectDialog({
   onClose: () => void;
 }) {
   const [state, formAction] = useFormState(deleteRedirectAction.bind(null, redirect.id), INITIAL_ACTION_STATE);
+  const router = useRouter();
+
+  useEffect(() => {
+    if (state.status === "success") {
+      router.refresh();
+      setTimeout(onClose, 1000);
+    }
+  }, [state.status, router, onClose]);
 
   return (
     <Dialog
@@ -398,7 +423,7 @@ function DeleteRedirectDialog({
       <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>
           )}