From 98a582c8d430b3785c40ef31417678f45bd44600 Mon Sep 17 00:00:00 2001 From: grngxd <36968271+grngxd@users.noreply.github.com> Date: Tue, 10 Jun 2025 00:10:59 +0100 Subject: [PATCH] refactor: update file handling and improve component structure - fix api client - make controlbar look better - fix api client again --- public/logo.svg | 3 ++ src/components/Controlbar.tsx | 33 +++++++++++++++---- src/components/File.tsx | 24 +++++++------- src/components/StereoLogo.tsx | 9 +++++ src/hooks/nanostores.ts | 2 +- src/lib/api.ts | 7 ++-- src/lib/stores.ts | 3 +- src/lib/types.ts | 2 +- .../api/{[path] => [...path]}/index.tsx | 0 src/routes/index.tsx | 10 +++--- 10 files changed, 62 insertions(+), 31 deletions(-) create mode 100644 public/logo.svg create mode 100644 src/components/StereoLogo.tsx rename src/routes/api/{[path] => [...path]}/index.tsx (100%) diff --git a/public/logo.svg b/public/logo.svg new file mode 100644 index 0000000..699991b --- /dev/null +++ b/public/logo.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/components/Controlbar.tsx b/src/components/Controlbar.tsx index 0f84a06..ba5e7d9 100644 --- a/src/components/Controlbar.tsx +++ b/src/components/Controlbar.tsx @@ -1,12 +1,14 @@ import { $, component$, noSerialize, NoSerialize, useSignal, useVisibleTask$ } from "@builder.io/qwik"; import { useNanostore$ } from "~/hooks/nanostores"; import { api } from "~/lib/api"; -import { DashboardFiles } from "~/lib/stores"; +import { areFilesLoaded, dashboardFiles } from "~/lib/stores"; import { StereoFile } from "~/lib/types"; -import { SolarUploadLinear } from "./Icons"; +import { SolarUploadLinear, SvgSpinnersBarsRotateFade } from "./Icons"; +import StereoLogo from "./StereoLogo"; export default component$(() => { - const files = useNanostore$(DashboardFiles); + const loaded = useNanostore$(areFilesLoaded); + const files = useNanostore$(dashboardFiles); const fileInputRef = useSignal(); const uploadingFile = useSignal | undefined>(); const now = useSignal(new Date()); @@ -28,7 +30,7 @@ export default component$(() => { const unsafe = uploadingFile.value as File; const name = unsafe.name.replace(/[^a-zA-Z0-9_.-]/g, "_"); const f = new File([unsafe], name, { type: unsafe.type }); - + await api.upload(f); files.value = await api.list(); } catch (error) { @@ -36,7 +38,7 @@ export default component$(() => { } }) return ( -
+
{ }} /> -
+
+ + +

|

+ @@ -105,7 +105,7 @@ export default component$(({ file }: FileProps) => {

- { file.ID.split("_").slice(1).join("_") || "Untitled" } + { file.Name || "Untitled" }

{ formatSize(file.Size) } diff --git a/src/components/StereoLogo.tsx b/src/components/StereoLogo.tsx new file mode 100644 index 0000000..892ea95 --- /dev/null +++ b/src/components/StereoLogo.tsx @@ -0,0 +1,9 @@ +import { component$, QwikIntrinsicElements } from "@builder.io/qwik"; + +export default component$((props: QwikIntrinsicElements['svg']) => { + return ( + + + + ) +}) \ No newline at end of file diff --git a/src/hooks/nanostores.ts b/src/hooks/nanostores.ts index 3896ec4..4a91166 100644 --- a/src/hooks/nanostores.ts +++ b/src/hooks/nanostores.ts @@ -10,7 +10,7 @@ import { } from "@builder.io/qwik"; import { Atom, WritableAtom } from "nanostores"; -function writeable(store: Atom | WritableAtom): store is WritableAtom { +function writeable(store: Atom | WritableAtom): store is WritableAtom { return typeof (store as WritableAtom).set === 'function'; } diff --git a/src/lib/api.ts b/src/lib/api.ts index 5a0eafb..b25f5dc 100644 --- a/src/lib/api.ts +++ b/src/lib/api.ts @@ -14,10 +14,7 @@ export const api = { formData.append('file', file); return await client.post('upload', { body: formData }); }, - delete: async (file_id: string) => { - console.log("Deleting file with ID:", file_id); - return await client.delete(`delete`, { - json: { file_id } - }).json(); + delete: async (uid: string, file: string) => { + return await client.delete(`${uid}/${file}`).json(); }, } \ No newline at end of file diff --git a/src/lib/stores.ts b/src/lib/stores.ts index dc9c0b3..444b668 100644 --- a/src/lib/stores.ts +++ b/src/lib/stores.ts @@ -1,4 +1,5 @@ import { atom } from "nanostores"; import { StereoFile } from "./types"; -export const DashboardFiles = atom([]); \ No newline at end of file +export const areFilesLoaded = atom(false); +export const dashboardFiles = atom([]); \ No newline at end of file diff --git a/src/lib/types.ts b/src/lib/types.ts index 090fbd5..63354f2 100644 --- a/src/lib/types.ts +++ b/src/lib/types.ts @@ -1,5 +1,5 @@ export type StereoFile = { - ID: string; + Name: string; Owner: string; CreatedAt: string; Size: number; diff --git a/src/routes/api/[path]/index.tsx b/src/routes/api/[...path]/index.tsx similarity index 100% rename from src/routes/api/[path]/index.tsx rename to src/routes/api/[...path]/index.tsx diff --git a/src/routes/index.tsx b/src/routes/index.tsx index 9705b84..b807745 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -1,4 +1,4 @@ -import { component$, useSignal, useVisibleTask$ } from "@builder.io/qwik"; +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"; @@ -6,14 +6,14 @@ import { SolarUploadLinear, SvgSpinnersBarsRotateFade } from "~/components/Icons import { useNanostore$ } from "~/hooks/nanostores"; import { api } from "~/lib/api"; import { OAUTH_LINK } from "~/lib/constants"; -import { DashboardFiles } from "~/lib/stores"; +import { areFilesLoaded, dashboardFiles } from "~/lib/stores"; import { StereoFile } from "~/lib/types"; // TODO: move this to dashboard/index.tsx export default component$(() => { - const files = useNanostore$(DashboardFiles); - const loaded = useSignal(false); + const files = useNanostore$(dashboardFiles); + const loaded = useNanostore$(areFilesLoaded); useVisibleTask$(async () => { loaded.value = false; @@ -43,7 +43,7 @@ export default component$(() => { : (
{files.value.map((file) => ( - + ))}
)