From 24365e92551ffda5ece65123bdaee9e7f95aed93 Mon Sep 17 00:00:00 2001
From: Partha <partha@Parthas-MacBook-Pro.local>
Date: Sat, 4 Jan 2025 19:07:43 +0530
Subject: [PATCH 1/2] removed console.log and added route list page

---
 crates/webapp/src/components/ui/alert.tsx     |  59 ++++++
 .../src/pages/api/details/createRoute.tsx     |   2 +-
 crates/webapp/src/pages/api/details/index.tsx | 172 ++++++++++++++++--
 .../webapp/src/pages/api/details/settings.tsx |  59 +++---
 .../src/pages/components/details/info.tsx     |   1 -
 .../src/pages/components/details/settings.tsx |  14 +-
 .../src/pages/components/details/update.tsx   |   1 -
 crates/webapp/src/pages/plugin/create.tsx     |   2 -
 .../webapp/src/pages/workers/create/index.tsx |   1 -
 .../src/pages/workers/details/index.tsx       |   4 -
 .../src/pages/workers/details/invoke.tsx      |   4 -
 .../webapp/src/pages/workers/details/live.tsx |   1 -
 crates/webapp/src/service/client.ts           |  66 ++++---
 crates/webapp/src/service/wss.ts              |   2 -
 crates/webapp/src/types/api.ts                |  15 ++
 crates/webapp/src/types/component.ts          |   1 +
 16 files changed, 300 insertions(+), 104 deletions(-)
 create mode 100644 crates/webapp/src/components/ui/alert.tsx

diff --git a/crates/webapp/src/components/ui/alert.tsx b/crates/webapp/src/components/ui/alert.tsx
new file mode 100644
index 0000000000..5afd41d142
--- /dev/null
+++ b/crates/webapp/src/components/ui/alert.tsx
@@ -0,0 +1,59 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+))
+Alert.displayName = "Alert"
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+AlertTitle.displayName = "AlertTitle"
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+))
+AlertDescription.displayName = "AlertDescription"
+
+export { Alert, AlertTitle, AlertDescription }
diff --git a/crates/webapp/src/pages/api/details/createRoute.tsx b/crates/webapp/src/pages/api/details/createRoute.tsx
index 6624825093..19965f3aac 100644
--- a/crates/webapp/src/pages/api/details/createRoute.tsx
+++ b/crates/webapp/src/pages/api/details/createRoute.tsx
@@ -256,7 +256,7 @@ const CreateRoute = () => {
                           }`}
                         >
                           <SelectValue placeholder="Select a version">
-                            {version}
+                            V{version}
                           </SelectValue>
                         </SelectTrigger>
                         <SelectContent>
diff --git a/crates/webapp/src/pages/api/details/index.tsx b/crates/webapp/src/pages/api/details/index.tsx
index a04f91c154..db2b75c210 100644
--- a/crates/webapp/src/pages/api/details/index.tsx
+++ b/crates/webapp/src/pages/api/details/index.tsx
@@ -1,6 +1,8 @@
 import { useParams, useNavigate } from "react-router-dom";
 import { useEffect, useState } from "react";
-import { Plus } from "lucide-react";
+// import {Globe, Link2 } from "lucide-react"
+import { Trash2, Plus } from "lucide-react";
+
 import {
   Select,
   SelectContent,
@@ -11,14 +13,31 @@ import {
 import ApiLeftNav from "./apiLeftNav.tsx";
 import { API } from "@/service";
 import { Api } from "@/types/api";
-import { Button } from "@/components/ui/button.tsx";
 import ErrorBoundary from "@/components/errorBoundary.tsx";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
 
 const APIDetails = () => {
   const { apiName } = useParams();
   const navigate = useNavigate();
   const [apiDetails, setApiDetails] = useState([] as Api[]);
   const [activeApiDetails, setActiveApiDetails] = useState({} as Api);
+  // const [deployments] = useState([
+  //   {
+  //     domain: "api.golem.cloud",
+  //     id: "abcd",
+  //     status: "Active",
+  //   },
+  // ]);
 
   useEffect(() => {
     if (apiName) {
@@ -29,6 +48,22 @@ const APIDetails = () => {
     }
   }, [apiName]);
 
+  const handleDeleteRoute = (index: number) => {
+    const newRoutes = [...activeApiDetails.routes];
+    newRoutes.splice(index, 1);
+    const newApiDetails = {
+      ...activeApiDetails,
+      routes: newRoutes,
+    };
+    API.putApi(
+      activeApiDetails.id,
+      activeApiDetails.version,
+      newApiDetails
+    ).then(() => {
+      setActiveApiDetails(newApiDetails);
+    });
+  };
+
   return (
     <ErrorBoundary>
       <div className="flex">
@@ -71,22 +106,123 @@ const APIDetails = () => {
             </div>
           </header>
 
-          <main className="flex-1 overflow-y-auto p-6">
-            <section>
-              <div className="flex items-center justify-between mb-4">
-                <h2 className="text-lg font-medium text-foreground">Routes</h2>
-                <Button
-                  variant="outline"
-                  onClick={() => navigate(`/apis/${apiName}/routes/new`)}
-                  className="flex items-center gap-2"
-                >
-                  <Plus className="h-5 w-5" />
-                  <span>Add</span>
-                </Button>
-              </div>
-              <div className="bg-muted rounded-lg border border-muted-foreground p-6 text-center text-muted-foreground">
-                No routes defined for this API version.
-              </div>
+          <main className="flex-1 overflow-y-auto p-6 h-[80vh]">
+            <section className="grid gap-16">
+              <Card>
+                <CardHeader>
+                  <div className="flex items-center justify-between mb-4">
+                    <CardTitle>Routes</CardTitle>
+                    <Button
+                      variant="outline"
+                      onClick={() => navigate(`/apis/${apiName}/routes/new`)}
+                      className="flex items-center gap-2"
+                    >
+                      <Plus className="h-5 w-5" />
+                      <span>Add</span>
+                    </Button>
+                  </div>
+                </CardHeader>
+                <CardContent>
+                  {activeApiDetails?.routes?.length === 0 ? (
+                    <div className="text-center">
+                      No routes defined for this API version
+                    </div>
+                  ) : (
+                    <div className="space-y-4">
+                      {activeApiDetails?.routes?.map((route, index) => (
+                        <div
+                          key={`${route.method}-${route.path}`}
+                          className="flex items-center justify-between rounded-lg border p-4 hover:bg-muted/50 transition-colors"
+                        >
+                          <div className="space-y-2">
+                            <div className="flex items-center gap-2">
+                              <Badge variant="secondary">{route.method}</Badge>
+                              <code className="text-sm font-semibold">
+                                {route.path}
+                              </code>
+                            </div>
+                            <div className="space-y-1 text-sm text-muted-foreground">
+                              <p className="text-xs">
+                                Component ID:{" "}
+                                {route.binding.componentId.componentId}
+                              </p>
+                              <p className="text-xs">
+                                Version ID: {route.binding.componentId.version}
+                              </p>
+                              <p className="text-xs">
+                                Worker: {route.binding.workerName}
+                              </p>
+                              <p className="text-xs">
+                                Response: {route.binding.response || "N/A"}
+                              </p>
+                            </div>
+                          </div>
+                          <Dialog>
+                            <DialogTrigger asChild>
+                              <Button
+                                variant="ghost"
+                                size="icon"
+                                className="text-muted-foreground hover:text-destructive"
+                              >
+                                <Trash2 className="h-4 w-4" />
+                                <span className="sr-only">Delete route</span>
+                              </Button>
+                            </DialogTrigger>
+                            <DialogContent>
+                              <DialogHeader>
+                                <DialogTitle>Delete Route</DialogTitle>
+                                <DialogDescription>
+                                  Are you sure you want to delete the route{" "}
+                                  {route.method} {route.path}? This action
+                                  cannot be undone.
+                                </DialogDescription>
+                              </DialogHeader>
+                              <div className="flex justify-end gap-2">
+                                <Button
+                                  variant="destructive"
+                                  onClick={() => handleDeleteRoute(index)}
+                                >
+                                  Delete Route
+                                </Button>
+                              </div>
+                            </DialogContent>
+                          </Dialog>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </CardContent>
+              </Card>
+              {/* <Card>
+                <CardHeader className="flex flex-row items-center justify-between">
+                  <CardTitle>Active Deployments</CardTitle>
+                  <Button variant="ghost" className="text-primary">
+                    View All
+                  </Button>
+                </CardHeader>
+                <CardContent>
+                  {deployments.map((deployment) => (
+                    <div
+                      key={deployment.id}
+                      className="flex items-center justify-between rounded-lg border p-4"
+                    >
+                      <div className="space-y-2">
+                        <div className="flex items-center gap-2">
+                          <Globe className="h-4 w-4" />
+                          <span className="font-medium">
+                            {deployment.domain}
+                          </span>
+                        </div>
+                        <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                          <Link2 className="h-4 w-4" />
+                          <span>{deployment.id}</span>
+                        </div>
+                      </div>
+                      <Badge variant="outline">{deployment.status}</Badge>
+                    </div>
+                  ))}
+                </CardContent>
+              </Card> */}
             </section>
           </main>
         </div>
diff --git a/crates/webapp/src/pages/api/details/settings.tsx b/crates/webapp/src/pages/api/details/settings.tsx
index bc6dc52333..45dddd67a6 100644
--- a/crates/webapp/src/pages/api/details/settings.tsx
+++ b/crates/webapp/src/pages/api/details/settings.tsx
@@ -27,6 +27,7 @@ export default function APISettings() {
   const navigate = useNavigate();
   const [showConfirmDialog, setShowConfirmDialog] = useState(false);
   const [showConfirmAllDialog, setShowConfirmAllDialog] = useState(false);
+  const [showConfirmAllRoutes, setShowConfirmAllRoutes] = useState(false);
   const [isDeleting, setIsDeleting] = useState(false);
   const { apiName } = useParams();
   const [apiDetails, setApiDetails] = useState([] as Api[]);
@@ -60,8 +61,7 @@ export default function APISettings() {
         setShowConfirmDialog(false);
         setIsDeleting(false);
       })
-      .catch((error) => {
-        console.error(error);
+      .catch(() => {
         setIsDeleting(false);
       });
   };
@@ -79,27 +79,32 @@ export default function APISettings() {
         });
         setShowConfirmAllDialog(false);
         navigate(`/apis`);
+        setIsDeleting(false);
       })
-      .catch((error) => {
-        console.error(error);
+      .catch(() => {
         setIsDeleting(false);
       });
   };
 
   const handleDeleteAllRoutes = async () => {
+    setIsDeleting(true);
     const payload = {
       ...activeApiDetails,
       routes: [],
     };
-    API.putApi(activeApiDetails.id, activeApiDetails.version, payload).then(
-      () => {
+    API.putApi(activeApiDetails.id, activeApiDetails.version, payload)
+      .then(() => {
         toast({
           title: "All routes deleted",
           description: "All routes have been deleted successfully.",
         });
         navigate(`/apis/${apiName}`);
-      }
-    );
+        setShowConfirmAllRoutes(false);
+        setIsDeleting(false);
+      })
+      .catch(() => {
+        setIsDeleting(false);
+      });
   };
 
   return (
@@ -209,7 +214,7 @@ export default function APISettings() {
                   <Button
                     variant="outline"
                     className="border-destructive/20 text-destructive hover:bg-destructive/10"
-                    onClick={handleDeleteAllRoutes}
+                    onClick={() => setShowConfirmAllRoutes(true)}
                   >
                     Delete All Routes
                   </Button>
@@ -217,7 +222,6 @@ export default function APISettings() {
               </div>
             </div>
 
-            {/* Confirmation Dialog for Single Version Delete */}
             <Dialog
               open={showConfirmDialog}
               onOpenChange={setShowConfirmDialog}
@@ -231,13 +235,6 @@ export default function APISettings() {
                   </DialogDescription>
                 </DialogHeader>
                 <DialogFooter>
-                  <Button
-                    variant="outline"
-                    onClick={() => setShowConfirmDialog(false)}
-                    disabled={isDeleting}
-                  >
-                    Cancel
-                  </Button>
                   <Button
                     variant="destructive"
                     onClick={handleDeleteVersion}
@@ -249,7 +246,6 @@ export default function APISettings() {
               </DialogContent>
             </Dialog>
 
-            {/* Confirmation Dialog for Delete All */}
             <Dialog
               open={showConfirmAllDialog}
               onOpenChange={setShowConfirmAllDialog}
@@ -266,15 +262,34 @@ export default function APISettings() {
                 </DialogHeader>
                 <DialogFooter>
                   <Button
-                    variant="outline"
-                    onClick={() => setShowConfirmAllDialog(false)}
+                    variant="destructive"
+                    onClick={handleDeleteAll}
                     disabled={isDeleting}
                   >
-                    Cancel
+                    {isDeleting ? "Deleting..." : "Yes, delete all"}
                   </Button>
+                </DialogFooter>
+              </DialogContent>
+            </Dialog>
+
+            <Dialog
+              open={showConfirmAllRoutes}
+              onOpenChange={setShowConfirmAllRoutes}
+            >
+              <DialogContent>
+                <DialogHeader>
+                  <DialogTitle>
+                    Are you sure you want to delete all routes?
+                  </DialogTitle>
+                  <DialogDescription>
+                    This action cannot be undone. This will permanently delete
+                    all routes and remove all associated data.
+                  </DialogDescription>
+                </DialogHeader>
+                <DialogFooter>
                   <Button
                     variant="destructive"
-                    onClick={handleDeleteAll}
+                    onClick={handleDeleteAllRoutes}
                     disabled={isDeleting}
                   >
                     {isDeleting ? "Deleting..." : "Yes, delete all"}
diff --git a/crates/webapp/src/pages/components/details/info.tsx b/crates/webapp/src/pages/components/details/info.tsx
index 7b5ee0eb41..d0aad2c22f 100644
--- a/crates/webapp/src/pages/components/details/info.tsx
+++ b/crates/webapp/src/pages/components/details/info.tsx
@@ -66,7 +66,6 @@ export default function ComponentInfo() {
         async (response) => {
           const blob = await response.blob();
           const arrayBuffer = await blob.arrayBuffer();
-          console.log("arrayBuffer");
 
           // Specify the file name and path
           const fileName = `${componentId}.wasm`;
diff --git a/crates/webapp/src/pages/components/details/settings.tsx b/crates/webapp/src/pages/components/details/settings.tsx
index 014548c543..5ff510c160 100644
--- a/crates/webapp/src/pages/components/details/settings.tsx
+++ b/crates/webapp/src/pages/components/details/settings.tsx
@@ -39,12 +39,7 @@ export default function ComponentSettings() {
     await Promise.all(
       response?.workers.map(async (worker: Worker) => {
         await API.deleteWorker(componentId!, worker.workerId.workerName).then(
-          (res) => {
-            console.log(
-              `deleted Worker response compoentname: ${worker.workerId.componentId} workername: ${worker.workerId.workerName}`,
-              res
-            );
-          }
+          () => {}
         );
       })
     );
@@ -124,13 +119,6 @@ export default function ComponentSettings() {
                             </DialogDescription>
                           </DialogHeader>
                           <DialogFooter>
-                            <Button
-                              variant="outline"
-                              onClick={() => setShowConfirmAllDialog(false)}
-                              disabled={isDeleting}
-                            >
-                              Cancel
-                            </Button>
                             <Button
                               variant="destructive"
                               onClick={handleDeleteAll}
diff --git a/crates/webapp/src/pages/components/details/update.tsx b/crates/webapp/src/pages/components/details/update.tsx
index 0bc3d82d96..745ae9b411 100644
--- a/crates/webapp/src/pages/components/details/update.tsx
+++ b/crates/webapp/src/pages/components/details/update.tsx
@@ -46,7 +46,6 @@ export default function ComponentUpdate() {
     const formData = new FormData();
     formData.append("component", file!);
     API.updateComponent(componentId!, formData).then((res) => {
-      console.log("res ", res);
       form.reset();
       setFile(null);
       toast({
diff --git a/crates/webapp/src/pages/plugin/create.tsx b/crates/webapp/src/pages/plugin/create.tsx
index 904baadc83..ff6c19558d 100644
--- a/crates/webapp/src/pages/plugin/create.tsx
+++ b/crates/webapp/src/pages/plugin/create.tsx
@@ -125,8 +125,6 @@ export default function CreatePlugin() {
     });
   }
 
-  console.log(form, "form");
-
   return (
     <div className="container mx-auto py-10">
       <Card className="max-w-4xl mx-auto">
diff --git a/crates/webapp/src/pages/workers/create/index.tsx b/crates/webapp/src/pages/workers/create/index.tsx
index e157f611bb..0e5e6510fd 100644
--- a/crates/webapp/src/pages/workers/create/index.tsx
+++ b/crates/webapp/src/pages/workers/create/index.tsx
@@ -90,7 +90,6 @@ export default function CreateWorker() {
     );
     rest.args = rest.args.filter((x: any) => x && x.trim().length > 0);
 
-    console.log("submit before", rest);
     API.createWorker(componentID, rest).then((response) => {
       navigate(
         `/components/${componentId}/workers/${response.workerId.workerName}`
diff --git a/crates/webapp/src/pages/workers/details/index.tsx b/crates/webapp/src/pages/workers/details/index.tsx
index 2a66e0ebc8..d914f6a277 100644
--- a/crates/webapp/src/pages/workers/details/index.tsx
+++ b/crates/webapp/src/pages/workers/details/index.tsx
@@ -34,11 +34,8 @@ export default function WorkerDetails() {
         wsRef.current = ws;
 
         ws.onMessage((data) => {
-          console.log("Received message:", data);
           setMessages((prev) => [...prev, data]); // Update messages state
         });
-
-        console.log("WebSocket connected");
       } catch (error) {
         console.error("Failed to connect WebSocket:", error);
       }
@@ -49,7 +46,6 @@ export default function WorkerDetails() {
     return () => {
       if (wsRef.current) {
         wsRef.current.close();
-        console.log("WebSocket disconnected");
       }
     };
   }, []);
diff --git a/crates/webapp/src/pages/workers/details/invoke.tsx b/crates/webapp/src/pages/workers/details/invoke.tsx
index 09f2bfe566..7eb366ec6f 100644
--- a/crates/webapp/src/pages/workers/details/invoke.tsx
+++ b/crates/webapp/src/pages/workers/details/invoke.tsx
@@ -99,7 +99,6 @@ export default function WorkerInvoke() {
           (functionItem: ComponentExportFunction) => functionItem.name === fn
         );
         setFunctionDetails(functions);
-        console.log(functions, "functions");
         const formatted = formatJSON(
           JSON.stringify(parseToJsonEditor(functions))
         );
@@ -124,7 +123,6 @@ export default function WorkerInvoke() {
       const sanitizedValue = sanitizeInput(value);
       const parsedValue = JSON.parse(sanitizedValue);
       const apiData = parseToApiPayload(parsedValue, functionDetails);
-      console.log(apiData, "apiData");
       const functionName = `${encodeURIComponent(
         name || ""
       )}.${encodeURIComponent(`{${fn}}`)}`;
@@ -135,8 +133,6 @@ export default function WorkerInvoke() {
         apiData
       );
 
-      console.log(response, "response");
-
       const formattedResponse = formatJSON(
         JSON.stringify(response?.result?.value)
       );
diff --git a/crates/webapp/src/pages/workers/details/live.tsx b/crates/webapp/src/pages/workers/details/live.tsx
index 5acc5202bf..a09795f1e4 100644
--- a/crates/webapp/src/pages/workers/details/live.tsx
+++ b/crates/webapp/src/pages/workers/details/live.tsx
@@ -39,7 +39,6 @@ export default function WorkerLive() {
     return () => {
       if (wsRef.current) {
         wsRef.current.close();
-        console.log("WebSocket disconnected");
       }
     };
   }, [reload]);
diff --git a/crates/webapp/src/service/client.ts b/crates/webapp/src/service/client.ts
index 5d8780cbbe..c32efed322 100644
--- a/crates/webapp/src/service/client.ts
+++ b/crates/webapp/src/service/client.ts
@@ -156,43 +156,43 @@ export class Service {
     }
 
     private callApi =
-        async (url: string, method: string = "GET", data: FormData | string | null = null,
-               headers = {'Content-Type': 'application/json'}): Promise<any> => {
-            const resp = await fetch(`${this.baseUrl}${url}`, {
+    async (url: string, method: string = "GET", data: FormData | string | null = null,
+           headers = { 'Content-Type': 'application/json' }): Promise<any> => {
+        try {
+            const response = await fetch(`${this.baseUrl}${url}`, {
                 method: method,
                 body: data,
                 headers: headers
-            }).then(res => {
-                if (res.ok) {
-                    console.log(res)
-                    return res.json()
-                } else {
-                    if(method !== "GET") {
-                        let errorTitle = "Api is Failed check the api details"
-                        console.log(res)
-                        res.json().then(err => {
-                            errorTitle = err?.golemError?.message || errorTitle
-                        })
-                        toast({
-                            title: errorTitle,
-                            variant: "destructive",
-                        })
-                    }
-                    throw res;
-                }
+            });
 
-            }).catch(err => {
-                if(method !== "GET") {
-                toast({
-                    title: "Api is Failed check the api details",
-                    variant: "destructive",
-                });
+            const contentType = response.headers.get('Content-Type');
+            let responseData: any;
+
+            if (contentType && contentType.includes('application/json')) {
+                responseData = await response.json();
+            } else {
+                responseData = await response.text();
+            }
+            if (response.ok) {
+                return responseData;
+            } else {
+                throw responseData;
+            }
+        } catch (response : any) {
+            if (method !== "GET") {
+                let descriptions = response;
+                if(response?.error) {
+                    descriptions = response?.error;
+                } 
+                    toast({
+                        title: "API request failed.",
+                        description: descriptions,
+                        variant: "destructive",
+                    });
                 }
-                throw err
-            })
-            console.log("callApi", resp)
-            return resp;
-        }
+                throw response;
+            }
+    }
 
 
         private downloadApi =
@@ -204,7 +204,6 @@ export class Service {
                 headers: headers
             }).then(res => {
                 if (res.ok) {
-                    console.log(res)
                     return res
                 }
             }).catch(err => {
@@ -214,7 +213,6 @@ export class Service {
                 });
                 throw err
             })
-            console.log("callApi", resp)
             return resp;
         }
 
diff --git a/crates/webapp/src/service/wss.ts b/crates/webapp/src/service/wss.ts
index 4d07b45559..9fdf61d0bd 100644
--- a/crates/webapp/src/service/wss.ts
+++ b/crates/webapp/src/service/wss.ts
@@ -15,13 +15,11 @@ export class WSS {
 
     public send(data: never) {
         this.ws.send(JSON.stringify(data)).then(() => {
-            console.log("Sent")
         }).catch(console.error)
     }
 
     public close() {
         this.ws.disconnect().then(() => {
-            console.log("Disconnected")
         }).catch(console.error)
     }
 
diff --git a/crates/webapp/src/types/api.ts b/crates/webapp/src/types/api.ts
index 4bc5b9aae5..302410de99 100644
--- a/crates/webapp/src/types/api.ts
+++ b/crates/webapp/src/types/api.ts
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 export interface Api   {
     createdAt?: string;
     draft: boolean;
@@ -5,4 +6,18 @@ export interface Api   {
     routes: any[];
     version: string;
   }
+
+  export interface Route {
+    method: string
+    path: string
+    binding: {
+      componentId: {
+        componentId: string
+        version: number
+      }
+      workerName: string
+      response: string
+    }
+  }
+  
   
\ No newline at end of file
diff --git a/crates/webapp/src/types/component.ts b/crates/webapp/src/types/component.ts
index 8397a32a23..1b043386f9 100644
--- a/crates/webapp/src/types/component.ts
+++ b/crates/webapp/src/types/component.ts
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 export interface Typ {
     type: string;
     fields?: Field[];

From 1dcd50fc311baa7c3597ab7c88991529012f93bc Mon Sep 17 00:00:00 2001
From: Partha <partha@Parthas-MacBook-Pro.local>
Date: Sat, 4 Jan 2025 19:09:54 +0530
Subject: [PATCH 2/2] removed console.log and added route list page

---
 crates/webapp/src/pages/components/details/update.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/crates/webapp/src/pages/components/details/update.tsx b/crates/webapp/src/pages/components/details/update.tsx
index 745ae9b411..59b6497e58 100644
--- a/crates/webapp/src/pages/components/details/update.tsx
+++ b/crates/webapp/src/pages/components/details/update.tsx
@@ -45,7 +45,7 @@ export default function ComponentUpdate() {
   function onSubmit() {
     const formData = new FormData();
     formData.append("component", file!);
-    API.updateComponent(componentId!, formData).then((res) => {
+    API.updateComponent(componentId!, formData).then(() => {
       form.reset();
       setFile(null);
       toast({