85 lines
No EOL
2.8 KiB
TypeScript
85 lines
No EOL
2.8 KiB
TypeScript
"use client"
|
|
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "./ui/card";
|
|
import { getHosts, getRouteUpstreams } from '@/lib/utils';
|
|
import { deleteRoute } from '@/lib/serverActions';
|
|
import { toast } from './ui/use-toast';
|
|
import React, { useState } from 'react';
|
|
|
|
class RouteCards extends React.Component<{routes: Route[]}> {
|
|
constructor(props: { routes: Route[] }) {
|
|
super(props);
|
|
this.handleClick = this.handleClick.bind(this);
|
|
}
|
|
|
|
state = {
|
|
routes: this.props.routes,
|
|
}
|
|
|
|
componentDidUpdate(prevProps: Readonly<{ routes: Route[]; }>, prevState: Readonly<{}>) {
|
|
if (this.props.routes !== prevProps.routes) {
|
|
this.setState({
|
|
routes: this.props.routes
|
|
});
|
|
}
|
|
}
|
|
|
|
handleDelete = async (route: Route) => {
|
|
let res = await deleteRoute(route);
|
|
|
|
if (res.error) return toast({
|
|
title: "Error",
|
|
description: res.message,
|
|
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!",
|
|
variant: "success"
|
|
});
|
|
}
|
|
|
|
|
|
|
|
|
|
handleClick = (route: Route) => {
|
|
console.log(route);
|
|
}
|
|
|
|
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; |