suspending

frontend/src/components/image/index.tsx

@@ -1,5 +1,5 @@
-import { Component, createSignal } from "solid-js";
+import { Component, createResource, createSignal, Suspense } from "solid-js";
-import { base } from "../../network";
+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] = createResource(getAccessToken);
-    const accessToken = localStorage.getItem("access");
-    if (accessToken == null) {
-        return <>Ermm... Access token is not set :(</>
-    }
 
     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] = createResource(getAccessToken);
-    const accessToken = localStorage.getItem("access");
-    if (accessToken == null) {
-        return <>Ermm... Access token is not set :(</>
-    }
 
     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

frontend/src/contexts/Notifications.tsx

@@ -5,11 +5,12 @@ import {
     Component,
     createContext,
     createEffect,
+    createResource,
     onCleanup,
     ParentProps,
     useContext,
 } from "solid-js";
-import { base } from "@network/index";
+import { base, getAccessToken } from "@network/index";
 import {
     notificationValidator,
     processingImagesValidator,
@@ -35,10 +36,7 @@ export const Notifications = (onCompleteImage: () => void) => {
 
     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>) => {
         if (typeof e.data !== "string") {
@@ -113,17 +111,24 @@ export const Notifications = (onCompleteImage: () => void) => {
         );
     });
 
-	const events = new EventSource(`${base}/notifications?token=${access}`);
+    let events: EventSource | undefined;
 
+    createEffect(() => {
+        const token = accessToken();
+        if (token) {
+            events = new EventSource(`${base}/notifications?token=${token}`);
             events.addEventListener("data", dataEventListener);
-
             events.onerror = (e) => {
                 console.error(e);
             };
+        }
+    });
 
     onCleanup(() => {
+        if (events) {
             events.removeEventListener("data", dataEventListener);
             events.close();
+        }
     });
 
     return {

frontend/src/network/index.ts

@@ -38,11 +38,7 @@ const refreshTokenValidator = strictObject({
     access: string(),
 })
 
-const getBaseAuthorizedRequest = async ({
+export const getAccessToken = async (): Promise<string> => {
-    path,
-    body,
-    method,
-}: BaseRequestParams): Promise<Request> => {
     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}`,

frontend/src/pages/list/index.tsx

@@ -1,7 +1,7 @@
 import { useSearchImageContext } from "@contexts/SearchImageContext";
 import { useParams } from "@solidjs/router";
-import { Component, For, Show, createSignal } from "solid-js";
+import { Component, For, Show, Suspense, createResource, createSignal } from "solid-js";
-import { base } from "../../network";
+import { base, getAccessToken } from "../../network";
 import { Dialog } from "@kobalte/core";
 
 const DeleteButton: Component<{ onDelete: () => void }> = (props) => {
@@ -52,15 +52,12 @@ export const List: Component = () => {
 
     const { lists, onDeleteImageFromStack } = useSearchImageContext();
 
-    // 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 :(</>
-    }
 
     const list = () => lists().find((l) => l.ID === listId);
 
     return (
+        <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">
@@ -105,7 +102,7 @@ export const List: Component = () => {
                                                         >
                                                             <img
                                                                 class="w-full h-full object-cover rounded-lg"
-                                                            src={`${base}/images/${image.ImageID}`}
+                                                                src={`${base}/images/${image.ImageID}?token=${accessToken()}`}
                                                                 alt="List item"
                                                             />
                                                         </a>
@@ -151,5 +148,6 @@ export const List: Component = () => {
                     </div>
                 )}
             </Show>
+        </Suspense>
     );
 };