Coverted RouteCards to React Compoent

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>

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,12 +48,13 @@ export default function RouteCards({ routes }: { routes: Array<Route> }) {
 
 
 
-    let handleClick = (route: Route) => {
+    handleClick = (route: Route) => {
         console.log(route);
     }
 
+    render() {
         return (
-        routes.map((route, index) => (
+            this.state.routes.map((route, index) => (
                 <div key={index} className='p-2'>
                     <Card key={index} className='w-[300px]'>
                         <CardHeader>
@@ -46,11 +69,15 @@ export default function RouteCards({ routes }: { routes: Array<Route> }) {
                             <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 onClick={() => { this.handleClick(route) }}>Edit</Button>
-                        <Button variant="destructive" onClick={() => { handleDelete(route) }}>Delete</Button>
+                            <Button variant="destructive" onClick={() => { this.handleDelete(route) }}>Delete</Button>
                         </CardFooter>
                     </Card>
                 </div>
             ))
         )
+    }
+
 }
+
+export default RouteCards;