suspending
This commit is contained in:
@ -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
|
||||
|
||||
@ -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,100 +52,102 @@ export const List: Component = () => {
|
||||
|
||||
const { lists, onDeleteImageFromStack } = useSearchImageContext();
|
||||
|
||||
const [] = createResource(getAccessToken);
|
||||
const [accessToken] = createResource(getAccessToken);
|
||||
|
||||
const list = () => lists().find((l) => l.ID === listId);
|
||||
|
||||
return (
|
||||
<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">
|
||||
<div class="overflow-x-auto overflow-y-auto h-full">
|
||||
<table class="w-full min-w-full">
|
||||
<thead class="bg-neutral-50 border-b border-neutral-200 sticky top-0 z-10">
|
||||
<tr>
|
||||
<th class="px-6 py-4 text-left text-sm font-semibold text-neutral-900 border-r border-neutral-200 min-w-40">
|
||||
Image
|
||||
</th>
|
||||
<For each={l().Schema.SchemaItems}>
|
||||
{(item, index) => (
|
||||
<th
|
||||
class={`px-6 py-4 text-left text-sm font-semibold text-neutral-900 min-w-32 ${index() <
|
||||
l().Schema.SchemaItems
|
||||
.length -
|
||||
1
|
||||
? "border-r border-neutral-200"
|
||||
: ""
|
||||
<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">
|
||||
<div class="overflow-x-auto overflow-y-auto h-full">
|
||||
<table class="w-full min-w-full">
|
||||
<thead class="bg-neutral-50 border-b border-neutral-200 sticky top-0 z-10">
|
||||
<tr>
|
||||
<th class="px-6 py-4 text-left text-sm font-semibold text-neutral-900 border-r border-neutral-200 min-w-40">
|
||||
Image
|
||||
</th>
|
||||
<For each={l().Schema.SchemaItems}>
|
||||
{(item, index) => (
|
||||
<th
|
||||
class={`px-6 py-4 text-left text-sm font-semibold text-neutral-900 min-w-32 ${index() <
|
||||
l().Schema.SchemaItems
|
||||
.length -
|
||||
1
|
||||
? "border-r border-neutral-200"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
{item.Item}
|
||||
</th>
|
||||
)}
|
||||
</For>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-neutral-200">
|
||||
<For each={l().Images}>
|
||||
{(image, rowIndex) => (
|
||||
<tr
|
||||
class={`hover:bg-neutral-50 transition-colors ${rowIndex() % 2 === 0
|
||||
? "bg-white"
|
||||
: "bg-neutral-25"
|
||||
}`}
|
||||
>
|
||||
{item.Item}
|
||||
</th>
|
||||
<td class="px-6 py-4 border-r border-neutral-200">
|
||||
<div class="flex items-center gap-2">
|
||||
<a
|
||||
href={`/image/${image.ImageID}`}
|
||||
class="w-32 h-24 flex justify-center rounded-lg overflow-hidden"
|
||||
>
|
||||
<img
|
||||
class="w-full h-full object-cover rounded-lg"
|
||||
src={`${base}/images/${image.ImageID}?token=${accessToken()}`}
|
||||
alt="List item"
|
||||
/>
|
||||
</a>
|
||||
<DeleteButton onDelete={() => onDeleteImageFromStack(l().ID, image.ImageID)} />
|
||||
</div>
|
||||
</td>
|
||||
<For each={image.Items}>
|
||||
{(item, colIndex) => (
|
||||
<td
|
||||
class={`px-6 py-4 text-sm text-neutral-700 ${colIndex() <
|
||||
image.Items.length -
|
||||
1
|
||||
? "border-r border-neutral-200"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
class="max-w-xs truncate"
|
||||
title={item.Value}
|
||||
>
|
||||
{item.Value}
|
||||
</div>
|
||||
</td>
|
||||
)}
|
||||
</For>
|
||||
</tr>
|
||||
)}
|
||||
</For>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-neutral-200">
|
||||
<For each={l().Images}>
|
||||
{(image, rowIndex) => (
|
||||
<tr
|
||||
class={`hover:bg-neutral-50 transition-colors ${rowIndex() % 2 === 0
|
||||
? "bg-white"
|
||||
: "bg-neutral-25"
|
||||
}`}
|
||||
>
|
||||
<td class="px-6 py-4 border-r border-neutral-200">
|
||||
<div class="flex items-center gap-2">
|
||||
<a
|
||||
href={`/image/${image.ImageID}`}
|
||||
class="w-32 h-24 flex justify-center rounded-lg overflow-hidden"
|
||||
>
|
||||
<img
|
||||
class="w-full h-full object-cover rounded-lg"
|
||||
src={`${base}/images/${image.ImageID}`}
|
||||
alt="List item"
|
||||
/>
|
||||
</a>
|
||||
<DeleteButton onDelete={() => onDeleteImageFromStack(l().ID, image.ImageID)} />
|
||||
</div>
|
||||
</td>
|
||||
<For each={image.Items}>
|
||||
{(item, colIndex) => (
|
||||
<td
|
||||
class={`px-6 py-4 text-sm text-neutral-700 ${colIndex() <
|
||||
image.Items.length -
|
||||
1
|
||||
? "border-r border-neutral-200"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
class="max-w-xs truncate"
|
||||
title={item.Value}
|
||||
>
|
||||
{item.Value}
|
||||
</div>
|
||||
</td>
|
||||
)}
|
||||
</For>
|
||||
</tr>
|
||||
)}
|
||||
</For>
|
||||
</tbody>
|
||||
</table>
|
||||
<Show when={l().Images.length === 0}>
|
||||
<div class="px-6 py-12 text-center text-neutral-500">
|
||||
<p class="text-lg">
|
||||
No images in this list yet
|
||||
</p>
|
||||
<p class="text-sm mt-1">
|
||||
Images will appear here once added to the
|
||||
list
|
||||
</p>
|
||||
</div>
|
||||
</Show>
|
||||
</tbody>
|
||||
</table>
|
||||
<Show when={l().Images.length === 0}>
|
||||
<div class="px-6 py-12 text-center text-neutral-500">
|
||||
<p class="text-lg">
|
||||
No images in this list yet
|
||||
</p>
|
||||
<p class="text-sm mt-1">
|
||||
Images will appear here once added to the
|
||||
list
|
||||
</p>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Show>
|
||||
)}
|
||||
</Show>
|
||||
</Suspense>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user