fix: correctly fetch marka pi in background

components/layouts/main.tsx

@@ -28,5 +28,5 @@ export const MainLayout = (
     );
   }
 
-  return <>{children}</>;
+  return children;
 };

lib/env.ts

@@ -18,6 +18,7 @@ const duration = Deno.env.get("SESSION_DURATION");
 export const SESSION_DURATION = duration ? +duration : (60 * 60 * 24);
 
 export const MARKA_API_KEY = Deno.env.get("MARKA_API_KEY");
+export const MARKA_API_URL = Deno.env.get("MARKA_API_URL");
 
 export const JWT_SECRET = Deno.env.get("JWT_SECRET");
 

lib/marka/index.ts

@@ -1,11 +1,8 @@
 import { createCache } from "../cache.ts";
-import { MARKA_API_KEY } from "../env.ts";
+import { MARKA_API_KEY, MARKA_API_URL } from "../env.ts";
 import { getImage } from "../image.ts";
 import { GenericResource } from "./schema.ts";
 
-const url = `https://marka.max-richter.dev`;
-//const url = "http://localhost:8080";
-
 async function addImageToResource<T extends GenericResource>(
   resource: GenericResource,
 ): Promise<T> {
@@ -15,7 +12,7 @@ async function addImageToResource<T extends GenericResource>(
       const absoluteImageUrl = (imageUrl.startsWith("https://") ||
           imageUrl.startsWith("http://"))
         ? imageUrl
-        : `${url}/${imageUrl}`;
+        : `${MARKA_API_URL}/${imageUrl}`;
       const image = await getImage(absoluteImageUrl);
       return { ...resource, image } as T;
     } catch (e) {
@@ -31,29 +28,29 @@ type Resource = GenericResource & {
 
 const fetchCache = createCache<Resource>("marka");
 const cacheLock = new Map<string, Promise<Resource>>();
+
+async function fetchAndStoreUrl(url: string) {
+  const response = await fetch(url);
+  const res = await response.json();
+  fetchCache.set(url, res);
+  return res;
+}
+
 async function cachedFetch(
   url: string,
 ): Promise<Resource | undefined> {
   if (fetchCache.has(url)) {
+    fetchAndStoreUrl(url); // Fetch the url in the background
     return fetchCache.get(url);
   }
-  if (cacheLock.has(url)) {
-    return cacheLock.get(url);
-  }
-  const response = (async () => {
-    const response = await fetch(url);
-    const res = await response.json();
-    fetchCache.set(url, res);
-    return res;
-  })();
-  cacheLock.set(
-    url,
-    response,
-  );
+
+  if (cacheLock.has(url)) return cacheLock.get(url);
+
+  const response = fetchAndStoreUrl(url);
+  cacheLock.set(url, response);
+
   const res = await response;
-  if (!res) {
-    cacheLock.delete(url);
-  }
+  cacheLock.delete(url);
   return res;
 }
 
@@ -61,7 +58,7 @@ export async function fetchResource<T extends Resource>(
   resource: string,
 ): Promise<T | undefined> {
   try {
-    const d = `${url}/resources/${resource}`;
+    const d = `${MARKA_API_URL}/resources/${resource}`;
     const res = await cachedFetch(d);
     if (!res) return;
     return addImageToResource<T>(res);
@@ -74,7 +71,7 @@ export async function listResources<T extends GenericResource>(
   resource: string,
 ): Promise<T[]> {
   try {
-    const d = `${url}/resources/${resource}`;
+    const d = `${MARKA_API_URL}/resources/${resource}`;
     const list = await cachedFetch(d);
     if (!list) return [];
     return Promise.all(
@@ -93,7 +90,7 @@ export async function createResource(
 ) {
   const isJson = typeof content === "object" &&
     !(content instanceof ArrayBuffer);
-  const fetchUrl = `${url}/resources/${path}`;
+  const fetchUrl = `${MARKA_API_URL}/resources/${path}`;
   const headers = new Headers();
   headers.append("Content-Type", isJson ? "application/json" : "");
   if (MARKA_API_KEY) {