diff --git a/bun.lock b/bun.lock index a5363c1..0f6eaba 100644 --- a/bun.lock +++ b/bun.lock @@ -5,7 +5,6 @@ "name": "my-qwik-empty-starter", "dependencies": { "ky": "^1.8.1", - "nanostores": "^1.0.1", }, "devDependencies": { "@builder.io/qwik": "^1.14.1", @@ -752,8 +751,6 @@ "nanoid": ["nanoid@3.3.11", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="], - "nanostores": ["nanostores@1.0.1", "", {}, "sha512-kNZ9xnoJYKg/AfxjrVL4SS0fKX++4awQReGqWnwTRHxeHGZ1FJFVgTqr/eMrNQdp0Tz7M7tG/TDaX8QfHDwVCw=="], - "natural-compare": ["natural-compare@1.4.0", "", {}, "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw=="], "nth-check": ["nth-check@2.1.1", "", { "dependencies": { "boolbase": "^1.0.0" } }, "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w=="], diff --git a/package.json b/package.json index e437461..4783e19 100644 --- a/package.json +++ b/package.json @@ -42,7 +42,6 @@ "vite-tsconfig-paths": "^4.2.1" }, "dependencies": { - "ky": "^1.8.1", - "nanostores": "^1.0.1" + "ky": "^1.8.1" } } diff --git a/src/components/Controlbar.tsx b/src/components/Controlbar.tsx index 6988740..b665482 100644 --- a/src/components/Controlbar.tsx +++ b/src/components/Controlbar.tsx @@ -1,57 +1,10 @@ -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 { StereoFile } from "~/lib/types"; -import { SolarUploadLinear } from "./Icons"; +import { component$ } from "@builder.io/qwik"; +// TODO: add upload button and other stuff fr export default component$(() => { - const files = useNanostore$(DashboardFiles); - const fileInputRef = useSignal(); - const uploadingFile = useSignal | undefined>(); - const now = useSignal(new Date()); - - useVisibleTask$(() => { - const interval = setInterval(() => { - now.value = new Date(); - }, 500); - return () => clearInterval(interval); - }); - - const uploadFile = $(async () => { - if (!uploadingFile.value) { - console.error("No file selected for upload."); - return; - } - - try { - await api.upload(uploadingFile.value as File) - files.value = await api.list(); - } catch (error) { - console.error("Error uploading file:", error); - } - }) return ( -
- { - uploadingFile.value = noSerialize((e.target as HTMLInputElement).files![0]); - await uploadFile(); - }} - /> - -
- -
-

{now.value.toLocaleTimeString()}

+
+ hi
) }) \ No newline at end of file diff --git a/src/components/File.tsx b/src/components/File.tsx index 34eabde..714de15 100644 --- a/src/components/File.tsx +++ b/src/components/File.tsx @@ -1,44 +1,15 @@ import { component$ } from "@builder.io/qwik"; import { StereoFile } from "~/lib/types"; -type FileProps = { - file: StereoFile; -} - -const getBase64Size = (b: string) => { - if (!b) return 0; - const padding = (b.match(/=+$/) || [""])[0].length; - return Math.floor((b.length * 3) / 4) - padding; -}; - -const formatSize = (bytes: number) => { - if (bytes < 1024) return `${bytes} B`; - if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`; - return `${(bytes / (1024 * 1024)).toFixed(2)} MB`; -} - -export default component$(({ file }: FileProps) => { +export default component$(({ file }: { file: StereoFile }) => { return ( -
+
+

Owner: {file.Owner}

+

File ID: {file.ID}

+

Created: {new Date(file.CreatedAt).toLocaleString()}

{ file.Base64 && (file.ID.endsWith(".png") || file.ID.endsWith(".jpg") || file.ID.endsWith(".jpeg")) && ( - {file.ID} + Stereo File )} -
-

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

-
- {formatSize(getBase64Size(file.Base64))} - • -

Uploaded on {new Date(file.CreatedAt).toLocaleDateString()}

-
-
) }) \ No newline at end of file diff --git a/src/components/Icons.tsx b/src/components/Icons.tsx deleted file mode 100644 index 8bc6dc0..0000000 --- a/src/components/Icons.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import { QwikIntrinsicElements } from "@builder.io/qwik"; - -export function SolarUploadLinear(props: QwikIntrinsicElements['svg'], key: string) { - return ( - - ) -} \ No newline at end of file diff --git a/src/hooks/nanostores.ts b/src/hooks/nanostores.ts deleted file mode 100644 index 3896ec4..0000000 --- a/src/hooks/nanostores.ts +++ /dev/null @@ -1,67 +0,0 @@ -import { - implicit$FirstArg, - noSerialize, - NoSerialize, - QRL, - Signal, - useSignal, - useTask$, - useVisibleTask$, -} from "@builder.io/qwik"; -import { Atom, WritableAtom } from "nanostores"; - -function writeable(store: Atom | WritableAtom): store is WritableAtom { - return typeof (store as WritableAtom).set === 'function'; -} - -export function useNanostoreQrl(qrl: QRL | Atom>): Signal { - const signal = useSignal(undefined); - const storeSignal = useSignal | Atom> | undefined>(undefined); - - useTask$(async ({ track }) => { - let store: WritableAtom | Atom | undefined = storeSignal.value; - - if (!store) { - const modified = await qrl.resolve(); - storeSignal.value = noSerialize(modified); - store = modified; - } - - if (signal.value === undefined && store.value !== undefined) { - signal.value = store.value; - } - - const v = track(signal); - - if (writeable(store) && v !== undefined && store.value !== v) { - store.set(v); - } - }); - - // eslint-disable-next-line qwik/no-use-visible-task - useVisibleTask$(async ({ cleanup }) => { - let store: WritableAtom | Atom | undefined = storeSignal.value; - - if (!store) { - const modified = await qrl.resolve(); - storeSignal.value = noSerialize(modified); - store = modified; - } - - if (store.value !== undefined && signal.value !== store.value) { - signal.value = store.value; - } - - const unsub = store.subscribe((value) => { - if (signal.value !== value) { - signal.value = value; - } - }); - - cleanup(unsub); - }); - - return signal as Signal; -} - -export const useNanostore$ = implicit$FirstArg(useNanostoreQrl); \ No newline at end of file diff --git a/src/lib/stores.ts b/src/lib/stores.ts deleted file mode 100644 index dc9c0b3..0000000 --- a/src/lib/stores.ts +++ /dev/null @@ -1,4 +0,0 @@ -import { atom } from "nanostores"; -import { StereoFile } from "./types"; - -export const DashboardFiles = atom([]); \ No newline at end of file diff --git a/src/routes/index.tsx b/src/routes/index.tsx index 5ad3524..3188d33 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -1,32 +1,57 @@ -import { component$, useSignal, useVisibleTask$ } from "@builder.io/qwik"; +import { $, component$, noSerialize, NoSerialize, useSignal, useVisibleTask$ } from "@builder.io/qwik"; import type { DocumentHead } from "@builder.io/qwik-city"; import Controlbar from "~/components/Controlbar"; import File from "~/components/File"; -import { useNanostore$ } from "~/hooks/nanostores"; import { api } from "~/lib/api"; import { OAUTH_LINK } from "~/lib/constants"; -import { DashboardFiles } from "~/lib/stores"; import { StereoFile } from "~/lib/types"; // TODO: move this to dashboard/index.tsx export default component$(() => { - const files = useNanostore$(DashboardFiles); + const files = useSignal([]); const loaded = useSignal(false); + const uploadingFile = useSignal | undefined>(); + useVisibleTask$(async () => { loaded.value = false; files.value = await api.list(); - console.log("Files loaded:", files.value); loaded.value = true; - }); + }) + + const uploadFile = $( + async () => { + if (!uploadingFile.value) { + console.error("No file selected for upload."); + return; + } + + try { + await api.upload(uploadingFile.value as File) + files.value = await api.list(); + } catch (error) { + console.error("Error uploading file:", error); + } + } + ) return ( <> oauth + uploadingFile.value = noSerialize((e.target as HTMLInputElement).files![0])} + type="file" + /> -
+ + +
{/* TODO: make ts better :broken_heart: */} {!loaded.value ?

Loading...

: ( files.value.length === 0 ? (

no files found fr

)