Add delete link functionality in frontend

2026-01-11 13:13:25 +00:00 · 2025-12-24 14:02:36 +00:00
parent c56ea8b90f
commit 52d1984478
6 changed files with 171 additions and 44 deletions
--- a/backend/src/main/java/services/shay/shortlink/ShortLinkController.java
+++ b/backend/src/main/java/services/shay/shortlink/ShortLinkController.java
@@ -40,6 +40,15 @@ public class ShortLinkController {
        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}")
    public void deleteShortLink(@PathVariable UUID id) {
        shortLinkRepository.deleteById(id);
--- a/frontend/app/layout.tsx
+++ b/frontend/app/layout.tsx
@@ -13,7 +13,7 @@ export default function RootLayout({
 }>) {
  return (
    <html lang="en">
-      <body className="nova-oval-regular">
+      <body className="">
        {children}
      </body>
    </html>
--- a/frontend/app/manage/[id]/page.tsx
+++ b/frontend/app/manage/[id]/page.tsx
@@ -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>
+  );
+}
--- a/frontend/app/manage/page.tsx
+++ b/frontend/app/manage/page.tsx
@@ -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>
-    );
-  }
-  
--- a/frontend/app/page.tsx
+++ b/frontend/app/page.tsx
@@ -79,7 +79,7 @@ export default function Home() {
              type="text"
              value={shortUrl}
              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
              type="submit"
@@ -91,21 +91,10 @@ export default function Home() {
          </div>

          <p className="mt-4">View analytics and manage your short link at:</p>
-          <div className="flex justify-center w-full max-w-xl">
-            <input
-              type="text"
-              value={manageUrl}
-              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>
+          <a
+            href={manageUrl}
+            className="mb-2 text-red-900 underline hover:text-red-600"
+          >{manageUrl}</a>

        </div>
      )}
--- a/frontend/app/utils/api.ts
+++ b/frontend/app/utils/api.ts
@@ -1,6 +1,7 @@
 import axios from "axios";

 const API_BASE_URL = "http://localhost:8080";
+const FRONTEND_BASE_URL = "http://localhost:3000";

 export async function shortenLink(longUrl: string): Promise<{
    shortUrl: string;
@@ -18,10 +19,41 @@ export async function shortenLink(longUrl: string): Promise<{
        title: string;
        createdAt: string;
        clicks: number;
-    } = res.data
+    } = res.data;

    return {
        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);
 }