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 { 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
|
||||||
|
|||||||
@ -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,100 +52,102 @@ 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 (
|
||||||
<Show when={list()} fallback="List could not be found">
|
<Suspense>
|
||||||
{(l) => (
|
<Show when={list()} fallback="List could not be found">
|
||||||
<div class="w-full h-full bg-white rounded-lg shadow-sm border border-neutral-200 overflow-hidden">
|
{(l) => (
|
||||||
<div class="overflow-x-auto overflow-y-auto h-full">
|
<div class="w-full h-full bg-white rounded-lg shadow-sm border border-neutral-200 overflow-hidden">
|
||||||
<table class="w-full min-w-full">
|
<div class="overflow-x-auto overflow-y-auto h-full">
|
||||||
<thead class="bg-neutral-50 border-b border-neutral-200 sticky top-0 z-10">
|
<table class="w-full min-w-full">
|
||||||
<tr>
|
<thead class="bg-neutral-50 border-b border-neutral-200 sticky top-0 z-10">
|
||||||
<th class="px-6 py-4 text-left text-sm font-semibold text-neutral-900 border-r border-neutral-200 min-w-40">
|
<tr>
|
||||||
Image
|
<th class="px-6 py-4 text-left text-sm font-semibold text-neutral-900 border-r border-neutral-200 min-w-40">
|
||||||
</th>
|
Image
|
||||||
<For each={l().Schema.SchemaItems}>
|
</th>
|
||||||
{(item, index) => (
|
<For each={l().Schema.SchemaItems}>
|
||||||
<th
|
{(item, index) => (
|
||||||
class={`px-6 py-4 text-left text-sm font-semibold text-neutral-900 min-w-32 ${index() <
|
<th
|
||||||
l().Schema.SchemaItems
|
class={`px-6 py-4 text-left text-sm font-semibold text-neutral-900 min-w-32 ${index() <
|
||||||
.length -
|
l().Schema.SchemaItems
|
||||||
1
|
.length -
|
||||||
? "border-r border-neutral-200"
|
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}
|
<td class="px-6 py-4 border-r border-neutral-200">
|
||||||
</th>
|
<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>
|
</For>
|
||||||
</tr>
|
</tbody>
|
||||||
</thead>
|
</table>
|
||||||
<tbody class="divide-y divide-neutral-200">
|
<Show when={l().Images.length === 0}>
|
||||||
<For each={l().Images}>
|
<div class="px-6 py-12 text-center text-neutral-500">
|
||||||
{(image, rowIndex) => (
|
<p class="text-lg">
|
||||||
<tr
|
No images in this list yet
|
||||||
class={`hover:bg-neutral-50 transition-colors ${rowIndex() % 2 === 0
|
</p>
|
||||||
? "bg-white"
|
<p class="text-sm mt-1">
|
||||||
: "bg-neutral-25"
|
Images will appear here once added to the
|
||||||
}`}
|
list
|
||||||
>
|
</p>
|
||||||
<td class="px-6 py-4 border-r border-neutral-200">
|
</div>
|
||||||
<div class="flex items-center gap-2">
|
</Show>
|
||||||
<a
|
</div>
|
||||||
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>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)}
|
||||||
)}
|
</Show>
|
||||||
</Show>
|
</Suspense>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user