JohnCosta27/Haystack
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

suspending

Browse Source
This commit is contained in:
John Costa
2025-09-21 15:54:24 +01:00
parent 561064a194
commit f6393c9a59
2 changed files with 95 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/src/components/image/index.tsx
View File

@ -1,4 +1,4 @@
import { Component, createResource, createSignal } from "solid-js";
import { Component, createResource, createSignal, Suspense } from "solid-js";
import { base, getAccessToken } from "../../network";
import { A } from "@solidjs/router";
import { Dialog } from "@kobalte/core";
@ -14,12 +14,12 @@ export const ImageComponent: Component<ImageComponentProps> = (props) => {
const [accessToken] = createResource(getAccessToken);
return (
<>
<Suspense fallback={<></>}>
<div class="relative w-full flex justify-center h-[300px]">
<A href={`/image/${props.ID}`} class="flex w-full">
<img
class="flex w-full object-cover rounded-xl"
src={`${base}/images/${props.ID}?token=${accessToken}`}
src={`${base}/images/${props.ID}?token=${accessToken()}`}
/>
</A>
<button
@ -54,7 +54,7 @@ export const ImageComponent: Component<ImageComponentProps> = (props) => {
</Dialog.Content>
</Dialog.Portal>
</Dialog.Root>
</>
</Suspense>
);
};
@ -64,11 +64,7 @@ export const ImageComponent: Component<ImageComponentProps> = (props) => {
export const ImageComponentFullHeight: Component<ImageComponentProps> = (props) => {
const [isOpen, setIsOpen] = createSignal(false);
// TODO: make sure this is up to date. Put it behind a resource.
const accessToken = localStorage.getItem("access");
if (accessToken == null) {
return <>Ermm... Access token is not set :(</>
}
const [accessToken] = createResource(getAccessToken);
return (
<>
@ -76,7 +72,7 @@ export const ImageComponentFullHeight: Component<ImageComponentProps> = (props)
<A href={`/image/${props.ID}`} class="flex w-full">
<img
class="flex w-full object-cover rounded-xl"
src={`${base}/images/${props.ID}?token=${accessToken}`}
src={`${base}/images/${props.ID}?token=${accessToken()}`}
/>
</A>
<button

8
frontend/src/pages/list/index.tsx
View File

@ -1,6 +1,6 @@
import { useSearchImageContext } from "@contexts/SearchImageContext";
import { useParams } from "@solidjs/router";
import { Component, For, Show, createResource, createSignal } from "solid-js";
import { Component, For, Show, Suspense, createResource, createSignal } from "solid-js";
import { base, getAccessToken } from "../../network";
import { Dialog } from "@kobalte/core";
@ -52,11 +52,12 @@ export const List: Component = () => {
const { lists, onDeleteImageFromStack } = useSearchImageContext();
const [] = createResource(getAccessToken);
const [accessToken] = createResource(getAccessToken);
const list = () => lists().find((l) => l.ID === listId);
return (
<Suspense>
<Show when={list()} fallback="List could not be found">
{(l) => (
<div class="w-full h-full bg-white rounded-lg shadow-sm border border-neutral-200 overflow-hidden">
@ -101,7 +102,7 @@ export const List: Component = () => {
>
<img
class="w-full h-full object-cover rounded-lg"
src={`${base}/images/${image.ImageID}`}
src={`${base}/images/${image.ImageID}?token=${accessToken()}`}
alt="List item"
/>
</a>
@ -147,5 +148,6 @@ export const List: Component = () => {
</div>
)}
</Show>
</Suspense>
);
};