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 = "";
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
ref={fileInputRef}
type="file"
multiple
class="hidden"
onChange$={handleFileChange}
/>

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

@ -1,6 +1,6 @@
/* eslint-disable qwik/jsx-img */
/* 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 Actionbar from "~/components/dashboard/Actionbar";
import Settings from "~/components/dashboard/Settings";
@ -60,7 +60,7 @@ const Files = component$(() => {
{fileType.value === "image" && (
<div
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%",
position: "relative",
overflow: "hidden",
@ -129,6 +129,9 @@ const Files = component$(() => {
const sentinel = useSignal<HTMLDivElement>();
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);
// TODO: make it load enough images to fill the viewport instead
@ -152,7 +155,8 @@ const Files = component$(() => {
hasMore.value = false;
if (sentinel.value) observer.unobserve(sentinel.value);
} 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());
files.value = [...files.value, ...newFiles]
page.value++;
}
loadingMore.value = false;
@ -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="w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2 space-y-2 relative">
<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} />
))}
</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} />
))}
</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} />
))}
</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} />
))}
</div>