64 lines
2.2 KiB
TypeScript
64 lines
2.2 KiB
TypeScript
import { component$, 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 { 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 { StereoFile } from "~/lib/types";
|
|
|
|
// TODO: move this to dashboard/index.tsx
|
|
|
|
export default component$(() => {
|
|
const files = useNanostore$<StereoFile[]>(DashboardFiles);
|
|
const loaded = useSignal(false);
|
|
|
|
useVisibleTask$(async () => {
|
|
loaded.value = false;
|
|
files.value = await api.list();
|
|
console.log("Files loaded:", files.value);
|
|
loaded.value = true;
|
|
});
|
|
|
|
return (
|
|
<>
|
|
<Controlbar />
|
|
<a href={OAUTH_LINK}>oauth</a>
|
|
{!loaded.value ? (
|
|
<div class="absolute w-full h-screen flex justify-center items-center flex-col">
|
|
<p class="text-gray-500 text-8xl font-bold"><SvgSpinnersBarsRotateFade /></p>
|
|
<p class="text-gray-700 text-2xl font-light italic">loading your files...</p>
|
|
<span class="text-gray-700 text-lg font-light flex gap-[0.5ch] items-center">please wait <span class="animate-spin">⏳</span></span>
|
|
</div>
|
|
) : (
|
|
files.value.length === 0 ? (
|
|
<div class="absolute w-full h-screen flex justify-center items-center flex-col">
|
|
<p class="text-gray-500 text-8xl font-bold">{"┻━┻︵ \\(°□°)/ ︵ ┻━┻"}</p>
|
|
<p class="text-gray-700 text-2xl font-light italic">you haven't uploaded any files yet!</p>
|
|
<span class="text-gray-700 text-lg font-light flex gap-[0.5ch] items-center">click the <span><SolarUploadLinear /></span> button to get started</span>
|
|
</div>
|
|
)
|
|
: (
|
|
<div class="grid grid-cols-4 gap-4 p-4 mb-18">
|
|
{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",
|
|
},
|
|
],
|
|
};
|