VERY MESSY FRONTEND NOTHING IS WORKING AAAAAAAAAAA

frontend/src/components/LinkList.tsx

@@ -1,69 +1,145 @@
-import { useEffect, useState } from 'react';
-import { Table, Text, Box, CopyButton, Button } from '@mantine/core';
-import { Link } from '../types/api';
-import { getAllLinks } from '../api/client';
+import { useEffect, useState } from 'react'
+import { Link } from '../types/api'
+import { getAllLinks, deleteLink } from '../api/client'
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@/components/ui/table"
+import {
+	Dialog,
+	DialogContent,
+	DialogHeader,
+	DialogTitle,
+	DialogDescription,
+	DialogFooter,
+} from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { useToast } from "@/hooks/use-toast"
 
-export function LinkList() {
-	const [links, setLinks] = useState<Link[]>([]);
-	const [loading, setLoading] = useState(true);
-	const [error, setError] = useState<string | null>(null);
+interface LinkListProps {
+	refresh: number
+}
+
+export function LinkList({ refresh }: LinkListProps) {
+	const [links, setLinks] = useState<Link[]>([])
+	const [loading, setLoading] = useState(true)
+	const [deleteModal, setDeleteModal] = useState<{ isOpen: boolean; linkId: number | null }>({
+		isOpen: false,
+		linkId: null,
+	})
+	const { toast } = useToast()
 
 	const fetchLinks = async () => {
 		try {
-			setLoading(true);
-			const data = await getAllLinks();
-			setLinks(data);
+			setLoading(true)
+			const data = await getAllLinks()
+			setLinks(data)
 		} catch (err) {
-			setError('Failed to load links');
+			toast({
+				title: "Error",
+				description: "Failed to load links",
+				variant: "destructive",
+			})
 		} finally {
-			setLoading(false);
+			setLoading(false)
 		}
-	};
+	}
 
 	useEffect(() => {
-		fetchLinks();
-	}, []);
+		fetchLinks()
+	}, [refresh])
 
-	if (loading) return <Text>Loading...</Text>;
-	if (error) return <Text color="red">{error}</Text>;
+	const handleDelete = async () => {
+		if (!deleteModal.linkId) return
+
+		try {
+			await deleteLink(deleteModal.linkId)
+			await fetchLinks()
+			setDeleteModal({ isOpen: false, linkId: null })
+			toast({
+				title: "Link deleted",
+				description: "The link has been successfully deleted.",
+			})
+		} catch (err) {
+			toast({
+				title: "Error",
+				description: "Failed to delete link",
+				variant: "destructive",
+			})
+		}
+	}
+
+	if (loading && !links.length) {
+		return <div className="text-center py-4">Loading...</div>
+	}
 
 	return (
-		<Box>
-			<Table>
-				<thead>
-					<tr>
-						<th>Short Code</th>
-						<th>Original URL</th>
-						<th>Clicks</th>
-						<th>Created</th>
-						<th>Actions</th>
-					</tr>
-				</thead>
-				<tbody>
-					{links.map((link) => (
-						<tr key={link.id}>
-							<td>{link.short_code}</td>
-							<td>{link.original_url}</td>
-							<td>{link.clicks}</td>
-							<td>{new Date(link.created_at).toLocaleDateString()}</td>
-							<td>
-								<CopyButton value={`${window.location.origin}/${link.short_code}`}>
-									{({ copied, copy }) => (
-										<Button
-											color={copied ? 'teal' : 'blue'}
-											onClick={copy}
-											size="xs"
-										>
-											{copied ? 'Copied' : 'Copy'}
-										</Button>
-									)}
-								</CopyButton>
-							</td>
-						</tr>
-					))}
-				</tbody>
-			</Table>
-		</Box>
-	);
-}
+		<div className="space-y-4">
+			<Dialog open={deleteModal.isOpen} onOpenChange={(open) => setDeleteModal({ isOpen: open, linkId: null })}>
+				<DialogContent>
+					<DialogHeader>
+						<DialogTitle>Delete Link</DialogTitle>
+						<DialogDescription>
+							Are you sure you want to delete this link? This action cannot be undone.
+						</DialogDescription>
+					</DialogHeader>
+					<DialogFooter>
+						<Button variant="outline" onClick={() => setDeleteModal({ isOpen: false, linkId: null })}>
+							Cancel
+						</Button>
+						<Button variant="destructive" onClick={handleDelete}>
+							Delete
+						</Button>
+					</DialogFooter>
+				</DialogContent>
+			</Dialog>
 
+			<Table>
+				<TableHeader>
+					<TableRow>
+						<TableHead>Short Code</TableHead>
+						<TableHead>Original URL</TableHead>
+						<TableHead>Clicks</TableHead>
+						<TableHead>Created</TableHead>
+						<TableHead>Actions</TableHead>
+					</TableRow>
+				</TableHeader>
+				<TableBody>
+					{links.map((link) => (
+						<TableRow key={link.id}>
+							<TableCell>{link.short_code}</TableCell>
+							<TableCell className="max-w-[300px] truncate">{link.original_url}</TableCell>
+							<TableCell>{link.clicks}</TableCell>
+							<TableCell>{new Date(link.created_at).toLocaleDateString()}</TableCell>
+							<TableCell>
+								<div className="flex gap-2">
+									<Button
+										variant="secondary"
+										size="sm"
+										onClick={() => {
+											navigator.clipboard.writeText(`http://localhost:8080/${link.short_code}`)
+											toast({ description: "Link copied to clipboard" })
+										}}
+									>
+										Copy
+									</Button>
+									<Button
+										variant="destructive"
+										size="sm"
+										onClick={() => setDeleteModal({ isOpen: true, linkId: link.id })}
+									>
+										Delete
+									</Button>
+								</div>
+							</TableCell>
+						</TableRow>
+					))}
+				</TableBody>
+			</Table>
+		</div>
+	)
+}