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'; import { getRoutes } from '@/lib/serverActions';
export default async function Home() { export default async function Home() {
let routes: Array<Route> = await getRoutes(); let routes: Route[] = await getRoutes();
return ( return (
<main> <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 { getHosts, getRouteUpstreams } from '@/lib/utils';
import { deleteRoute } from '@/lib/serverActions'; import { deleteRoute } from '@/lib/serverActions';
import { toast } from './ui/use-toast'; 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); let res = await deleteRoute(route);
if (res.error) return toast({ if (res.error) return toast({
@ -17,6 +33,12 @@ export default function RouteCards({ routes }: { routes: Array<Route> }) {
variant: "destructive" variant: "destructive"
}); });
this.state.routes.splice(this.state.routes.indexOf(route), 1)
this.setState({
routes: this.state.routes
});
return toast({ return toast({
title: "Success", title: "Success",
description: "Route deleted successfully!", 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); console.log(route);
} }
return ( render() {
routes.map((route, index) => ( return (
<div key={index} className='p-2'> this.state.routes.map((route, index) => (
<Card key={index} className='w-[300px]'> <div key={index} className='p-2'>
<CardHeader> <Card key={index} className='w-[300px]'>
<CardTitle>{getHosts(route).values().next().value}</CardTitle> <CardHeader>
{getHosts(route).map((route => <CardDescription key={route}>{route}</ CardDescription>))} <CardTitle>{getHosts(route).values().next().value}</CardTitle>
<CardDescription></CardDescription> {getHosts(route).map((route => <CardDescription key={route}>{route}</ CardDescription>))}
</CardHeader> <CardDescription></CardDescription>
<CardContent> </CardHeader>
<p className="text-sm font-medium leading-none"> <CardContent>
Tunneling to <p className="text-sm font-medium leading-none">
</p> Tunneling to
<p className="text-sm text-muted-foreground">{getRouteUpstreams(route)?.map((upstream => upstream.dial))}</p> </p>
</CardContent> <p className="text-sm text-muted-foreground">{getRouteUpstreams(route)?.map((upstream => upstream.dial))}</p>
<CardFooter className="flex justify-between"> </CardContent>
<Button onClick={() => { handleClick(route) }}>Edit</Button> <CardFooter className="flex justify-between">
<Button variant="destructive" onClick={() => { handleDelete(route) }}>Delete</Button> <Button onClick={() => { this.handleClick(route) }}>Edit</Button>
</CardFooter> <Button variant="destructive" onClick={() => { this.handleDelete(route) }}>Delete</Button>
</Card> </CardFooter>
</div> </Card>
)) </div>
) ))
} )
}
}
export default RouteCards;