From 1d48ab82563b47e5b525eff15a76a429755a0c6e Mon Sep 17 00:00:00 2001
From: grngxd <36968271+grngxd@users.noreply.github.com>
Date: Tue, 10 Jun 2025 00:31:23 +0100
Subject: [PATCH] refactor to dashboard!

---
 src/components/Controlbar.tsx  |  1 +
 src/routes/dashboard/index.tsx | 67 +++++++++++++++++++++++++++++++
 src/routes/index.tsx           | 72 ++++++----------------------------
 3 files changed, 81 insertions(+), 59 deletions(-)
 create mode 100644 src/routes/dashboard/index.tsx

diff --git a/src/components/Controlbar.tsx b/src/components/Controlbar.tsx
index ba5e7d9..54de524 100644
--- a/src/components/Controlbar.tsx
+++ b/src/components/Controlbar.tsx
@@ -50,6 +50,7 @@ export default component$(() => {
             />
             
             <div class="flex items-center gap-2">
+                {/* TODO: replace this button with a modal with options like settings log out etc */}
                 <button
                     class="duration-100 hover:bg-white text-white hover:text-black p-2 rounded-lg"
                     onClick$={async () => {
diff --git a/src/routes/dashboard/index.tsx b/src/routes/dashboard/index.tsx
new file mode 100644
index 0000000..3211fe1
--- /dev/null
+++ b/src/routes/dashboard/index.tsx
@@ -0,0 +1,67 @@
+import { $, component$, useOnDocument } from "@builder.io/qwik";
+import { routeLoader$, type DocumentHead } from "@builder.io/qwik-city";
+import Controlbar from "~/components/Controlbar";
+import File from "~/components/File";
+import { SolarUploadLinear, SvgSpinnersBarsRotateFade } from "~/components/Icons";
+import { useNanostore$ } from "~/hooks/nanostores";
+import { api } from "~/lib/api";
+import { areFilesLoaded, dashboardFiles } from "~/lib/stores";
+import { StereoFile } from "~/lib/types";
+
+export const useAuthCheck = routeLoader$(({ cookie, redirect: r }) => {
+	const jwt = cookie.get("jwt");
+	if (jwt) return {};
+	
+	throw r(302, "/");
+});
+
+export default component$(() => {
+	const files = useNanostore$<StereoFile[]>(dashboardFiles);
+	const loaded = useNanostore$<boolean>(areFilesLoaded);
+
+	useOnDocument("DOMContentLoaded", $(async () => {
+		loaded.value = false;
+		files.value = await api.list();
+		console.log("Files loaded:", files.value);
+		loaded.value = true;
+	}));
+
+	return (
+		<>
+			<Controlbar />
+				{!loaded.value ? (
+					<div class="absolute w-full h-screen flex justify-center items-center flex-col">
+						<p class="text-gray-500 text-8xl font-bold"><SvgSpinnersBarsRotateFade /></p>
+						<p class="text-gray-700 text-2xl font-light italic">loading your files...</p>
+						<span class="text-gray-700 text-lg font-light flex gap-[0.5ch] items-center">please wait <span class="animate-spin">⏳</span></span>
+					</div>
+				) : (
+					files.value.length === 0 ? (
+						<div class="absolute w-full h-screen flex justify-center items-center flex-col">
+							<p class="text-gray-500 text-8xl font-bold">{"┻━┻︵ \\(°□°)/ ︵ ┻━┻"}</p>
+							<p class="text-gray-700 text-2xl font-light italic">you haven't uploaded any files yet!</p>
+							<span class="text-gray-700 text-lg font-light flex gap-[0.5ch] items-center">click the <span><SolarUploadLinear /></span> button to get started</span>
+						</div>
+					)
+					: (
+						<div class="grid grid-cols-4 gap-4 p-4 mb-18">
+							{files.value.map((file) => (
+								<File key={file.Name} file={file} />
+							))}
+						</div>
+					)
+				)}
+
+		</>
+	);
+});
+
+export const head: DocumentHead = {
+	title: "Welcome to Qwik",
+	meta: [
+		{
+			name: "description",
+			content: "Qwik site description",
+		},
+	],
+};
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index b807745..1858e14 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -1,64 +1,18 @@
-import { component$, useVisibleTask$ } from "@builder.io/qwik";
-import type { DocumentHead } from "@builder.io/qwik-city";
-import Controlbar from "~/components/Controlbar";
-import File from "~/components/File";
-import { SolarUploadLinear, SvgSpinnersBarsRotateFade } from "~/components/Icons";
-import { useNanostore$ } from "~/hooks/nanostores";
-import { api } from "~/lib/api";
+import { component$ } from "@builder.io/qwik";
+import { routeLoader$ } from "@builder.io/qwik-city";
 import { OAUTH_LINK } from "~/lib/constants";
-import { areFilesLoaded, dashboardFiles } from "~/lib/stores";
-import { StereoFile } from "~/lib/types";
 
-// TODO: move this to dashboard/index.tsx
+export const useAuthCheck = routeLoader$(({ cookie, redirect: r }) => {
+  const jwt = cookie.get("jwt");
+  if (!jwt) return {};
 
-export default component$(() => {
-	const files = useNanostore$<StereoFile[]>(dashboardFiles);
-	const loaded = useNanostore$<boolean>(areFilesLoaded);
-
-	useVisibleTask$(async () => {
-		loaded.value = false;
-		files.value = await api.list();
-		console.log("Files loaded:", files.value);
-		loaded.value = true;
-	});
-
-	return (
-		<>
-			<Controlbar />
-			<a href={OAUTH_LINK}>oauth</a>
-				{!loaded.value ? (
-					<div class="absolute w-full h-screen flex justify-center items-center flex-col">
-						<p class="text-gray-500 text-8xl font-bold"><SvgSpinnersBarsRotateFade /></p>
-						<p class="text-gray-700 text-2xl font-light italic">loading your files...</p>
-						<span class="text-gray-700 text-lg font-light flex gap-[0.5ch] items-center">please wait <span class="animate-spin">⏳</span></span>
-					</div>
-				) : (
-					files.value.length === 0 ? (
-						<div class="absolute w-full h-screen flex justify-center items-center flex-col">
-							<p class="text-gray-500 text-8xl font-bold">{"┻━┻︵ \\(°□°)/ ︵ ┻━┻"}</p>
-							<p class="text-gray-700 text-2xl font-light italic">you haven't uploaded any files yet!</p>
-							<span class="text-gray-700 text-lg font-light flex gap-[0.5ch] items-center">click the <span><SolarUploadLinear /></span> button to get started</span>
-						</div>
-					)
-					: (
-						<div class="grid grid-cols-4 gap-4 p-4 mb-18">
-							{files.value.map((file) => (
-								<File key={file.Name} file={file} />
-							))}
-						</div>
-					)
-				)}
-
-		</>
-	);
+  throw r(302, "/dashboard");
 });
 
-export const head: DocumentHead = {
-	title: "Welcome to Qwik",
-	meta: [
-		{
-			name: "description",
-			content: "Qwik site description",
-		},
-	],
-};
+export default component$(() => {
+  return (
+    <div class="flex flex-col items-center justify-center flex-grow">
+        <a href={OAUTH_LINK} class="bg-white text-black p-2 rounded-lg">clik heir 2 auth!!!!!!</a>
+    </div>
+  );
+});
\ No newline at end of file