I LOVE WOMEN
This commit is contained in:
parent
49b01984ab
commit
3932b48a64
10 changed files with 233 additions and 150 deletions
|
|
@ -1,51 +1,56 @@
|
|||
import { ThemeProvider } from "@/components/theme-provider"
|
||||
import { Button } from './components/ui/button'
|
||||
import { LinkForm } from './components/LinkForm'
|
||||
import { LinkList } from './components/LinkList'
|
||||
import { AuthForms } from './components/AuthForms'
|
||||
import { AuthProvider, useAuth } from './context/AuthContext'
|
||||
import { useState } from 'react'
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Toaster } from './components/ui/toaster'
|
||||
import { ModeToggle } from './components/mode-toggle'
|
||||
import { useState } from 'react'
|
||||
|
||||
function AppContent() {
|
||||
const { user, logout } = useAuth()
|
||||
const [refreshCounter, setRefreshCounter] = useState(0)
|
||||
|
||||
const handleLinkCreated = () => {
|
||||
// Increment refresh counter to trigger list refresh
|
||||
setRefreshCounter(prev => prev + 1)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col">
|
||||
<div className="container max-w-6xl mx-auto py-8 flex-1 flex flex-col">
|
||||
<div className="space-y-8 flex-1 flex flex-col justify-center">
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="text-3xl font-bold">SimpleLink</h1>
|
||||
<div className="min-h-screen bg-background flex flex-col">
|
||||
<header className="border-b">
|
||||
<div className="container max-w-6xl mx-auto flex h-16 items-center justify-between px-4">
|
||||
<h1 className="text-2xl font-bold">SimpleLink</h1>
|
||||
<div className="flex items-center gap-4">
|
||||
{user ? (
|
||||
<div className="flex items-center gap-4">
|
||||
<p className="text-sm text-muted-foreground">Welcome, {user.email}</p>
|
||||
<Button variant="outline" onClick={logout}>
|
||||
<>
|
||||
<span className="text-sm text-muted-foreground">Welcome, {user.email}</span>
|
||||
<Button variant="outline" size="sm" onClick={logout}>
|
||||
Logout
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="flex items-center gap-4">
|
||||
<p className="text-sm text-muted-foreground">A link shortening and tracking service</p>
|
||||
</div>
|
||||
<span className="text-sm text-muted-foreground">A link shortening and tracking service</span>
|
||||
)}
|
||||
<ModeToggle />
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="flex-1 flex flex-col">
|
||||
<div className="container max-w-6xl mx-auto px-4 py-8 flex-1 flex flex-col">
|
||||
<div className="space-y-8 flex-1 flex flex-col justify-center">
|
||||
{user ? (
|
||||
<>
|
||||
<LinkForm onSuccess={handleLinkCreated} />
|
||||
<LinkList refresh={refreshCounter} />
|
||||
</>
|
||||
) : (
|
||||
<AuthForms />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{user ? (
|
||||
<>
|
||||
<LinkForm onSuccess={handleLinkCreated} />
|
||||
<LinkList refresh={refreshCounter} />
|
||||
</>
|
||||
) : (
|
||||
<AuthForms />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ export function AuthForms() {
|
|||
|
||||
return (
|
||||
<Card className="w-full max-w-md mx-auto p-6">
|
||||
<Tabs value={activeTab} onValueChange={(value: 'login' | 'register') => setActiveTab(value)}>
|
||||
<Tabs value={activeTab} onValueChange={(value: string) => setActiveTab(value as 'login' | 'register')}>
|
||||
<TabsList className="grid w-full grid-cols-2">
|
||||
<TabsTrigger value="login">Login</TabsTrigger>
|
||||
<TabsTrigger value="register">Register</TabsTrigger>
|
||||
|
|
|
|||
|
|
@ -2,18 +2,19 @@ import { useState } from 'react'
|
|||
import { useForm } from 'react-hook-form'
|
||||
import { zodResolver } from '@hookform/resolvers/zod'
|
||||
import * as z from 'zod'
|
||||
import { CreateLinkRequest, Link } from '../types/api'
|
||||
import { CreateLinkRequest } from '../types/api'
|
||||
import { createShortLink } from '../api/client'
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { LinkIcon } from "lucide-react"
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "@/components/ui/form"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { useToast } from "@/hooks/use-toast"
|
||||
|
||||
const formSchema = z.object({
|
||||
|
|
@ -29,7 +30,7 @@ const formSchema = z.object({
|
|||
})
|
||||
|
||||
interface LinkFormProps {
|
||||
onSuccess: (link: Link) => void
|
||||
onSuccess: () => void;
|
||||
}
|
||||
|
||||
export function LinkForm({ onSuccess }: LinkFormProps) {
|
||||
|
|
@ -47,9 +48,9 @@ export function LinkForm({ onSuccess }: LinkFormProps) {
|
|||
const onSubmit = async (values: z.infer<typeof formSchema>) => {
|
||||
try {
|
||||
setLoading(true)
|
||||
const link = await createShortLink(values as CreateLinkRequest)
|
||||
await createShortLink(values as CreateLinkRequest)
|
||||
form.reset()
|
||||
onSuccess(link)
|
||||
onSuccess() // Call the onSuccess callback to trigger refresh
|
||||
toast({
|
||||
description: "Short link created successfully",
|
||||
})
|
||||
|
|
@ -65,45 +66,51 @@ export function LinkForm({ onSuccess }: LinkFormProps) {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-[500px] mx-auto">
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="url"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>URL</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="https://example.com" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<Card className="mb-8">
|
||||
<CardHeader>
|
||||
<CardTitle>Create Short Link</CardTitle>
|
||||
<CardDescription>Enter a URL to generate a shortened link</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-4 md:flex-row md:items-end">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="url"
|
||||
render={({ field }) => (
|
||||
<div className="flex-1 space-y-2">
|
||||
<FormLabel>URL</FormLabel>
|
||||
<FormControl>
|
||||
<div className="relative">
|
||||
<LinkIcon className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input placeholder="https://example.com" className="pl-9" {...field} />
|
||||
</div>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="custom_code"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Custom Code (optional)</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="example" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="custom_code"
|
||||
render={({ field }) => (
|
||||
<div className="w-full md:w-1/4 space-y-2">
|
||||
<FormLabel>Custom Code <span className="text-muted-foreground">(optional)</span></FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="custom-code" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<Button type="submit" disabled={loading}>
|
||||
<Button type="submit" disabled={loading} className="md:w-auto">
|
||||
{loading ? "Creating..." : "Create Short Link"}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
import { useEffect, useState } from 'react'
|
||||
import { Link } from '../types/api'
|
||||
import { getAllLinks, deleteLink } from '../api/client'
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
|
|
@ -9,6 +10,9 @@ import {
|
|||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { useToast } from "@/hooks/use-toast"
|
||||
import { Copy, Trash2 } from "lucide-react"
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
|
|
@ -17,14 +21,12 @@ import {
|
|||
DialogDescription,
|
||||
DialogFooter,
|
||||
} from "@/components/ui/dialog"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { useToast } from "@/hooks/use-toast"
|
||||
|
||||
interface LinkListProps {
|
||||
refresh: number
|
||||
refresh?: number;
|
||||
}
|
||||
|
||||
export function LinkList({ refresh }: LinkListProps) {
|
||||
export function LinkList({ refresh = 0 }: LinkListProps) {
|
||||
const [links, setLinks] = useState<Link[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [deleteModal, setDeleteModal] = useState<{ isOpen: boolean; linkId: number | null }>({
|
||||
|
|
@ -51,7 +53,7 @@ export function LinkList({ refresh }: LinkListProps) {
|
|||
|
||||
useEffect(() => {
|
||||
fetchLinks()
|
||||
}, [refresh])
|
||||
}, [refresh]) // Re-fetch when refresh counter changes
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (!deleteModal.linkId) return
|
||||
|
|
@ -61,8 +63,7 @@ export function LinkList({ refresh }: LinkListProps) {
|
|||
await fetchLinks()
|
||||
setDeleteModal({ isOpen: false, linkId: null })
|
||||
toast({
|
||||
title: "Link deleted",
|
||||
description: "The link has been successfully deleted.",
|
||||
description: "Link deleted successfully",
|
||||
})
|
||||
} catch (err) {
|
||||
toast({
|
||||
|
|
@ -73,12 +74,19 @@ export function LinkList({ refresh }: LinkListProps) {
|
|||
}
|
||||
}
|
||||
|
||||
const handleCopy = (shortCode: string) => {
|
||||
navigator.clipboard.writeText(`http://localhost:8080/${shortCode}`)
|
||||
toast({
|
||||
description: "Link copied to clipboard",
|
||||
})
|
||||
}
|
||||
|
||||
if (loading && !links.length) {
|
||||
return <div className="text-center py-4">Loading...</div>
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<>
|
||||
<Dialog open={deleteModal.isOpen} onOpenChange={(open) => setDeleteModal({ isOpen: open, linkId: null })}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
|
|
@ -98,48 +106,63 @@ export function LinkList({ refresh }: LinkListProps) {
|
|||
</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>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Your Links</CardTitle>
|
||||
<CardDescription>Manage and track your shortened links</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="rounded-md border">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Short Code</TableHead>
|
||||
<TableHead className="hidden md:table-cell">Original URL</TableHead>
|
||||
<TableHead>Clicks</TableHead>
|
||||
<TableHead className="hidden md:table-cell">Created</TableHead>
|
||||
<TableHead>Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{links.map((link) => (
|
||||
<TableRow key={link.id}>
|
||||
<TableCell className="font-medium">{link.short_code}</TableCell>
|
||||
<TableCell className="hidden md:table-cell max-w-[300px] truncate">
|
||||
{link.original_url}
|
||||
</TableCell>
|
||||
<TableCell>{link.clicks}</TableCell>
|
||||
<TableCell className="hidden md:table-cell">
|
||||
{new Date(link.created_at).toLocaleDateString()}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8"
|
||||
onClick={() => handleCopy(link.short_code)}
|
||||
>
|
||||
<Copy className="h-4 w-4" />
|
||||
<span className="sr-only">Copy link</span>
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 text-destructive"
|
||||
onClick={() => setDeleteModal({ isOpen: true, linkId: link.id })}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
<span className="sr-only">Delete link</span>
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</>
|
||||
)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue