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

refactor: simplify file sorting logic

Browse source
This commit is contained in:
grngxd 2025-08-01 11:01:58 +01:00
parent ae74906217
commit 3905155ab7
2 changed files with 15 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/dashboard/Actionbar.tsx
View file

@ -32,7 +32,8 @@ export default component$(() => {
); );
input.value = ""; input.value = "";
files.value = [...files.value, ...metas].sort((a, b) => new Date(b.CreatedAt).getTime() - new Date(a.CreatedAt).getTime()); //files.value = [...files.value, ...metas].sort((a, b) => new Date(b.CreatedAt).getTime() - new Date(a.CreatedAt).getTime());
files.value = [...files.value, ...metas]
} }
}); });
@ -73,6 +74,7 @@ export default component$(() => {
<input <input
ref={fileInputRef} ref={fileInputRef}
type="file" type="file"
multiple
class="hidden" class="hidden"
onChange$={handleFileChange} onChange$={handleFileChange}
/> />

20
src/routes/dashboard/index.tsx
View file

@ -1,6 +1,6 @@
/* eslint-disable qwik/jsx-img */ /* eslint-disable qwik/jsx-img */
/* eslint-disable qwik/no-use-visible-task */ /* eslint-disable qwik/no-use-visible-task */
import { component$, Signal, useSignal, useTask$, useVisibleTask$ } from "@builder.io/qwik"; import { component$, Signal, useComputed$, useSignal, useTask$, useVisibleTask$ } from "@builder.io/qwik";
import { routeLoader$, type DocumentHead } from "@builder.io/qwik-city"; import { routeLoader$, type DocumentHead } from "@builder.io/qwik-city";
import Actionbar from "~/components/dashboard/Actionbar"; import Actionbar from "~/components/dashboard/Actionbar";
import Settings from "~/components/dashboard/Settings"; import Settings from "~/components/dashboard/Settings";
@ -60,7 +60,7 @@ const Files = component$(() => {
{fileType.value === "image" && ( {fileType.value === "image" && (
<div <div
style={{ style={{
aspectRatio: file.Width && file.Height ? `${file.Width} / ${file.Height}` : "16 / 9", aspectRatio: (file.Width && file.Height) ? `${file.Width} / ${file.Height}` : "16 / 9",
width: "100%", width: "100%",
position: "relative", position: "relative",
overflow: "hidden", overflow: "hidden",
@ -129,6 +129,9 @@ const Files = component$(() => {
const sentinel = useSignal<HTMLDivElement>(); const sentinel = useSignal<HTMLDivElement>();
const files = useNanostore$<StereoFile[]>(loadedFiles, []) const files = useNanostore$<StereoFile[]>(loadedFiles, [])
const sortedFiles = useComputed$(() => {
return files.value.slice().sort((a, b) => new Date(b.CreatedAt).getTime() - new Date(a.CreatedAt).getTime());
})
const page = useSignal(1); const page = useSignal(1);
// TODO: make it load enough images to fill the viewport instead // TODO: make it load enough images to fill the viewport instead
@ -152,8 +155,9 @@ const Files = component$(() => {
hasMore.value = false; hasMore.value = false;
if (sentinel.value) observer.unobserve(sentinel.value); if (sentinel.value) observer.unobserve(sentinel.value);
} else { } else {
files.value = [...files.value, ...newFiles].sort((a, b) => new Date(b.CreatedAt).getTime() - new Date(a.CreatedAt).getTime()); //files.value = [...files.value, ...newFiles].sort((a, b) => new Date(b.CreatedAt).getTime() - new Date(a.CreatedAt).getTime());
page.value++; files.value = [...files.value, ...newFiles]
page.value++;
} }
loadingMore.value = false; loadingMore.value = false;
}, 50)(); }, 50)();
@ -171,25 +175,25 @@ const Files = component$(() => {
<div class="px-2 mb-6 flex-grow overflow-y-auto mask-clip-content rounded-3xl"> <div class="px-2 mb-6 flex-grow overflow-y-auto mask-clip-content rounded-3xl">
<div class="w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2 space-y-2 relative"> <div class="w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2 space-y-2 relative">
<div> <div>
{files.value.filter((_, index) => index % 4 === 0).map((file) => ( {sortedFiles.value.filter((_, index) => index % 4 === 0).map((file) => (
<File key={file.ID} file={file} /> <File key={file.ID} file={file} />
))} ))}
</div> </div>
<div> <div>
{files.value.filter((_, index) => index % 4 === 1).map((file) => ( {sortedFiles.value.filter((_, index) => index % 4 === 1).map((file) => (
<File key={file.ID} file={file} /> <File key={file.ID} file={file} />
))} ))}
</div> </div>
<div> <div>
{files.value.filter((_, index) => index % 4 === 2).map((file) => ( {sortedFiles.value.filter((_, index) => index % 4 === 2).map((file) => (
<File key={file.ID} file={file} /> <File key={file.ID} file={file} />
))} ))}
</div> </div>
<div> <div>
{files.value.filter((_, index) => index % 4 === 3).map((file) => ( {sortedFiles.value.filter((_, index) => index % 4 === 3).map((file) => (
<File key={file.ID} file={file} /> <File key={file.ID} file={file} />
))} ))}
</div> </div>