Fixed close of Dialog

app/api/caddy/routes/[route]/route.ts

@@ -1,4 +1,5 @@
 import { updateRoute } from "@/lib/serverActions";
+import { onError } from "@/lib/utils";
 import { NextResponse } from "next/server";
 
 export async function GET(request: Request, { params }: { params: { route: number } }) {
@@ -6,8 +7,7 @@ export async function GET(request: Request, { params }: { params: { route: numbe
   const res = await fetch(`http://192.168.1.69:2019/config/apps/http/servers/srv0/routes/${slug}`, { cache: 'no-store' });
   let route: Route = await res.json();
 
-  if (!res.ok)
-    throw new Error('Failed to fetch caddy config. Please check the network and try again.');
+  if (!res.ok) onError('Failed to get route');
 
   return new NextResponse(JSON.stringify(route), {
     status: 200,
@@ -30,12 +30,7 @@ export async function PATCH(request: Request, { params }: { params: { route: num
     body: JSON.stringify(route)
   })
 
-  if (!res.ok) return new NextResponse(JSON.stringify({ error: true }), {
-    status: 500,
-    headers: {
-      'Content-Type': 'application/json',
-    },
-  });
+  if (!res.ok) onError('Failed to edit route')
 
   return new NextResponse(JSON.stringify({ error: false }), {
     status: 200,
@@ -58,15 +53,7 @@ export async function PUT(request: Request, { params }: { params: { route: numbe
     body: JSON.stringify(route)
   })
 
-
-  //console.log(JSON.stringify(route));
-
-  if (!res.ok) return new NextResponse(JSON.stringify({ error: true, message: "Could not save route" }), {
-    status: 500,
-    headers: {
-      'Content-Type': 'application/json',
-    },
-  });
+  if (!res.ok) onError('Failed to add route');
 
   return new NextResponse(JSON.stringify({ error: false }), {
     status: 200,

app/page.tsx

@@ -14,6 +14,7 @@ import { RouteDialog } from '@/components/RouteDialog';
 export default function Home() {
 
   const [route, setRoute] = useState<Route>();
+  const [open, setOpen] = useState(false);
   const { data: routes, error, isLoading } = useRoutes();
   let routesMap: Route[] = routes as Route[];
 
@@ -22,7 +23,7 @@ export default function Home() {
 
   return (
     <main>
-      {route && <RouteDialog route={route} routesMap={routesMap} />}
+      {route && <RouteDialog onOpenChange={setOpen} open={open} route={route} routesMap={routesMap} />}
       <div className='flex items-center justify-center p-6'>
         <Card className='flex'>
           <CardHeader>
@@ -35,7 +36,10 @@ export default function Home() {
             </div>
           </CardContent>
           <CardFooter>
-            <Button onClick={() => setRoute({} as Route)} className='translate-y-2.5'>Create</Button>
+            <Button onClick={() => {
+              setRoute({} as Route);
+              setOpen(true);
+            }} className='translate-y-2.5'>Create</Button>
           </CardFooter>
         </Card>
       </div>

components/RouteDialog.tsx

@@ -9,11 +9,13 @@ import { Dialog, DialogContent } from "./ui/dialog";
 import { Form, FormControl, FormField, FormItem, FormLabel } from "./ui/form";
 import { Input } from "./ui/input";
 import { Button } from "./ui/button";
+import { DialogClose } from "@radix-ui/react-dialog";
 
-export function RouteDialog({ route, routesMap }: { route: Route, routesMap: Route[] }) {
+export function RouteDialog({ route, routesMap, open, onOpenChange }: { route: Route, routesMap: Route[], open: boolean, onOpenChange: (open: boolean) => void }) {
     let index = routesMap.indexOf(route);
 
     const [modifiedRoute, setRoute] = useState(route);
+
     const { trigger: pushUpdate } = useSWRMutation(`/api/caddy/routes`, updateRoute, {
         onError: (err) => {
             return toast({
@@ -90,11 +92,10 @@ export function RouteDialog({ route, routesMap }: { route: Route, routesMap: Rou
             "terminal": true
         }
 
-        console.log(JSON.stringify(update.route))
-
         if (index == -1) update.index = routesMap.length - 1;
         console.log(update.index)
         pushUpdate(update);
+
     })
 
     let handleChange = (value: any, path: any) => {
@@ -105,7 +106,7 @@ export function RouteDialog({ route, routesMap }: { route: Route, routesMap: Rou
 
 
     return (
-        <Dialog open={route as Route != null}>
+        <Dialog open={open} onOpenChange={onOpenChange}>
             <DialogContent className='sm:max-w-[425px]'>
                 <Form {...form}>
                     <form onSubmit={form.handleSubmit(onSubmit)}>
@@ -154,8 +155,11 @@ export function RouteDialog({ route, routesMap }: { route: Route, routesMap: Rou
                                 )}
                             />
                         ))}
-                        <Button type="submit">Save</Button>
-                        <Button type='button' onClick={() => { appendHosts('') }}>Add Host</Button>
+                        <DialogClose asChild><Button type="submit">Save</Button></DialogClose>
+                        <Button type='button' onClick={() => {
+                            appendHosts('')
+                            onOpenChange(false)
+                        }}>Add Host</Button>
                     </form>
                 </Form>
             </DialogContent>

lib/utils.ts

@@ -1,5 +1,6 @@
 
 import { type ClassValue, clsx } from "clsx"
+import { NextResponse } from "next/server";
 import { twMerge } from "tailwind-merge"
 
 export function cn(...inputs: ClassValue[]) {
@@ -24,4 +25,13 @@ export function getHandler(route: Route) {
     let handle: string = route?.handle[0]?.routes[0]?.handle[0]?.handler
     return handle;
   }
+}
+
+export function onError(message: string, status: number = 500) {
+  return new NextResponse(JSON.stringify({ error: true, message: message }), {
+    status: status,
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
 }