Compare commits
2 Commits
3015d7bac2
...
f6393c9a59
| Author | SHA1 | Date | |
|---|---|---|---|
| f6393c9a59 | |||
| 561064a194 |
@ -1,5 +1,5 @@
|
||||
import { Component, createSignal } from "solid-js";
|
||||
import { base } from "../../network";
|
||||
import { Component, createResource, createSignal, Suspense } from "solid-js";
|
||||
import { base, getAccessToken } from "../../network";
|
||||
import { A } from "@solidjs/router";
|
||||
import { Dialog } from "@kobalte/core";
|
||||
|
||||
@ -11,19 +11,15 @@ type ImageComponentProps = {
|
||||
export const ImageComponent: 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 (
|
||||
<>
|
||||
<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
|
||||
@ -58,7 +54,7 @@ export const ImageComponent: Component<ImageComponentProps> = (props) => {
|
||||
</Dialog.Content>
|
||||
</Dialog.Portal>
|
||||
</Dialog.Root>
|
||||
</>
|
||||
</Suspense>
|
||||
);
|
||||
};
|
||||
|
||||
@ -68,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 (
|
||||
<>
|
||||
@ -80,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
|
||||
|
||||
@ -2,154 +2,159 @@ import { InferOutput, safeParse } from "valibot";
|
||||
import { useSearchImageContext } from "./SearchImageContext";
|
||||
import { createStore } from "solid-js/store";
|
||||
import {
|
||||
Component,
|
||||
createContext,
|
||||
createEffect,
|
||||
onCleanup,
|
||||
ParentProps,
|
||||
useContext,
|
||||
Component,
|
||||
createContext,
|
||||
createEffect,
|
||||
createResource,
|
||||
onCleanup,
|
||||
ParentProps,
|
||||
useContext,
|
||||
} from "solid-js";
|
||||
import { base } from "@network/index";
|
||||
import { base, getAccessToken } from "@network/index";
|
||||
import {
|
||||
notificationValidator,
|
||||
processingImagesValidator,
|
||||
processingListValidator,
|
||||
notificationValidator,
|
||||
processingImagesValidator,
|
||||
processingListValidator,
|
||||
} from "@network/notifications";
|
||||
|
||||
type NotificationState = {
|
||||
ProcessingImages: Record<
|
||||
string,
|
||||
InferOutput<typeof processingImagesValidator> | undefined
|
||||
>;
|
||||
ProcessingLists: Record<
|
||||
string,
|
||||
InferOutput<typeof processingListValidator> | undefined
|
||||
>;
|
||||
ProcessingImages: Record<
|
||||
string,
|
||||
InferOutput<typeof processingImagesValidator> | undefined
|
||||
>;
|
||||
ProcessingLists: Record<
|
||||
string,
|
||||
InferOutput<typeof processingListValidator> | undefined
|
||||
>;
|
||||
};
|
||||
|
||||
export const Notifications = (onCompleteImage: () => void) => {
|
||||
const [state, setState] = createStore<NotificationState>({
|
||||
ProcessingImages: {},
|
||||
ProcessingLists: {},
|
||||
});
|
||||
const [state, setState] = createStore<NotificationState>({
|
||||
ProcessingImages: {},
|
||||
ProcessingLists: {},
|
||||
});
|
||||
|
||||
const { processingImages } = useSearchImageContext();
|
||||
const { processingImages } = useSearchImageContext();
|
||||
|
||||
const access = localStorage.getItem("access");
|
||||
if (access == null) {
|
||||
throw new Error("Access token not defined");
|
||||
}
|
||||
const [accessToken] = createResource(getAccessToken);
|
||||
|
||||
const dataEventListener = (e: MessageEvent<unknown>) => {
|
||||
if (typeof e.data !== "string") {
|
||||
console.error("Error type is not string");
|
||||
return;
|
||||
}
|
||||
const dataEventListener = (e: MessageEvent<unknown>) => {
|
||||
if (typeof e.data !== "string") {
|
||||
console.error("Error type is not string");
|
||||
return;
|
||||
}
|
||||
|
||||
let jsonData: object = {};
|
||||
try {
|
||||
jsonData = JSON.parse(e.data);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
return;
|
||||
}
|
||||
let jsonData: object = {};
|
||||
try {
|
||||
jsonData = JSON.parse(e.data);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
return;
|
||||
}
|
||||
|
||||
const notification = safeParse(notificationValidator, jsonData);
|
||||
if (!notification.success) {
|
||||
console.error("Processing image could not be parsed.", e.data);
|
||||
return;
|
||||
}
|
||||
const notification = safeParse(notificationValidator, jsonData);
|
||||
if (!notification.success) {
|
||||
console.error("Processing image could not be parsed.", e.data);
|
||||
return;
|
||||
}
|
||||
|
||||
console.log("SSE: ", notification);
|
||||
console.log("SSE: ", notification);
|
||||
|
||||
if (notification.output.Type === "image") {
|
||||
const { ImageID, Status } = notification.output;
|
||||
if (notification.output.Type === "image") {
|
||||
const { ImageID, Status } = notification.output;
|
||||
|
||||
if (Status === "complete") {
|
||||
setState("ProcessingImages", ImageID, undefined);
|
||||
onCompleteImage();
|
||||
} else {
|
||||
setState("ProcessingImages", ImageID, notification.output);
|
||||
}
|
||||
} else if (notification.output.Type === "list") {
|
||||
const { ListID, Status } = notification.output;
|
||||
if (Status === "complete") {
|
||||
setState("ProcessingImages", ImageID, undefined);
|
||||
onCompleteImage();
|
||||
} else {
|
||||
setState("ProcessingImages", ImageID, notification.output);
|
||||
}
|
||||
} else if (notification.output.Type === "list") {
|
||||
const { ListID, Status } = notification.output;
|
||||
|
||||
if (Status === "complete") {
|
||||
setState("ProcessingLists", ListID, undefined);
|
||||
onCompleteImage();
|
||||
} else {
|
||||
setState("ProcessingLists", ListID, notification.output);
|
||||
}
|
||||
}
|
||||
};
|
||||
if (Status === "complete") {
|
||||
setState("ProcessingLists", ListID, undefined);
|
||||
onCompleteImage();
|
||||
} else {
|
||||
setState("ProcessingLists", ListID, notification.output);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const upsertImageProcessing = (
|
||||
images: NotificationState["ProcessingImages"],
|
||||
) => {
|
||||
setState("ProcessingImages", (currentImages) => ({
|
||||
...currentImages,
|
||||
...images,
|
||||
}));
|
||||
};
|
||||
const upsertImageProcessing = (
|
||||
images: NotificationState["ProcessingImages"],
|
||||
) => {
|
||||
setState("ProcessingImages", (currentImages) => ({
|
||||
...currentImages,
|
||||
...images,
|
||||
}));
|
||||
};
|
||||
|
||||
createEffect(() => {
|
||||
const images = processingImages();
|
||||
if (images == null) {
|
||||
return;
|
||||
}
|
||||
createEffect(() => {
|
||||
const images = processingImages();
|
||||
if (images == null) {
|
||||
return;
|
||||
}
|
||||
|
||||
upsertImageProcessing(
|
||||
Object.fromEntries(
|
||||
images.map((i) => [
|
||||
i.ImageID,
|
||||
{
|
||||
Type: "image",
|
||||
ImageID: i.ImageID,
|
||||
ImageName: i.Image.ImageName,
|
||||
Status: i.Status,
|
||||
},
|
||||
]),
|
||||
),
|
||||
);
|
||||
});
|
||||
upsertImageProcessing(
|
||||
Object.fromEntries(
|
||||
images.map((i) => [
|
||||
i.ImageID,
|
||||
{
|
||||
Type: "image",
|
||||
ImageID: i.ImageID,
|
||||
ImageName: i.Image.ImageName,
|
||||
Status: i.Status,
|
||||
},
|
||||
]),
|
||||
),
|
||||
);
|
||||
});
|
||||
|
||||
const events = new EventSource(`${base}/notifications?token=${access}`);
|
||||
let events: EventSource | undefined;
|
||||
|
||||
events.addEventListener("data", dataEventListener);
|
||||
createEffect(() => {
|
||||
const token = accessToken();
|
||||
if (token) {
|
||||
events = new EventSource(`${base}/notifications?token=${token}`);
|
||||
events.addEventListener("data", dataEventListener);
|
||||
events.onerror = (e) => {
|
||||
console.error(e);
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
events.onerror = (e) => {
|
||||
console.error(e);
|
||||
};
|
||||
onCleanup(() => {
|
||||
if (events) {
|
||||
events.removeEventListener("data", dataEventListener);
|
||||
events.close();
|
||||
}
|
||||
});
|
||||
|
||||
onCleanup(() => {
|
||||
events.removeEventListener("data", dataEventListener);
|
||||
events.close();
|
||||
});
|
||||
|
||||
return {
|
||||
state,
|
||||
};
|
||||
return {
|
||||
state,
|
||||
};
|
||||
};
|
||||
|
||||
export const NotificationsContext =
|
||||
createContext<ReturnType<typeof Notifications>>();
|
||||
createContext<ReturnType<typeof Notifications>>();
|
||||
|
||||
export const useNotifications = () => {
|
||||
const notifications = useContext(NotificationsContext);
|
||||
if (notifications == null) {
|
||||
throw new Error("Cannot use this hook with an unmounted notifications");
|
||||
}
|
||||
const notifications = useContext(NotificationsContext);
|
||||
if (notifications == null) {
|
||||
throw new Error("Cannot use this hook with an unmounted notifications");
|
||||
}
|
||||
|
||||
return notifications;
|
||||
return notifications;
|
||||
};
|
||||
|
||||
export const WithNotifications: Component<ParentProps> = (props) => {
|
||||
const { onRefetchImages } = useSearchImageContext();
|
||||
const notifications = Notifications(onRefetchImages);
|
||||
const { onRefetchImages } = useSearchImageContext();
|
||||
const notifications = Notifications(onRefetchImages);
|
||||
|
||||
return (
|
||||
<NotificationsContext.Provider value={notifications}>
|
||||
{props.children}
|
||||
</NotificationsContext.Provider>
|
||||
);
|
||||
return (
|
||||
<NotificationsContext.Provider value={notifications}>
|
||||
{props.children}
|
||||
</NotificationsContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
@ -38,11 +38,7 @@ const refreshTokenValidator = strictObject({
|
||||
access: string(),
|
||||
})
|
||||
|
||||
const getBaseAuthorizedRequest = async ({
|
||||
path,
|
||||
body,
|
||||
method,
|
||||
}: BaseRequestParams): Promise<Request> => {
|
||||
export const getAccessToken = async (): Promise<string> => {
|
||||
let accessToken = localStorage.getItem("access")?.toString();
|
||||
const refreshToken = localStorage.getItem("refresh")?.toString();
|
||||
|
||||
@ -65,6 +61,16 @@ const getBaseAuthorizedRequest = async ({
|
||||
accessToken = access
|
||||
}
|
||||
|
||||
return accessToken!
|
||||
}
|
||||
|
||||
const getBaseAuthorizedRequest = async ({
|
||||
path,
|
||||
body,
|
||||
method,
|
||||
}: BaseRequestParams): Promise<Request> => {
|
||||
const accessToken = await getAccessToken();
|
||||
|
||||
return new Request(`${base}/${path}`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${accessToken}`,
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { useSearchImageContext } from "@contexts/SearchImageContext";
|
||||
import { useParams } from "@solidjs/router";
|
||||
import { Component, For, Show, createSignal } from "solid-js";
|
||||
import { base } from "../../network";
|
||||
import { Component, For, Show, Suspense, createResource, createSignal } from "solid-js";
|
||||
import { base, getAccessToken } from "../../network";
|
||||
import { Dialog } from "@kobalte/core";
|
||||
|
||||
const DeleteButton: Component<{ onDelete: () => void }> = (props) => {
|
||||
@ -52,104 +52,102 @@ export const List: Component = () => {
|
||||
|
||||
const { lists, onDeleteImageFromStack } = useSearchImageContext();
|
||||
|
||||
// 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);
|
||||
|
||||
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