using resources to always have a valid access token

frontend/src/components/image/index.tsx

@@ -1,5 +1,5 @@
-import { Component, createSignal } from "solid-js";
-import { base } from "../../network";
+import { Component, createResource, createSignal } from "solid-js";
+import { base, getAccessToken } from "../../network";
 import { A } from "@solidjs/router";
 import { Dialog } from "@kobalte/core";
 
@@ -11,11 +11,7 @@ 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 (
         <>

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");
-	if (access == null) {
-		throw new Error("Access token not defined");
-	}
+    const [accessToken] = createResource(getAccessToken);
 
     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 ({
-    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}`,

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 { base } from "../../network";
+import { Component, For, Show, createResource, createSignal } from "solid-js";
+import { base, getAccessToken } from "../../network";
 import { Dialog } from "@kobalte/core";
 
 const DeleteButton: Component<{ onDelete: () => void }> = (props) => {
@@ -52,11 +52,7 @@ 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 [] = createResource(getAccessToken);
 
     const list = () => lists().find((l) => l.ID === listId);