api client

src/components/Controlbar.tsx

@@ -3,7 +3,7 @@ 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">
+        <div class="absolute fixed 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/lib/api.ts

@@ -0,0 +1,25 @@
+import ky from 'ky';
+import { StereoFile } from './types';
+
+export const apiClient = ky.create({
+  prefixUrl: '/api',
+  hooks: {
+    beforeRequest: [
+      request => {
+        const token = localStorage.getItem('token');
+        if (token) {
+          request.headers.set('Authorization', `Bearer ${token}`);
+        }
+      }
+    ]
+  }
+});
+// TODO: make wrapper for apiclient fr
+export const api = {
+    list: async () => await apiClient.get('list').json<StereoFile[]>(),
+    upload: async (file: File) => {
+        const formData = new FormData();
+        formData.append('file', file);
+        return await apiClient.post('upload', { body: formData });
+    }
+}

src/routes/index.tsx

@@ -1,8 +1,8 @@
-import { $, component$, noSerialize, NoSerialize, useSignal, useTask$, useVisibleTask$ } from "@builder.io/qwik";
+import { $, component$, noSerialize, NoSerialize, 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 { api } from "~/lib/api";
 import { OAUTH_LINK } from "~/lib/constants";
 import { StereoFile } from "~/lib/types";
 
@@ -15,22 +15,11 @@ export default component$(() => {
 	const uploadingFile = useSignal<NoSerialize<File> | undefined>();
 
 	useVisibleTask$(async () => {
-		const res: StereoFile[] | undefined
-		= await ky.get("/api/list", { 
-			headers: {
-				Authorization: `Bearer ${localStorage.getItem("token")}`
-			}
-		}).json();
-
-		files.value = res!;
+		loaded.value = false;
+		files.value = await api.list();
 		loaded.value = true;
 	})
 
-	useTask$(({ track }) => {
-		track(() => uploadingFile.value);
-		console.log("File input changed:", uploadingFile.value);
-	});
-
 	const uploadFile = $(
 		async () => {
 			if (!uploadingFile.value) {
@@ -38,33 +27,12 @@ export default component$(() => {
 				return;
 			}
 
-			const formData = new FormData();
-			formData.append("file", uploadingFile.value as File);
-
 			try {
-				const response = await ky.post("/api/upload", {
-					headers: {
-						Authorization: `Bearer ${localStorage.getItem("token")}`
-					},
-					body: formData
-				});
-
-				if (!response.ok) {
-					throw new Error(`HTTP error! status: ${response.status}`);
-				}
-
-				const res: StereoFile = await response.json();
-				files.value.push(res);
-				
-				loaded.value = false;
-				files.value = await ky.get("/api/list", {
-					headers: {
-						Authorization: `Bearer ${localStorage.getItem("token")}`
-					}
-				}).json();
-				loaded.value = true;
-				
- 			} catch (e) { console.error(e) }
+				await api.upload(uploadingFile.value as File)
+				files.value = await api.list();
+			} catch (error) {
+				console.error("Error uploading file:", error);
+			}
 		}
 	)
 
@@ -73,11 +41,7 @@ export default component$(() => {
 			<Controlbar />
 			<a href={OAUTH_LINK}>oauth</a>
 			<input
-				onChange$={(e: Event) => {
-					const target = e.target as HTMLInputElement;
-					console.log("File input changed:", target.files![0]);
-					uploadingFile.value = noSerialize(target.files![0]);
-				}}
+				onChange$={(e: Event) => uploadingFile.value = noSerialize((e.target as HTMLInputElement).files![0])}
 				type="file"
 			/>