chaulmark/caddy-ui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Coverted RouteCards to React Compoent

Browse source
This commit is contained in:
brian 2023-11-16 06:07:40 -05:00
parent 5c182813f4
commit 2885d1488f
2 changed files with 55 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/page.tsx
View file

@ -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>

81
components/RouteCards.tsx
View file

@ -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>
))
)
}
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;