More on adding routes

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

@@ -39,4 +39,29 @@ export async function PATCH(request: Request, {params}: {params: {route: number}
             'Content-Type': 'application/json',
         },
     });
+}
+
+export async function PUT(request: Request, {params}: {params: { route: number }}) {
+  const slug = params.route;
+  let route: Route = await request.json();
+  console.log(route, slug)
+
+  const res = await fetch(`http://192.168.1.69:2019/config/apps/http/servers/srv0/routes/${slug}`, {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      cache: 'no-cache',
+      body: JSON.stringify(route)
+    })
+
+  if (!res.ok) 
+    throw new Error('Failed to fetch caddy config. Please check the network and try again.');
+  
+  return new NextResponse(JSON.stringify({error: false}), {
+      status: 200,
+      headers: {
+          'Content-Type': 'application/json',
+      },
+  });
 }

app/page.tsx

@@ -22,7 +22,7 @@ export default function Home() {
 
   return (
     <main>
-      {route && <RouteDialog route={route} routeMap={routesMap} />}
+      {route && <RouteDialog route={route} routesMap={routesMap} />}
       <div className='flex items-center justify-center p-6'>
         <Card className='flex'>
           <CardHeader>
@@ -35,7 +35,7 @@ export default function Home() {
             </div>
           </CardContent>
           <CardFooter>
-            <Button onClick={() => setRoute(route)} className='translate-y-2.5'>Create</Button>
+            <Button onClick={() => setRoute({} as Route)} className='translate-y-2.5'>Create</Button>
           </CardFooter>
         </Card>
       </div>

components/RouteDialog.tsx

@@ -14,7 +14,7 @@ export function RouteDialog({ route, routesMap }: { route: Route, routesMap: Rou
     let index = routesMap.indexOf(route);
 
     const [modifiedRoute, setRoute] = useState(route);
-    const { trigger: pushUpdate } = useSWRMutation(`/api/caddy/routes/${index}`, updateRoute, {
+    const { trigger: pushUpdate } = useSWRMutation(`/api/caddy/routes`, updateRoute, {
         onError: () => {
             return toast({
                 title: "Error",
@@ -31,12 +31,19 @@ export function RouteDialog({ route, routesMap }: { route: Route, routesMap: Rou
         }
     });
 
-    let validHosts: any[] = getHosts(route);
-    let validUpstreams: any[] = getRouteUpstreams(route).map((upstream) => upstream.dial);
+    let validHosts: any[] = ["google.com"];
+    let validUpstreams: any[] = ["1.1.1.1"];
+    let handler: string = "reverse_proxy";
+
+    if (index != -1) {
+        validHosts = getHosts(route);
+        validUpstreams = getRouteUpstreams(route).map((upstream) => upstream.dial);
+        handler = route?.handle[0]?.routes[0]?.handle[0]?.handler;
+    }
 
     const form = useForm({
         values: {
-            handler: route.handle[0].routes[0].handle[0].handler ?? "",
+            handler: handler,
             upstreams: validUpstreams ?? [],
             hosts: validHosts ?? [],
         }
@@ -58,11 +65,11 @@ export function RouteDialog({ route, routesMap }: { route: Route, routesMap: Rou
             index: index,
             type: index == -1 ? 'PUT' : 'PATCH'
         }
-        if (index == -1) update.index = routesMap.length + 1;
+        if (index == -1) update.index = routesMap.length;
+        console.log(update.index)
         pushUpdate(update);
     })
 
-
     let handleChange = (value: any, path: any) => {
         let updatedRoute = set(modifiedRoute, path, value.target.value);
         setRoute(updatedRoute);

lib/clientActions.ts

@@ -49,8 +49,7 @@ export async function useConfig() {
   }
 
   export function updateRoute(url: any, { arg }: { arg: { route: Route, index: number, type: string } }) {
-    console.log(arg.index)
-    return fetch(url, {
+    return fetch(url + `/` + arg.index, {
       method: arg.type,
       headers: {
         'Content-Type': 'application/json'

lib/utils.ts

@@ -7,7 +7,7 @@ export function cn(...inputs: ClassValue[]) {
 }
 
 export function getHosts(route: Route) {
-  return route.match.map(match => match.host).flatMap(host => host);
+  return route?.match?.map(match => match.host).flatMap(host => host);
 }
 
 export function getRouteType(route: Route) {
@@ -15,6 +15,6 @@ export function getRouteType(route: Route) {
 }
 
 export function getRouteUpstreams(route: Route, index: number = 0) {
-  let test: Upstream[] = route.handle[index].routes?.flat()[index].handle[index].upstreams!;
-  return test;
+  let upstreams: Upstream[] = route.handle[index].routes?.flat()[index].handle[index].upstreams;
+  return upstreams;
 }