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

using resources to always have a valid access token

Browse Source
This commit is contained in:
John Costa
2025-09-21 15:51:33 +01:00
parent 3015d7bac2
commit 561064a194
4 changed files with 138 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
import { Component, createSignal } from "solid-js"; import { Component, createResource, createSignal } from "solid-js";
import { base } 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";
@ -11,11 +11,7 @@ type ImageComponentProps = {
export const ImageComponent: Component<ImageComponentProps> = (props) => { export const ImageComponent: 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 (
<> <>

237
frontend/src/contexts/Notifications.tsx
View File

@ -2,154 +2,159 @@ import { InferOutput, safeParse } from "valibot";
import { useSearchImageContext } from "./SearchImageContext"; import { useSearchImageContext } from "./SearchImageContext";
import { createStore } from "solid-js/store"; import { createStore } from "solid-js/store";
import { import {
Component, Component,
createContext, createContext,
createEffect, createEffect,
onCleanup, createResource,
ParentProps, onCleanup,
useContext, ParentProps,
useContext,
} from "solid-js"; } from "solid-js";
import { base } from "@network/index"; import { base, getAccessToken } from "@network/index";
import { import {
notificationValidator, notificationValidator,
processingImagesValidator, processingImagesValidator,
processingListValidator, processingListValidator,
} from "@network/notifications"; } from "@network/notifications";
type NotificationState = { type NotificationState = {
ProcessingImages: Record< ProcessingImages: Record<
string, string,
InferOutput<typeof processingImagesValidator> | undefined InferOutput<typeof processingImagesValidator> | undefined
>; >;
ProcessingLists: Record< ProcessingLists: Record<
string, string,
InferOutput<typeof processingListValidator> | undefined InferOutput<typeof processingListValidator> | undefined
>; >;
}; };
export const Notifications = (onCompleteImage: () => void) => { export const Notifications = (onCompleteImage: () => void) => {
const [state, setState] = createStore<NotificationState>({ const [state, setState] = createStore<NotificationState>({
ProcessingImages: {}, ProcessingImages: {},
ProcessingLists: {}, ProcessingLists: {},
}); });
const { processingImages } = useSearchImageContext(); const { processingImages } = useSearchImageContext();
const access = localStorage.getItem("access"); const [accessToken] = createResource(getAccessToken);
if (access == null) {
throw new Error("Access token not defined");
}
const dataEventListener = (e: MessageEvent<unknown>) => { const dataEventListener = (e: MessageEvent<unknown>) => {
if (typeof e.data !== "string") { if (typeof e.data !== "string") {
console.error("Error type is not string"); console.error("Error type is not string");
return; return;
} }
let jsonData: object = {}; let jsonData: object = {};
try { try {
jsonData = JSON.parse(e.data); jsonData = JSON.parse(e.data);
} catch (e) { } catch (e) {
console.error(e); console.error(e);
return; return;
} }
const notification = safeParse(notificationValidator, jsonData); const notification = safeParse(notificationValidator, jsonData);
if (!notification.success) { if (!notification.success) {
console.error("Processing image could not be parsed.", e.data); console.error("Processing image could not be parsed.", e.data);
return; return;
} }
console.log("SSE: ", notification); console.log("SSE: ", notification);
if (notification.output.Type === "image") { if (notification.output.Type === "image") {
const { ImageID, Status } = notification.output; const { ImageID, Status } = notification.output;
if (Status === "complete") { if (Status === "complete") {
setState("ProcessingImages", ImageID, undefined); setState("ProcessingImages", ImageID, undefined);
onCompleteImage(); onCompleteImage();
} else { } else {
setState("ProcessingImages", ImageID, notification.output); setState("ProcessingImages", ImageID, notification.output);
} }
} else if (notification.output.Type === "list") { } else if (notification.output.Type === "list") {
const { ListID, Status } = notification.output; const { ListID, Status } = notification.output;
if (Status === "complete") { if (Status === "complete") {
setState("ProcessingLists", ListID, undefined); setState("ProcessingLists", ListID, undefined);
onCompleteImage(); onCompleteImage();
} else { } else {
setState("ProcessingLists", ListID, notification.output); setState("ProcessingLists", ListID, notification.output);
} }
} }
}; };
const upsertImageProcessing = ( const upsertImageProcessing = (
images: NotificationState["ProcessingImages"], images: NotificationState["ProcessingImages"],
) => { ) => {
setState("ProcessingImages", (currentImages) => ({ setState("ProcessingImages", (currentImages) => ({
...currentImages, ...currentImages,
...images, ...images,
})); }));
}; };
createEffect(() => { createEffect(() => {
const images = processingImages(); const images = processingImages();
if (images == null) { if (images == null) {
return; return;
} }
upsertImageProcessing( upsertImageProcessing(
Object.fromEntries( Object.fromEntries(
images.map((i) => [ images.map((i) => [
i.ImageID, i.ImageID,
{ {
Type: "image", Type: "image",
ImageID: i.ImageID, ImageID: i.ImageID,
ImageName: i.Image.ImageName, ImageName: i.Image.ImageName,
Status: i.Status, 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) => { onCleanup(() => {
console.error(e); if (events) {
}; events.removeEventListener("data", dataEventListener);
events.close();
}
});
onCleanup(() => { return {
events.removeEventListener("data", dataEventListener); state,
events.close(); };
});
return {
state,
};
}; };
export const NotificationsContext = export const NotificationsContext =
createContext<ReturnType<typeof Notifications>>(); createContext<ReturnType<typeof Notifications>>();
export const useNotifications = () => { export const useNotifications = () => {
const notifications = useContext(NotificationsContext); const notifications = useContext(NotificationsContext);
if (notifications == null) { if (notifications == null) {
throw new Error("Cannot use this hook with an unmounted notifications"); throw new Error("Cannot use this hook with an unmounted notifications");
} }
return notifications; return notifications;
}; };
export const WithNotifications: Component<ParentProps> = (props) => { export const WithNotifications: Component<ParentProps> = (props) => {
const { onRefetchImages } = useSearchImageContext(); const { onRefetchImages } = useSearchImageContext();
const notifications = Notifications(onRefetchImages); const notifications = Notifications(onRefetchImages);
return ( return (
<NotificationsContext.Provider value={notifications}> <NotificationsContext.Provider value={notifications}>
{props.children} {props.children}
</NotificationsContext.Provider> </NotificationsContext.Provider>
); );
}; };

16
frontend/src/network/index.ts
View File

@ -38,11 +38,7 @@ const refreshTokenValidator = strictObject({
access: string(), access: string(),
}) })
const getBaseAuthorizedRequest = async ({ export const getAccessToken = async (): Promise<string> => {
path,
body,
method,
}: BaseRequestParams): Promise<Request> => {
let accessToken = localStorage.getItem("access")?.toString(); let accessToken = localStorage.getItem("access")?.toString();
const refreshToken = localStorage.getItem("refresh")?.toString(); const refreshToken = localStorage.getItem("refresh")?.toString();
@ -65,6 +61,16 @@ const getBaseAuthorizedRequest = async ({
accessToken = access accessToken = access
} }
return accessToken!
}
const getBaseAuthorizedRequest = async ({
path,
body,
method,
}: BaseRequestParams): Promise<Request> => {
const accessToken = await getAccessToken();
return new Request(`${base}/${path}`, { return new Request(`${base}/${path}`, {
headers: { headers: {
Authorization: `Bearer ${accessToken}`, Authorization: `Bearer ${accessToken}`,

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

@ -1,7 +1,7 @@
import { useSearchImageContext } from "@contexts/SearchImageContext"; import { useSearchImageContext } from "@contexts/SearchImageContext";
import { useParams } from "@solidjs/router"; import { useParams } from "@solidjs/router";
import { Component, For, Show, createSignal } from "solid-js"; import { Component, For, Show, createResource, createSignal } from "solid-js";
import { base } from "../../network"; import { base, getAccessToken } from "../../network";
import { Dialog } from "@kobalte/core"; import { Dialog } from "@kobalte/core";
const DeleteButton: Component<{ onDelete: () => void }> = (props) => { const DeleteButton: Component<{ onDelete: () => void }> = (props) => {
@ -52,11 +52,7 @@ export const List: Component = () => {
const { lists, onDeleteImageFromStack } = useSearchImageContext(); const { lists, onDeleteImageFromStack } = useSearchImageContext();
// TODO: make sure this is up to date. Put it behind a resource. const [] = createResource(getAccessToken);
const accessToken = localStorage.getItem("access");
if (accessToken == null) {
return <>Ermm... Access token is not set :(</>
}
const list = () => lists().find((l) => l.ID === listId); const list = () => lists().find((l) => l.ID === listId);