Init

frontend/src/components/LinkForm.tsx

@@ -0,0 +1,83 @@
+import { useState } from 'react';
+import { TextInput, Button, Group, Box, Text } from '@mantine/core';
+import { useForm } from '@mantine/form';
+import { CreateLinkRequest, Link } from '../types/api';
+import { createShortLink } from '../api/client';
+
+interface LinkFormProps {
+	onSuccess: (link: Link) => void;
+}
+
+export function LinkForm({ onSuccess }: LinkFormProps) {
+	const [error, setError] = useState<string | null>(null);
+	const [loading, setLoading] = useState(false);
+
+	const form = useForm<CreateLinkRequest>({
+		initialValues: {
+			url: '',
+			custom_code: '',
+		},
+		validate: {
+			url: (value) => {
+				if (!value) return 'URL is required';
+				if (!value.startsWith('http://') && !value.startsWith('https://')) {
+					return 'URL must start with http:// or https://';
+				}
+				return null;
+			},
+			custom_code: (value) => {
+				if (value && !/^[a-zA-Z0-9_-]{1,32}$/.test(value)) {
+					return 'Custom code must be 1-32 characters and contain only letters, numbers, underscores, and hyphens';
+				}
+				return null;
+			},
+		},
+	});
+
+	const handleSubmit = async (values: CreateLinkRequest) => {
+		try {
+			setLoading(true);
+			setError(null);
+			const link = await createShortLink(values);
+			form.reset();
+			onSuccess(link);
+		} catch (err) {
+			setError(err.response?.data?.error || 'An error occurred');
+		} finally {
+			setLoading(false);
+		}
+	};
+
+	return (
+		<Box mx="auto" sx={{ maxWidth: 500 }}>
+			<form onSubmit={form.onSubmit(handleSubmit)}>
+				<TextInput
+					required
+					label="URL"
+					placeholder="https://example.com"
+					{...form.getInputProps('url')}
+				/>
+
+				<TextInput
+					label="Custom Code (optional)"
+					placeholder="example"
+					mt="md"
+					{...form.getInputProps('custom_code')}
+				/>
+
+				{error && (
+					<Text color="red" size="sm" mt="sm">
+						{error}
+					</Text>
+				)}
+
+				<Group position="right" mt="md">
+					<Button type="submit" loading={loading}>
+						Create Short Link
+					</Button>
+				</Group>
+			</form>
+		</Box>
+	);
+}
+

frontend/src/components/LinkList.tsx

@@ -0,0 +1,69 @@
+import { useEffect, useState } from 'react';
+import { Table, Text, Box, CopyButton, Button } from '@mantine/core';
+import { Link } from '../types/api';
+import { getAllLinks } from '../api/client';
+
+export function LinkList() {
+	const [links, setLinks] = useState<Link[]>([]);
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState<string | null>(null);
+
+	const fetchLinks = async () => {
+		try {
+			setLoading(true);
+			const data = await getAllLinks();
+			setLinks(data);
+		} catch (err) {
+			setError('Failed to load links');
+		} finally {
+			setLoading(false);
+		}
+	};
+
+	useEffect(() => {
+		fetchLinks();
+	}, []);
+
+	if (loading) return <Text>Loading...</Text>;
+	if (error) return <Text color="red">{error}</Text>;
+
+	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>
+	);
+}
+