Lagt til støtte for å slette innslag

Sigurdomnes · Sigurdomnes · commit b2375d52a3fd · 2025-03-09T17:01:30.000+01:00
diff --git a/backend/src/main/kotlin/no/nais/cloud/testnais/sandbox/bachelorurlforkorter/UrlForkorterApi.kt b/backend/src/main/kotlin/no/nais/cloud/testnais/sandbox/bachelorurlforkorter/UrlForkorterApi.kt
@@ -30,6 +30,7 @@ fun startAppServer(config: Config) {
             path("api") {
                 post("sjekk", UrlForkorterController::sjekk, Rolle.Alle)
                 post("forkort", UrlForkorterController::forkort, Rolle.Alle)
+                post("slett", UrlForkorterController::slett, Rolle.Alle)
                 get("hentalle", UrlForkorterController::hentAlleMedMetadata, Rolle.Alle)
             }
             get("{korturl}") { ctx ->
diff --git a/backend/src/main/kotlin/no/nais/cloud/testnais/sandbox/bachelorurlforkorter/UrlForkorterController.kt b/backend/src/main/kotlin/no/nais/cloud/testnais/sandbox/bachelorurlforkorter/UrlForkorterController.kt
@@ -9,10 +9,6 @@ private val logger = KotlinLogging.logger {}
 
 object UrlForkorterController {
 
-    fun test(ctx: Context) {
-        ctx.result("Hello world!")
-    }
-
     fun redirect(ctx: Context) {
         val korturl = ctx.pathParam("korturl")
         if (!korturl.matches(Regex("^[a-z0-9]{6}$"))) {
@@ -78,4 +74,15 @@ object UrlForkorterController {
             ctx.status(500)
         }
     }
+
+    fun slett(ctx: Context) {
+        val id = ctx.queryParam("id")
+        try {
+            ShortUrlDataAccessObject.deleteShortUrlById(Integer.parseInt(id))
+            ctx.status(204)
+        } catch (e: Exception) {
+            logger.error("Feil ved sletting av URL", e)
+            ctx.status(500)
+        }
+    }
 }
diff --git a/backend/src/main/kotlin/no/nais/cloud/testnais/sandbox/bachelorurlforkorter/common/db/ShortUrlDataAccessObject.kt b/backend/src/main/kotlin/no/nais/cloud/testnais/sandbox/bachelorurlforkorter/common/db/ShortUrlDataAccessObject.kt
@@ -2,6 +2,7 @@ package no.nais.cloud.testnais.sandbox.bachelorurlforkorter.common.db
 
 import org.jetbrains.exposed.sql.*
 import org.jetbrains.exposed.sql.transactions.transaction
+import org.jetbrains.exposed.sql.SqlExpressionBuilder.eq
 
 object ShortUrlDataAccessObject {
     fun storeShortUrl(shortUrl: String, longUrl: String, createdBy: String?) {
@@ -52,4 +53,11 @@ object ShortUrlDataAccessObject {
             }
         }
     }
+
+    fun deleteShortUrlById(id: Int): Boolean {
+        return transaction {
+            ShortUrls.deleteWhere { ShortUrls.id eq id } > 0
+        }
+    }
+
 }
diff --git a/frontend/index.html b/frontend/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Url-forkorter</title>
   </head>
diff --git a/frontend/public/icons/close.svg b/frontend/public/icons/close.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+    <path fill="#9A2A2A" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z"/>
+</svg>
diff --git a/frontend/public/vite.svg b/frontend/public/vite.svg
diff --git a/frontend/src/assets/react.svg b/frontend/src/assets/react.svg
diff --git a/frontend/src/components/CreateShortUrl.tsx b/frontend/src/components/CreateShortUrl.tsx
@@ -9,17 +9,9 @@ export default function CreateShortUrl() {
     const [inputValue, setInputValue] = useState("");
     const [result, setResult] = useState<string | null>(null);
 
-    async function postShortUrlSearch(longUrl: string) {
-        try {
-            return await apiRequest<{ forkortetUrl: string }>(`forkort?langurl=${longUrl}`, "POST");
-        } catch (error) {
-            console.error("API error:", error);
-        }
-    }
-
     function handleCreateClick() {
         if (!isValidUrl(inputValue)) return;
-        postShortUrlSearch(inputValue).then((res) => {
+        apiRequest<{ forkortetUrl: string }>(`forkort?langurl=${inputValue}`, "POST").then((res) => {
             if (res) setResult(res.forkortetUrl);
         }).catch(error => {
             setResult(null);
@@ -36,7 +28,7 @@ export default function CreateShortUrl() {
                    onChange={setInputValue}>
             </Input>
             {result &&
-            <a href={url} target="_blank">{url}</a>
+                <a href={url} target="_blank">{url}</a>
             }
         </>
     )
diff --git a/frontend/src/components/SearchShortUrl.tsx b/frontend/src/components/SearchShortUrl.tsx
@@ -7,21 +7,13 @@ export default function SearchShortUrl() {
     const [inputValue, setInputValue] = useState("");
     const [searchResult, setSearchResult] = useState<string | null>(null);
 
-    async function postShortUrlSearch(shortUrl: string) {
-        try {
-            return await apiRequest<{langurl: string }>(`sjekk?korturl=${shortUrl}`, "POST");
-        } catch (error) {
-            console.error("API error:", error);
-        }
-    }
-
     function handleSearchClick() {
         const shortUrl = extractShortUrl(inputValue)
         if (shortUrl === null || shortUrl.length !== 6) {
             console.log("test")
             return;
         }
-        postShortUrlSearch(shortUrl).then((res) => {
+        apiRequest<{langurl: string }>(`sjekk?korturl=${shortUrl}`, "POST").then((res) => {
             if (res) setSearchResult(res.langurl);
             else setSearchResult(null);
         }).catch(error => {
diff --git a/frontend/src/components/ShowAll/ShowAll.tsx b/frontend/src/components/ShowAll/ShowAll.tsx
@@ -9,6 +9,7 @@ import {
     TableHeaderCell,
     TableRow
 } from "./showall.style.ts";
+import Icon from "../shared/Icon/Icon.tsx";
 
 interface UrlData {
     id: number;
@@ -38,6 +39,14 @@ export default function ShowAllUrls() {
         fetchUrls().then(() => setLoading(false));
     }, []);
 
+    function handleDeleteClick(id: number) {
+        apiRequest<{ forkortetUrl: string }>(`slett?id=${id}`, "POST")
+            .then(() => setUrls((prevUrls) => prevUrls.filter((url) => url.id !== id)))
+            .catch((error: Error) => {
+                console.error("API error:", error);
+            });
+    }
+
     return (
         <TableContainer>
             {loading && <p>Loading...</p>}
@@ -53,6 +62,7 @@ export default function ShowAllUrls() {
                             <TableHeaderCell>Opprettet</TableHeaderCell>
                             <TableHeaderCell>Av bruker</TableHeaderCell>
                             <TableHeaderCell>Antall besøk</TableHeaderCell>
+                            <TableHeaderCell>Slett</TableHeaderCell>
                         </TableRow>
                     </TableHeader>
                     <tbody>
@@ -72,6 +82,7 @@ export default function ShowAllUrls() {
                             <TableCell>{new Date(url.createdAt).toLocaleString()}</TableCell>
                             <TableCell>{url.createdBy || "Unknown"}</TableCell>
                             <TableCell>{url.clicks}</TableCell>
+                            <TableCell><Icon icon="close" onClick={() => {handleDeleteClick(url.id)}}></Icon></TableCell>
                         </TableRow>
                     ))}
                     </tbody>
diff --git a/frontend/src/components/shared/Icon/Icon.tsx b/frontend/src/components/shared/Icon/Icon.tsx
@@ -0,0 +1,13 @@
+import {StyledIcon} from "./icon.style.ts";
+
+interface Props {
+    icon: string;
+    onClick?: () => void;
+    color?: string;
+}
+
+export default function Icon({icon, onClick}: Props) {
+    return (
+        <StyledIcon src={`icons/${icon}.svg`} onClick={onClick}/>
+    )
+}
diff --git a/frontend/src/components/shared/Icon/icon.style.ts b/frontend/src/components/shared/Icon/icon.style.ts
@@ -0,0 +1,8 @@
+import styled from "styled-components";
+
+export const StyledIcon = styled.img`
+    height: 1.1rem;
+    &:hover {
+        cursor: pointer;
+    }
+`
diff --git a/frontend/src/util/api/apiRequest.ts b/frontend/src/util/api/apiRequest.ts
@@ -19,5 +19,6 @@ export async function apiRequest<T>(
         throw new Error(`Error ${response.status}: ${response.statusText}`);
     }
 
+    if (response.status === 204) return null as T;
     return response.json();
 }

Original file line number	Diff line number	Diff line change
`@@ -30,6 +30,7 @@ fun startAppServer(config: Config) {`
`30`	`30`	`path("api") {`
`31`	`31`	`post("sjekk", UrlForkorterController::sjekk, Rolle.Alle)`
`32`	`32`	`post("forkort", UrlForkorterController::forkort, Rolle.Alle)`
	`33`	`+ post("slett", UrlForkorterController::slett, Rolle.Alle)`
`33`	`34`	`get("hentalle", UrlForkorterController::hentAlleMedMetadata, Rolle.Alle)`
`34`	`35`	`}`
`35`	`36`	`get("{korturl}") { ctx ->`
Original file line number	Diff line number	Diff line change
`@@ -2,6 +2,7 @@ package no.nais.cloud.testnais.sandbox.bachelorurlforkorter.common.db`
`2`	`2`
`3`	`3`	`import org.jetbrains.exposed.sql.*`
`4`	`4`	`import org.jetbrains.exposed.sql.transactions.transaction`
	`5`	`+import org.jetbrains.exposed.sql.SqlExpressionBuilder.eq`
`5`	`6`
`6`	`7`	`object ShortUrlDataAccessObject {`
`7`	`8`	`fun storeShortUrl(shortUrl: String, longUrl: String, createdBy: String?) {`
`@@ -52,4 +53,11 @@ object ShortUrlDataAccessObject {`
`52`	`53`	`}`
`53`	`54`	`}`
`54`	`55`	`}`
	`56`	`+`
	`57`	`+ fun deleteShortUrlById(id: Int): Boolean {`
	`58`	`+ return transaction {`
	`59`	`+ ShortUrls.deleteWhere { ShortUrls.id eq id } > 0`
	`60`	`+ }`
	`61`	`+ }`
	`62`	`+`
`55`	`63`	`}`
Original file line number	Diff line number	Diff line change
`@@ -19,5 +19,6 @@ export async function apiRequest<T>(`
`19`	`19`	throw new Error(`Error ${response.status}: ${response.statusText}`);
`20`	`20`	`}`
`21`	`21`
	`22`	`+ if (response.status === 204) return null as T;`
`22`	`23`	`return response.json();`
`23`	`24`	`}`