Add edit link functionality
This commit is contained in:
parent
613799dc78
commit
b514d490d2
7 changed files with 359 additions and 38 deletions
|
|
@ -58,6 +58,12 @@ export const getAllLinks = async () => {
|
|||
return response.data;
|
||||
};
|
||||
|
||||
export const editLink = async (id: number, data: Partial<CreateLinkRequest>) => {
|
||||
const response = await api.patch<Link>(`/links/${id}`, data);
|
||||
return response.data;
|
||||
};
|
||||
|
||||
|
||||
export const deleteLink = async (id: number) => {
|
||||
await api.delete(`/links/${id}`);
|
||||
};
|
||||
|
|
|
|||
139
frontend/src/components/EditModal.tsx
Normal file
139
frontend/src/components/EditModal.tsx
Normal file
|
|
@ -0,0 +1,139 @@
|
|||
// src/components/EditModal.tsx
|
||||
import { useState } from 'react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import * as z from 'zod';
|
||||
import { Link } from '../types/api';
|
||||
import { editLink } from '../api/client';
|
||||
import { useToast } from '@/hooks/use-toast';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogFooter,
|
||||
} from '@/components/ui/dialog';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from '@/components/ui/form';
|
||||
|
||||
const formSchema = z.object({
|
||||
url: z
|
||||
.string()
|
||||
.min(1, 'URL is required')
|
||||
.url('Must be a valid URL')
|
||||
.refine((val) => val.startsWith('http://') || val.startsWith('https://'), {
|
||||
message: 'URL must start with http:// or https://',
|
||||
}),
|
||||
custom_code: z
|
||||
.string()
|
||||
.regex(/^[a-zA-Z0-9_-]{1,32}$/, {
|
||||
message:
|
||||
'Custom code must be 1-32 characters and contain only letters, numbers, underscores, and hyphens',
|
||||
})
|
||||
.optional(),
|
||||
});
|
||||
|
||||
interface EditModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
link: Link;
|
||||
onSuccess: () => void;
|
||||
}
|
||||
|
||||
export function EditModal({ isOpen, onClose, link, onSuccess }: EditModalProps) {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const { toast } = useToast();
|
||||
|
||||
const form = useForm<z.infer<typeof formSchema>>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
url: link.original_url,
|
||||
custom_code: link.short_code,
|
||||
},
|
||||
});
|
||||
|
||||
const onSubmit = async (values: z.infer<typeof formSchema>) => {
|
||||
try {
|
||||
setLoading(true);
|
||||
await editLink(link.id, values);
|
||||
toast({
|
||||
description: 'Link updated successfully',
|
||||
});
|
||||
onSuccess();
|
||||
onClose();
|
||||
} catch (err: unknown) {
|
||||
const error = err as { response?: { data?: { error?: string } } };
|
||||
toast({
|
||||
variant: 'destructive',
|
||||
title: 'Error',
|
||||
description: error.response?.data?.error || 'Failed to update link',
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={onClose}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Edit Link</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="url"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Destination URL</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="https://example.com" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="custom_code"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Short Code</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="custom-code" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<DialogFooter>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={onClose}
|
||||
disabled={loading}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" disabled={loading}>
|
||||
{loading ? 'Saving...' : 'Save Changes'}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</Form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { useEffect, useState } from 'react'
|
||||
import { useCallback, 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"
|
||||
|
|
@ -12,7 +12,7 @@ import {
|
|||
} from "@/components/ui/table"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { useToast } from "@/hooks/use-toast"
|
||||
import { Copy, Trash2, BarChart2 } from "lucide-react"
|
||||
import { Copy, Trash2, BarChart2, Pencil } from "lucide-react"
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
|
|
@ -23,6 +23,7 @@ import {
|
|||
} from "@/components/ui/dialog"
|
||||
|
||||
import { StatisticsModal } from "./StatisticsModal"
|
||||
import { EditModal } from './EditModal'
|
||||
|
||||
interface LinkListProps {
|
||||
refresh?: number;
|
||||
|
|
@ -39,27 +40,32 @@ export function LinkList({ refresh = 0 }: LinkListProps) {
|
|||
isOpen: false,
|
||||
linkId: null,
|
||||
});
|
||||
const [editModal, setEditModal] = useState<{ isOpen: boolean; link: Link | null }>({
|
||||
isOpen: false,
|
||||
link: null,
|
||||
});
|
||||
const { toast } = useToast()
|
||||
|
||||
const fetchLinks = async () => {
|
||||
const fetchLinks = useCallback(async () => {
|
||||
try {
|
||||
setLoading(true)
|
||||
const data = await getAllLinks()
|
||||
setLinks(data)
|
||||
} catch (err) {
|
||||
} catch (err: unknown) {
|
||||
const errorMessage = err instanceof Error ? err.message : 'Unknown error occurred';
|
||||
toast({
|
||||
title: "Error",
|
||||
description: "Failed to load links",
|
||||
description: `Failed to load links: ${errorMessage}`,
|
||||
variant: "destructive",
|
||||
})
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
}, [toast, setLinks, setLoading])
|
||||
|
||||
useEffect(() => {
|
||||
fetchLinks()
|
||||
}, [refresh]) // Re-fetch when refresh counter changes
|
||||
}, [fetchLinks, refresh]) // Re-fetch when refresh counter changes
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (!deleteModal.linkId) return
|
||||
|
|
@ -71,10 +77,11 @@ export function LinkList({ refresh = 0 }: LinkListProps) {
|
|||
toast({
|
||||
description: "Link deleted successfully",
|
||||
})
|
||||
} catch (err) {
|
||||
} catch (err: unknown) {
|
||||
const errorMessage = err instanceof Error ? err.message : 'Unknown error occurred';
|
||||
toast({
|
||||
title: "Error",
|
||||
description: "Failed to delete link",
|
||||
description: `Failed to delete link: ${errorMessage}`,
|
||||
variant: "destructive",
|
||||
})
|
||||
}
|
||||
|
|
@ -85,13 +92,13 @@ export function LinkList({ refresh = 0 }: LinkListProps) {
|
|||
const baseUrl = window.location.origin
|
||||
navigator.clipboard.writeText(`${baseUrl}/${shortCode}`)
|
||||
toast({
|
||||
description: (
|
||||
<>
|
||||
Link copied to clipboard
|
||||
<br />
|
||||
You can add ?source=TextHere to the end of the link to track the source of clicks
|
||||
</>
|
||||
),
|
||||
description: (
|
||||
<>
|
||||
Link copied to clipboard
|
||||
<br />
|
||||
You can add ?source=TextHere to the end of the link to track the source of clicks
|
||||
</>
|
||||
),
|
||||
})
|
||||
}
|
||||
|
||||
|
|
@ -127,6 +134,7 @@ export function LinkList({ refresh = 0 }: LinkListProps) {
|
|||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="rounded-md border">
|
||||
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
|
|
@ -134,7 +142,7 @@ export function LinkList({ refresh = 0 }: LinkListProps) {
|
|||
<TableHead className="hidden md:table-cell">Original URL</TableHead>
|
||||
<TableHead>Clicks</TableHead>
|
||||
<TableHead className="hidden md:table-cell">Created</TableHead>
|
||||
<TableHead>Actions</TableHead>
|
||||
<TableHead className="w-[1%] whitespace-nowrap pr-4">Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
|
|
@ -148,8 +156,8 @@ export function LinkList({ refresh = 0 }: LinkListProps) {
|
|||
<TableCell className="hidden md:table-cell">
|
||||
{new Date(link.created_at).toLocaleDateString()}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex gap-2">
|
||||
<TableCell className="p-2 pr-4">
|
||||
<div className="flex items-center gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
|
|
@ -168,6 +176,15 @@ export function LinkList({ refresh = 0 }: LinkListProps) {
|
|||
<BarChart2 className="h-4 w-4" />
|
||||
<span className="sr-only">View statistics</span>
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8"
|
||||
onClick={() => setEditModal({ isOpen: true, link })}
|
||||
>
|
||||
<Pencil className="h-4 w-4" />
|
||||
<span className="sr-only">Edit Link</span>
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
|
|
@ -191,6 +208,14 @@ export function LinkList({ refresh = 0 }: LinkListProps) {
|
|||
onClose={() => setStatsModal({ isOpen: false, linkId: null })}
|
||||
linkId={statsModal.linkId!}
|
||||
/>
|
||||
{editModal.link && (
|
||||
<EditModal
|
||||
isOpen={editModal.isOpen}
|
||||
onClose={() => setEditModal({ isOpen: false, link: null })}
|
||||
link={editModal.link}
|
||||
onSuccess={fetchLinks}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -31,7 +31,7 @@ const CustomTooltip = ({
|
|||
label,
|
||||
}: {
|
||||
active?: boolean;
|
||||
payload?: any[];
|
||||
payload?: { value: number; payload: EnhancedClickStats }[];
|
||||
label?: string;
|
||||
}) => {
|
||||
if (active && payload && payload.length > 0) {
|
||||
|
|
@ -81,12 +81,12 @@ export function StatisticsModal({ isOpen, onClose, linkId }: StatisticsModalProp
|
|||
|
||||
setClicksOverTime(enhancedClicksData);
|
||||
setSourcesData(sourcesData);
|
||||
} catch (error: any) {
|
||||
} catch (error: unknown) {
|
||||
console.error("Failed to fetch statistics:", error);
|
||||
toast({
|
||||
variant: "destructive",
|
||||
title: "Error",
|
||||
description: error.response?.data || "Failed to load statistics",
|
||||
description: error instanceof Error ? error.message : "Failed to load statistics",
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue