From ca09aa0fd55719abf43387becf5199a56623cf84 Mon Sep 17 00:00:00 2001
From: Nicolai Ort <info@nicolai-ort.com>
Date: Mon, 16 Aug 2021 16:47:15 +0200
Subject: [PATCH] Implemented basic api getting and deletion

---
 package.json            |  3 +-
 src/lib/Apiclient.js    | 18 ++++++++
 src/routes/links.svelte | 92 +++++++++++++++++++++++------------------
 3 files changed, 72 insertions(+), 41 deletions(-)
 create mode 100644 src/lib/Apiclient.js

diff --git a/package.json b/package.json
index be34959..a8bd6e1 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"@sveltejs/adapter-static": "^1.0.0-next.16"
+		"@sveltejs/adapter-static": "^1.0.0-next.16",
+		"axios": "^0.21.1"
 	}
 }
diff --git a/src/lib/Apiclient.js b/src/lib/Apiclient.js
new file mode 100644
index 0000000..3f9b6ee
--- /dev/null
+++ b/src/lib/Apiclient.js
@@ -0,0 +1,18 @@
+import axios from 'axios';
+const config = {
+    username: "niggl",
+    password: "9VEBc596T7tiPB7mNJukfeH9LfGzrrJN"
+}
+export default class Apiclient {
+    static async getUrls() {
+        return (await axios.get("https://kauft.es/api?showVisits=true", {
+            auth: config
+        })).data
+    }
+
+    static async deleteUrl(shortcode) {
+        return (await axios.delete(`https://kauft.es/api/${shortcode}`, {
+            auth: config
+        })).status
+    }
+}
\ No newline at end of file
diff --git a/src/routes/links.svelte b/src/routes/links.svelte
index 6884949..e2356d4 100644
--- a/src/routes/links.svelte
+++ b/src/routes/links.svelte
@@ -1,46 +1,58 @@
 <script>
-	
+	import Apiclient from '$lib/Apiclient';
+	$: urls = [];
+	let urlQuery = Apiclient.getUrls().then((res) => {
+		console.log('here');
+		urls = res;
+	});
+
+	function deleteUrl(shortcode) {
+		Apiclient.deleteUrl(shortcode).then((res) => {
+			urls = urls.filter((url) => url.shortcode != shortcode);
+		});
+	}
 </script>
 
 <h2 class="text-3xl font-bold text-gray-800 dark:text-gray-100 pb-6">Manage all links</h2>
 <div class="rounded-xl">
-    <table class="min-w-full divide-y divide-gray-200">
-        <thead class="bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-100">
-            <tr>
-                <th
-                    scope="col"
-                    class="px-6 py-3 text-left text-xs font-medium  uppercase tracking-wider"
-                >
-                    Shortcode
-                </th>
-                <th
-                    scope="col"
-                    class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider"
-                >
-                    Target
-                </th>
-                <th
-                    scope="col"
-                    class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider"
-                >
-                    Visits
-                </th>
-                <th scope="col" class="relative px-6 py-3">
-                    <span class="sr-only">Edit</span>
-                </th>
-            </tr>
-        </thead>
-        <tbody class="bg-white dark:bg-gray-700 divide-y divide-gray-200 dark:text-gray-100" x-max="1">
-            <tr>
-                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-200"> TODO </td>
-                <td class="px-6 py-4 whitespace-nowrap text-sm">
-                    <a href="https://sthsth">https://sthsth</a>
-                </td>
-                <td class="px-6 py-4 whitespace-nowrap text-sm"> 69 </td>
-                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                    <a href="#" class="text-indigo-600 dark:text-red-600 hover:text-indigo-900 dark:hover:text-red-900">Delete</a>
-                </td>
-            </tr>
-        </tbody>
-    </table>
+	<table class="min-w-full divide-y divide-gray-200">
+		<thead class="bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-100">
+			<tr>
+				<th scope="col" class="px-6 py-3 text-left text-xs font-medium  uppercase tracking-wider">
+					Shortcode
+				</th>
+				<th scope="col" class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
+					Target
+				</th>
+				<th scope="col" class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
+					Visits
+				</th>
+				<th scope="col" class="relative px-6 py-3">
+					<span class="sr-only">Edit</span>
+				</th>
+			</tr>
+		</thead>
+		<tbody class="bg-white dark:bg-gray-700 divide-y divide-gray-200 dark:text-gray-100" x-max="1">
+			{#each urls as url}
+				<tr>
+					<td
+						class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-200"
+					>
+						{url.shortcode}
+					</td>
+					<td class="px-6 py-4 whitespace-nowrap text-sm">
+						<a href={url.target}>{url.target}</a>
+					</td>
+					<td class="px-6 py-4 whitespace-nowrap text-sm"> {url.visits} </td>
+					<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+						<button
+							on:click={deleteUrl(url.shortcode)}
+							class="text-indigo-600 dark:text-red-600 hover:text-indigo-900 dark:hover:text-red-900"
+							>Delete</button
+						>
+					</td>
+				</tr>
+			{/each}
+		</tbody>
+	</table>
 </div>