From 2885d1488f3949f83187cd04170b61ea2c41fa6c Mon Sep 17 00:00:00 2001
From: brian <brian@grug.dev>
Date: Thu, 16 Nov 2023 06:07:40 -0500
Subject: [PATCH] Coverted RouteCards to React Compoent

---
 app/page.tsx              |  2 +-
 components/RouteCards.tsx | 81 ++++++++++++++++++++++++++-------------
 2 files changed, 55 insertions(+), 28 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 278060c..b8b3b34 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -3,7 +3,7 @@ import { CardTitle, Card, CardDescription, CardHeader, CardContent } from '@/com
 import { getRoutes } from '@/lib/serverActions';
 
 export default async function Home() {
-  let routes: Array<Route> = await getRoutes();
+  let routes: Route[] = await getRoutes();
 
   return (
     <main>
diff --git a/components/RouteCards.tsx b/components/RouteCards.tsx
index bc3654a..9645c0d 100644
--- a/components/RouteCards.tsx
+++ b/components/RouteCards.tsx
@@ -5,10 +5,26 @@ import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter }
 import { getHosts, getRouteUpstreams } from '@/lib/utils';
 import { deleteRoute } from '@/lib/serverActions';
 import { toast } from './ui/use-toast';
+import React, { useState } from 'react';
 
-export default function RouteCards({ routes }: { routes: Array<Route> }) {
+class RouteCards extends React.Component<{routes: Route[]}> {
+    constructor(props: { routes: Route[] }) {
+        super(props);
+    }
 
-    const handleDelete = async (route: Route) => {
+    state = {
+        routes: this.props.routes,
+    }
+
+    componentDidUpdate(prevProps: Readonly<{ routes: Route[]; }>, prevState: Readonly<{}>, snapshot?: any): void {
+        if (prevProps.routes !== this.props.routes) {
+            this.setState({
+                routes: this.props.routes
+            })
+        }
+    }
+
+    handleDelete = async (route: Route) => {
         let res = await deleteRoute(route);
 
         if (res.error) return toast({
@@ -17,6 +33,12 @@ export default function RouteCards({ routes }: { routes: Array<Route> }) {
             variant: "destructive"
         });
 
+        this.state.routes.splice(this.state.routes.indexOf(route), 1)
+
+        this.setState({
+            routes: this.state.routes
+        });
+
         return toast({
             title: "Success",
             description: "Route deleted successfully!",
@@ -26,31 +48,36 @@ export default function RouteCards({ routes }: { routes: Array<Route> }) {
 
 
 
-    let handleClick = (route: Route) => {
+    handleClick = (route: Route) => {
         console.log(route);
     }
 
-    return (
-        routes.map((route, index) => (
-            <div key={index} className='p-2'>
-                <Card key={index} className='w-[300px]'>
-                    <CardHeader>
-                        <CardTitle>{getHosts(route).values().next().value}</CardTitle>
-                        {getHosts(route).map((route => <CardDescription key={route}>{route}</ CardDescription>))}
-                        <CardDescription></CardDescription>
-                    </CardHeader>
-                    <CardContent>
-                        <p className="text-sm font-medium leading-none">
-                            Tunneling to
-                        </p>
-                        <p className="text-sm text-muted-foreground">{getRouteUpstreams(route)?.map((upstream => upstream.dial))}</p>
-                    </CardContent>
-                    <CardFooter className="flex justify-between">
-                        <Button onClick={() => { handleClick(route) }}>Edit</Button>
-                        <Button variant="destructive" onClick={() => { handleDelete(route) }}>Delete</Button>
-                    </CardFooter>
-                </Card>
-            </div>
-        ))
-    )
-}
\ No newline at end of file
+    render() {
+        return (
+            this.state.routes.map((route, index) => (
+                <div key={index} className='p-2'>
+                    <Card key={index} className='w-[300px]'>
+                        <CardHeader>
+                            <CardTitle>{getHosts(route).values().next().value}</CardTitle>
+                            {getHosts(route).map((route => <CardDescription key={route}>{route}</ CardDescription>))}
+                            <CardDescription></CardDescription>
+                        </CardHeader>
+                        <CardContent>
+                            <p className="text-sm font-medium leading-none">
+                                Tunneling to
+                            </p>
+                            <p className="text-sm text-muted-foreground">{getRouteUpstreams(route)?.map((upstream => upstream.dial))}</p>
+                        </CardContent>
+                        <CardFooter className="flex justify-between">
+                            <Button onClick={() => { this.handleClick(route) }}>Edit</Button>
+                            <Button variant="destructive" onClick={() => { this.handleDelete(route) }}>Delete</Button>
+                        </CardFooter>
+                    </Card>
+                </div>
+            ))
+        )
+    }
+
+}
+
+export default RouteCards;
\ No newline at end of file