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

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

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