Started implementing adding routes

app/page.tsx

@@ -7,37 +7,73 @@ import { useRoutes } from '@/lib/clientActions';
 import Image from 'next/image';
 import Loading from '@/components/Loading';
 import Error from '@/components/Error';
+import { useState } from 'react';
+import { RouteDialog } from '@/components/RouteDialog';
 
 
 export default function Home() {
 
+  const [routeDialog, setRouteDialog] = useState(false);
   const { data: routes, error, isLoading } = useRoutes();
   let routesMap: Route[] = routes as Route[];
 
-  if(error) return <Error />
-  if(isLoading) return <Loading />
+  if (error) return <Error />
+  if (isLoading) return <Loading />
 
-    return (
-      <main>
-        <div className='flex items-center justify-center p-6'>
-          <Card className='flex'>
-            <CardHeader>
-              <CardTitle>Active Routes</CardTitle>
-              <CardDescription>Amount of configured routes</CardDescription>
-            </CardHeader>
-            <CardContent className='flex items-center'>
-              <div>
-                <p className='text-xl font-semibold translate-y-2'>{routesMap.length}</p>
-              </div>
-            </CardContent>
-            <CardFooter>
-              <Button className='translate-y-2.5'>Create</Button>
-            </CardFooter>
-          </Card>
-        </div>
-        <div className='grid grid-flow-row-dense md:grid-cols-6 sm:grid-cols-2 p-2'>
-          <RouteCards routes={routesMap} />
-        </div>
-      </main>
-    )
+  let route = {
+    "handle": [
+      {
+        "handler": "subroute",
+        "routes": [
+          {
+            "handle": [
+              {
+                "handler": "reverse_proxy",
+                "upstreams": [
+                  {
+                    "dial": "1.1.1.1"
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    ],
+    "match": [
+      {
+        "host": [
+          "containers.grug.dev",
+          "containers.daddyimpregnant.com",
+          "containers.mizuledevelopment.com"
+        ]
+      }
+    ],
+    "terminal": true
+  }
+
+  return (
+    <main>
+      {routeDialog && <RouteDialog route={route as Route} />}
+      <div className='flex items-center justify-center p-6'>
+        <Card className='flex'>
+          <CardHeader>
+            <CardTitle>Active Routes</CardTitle>
+            <CardDescription>Amount of configured routes</CardDescription>
+          </CardHeader>
+          <CardContent className='flex items-center'>
+            <div>
+              <p className='text-xl font-semibold translate-y-2'>{routesMap.length}</p>
+            </div>
+          </CardContent>
+          <CardFooter>
+            <Button onClick={() => setRouteDialog(!routeDialog)} className='translate-y-2.5'>Create</Button>
+          </CardFooter>
+        </Card>
+      </div>
+      <div className='grid grid-flow-row-dense md:grid-cols-6 sm:grid-cols-2 p-2'>
+        <RouteCards routes={routesMap} />
+      </div>
+    </main>
+  )
 }

lib/serverActions.ts

@@ -53,12 +53,12 @@
   }
 
   export async function updateRoute(index: number, route: Route) {
-    return fetch(`http://192.168.1.69:2019/config/apps/http/servers/srv0/routes/${index}`, {
+    return await fetch(`http://192.168.1.69:2019/config/apps/http/servers/srv0/routes/${index}`, {
       method: 'PATCH',
       headers: {
         'Content-Type': 'application/json'
       },
       cache: 'no-cache',
       body: JSON.stringify(route)
-    }).then((res) => res.json()).catch((err) => console.log(err));
+    }).then((res) => res.json())
   }