stereo.cat/frontend
2
0
Fork 0
Code Issues 5 Pull requests Projects 1 Releases Packages Wiki Activity Actions

refactor to dashboard!

Browse source
This commit is contained in:
grngxd 2025-06-10 00:31:23 +01:00
parent 98a582c8d4
commit 1d48ab8256
3 changed files with 81 additions and 59 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/components/Controlbar.tsx
View file

@ -50,6 +50,7 @@ export default component$(() => {
/> />
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
{/* TODO: replace this button with a modal with options like settings log out etc */}
<button <button
class="duration-100 hover:bg-white text-white hover:text-black p-2 rounded-lg" class="duration-100 hover:bg-white text-white hover:text-black p-2 rounded-lg"
onClick$={async () => { onClick$={async () => {

67
src/routes/dashboard/index.tsx Normal file
View file

@ -0,0 +1,67 @@
import { $, component$, useOnDocument } from "@builder.io/qwik";
import { routeLoader$, 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 { areFilesLoaded, dashboardFiles } from "~/lib/stores";
import { StereoFile } from "~/lib/types";
export const useAuthCheck = routeLoader$(({ cookie, redirect: r }) => {
const jwt = cookie.get("jwt");
if (jwt) return {};
throw r(302, "/");
});
export default component$(() => {
const files = useNanostore$<StereoFile[]>(dashboardFiles);
const loaded = useNanostore$<boolean>(areFilesLoaded);
useOnDocument("DOMContentLoaded", $(async () => {
loaded.value = false;
files.value = await api.list();
console.log("Files loaded:", files.value);
loaded.value = true;
}));
return (
<>
<Controlbar />
{!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.Name} file={file} />
))}
</div>
)
)}
</>
);
});
export const head: DocumentHead = {
title: "Welcome to Qwik",
meta: [
{
name: "description",
content: "Qwik site description",
},
],
};

66
src/routes/index.tsx
View file

@ -1,64 +1,18 @@
import { component$, useVisibleTask$ } from "@builder.io/qwik"; import { component$ } from "@builder.io/qwik";
import type { DocumentHead } from "@builder.io/qwik-city"; import { routeLoader$ } 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 { OAUTH_LINK } from "~/lib/constants";
import { areFilesLoaded, dashboardFiles } from "~/lib/stores";
import { StereoFile } from "~/lib/types";
// TODO: move this to dashboard/index.tsx export const useAuthCheck = routeLoader$(({ cookie, redirect: r }) => {
const jwt = cookie.get("jwt");
if (!jwt) return {};
throw r(302, "/dashboard");
});
export default component$(() => { export default component$(() => {
const files = useNanostore$<StereoFile[]>(dashboardFiles);
const loaded = useNanostore$<boolean>(areFilesLoaded);
useVisibleTask$(async () => {
loaded.value = false;
files.value = await api.list();
console.log("Files loaded:", files.value);
loaded.value = true;
});
return ( return (
<> <div class="flex flex-col items-center justify-center flex-grow">
<Controlbar /> <a href={OAUTH_LINK} class="bg-white text-black p-2 rounded-lg">clik heir 2 auth!!!!!!</a>
<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> </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.Name} file={file} />
))}
</div>
)
)}
</>
); );
}); });
export const head: DocumentHead = {
title: "Welcome to Qwik",
meta: [
{
name: "description",
content: "Qwik site description",
},
],
};