Shay/halflink
1
0
Fork 0
mirror of https://github.com/0xShay/halflink.git synced 2026-01-11 13:13:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add delete link functionality in frontend

Browse Source
This commit is contained in:
Shay Patel
2025-12-24 14:02:36 +00:00
parent c56ea8b90f
commit 52d1984478
6 changed files with 171 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
backend/src/main/java/services/shay/shortlink/ShortLinkController.java
View File

@@ -40,6 +40,15 @@ public class ShortLinkController {
return savedShortLink; return savedShortLink;
} }
@GetMapping("/info/{id}")
public ResponseEntity<ShortLink> getShortLink(@PathVariable UUID id) {
ShortLink sl = shortLinkRepository.findById(id).orElse(null);
if (sl == null) {
return ResponseEntity.notFound().build();
}
return ResponseEntity.ok(sl);
}
@DeleteMapping("/{id}") @DeleteMapping("/{id}")
public void deleteShortLink(@PathVariable UUID id) { public void deleteShortLink(@PathVariable UUID id) {
shortLinkRepository.deleteById(id); shortLinkRepository.deleteById(id);

2
frontend/app/layout.tsx
View File

@@ -13,7 +13,7 @@ export default function RootLayout({
}>) { }>) {
return ( return (
<html lang="en"> <html lang="en">
<body className="nova-oval-regular"> <body className="">
{children} {children}
</body> </body>
</html> </html>

122
frontend/app/manage/[id]/page.tsx Normal file
View File

@@ -0,0 +1,122 @@
'use client';
import { deleteLink, getLinkInfo } from "@/app/utils/api";
import { Clipboard } from "lucide-react";
import { useParams } from "next/navigation";
import { useEffect, useState } from "react";
export default function Home() {
const params = useParams();
const [errorMessage, setErrorMessage] = useState<string | null>(null);
const [successMessage, setSuccessMessage] = useState<string | null>(null);
const [loading, setLoading] = useState<boolean>(false);
const [shortUrl, setShortUrl] = useState<string | null>(null);
const [manageUrl, setManageUrl] = useState<string | null>(null);
const [linkInfo, setLinkInfo] = useState<{
shortUrl: string;
manageUrl: string;
title: string;
createdAt: string;
clicks: number;
} | null>(null);
async function handleDelete(event: React.FormEvent<HTMLFormElement>) {
event.preventDefault();
setLoading(true);
try {
await deleteLink(params.id?.toString() || "");
setSuccessMessage("Link deleted!");
setErrorMessage(null);
} catch (err) {
console.error(err);
setErrorMessage("Failed to delete the link. Please try again.");
setSuccessMessage(null);
} finally {
setLoading(false);
}
}
function copyToClipboard(text: string, title: string) {
navigator.clipboard.writeText(text).then(
() => {
setSuccessMessage(`Copied ${title} to clipboard!`);
},
() => {
setErrorMessage(`Failed to copy ${title} to clipboard.`);
}
);
}
useEffect(() => {
if (!params.id) return;
getLinkInfo(params.id?.toString()).then(setLinkInfo).catch((err) => {
console.error(err);
setErrorMessage("Failed to retrieve link info. Please check the link ID.");
});
}, [params.id]);
return (
<div className="bg-stone-300 flex min-h-screen flex-col items-center justify-center py-2 text-center">
<h1 className="text-3xl font-bold text-red-950">halflink</h1>
<p className="text-black">Shorten a link with ease.</p>
{errorMessage && (
<p className="mt-4 text-red-800 font-bold">{errorMessage}</p>
)}
{successMessage && (
<p className="mt-4 text-green-800 font-bold">{successMessage}</p>
)}
{linkInfo && (
<div className="flex flex-col items-center w-full">
<p className="mt-4">Shareable short link:</p>
<div className="flex justify-center w-full max-w-xl">
<input
type="text"
value={linkInfo.shortUrl}
readOnly
className="bg-white w-full max-w-md border border-stone-400 rounded-l px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
<button
type="submit"
className="flex justify-center w-16 bg-red-900 text-white px-4 py-2 rounded-r hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
onClick={() => copyToClipboard(linkInfo.shortUrl, "short link")}
>
<Clipboard />
</button>
</div>
<p className="mt-4">Created at:</p>
<p className="font-mono text-sm text-gray-700">{new Date(linkInfo.createdAt).toLocaleString()}</p>
<p className="mt-4">Total clicks:</p>
<p className="font-mono text-sm text-gray-700">{linkInfo.clicks}</p>
<form className="mt-4" onSubmit={handleDelete}>
<button
type="submit"
disabled={loading}
className="bg-red-900 disabled:bg-red-300 text-white px-4 py-2 rounded hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
>
Delete Link
</button>
</form>
<p className="mt-4">View analytics and manage your short link at:</p>
<a
href={linkInfo.manageUrl}
className="mb-2 text-red-900 underline hover:text-red-600"
>{linkInfo.manageUrl}</a>
</div>
)}
<p className="mt-6 text-gray-700 text-sm">
Secret link ID:<br />{params.id}
</p>
</div>
);
}

25
frontend/app/manage/page.tsx
View File

@@ -1,25 +0,0 @@
export default function Home() {
return (
<div className="flex min-h-screen flex-col items-center py-2">
<h1 className="text-3xl font-bold mt-16">halflink</h1>
<p>Shorten a link with ease.</p>
<h2 className="text-2xl font-bold mt-8">Manage your link</h2>
<form className="mt-4 flex w-full max-w-md">
<input
type="text"
placeholder="Enter your long URL here"
className="flex-grow border border-gray-300 rounded-l px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
<button
type="submit"
className="bg-blue-500 text-white px-4 py-2 rounded-r hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
>
Shorten
</button>
</form>
</div>
);
}

21
frontend/app/page.tsx
View File

@@ -79,7 +79,7 @@ export default function Home() {
type="text" type="text"
value={shortUrl} value={shortUrl}
readOnly readOnly
className="bg-white w-full max-w-md border border-stone-400 rounded-l text-center pl-20 pr-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" className="bg-white w-full max-w-md border border-stone-400 rounded-l px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
/> />
<button <button
type="submit" type="submit"
@@ -91,21 +91,10 @@ export default function Home() {
</div> </div>
<p className="mt-4">View analytics and manage your short link at:</p> <p className="mt-4">View analytics and manage your short link at:</p>
<div className="flex justify-center w-full max-w-xl"> <a
<input href={manageUrl}
type="text" className="mb-2 text-red-900 underline hover:text-red-600"
value={manageUrl} >{manageUrl}</a>
readOnly
className="bg-white w-full max-w-md border border-stone-400 rounded-l text-center pl-20 pr-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
<button
type="submit"
className="flex justify-center w-16 bg-red-900 text-white px-4 py-2 rounded-r hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
onClick={() => copyToClipboard(manageUrl, "manage link")}
>
<Clipboard />
</button>
</div>
</div> </div>
)} )}

36
frontend/app/utils/api.ts
View File

@@ -1,6 +1,7 @@
import axios from "axios"; import axios from "axios";
const API_BASE_URL = "http://localhost:8080"; const API_BASE_URL = "http://localhost:8080";
const FRONTEND_BASE_URL = "http://localhost:3000";
export async function shortenLink(longUrl: string): Promise<{ export async function shortenLink(longUrl: string): Promise<{
shortUrl: string; shortUrl: string;
@@ -18,10 +19,41 @@ export async function shortenLink(longUrl: string): Promise<{
title: string; title: string;
createdAt: string; createdAt: string;
clicks: number; clicks: number;
} = res.data } = res.data;
return { return {
shortUrl: API_BASE_URL + "/l/" + sl.code, shortUrl: API_BASE_URL + "/l/" + sl.code,
manageUrl: API_BASE_URL + "/l/" + sl.code + "/manage", manageUrl: FRONTEND_BASE_URL + "/manage/" + sl.id,
} }
}
export async function getLinkInfo(id: string): Promise<{
shortUrl: string;
manageUrl: string;
title: string;
createdAt: string;
clicks: number;
}> {
let res = await axios.get(API_BASE_URL + "/l/info/" + id);
let sl: {
id: string;
url: string;
code: string;
title: string;
createdAt: string;
clicks: number;
} = res.data;
return {
title: sl.title,
shortUrl: API_BASE_URL + "/l/" + sl.code,
manageUrl: FRONTEND_BASE_URL + "/manage/" + sl.id,
createdAt: sl.createdAt,
clicks: sl.clicks,
}
}
export async function deleteLink(id: string): Promise<void> {
await axios.delete(API_BASE_URL + "/l/" + id);
} }