More on adding routes

components/RouteCards.tsx

@@ -32,7 +32,6 @@ export default function RouteCards({ routes }: { routes: Route[] }) {
 
 
     let editRoute = (route: Route) => {
-        console.log(routes)
         setRoute(route);
     }
 
@@ -44,8 +43,8 @@ export default function RouteCards({ routes }: { routes: Route[] }) {
                     <div key={index} className='p-2'>
                         <Card key={index} className='w-[300px]'>
                             <CardHeader>
-                                <CardTitle>{getHosts(route).values().next().value}</CardTitle>
+                                <CardTitle>{getHosts(route)!.values().next().value}</CardTitle>
-                                {getHosts(route).map((route => <CardDescription key={route}>{route}</ CardDescription>))}
+                                {getHosts(route)!.map((route => <CardDescription key={route}>{route}</ CardDescription>))}
                                 <CardDescription></CardDescription>
                             </CardHeader>
                             <CardContent>

components/RouteDialog.tsx

@@ -1,5 +1,5 @@
 import { updateRoute } from "@/lib/clientActions";
-import { getHosts, getRouteUpstreams } from "@/lib/utils";
+import { getHandler, getHosts, getRouteUpstreams } from "@/lib/utils";
 import { useState } from "react";
 import useSWRMutation from "swr/mutation";
 import { toast } from "./ui/use-toast";
@@ -36,9 +36,9 @@ export function RouteDialog({ route, routesMap }: { route: Route, routesMap: Rou
     let handler: string = "reverse_proxy";
 
     if (index != -1) {
-        validHosts = getHosts(route);
+        validHosts = getHosts(route)!;
         validUpstreams = getRouteUpstreams(route).map((upstream) => upstream.dial);
-        handler = route?.handle[0]?.routes[0]?.handle[0]?.handler;
+        handler = getHandler(route)!;
     }
 
     const form = useForm({
@@ -61,10 +61,11 @@ export function RouteDialog({ route, routesMap }: { route: Route, routesMap: Rou
 
     let onSubmit = (() => {
         let update = {
-            route: modifiedRoute,
+            route: modifiedRoute as Route,
             index: index,
             type: index == -1 ? 'PUT' : 'PATCH'
         }
+
         if (index == -1) update.index = routesMap.length;
         console.log(update.index)
         pushUpdate(update);

lib/types.ts

@@ -3,26 +3,27 @@ interface Server {
     routes: Route[];
 }
 
-interface Route {
-    handle: Handle[];
-    match: Match[];
-    terminal?: boolean;
-}
-
-interface Match {
-    host: string[];
-}
-
-interface Handle {
-    handler: string;
-    upstreams: Upstream[];
-    routes: Route[];
-}
-
 interface Upstream {
     dial: string;
 }
 
+interface Handle {
+    handler: string;
+    upstreams?: Upstream[];
+    routes?: Route[];
+}
+
+interface Match {
+    host: string[];
+}
+
+interface Route {
+    handle: Handle[];
+    match?: Match[];
+    terminal?: boolean;
+}
+
+
 interface UpstreamRequest {
     address: string;
     num_requests: number;

lib/utils.ts

@@ -15,6 +15,13 @@ export function getRouteType(route: Route) {
 }
 
 export function getRouteUpstreams(route: Route, index: number = 0) {
-  let upstreams: Upstream[] = route.handle[index].routes?.flat()[index].handle[index].upstreams;
+  let upstreams: Upstream[] = route.handle[index].routes?.flat()[index].handle[index].upstreams!;
   return upstreams;
 }
+
+export function getHandler(route: Route) {
+  if(route.handle[0].routes) {
+    let handle: string = route?.handle[0]?.routes[0]?.handle[0]?.handler
+    return handle;
+  }
+}