api proxy & file listing

src/components/Controlbar.tsx

@@ -0,0 +1,10 @@
+import { component$ } from "@builder.io/qwik";
+
+// TODO: add upload button and other stuff fr
+export default component$(() => {
+    return (
+        <div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 bg-red-400 w-1/4 p-4 rounded-lg flex items-center justify-center">
+            hi
+        </div>
+    )
+})

src/components/File.tsx

@@ -0,0 +1,15 @@
+import { component$ } from "@builder.io/qwik";
+import { StereoFile } from "~/lib/types";
+
+export default component$(({ file }: { file: StereoFile }) => {
+    return (
+        <div key={file.ID}>
+            <h2>Owner: {file.Owner}</h2>
+            <p>File ID: {file.ID}</p>
+            <p>Created: {new Date(file.CreatedAt).toLocaleString()}</p>
+            { file.Base64 && (file.ID.endsWith(".png") || file.ID.endsWith(".jpg") || file.ID.endsWith(".jpeg")) && (
+                <img src={`data:image/png;base64,${file.Base64}`} alt="Stereo File" class="w-full h-auto" />
+            )}
+        </div>
+    )
+})

src/lib/types.ts

@@ -0,0 +1,7 @@
+export type StereoFile = {
+    ID: string;
+    Path: string;
+    Owner: string;
+    CreatedAt: string;
+    Base64: string;
+}

src/routes/api/[path]/index.tsx

@@ -1,12 +1,26 @@
-import type { RequestHandler } from '@builder.io/qwik-city';
-import ky from 'ky';
+import type { RequestEvent, RequestHandler } from '@builder.io/qwik-city';
 
-export const onGet: RequestHandler = async ({ send, pathname, request }) => {
-  const res = await ky.get(`http://localhost:8081${pathname}`, {
+const proxy = async ({ send, url, pathname, request }: RequestEvent) => {
+  const targetUrl = new URL(`http://localhost:8081${pathname}`, url);
+  const headers = new Headers(request.headers);
+
+  const backendResponse = await fetch(targetUrl, {
     method: request.method,
-    headers: request.headers,
-    body: request.method === 'GET' ? null : request.body,
+    headers,
+    body: request.method !== 'GET' && request.method !== 'HEAD' ? request.body : undefined,
+    redirect: 'manual',
   });
 
-  send(res);
+  console.log(`Proxying ${request.method} request to: ${targetUrl.href}`);
+
+  send(
+    new Response(backendResponse.body, {
+      status: backendResponse.status,
+      statusText: backendResponse.statusText,
+      headers: backendResponse.headers,
+    })
+  );
 };
+
+export const onGet: RequestHandler = proxy;
+export const onPost: RequestHandler = proxy;

src/routes/index.tsx

@@ -1,28 +1,43 @@
 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[]>([]);
-  
+	const files = useSignal<StereoFile[]>([]);
+	const loaded = useSignal(false);
 	useVisibleTask$(async () => {
-    const res: any[] | undefined = await ky.get("/api/list", { headers: { Authorization: `Bearer ${localStorage.getItem("token")}` } })
-      .json();
-    console.log(res);
+		const res: StereoFile[] | undefined
+		= await ky.get("/api/list", { 
+			headers: {
+				Authorization: `Bearer ${localStorage.getItem("token")}`
+			}
+		}).json();
+
 		files.value = res!;
+		loaded.value = true;
 	})
 
 	return (
 		<>
+			<Controlbar />
 			<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 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>
-      ))}
 		</>
 	);
 });