api proxy & file listing

src/routes/index.tsx

@@ -1,38 +1,53 @@
 import { component$, useSignal, useVisibleTask$ } from "@builder.io/qwik";
 import type { DocumentHead } from "@builder.io/qwik-city";
 import ky from "ky";
+import Controlbar from "~/components/Controlbar";
+import File from "~/components/File";
 import { OAUTH_LINK } from "~/lib/constants";
+import { StereoFile } from "~/lib/types";
+
+// TODO: move this to dashboard/index.tsx
 
 export default component$(() => {
-  const files = useSignal<any[]>([]);
-  
-  useVisibleTask$(async () => {
-    const res: any[] | undefined = await ky.get("/api/list", { headers: { Authorization: `Bearer ${localStorage.getItem("token")}` } })
-      .json();
-    console.log(res);
-    files.value = res!;
-  })
+	const files = useSignal<StereoFile[]>([]);
+	const loaded = useSignal(false);
+	useVisibleTask$(async () => {
+		const res: StereoFile[] | undefined
+		= await ky.get("/api/list", { 
+			headers: {
+				Authorization: `Bearer ${localStorage.getItem("token")}`
+			}
+		}).json();
 
-  return (
-    <>
-      <a href={OAUTH_LINK}>oauth</a>
-      {files.value.map((file) => (
-        <div key={file.ID}>
-          <h2>Owner: {file.Owner}</h2>
-          <p>File ID: {file.ID}</p>
-          <p>Created: {new Date(file.CreatedAt).toLocaleString()}</p>
-        </div>
-      ))}
-    </>
-  );
+		files.value = res!;
+		loaded.value = true;
+	})
+
+	return (
+		<>
+			<Controlbar />
+			<a href={OAUTH_LINK}>oauth</a>
+
+			<div class="grid grid-cols-3 gap-4 p-4">
+				{/* TODO: make ts better :broken_heart: */}
+				{!loaded.value ? <p>Loading...</p> : (
+					files.value.length === 0 ? ( <p> no files found fr </p> )
+					: files.value.map((file) => (
+						<File key={file.ID} file={file} />
+					))
+				)}
+			
+			</div>
+		</>
+	);
 });
 
 export const head: DocumentHead = {
-  title: "Welcome to Qwik",
-  meta: [
-    {
-      name: "description",
-      content: "Qwik site description",
-    },
-  ],
+	title: "Welcome to Qwik",
+	meta: [
+		{
+			name: "description",
+			content: "Qwik site description",
+		},
+	],
 };