Rough copy of edit menu

components/RouteCards.tsx

@@ -10,8 +10,9 @@ import { deleteRoute } from '@/lib/clientActions';
 import { Dialog, DialogContent, DialogHeader } from './ui/dialog';
 import { DialogDescription, DialogTitle } from '@radix-ui/react-dialog';
 import { Form, FormControl, FormField, FormItem, FormLabel } from './ui/form';
-import { useForm } from 'react-hook-form';
+import { useFieldArray, useForm } from 'react-hook-form';
 import { Input } from './ui/input';
+import { get, set } from 'lodash';
 
 export default function RouteCards({ routes }: { routes: Route[] }) {
 
@@ -41,7 +42,7 @@ export default function RouteCards({ routes }: { routes: Route[] }) {
 
     return (
         <>
-            <EditRouteDialog route={route} />
+            {route && <EditRouteDialog route={route} />}
             {
                 routes.map((route, index) => (
                     <div key={index} className='p-2'>
@@ -68,50 +69,43 @@ export default function RouteCards({ routes }: { routes: Route[] }) {
     )
 }
 
-export function EditRouteDialog({ route }: { route?: Route }) {
+export function EditRouteDialog({ route }: { route: Route }) {
+    const [modifiedRoute, setRoute] = useState(route);
+    let validHosts: any[] = getHosts(route);
+    let validUpstreams: any[] = getRouteUpstreams(route).map((upstream) => upstream.dial);
+
     const form = useForm({
-        defaultValues: {
+        values: {
-            handler: route?.handle[0].handler,
+            handler: route.handle[0].routes[0].handle[0].handler,
-            upstreams: route?.handle[0].upstreams,
+            upstreams: validUpstreams,
-            //hosts: route?.match[0].host,
+            hosts: validHosts,
         }
     });
 
-    let test: RouteHandle = {
+    const { fields: upstreams, append: appendUpstreams } = useFieldArray({
-        handle: [
+        control: form.control,
-            {
+        name: "upstreams",
-                handler: 'subroutes',
+    })
-                routes: [
-                    {
-                        handle: [
-                            {
-                                handler: 'reverse_proxy',
-                                upstreams: [
-                                    {
-                                        dial: 'localhost:8080'
-                                    }
-                                ]
-                            }
-                        ]
-                    }
-                ]
-            }
-        ],
 
-        match: [
+    const { fields: hosts, append: appendHosts } = useFieldArray({
-            {
+        control: form.control,
-                host: [
+        name: "hosts",
-                    'example.com'
+    })
-                ]
-            }
-        ]
-    }
     
     let onSubmit = ((data: any) => {
-        console.log('Original Route', JSON.stringify(route))
+
-        console.log(data)
     })
 
+    console.log(getHosts(route))
+
+    let handleChange = (value: any, path: any) => {
+        let updatedRoute = set(modifiedRoute, path, value.target.value);
+        setRoute(updatedRoute);
+        console.log(value.target.name, value.target.value)
+        form.setValue(value.target.name, value.target.value)
+    }
+
+
     return (
         <Dialog open={route as Route != null}>
             <DialogContent className='sm:max-w-[425px]'>
@@ -124,46 +118,47 @@ export function EditRouteDialog({ route }: { route?: Route }) {
                                 <FormItem>
                                     <FormLabel>Handler</FormLabel>
                                     <FormControl>
-                                        <Input {...field} value={route?.handle[0].handler} />
+                                        <Input {...field} onChange={(value) => handleChange(value, `modifiedRoute.handle[0].handler`)} />
                                     </FormControl>
                                 </FormItem>
                             )}
 
                         ></FormField>
 
-                        {route ? getRouteUpstreams(route)?.map((upstream, index) => (
+                        {upstreams.map((upstream, index) => (
                             <FormField
-                                key={index}
+                                key={upstream.id}
                                 control={form.control}
-                                name="upstreams"
+                                name={`upstreams.${index}`}
                                 render={({ field }) => (
                                     <FormItem>
                                         <FormLabel>Upstream {index + 1}</FormLabel>
                                         <FormControl>
-                                            <Input {...field} value={upstream.dial} />
+                                            <Input {...field} onChange={(value) => handleChange(value, `modifiedRoute.handle[0].upstreams`)} />
                                         </FormControl>
                                     </FormItem>
                                 )}
                             >
                             </FormField>
-                        )) : <></>}
+                        ))}
 
-                        {route ? getHosts(route)?.map((host, index) => (
+                        {hosts.map((host, index) => (
                             <FormField
-                                key={index}
+                                key={host.id}
                                 control={form.control}
-                                name="hosts"
+                                name={`hosts.${index}`}
                                 render={({ field }) => (
                                     <FormItem>
                                         <FormLabel>Host {index + 1}</FormLabel>
                                         <FormControl>
-                                            <Input {...field} defaultValue={host} />
+                                            <Input {...field} onChange={(value) => handleChange(value, `modifiedRoute.handle[0].hosts`)} />
                                         </FormControl>
                                     </FormItem>
                                 )}
                             >
                             </FormField>
-                        )) : <></>}
+                        ))}
+
                         <Button type="submit">Save</Button>
                     </form>
                 </Form>

lib/types.ts

@@ -15,8 +15,8 @@ interface Match {
 
 interface Handle {
     handler: string;
-    upstreams?: Upstream[];
+    upstreams: Upstream[];
-    routes?: Route[];
+    routes: Route[];
 }
 
 interface Upstream {

package.json

@@ -18,8 +18,12 @@
     "@radix-ui/react-navigation-menu": "^1.1.4",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-toast": "^1.1.5",
+    "@types/lodash": "^4.14.201",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
+    "lodash": "^4.17.21",
+    "lodash.get": "^4.4.2",
+    "lodash.set": "^4.3.2",
     "next": "14.0.2",
     "next-themes": "^0.2.1",
     "react": "^18",