Finished adding routes

README.md

@@ -16,9 +16,9 @@ This project is built using the following technologies:
 - [ ] Dockerfile
 - [X] View all Routes
 - [X] Delete routes
-- [ ] Add routes
+- [X] Add routes
 - [X] Edit routes
-- [ ] User accounts
+- [ ] Authentication 
 
 ## Getting Started
 

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

@@ -7,7 +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) onError('Failed to get route');
+  if (!res.ok) return onError('Failed to get route');
 
   return new NextResponse(JSON.stringify(route), {
     status: 200,
@@ -30,9 +30,9 @@ export async function PATCH(request: Request, { params }: { params: { route: num
     body: JSON.stringify(route)
   })
 
-  if (!res.ok) onError('Failed to edit route')
+  if (res.status != 200) return onError('Failed to edit route')
 
-  return new NextResponse(JSON.stringify({ error: false }), {
+  return new NextResponse(JSON.stringify(route), {
     status: 200,
     headers: {
       'Content-Type': 'application/json',
@@ -53,9 +53,9 @@ export async function PUT(request: Request, { params }: { params: { route: numbe
     body: JSON.stringify(route)
   })
 
-  if (!res.ok) onError('Failed to add route');
+  if (res.status != 200) return onError('Failed to add route');
 
-  return new NextResponse(JSON.stringify({ error: false }), {
+  return new NextResponse(JSON.stringify(route), {
     status: 200,
     headers: {
       'Content-Type': 'application/json',

app/page.tsx

@@ -37,7 +37,29 @@ export default function Home() {
           </CardContent>
           <CardFooter>
             <Button onClick={() => {
-              setRoute({} as Route);
+              setRoute({
+                "handle": [
+                  {
+                    "handler": "subroute",
+                    "routes": [
+                      {
+                        "handle": [
+                          {
+                            "handler": "reverse_proxy",
+                            "upstreams": []
+                          }
+                        ]
+                      }
+                    ]
+                  }
+                ],
+                "match": [
+                  {
+                    "host": []
+                  }
+                ],
+                "terminal": true
+              })
               setOpen(true);
             }} className='translate-y-2.5'>Create</Button>
           </CardFooter>

components/RouteCards.tsx

@@ -12,6 +12,7 @@ import { RouteDialog } from './RouteDialog';
 export default function RouteCards({ routes }: { routes: Route[] }) {
 
     const [route, setRoute] = useState<Route>();
+    const [open, setOpen] = useState(false);
 
     const { trigger: handleDelete } = useSWRMutation("/api/caddy/routes", deleteRoute, {
         onError: () => {
@@ -37,7 +38,7 @@ export default function RouteCards({ routes }: { routes: Route[] }) {
 
     return (
         <>
-            {route && <RouteDialog route={route} routesMap={routes} />}
+            {route && <RouteDialog open={open} onOpenChange={setOpen} route={route} routesMap={routes} />}
             {
                 routes.map((route, index) => (
                     <div key={index} className='p-2'>
@@ -54,7 +55,10 @@ export default function RouteCards({ routes }: { routes: Route[] }) {
                                 <p className="text-sm text-muted-foreground">{getRouteUpstreams(route)?.map((upstream => upstream.dial))}</p>
                             </CardContent>
                             <CardFooter className="flex justify-between">
-                                <Button onClick={() => { editRoute(route) }}>Edit</Button>
+                                <Button onClick={() => { 
+                                    editRoute(route)
+                                    setOpen(true)
+                                 }}>Edit</Button>
                                 <Button variant="destructive" onClick={() => { handleDelete(route) }}>Delete</Button>
                             </CardFooter>
                         </Card>

components/RouteDialog.tsx

@@ -5,17 +5,20 @@ import useSWRMutation from "swr/mutation";
 import { toast } from "./ui/use-toast";
 import { useFieldArray, useForm } from "react-hook-form";
 import { get, set } from "lodash";
-import { Dialog, DialogContent } from "./ui/dialog";
+import { Dialog, DialogContent, DialogFooter } 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";
 
+//TODO one day, I'll clean this up
 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({
@@ -33,12 +36,12 @@ export function RouteDialog({ route, routesMap, open, onOpenChange }: { route: R
         }
     });
 
-    let validHosts: any[] = ["google.com", "test.com"];
+    let validHosts: any[] = [];
-    let validUpstreams: any[] = ["1.1.1.1", "69.126.24.175"];
+    let validUpstreams: any[] = [];
     let handler: string = "reverse_proxy";
 
     if (index != -1) {
-        validHosts = getHosts(route)!;
+        validHosts = getHosts(modifiedRoute)!;
         validUpstreams = getRouteUpstreams(route).map((upstream) => upstream.dial);
         handler = getHandler(route)!;
     }
@@ -68,32 +71,8 @@ export function RouteDialog({ route, routesMap, open, onOpenChange }: { route: R
             type: index == -1 ? 'PUT' : 'PATCH'
         }
 
-        update.route = {
-            "handle": [
-                {
-                    "handler": "subroute",
-                    "routes": [
-                        {
-                            "handle": [
-                                {
-                                    "handler": "reverse_proxy",
-                                    "upstreams": validUpstreams.map((upstream) => ({ "dial": upstream }))
-                                }
-                            ]
-                        }
-                    ]
-                }
-            ],
-            "match": [
-                {
-                    "host": validHosts
-                }
-            ],
-            "terminal": true
-        }
-
         if (index == -1) update.index = routesMap.length - 1;
-        console.log(update.index)
+        console.log(JSON.stringify(update.route), update.index)
         pushUpdate(update);
 
     })
@@ -133,7 +112,7 @@ export function RouteDialog({ route, routesMap, open, onOpenChange }: { route: R
                                     <FormItem>
                                         <FormLabel>Upstream {index + 1}</FormLabel>
                                         <FormControl>
-                                            <Input {...field} onChange={(value) => handleChange(value, `handle[0].routes[0].handle[0].upstreams[${index}].dial`)} />
+                                            <Input {...field} placeholder="127.0.0.1" onChange={(value) => handleChange(value, `handle[0].routes[0].handle[0].upstreams[${index}].dial`)} />
                                         </FormControl>
                                     </FormItem>
                                 )}
@@ -149,17 +128,17 @@ export function RouteDialog({ route, routesMap, open, onOpenChange }: { route: R
                                     <FormItem>
                                         <FormLabel>Host {index + 1}</FormLabel>
                                         <FormControl>
-                                            <Input {...field} onChange={(value) => handleChange(value, `match[0].host[${index}]`)} />
+                                            <Input {...field} placeholder="example.com" onChange={(value) => handleChange(value, `match[0].host[${index}]`)} />
                                         </FormControl>
                                     </FormItem>
                                 )}
                             />
                         ))}
-                        <DialogClose asChild><Button type="submit">Save</Button></DialogClose>
+                        <DialogFooter className="translate-y-2">
-                        <Button type='button' onClick={() => {
+                        <Button variant="outline" disabled={upstreams.length >= 1} type='button' onClick={() => {appendUpstreams('')}}>Add Upstream</Button>
-                            appendHosts('')
+                            <Button variant="outline" type='button' onClick={() => {appendHosts('')}}>Add Host</Button>
-                            onOpenChange(false)
+                            <DialogClose asChild><Button onClick={() => onOpenChange(false)} type="submit">Save</Button></DialogClose>
-                        }}>Add Host</Button>
+                        </DialogFooter>
                     </form>
                 </Form>
             </DialogContent>