From a818b7f203dcfb93b61fa79b6e8d9d13caa71169 Mon Sep 17 00:00:00 2001
From: Nicolai Ort <info@nicolai-ort.com>
Date: Sat, 30 Apr 2022 17:12:51 +0200
Subject: [PATCH] fixed dynamic links

---
 src/app.html              |  2 +-
 src/lib/Sidebar.svelte    | 12 ++++++------
 src/routes/details.svelte | 37 ++++++++++++++++++++-----------------
 3 files changed, 27 insertions(+), 24 deletions(-)
diff --git a/src/app.html b/src/app.html
index e759c4a..14b8778 100644
--- a/src/app.html
+++ b/src/app.html
@@ -2,7 +2,7 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<link rel="icon" href="/favicon.png" />
+		<link rel="icon" href="/dashboard/favicon.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%svelte.head%
 	</head>
diff --git a/src/lib/Sidebar.svelte b/src/lib/Sidebar.svelte
index 0794ed9..510febb 100644
--- a/src/lib/Sidebar.svelte
+++ b/src/lib/Sidebar.svelte
@@ -6,7 +6,7 @@
 	import SidebarEntry from './SidebarEntry.svelte';
 
 	$: logged_in = false;
-	$: currentPage = $page.path;
+	$: currentPage = $page.url.pathname;
 
 	const unsubscribe = UserStore.subscribe((value) => {
 		logged_in = value.isLoggedIn;
@@ -23,7 +23,7 @@
 <div
 	class="flex flex-col w-64 h-screen px-4 py-8 bg-white border-r dark:bg-gray-800 dark:border-gray-600"
 >
-	<img class="h-36 w-36" src="./icon_128.png" alt="LinkyLinky Logo (White kauft.es K on red background)">
+	<img class="h-36 w-36" src="/dashboard/icon_128.png" alt="LinkyLinky Logo (White kauft.es K on red background)">
 	<h2 class="text-3xl font-semibold text-gray-800 dark:text-white">LinkyLinky</h2>
 	<!-- <div class="relative mt-6">
 		<span class="absolute inset-y-0 left-0 flex items-center pl-3">
@@ -47,7 +47,7 @@
 
 	<div class="flex flex-col justify-between flex-1 mt-6">
 		<nav>
-			<SidebarEntry title="Dashboard" href="./" pageUrl="/" bind:currentPage>
+			<SidebarEntry title="Dashboard" href="/dashboard" pageUrl="/" bind:currentPage>
 				<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 					<path
 						d="M19 11H5M19 11C20.1046 11 21 11.8954 21 13V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V13C3 11.8954 3.89543 11 5 11M19 11V9C19 7.89543 18.1046 7 17 7M5 11V9C5 7.89543 5.89543 7 7 7M7 7V5C7 3.89543 7.89543 3 9 3H15C16.1046 3 17 3.89543 17 5V7M7 7H17"
@@ -62,7 +62,7 @@
 			<hr class="my-6 dark:border-gray-600" />
 
 			{#if logged_in}
-				<SidebarEntry title="Manage Links" href="./links" pageUrl="/links" bind:currentPage>
+				<SidebarEntry title="Manage Links" href="/dashboard/links" pageUrl="/links" bind:currentPage>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
 						class="h-5 w-5"
@@ -78,7 +78,7 @@
 						/>
 					</svg>
 				</SidebarEntry>
-				<SidebarEntry title="All visits" href="./visits" pageUrl="/visits" bind:currentPage>
+				<SidebarEntry title="All visits" href="/dashboard/visits" pageUrl="/visits" bind:currentPage>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
 						class="h-5 w-5"
@@ -122,7 +122,7 @@
 					<span class="mx-4 font-medium">Logout</span>
 				</button>
 			{:else}
-				<SidebarEntry title="Login" href="./login" pageUrl="/login" bind:currentPage>
+				<SidebarEntry title="Login" href="/dashboard/login" pageUrl="/login" bind:currentPage>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
 						class="h-5 w-5"
diff --git a/src/routes/details.svelte b/src/routes/details.svelte
index 2781f9e..4ce4066 100644
--- a/src/routes/details.svelte
+++ b/src/routes/details.svelte
@@ -1,10 +1,7 @@
 <script>
-	import { page } from '$app/stores';
 	import Apiclient from '$lib/Apiclient';
 	import UserStore from '$lib/UserStore';
-	import { onDestroy } from 'svelte';
-
-	let shortcode = $page.query.get('shortcode');
+	import { onDestroy, onMount } from 'svelte';
 
 	$: urlDetails = {
 		shortcode: 'Loading...',
@@ -14,21 +11,27 @@
 	};
 	$: urlVisists = [];
 	let visitQuery;
+	let shortcode;
 
-	// Yes i know this isn't the best way to implement this, but linkylinky dashboard is just a oneshot sideproject r/n.
-	const unsubscribe = UserStore.subscribe((value) => {
-		if (value.isLoggedIn) {
-			Apiclient.getUrlDetails(shortcode).then((res) => {
-				urlDetails = res;
-				unsubscribe();
-			});
-			visitQuery = Apiclient.getUrlVisits(shortcode).then((res) => {
-				urlVisists = res;
-			});
-		}
+	onMount(async () => {
+		const params = new URLSearchParams(window.location.search);
+		let shortcode = params.get('shortcode');
+
+		// Yes i know this isn't the best way to implement this, but linkylinky dashboard is just a oneshot sideproject r/n.
+		const unsubscribe = UserStore.subscribe((value) => {
+			if (value.isLoggedIn) {
+				Apiclient.getUrlDetails(shortcode).then((res) => {
+					urlDetails = res;
+					unsubscribe();
+				});
+				visitQuery = Apiclient.getUrlVisits(shortcode).then((res) => {
+					urlVisists = res;
+				});
+			}
+		});
+
+		onDestroy(unsubscribe);
 	});
-
-	onDestroy(unsubscribe);
 </script>
 
 <h2 class="text-3xl font-bold text-gray-800 dark:text-gray-100 pb-6">Details: {shortcode}</h2>
