api proxy & file listing

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,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",
+		},
+	],
 };