im not going insane

.idea/workspace.xml

@@ -6,6 +6,7 @@
   <component name="ChangeListManager">
     <list default="true" id="4cc93404-63bf-4aee-bd04-2b0203a508b3" name="Changes" comment="">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/app/helpers.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/app/helpers.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/app/images/upload/page.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/app/images/upload/page.tsx" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
@@ -16,8 +17,8 @@
   <component name="FileTemplateManagerImpl">
     <option name="RECENT_TEMPLATES">
       <list>
-        <option value="TypeScript JSX File" />
         <option value="TypeScript File" />
+        <option value="TypeScript JSX File" />
       </list>
     </option>
   </component>
@@ -32,21 +33,21 @@
     <option name="hideEmptyMiddlePackages" value="true" />
     <option name="showLibraryContents" value="true" />
   </component>
-  <component name="PropertiesComponent">{
+  <component name="PropertiesComponent"><![CDATA[{
-  &quot;keyToString&quot;: {
+  "keyToString": {
-    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
+    "RunOnceActivity.ShowReadmeOnStart": "true",
-    &quot;RunOnceActivity.git.unshallow&quot;: &quot;true&quot;,
+    "RunOnceActivity.git.unshallow": "true",
-    &quot;git-widget-placeholder&quot;: &quot;main&quot;,
+    "git-widget-placeholder": "main",
-    &quot;last_opened_file_path&quot;: &quot;/home/exhq/codeshit/ether-frontend&quot;,
+    "last_opened_file_path": "/home/exhq/codeshit/ether-frontend",
-    &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
+    "node.js.detected.package.eslint": "true",
-    &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
+    "node.js.detected.package.tslint": "true",
-    &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
+    "node.js.selected.package.eslint": "(autodetect)",
-    &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
+    "node.js.selected.package.tslint": "(autodetect)",
-    &quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
+    "nodejs_package_manager_path": "npm",
-    &quot;ts.external.directory.path&quot;: &quot;/home/exhq/codeshit/ether-frontend/node_modules/typescript/lib&quot;,
+    "ts.external.directory.path": "/home/exhq/codeshit/ether-frontend/node_modules/typescript/lib",
-    &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
+    "vue.rearranger.settings.migration": "true"
   }
-}</component>
+}]]></component>
   <component name="SharedIndexes">
     <attachedChunks>
       <set>
@@ -76,6 +77,7 @@
       <workItem from="1733252479518" duration="1692000" />
       <workItem from="1733254541032" duration="4316000" />
       <workItem from="1733477426661" duration="67000" />
+      <workItem from="1733679455313" duration="825000" />
     </task>
     <servers />
   </component>

src/app/helpers.tsx

@@ -3,3 +3,5 @@ export const getCookie = (name:string) => {
     const cookies = cookieString.split('; ').find(row => row.startsWith(name + '='));
     return cookies ? cookies.split('=')[1] : null;
 };
+
+export const API_URL = process.env.NEXT_PUBLIC_API_URL  as string;

src/app/images/upload/page.tsx

@@ -2,14 +2,32 @@
 import "@radix-ui/themes/styles.css";
 import {useState} from "react";
 import './page.css'
-import {getCookie} from "@/app/helpers";
+import {API_URL, getCookie} from "@/app/helpers";
 import {Button, Heading, Theme} from "@radix-ui/themes";
 
+function useApiKey(): ()=>Promise<string> {
+    const [apiKeyP, setApiKeyP] = useState<null|Promise<string>>(null);
+
+    const h: {p?: undefined  | Promise<string>} = {};
+
+    return async () => {
+        if (apiKeyP) return await apiKeyP;
+        if (h.p) return await h.p;
+        h.p = fetch(`${API_URL}/api/token`, {
+            headers: {
+                'Authorization': getCookie("access_token")!,
+            }
+        }).then(it =>it.json()).then(it=>it.apiKey);
+        setApiKeyP(h.p);
+        return await h.p;
+    };
+}
+
+
 
 export default function Page() {
-    const API_URL = process.env.NEXT_PUBLIC_API_URL  as string;
     const [file, setFile] = useState(null);
-    const [apiKey, setApiKey] = useState('');
+    const apiKey = useApiKey();
     const [message, setMessage] = useState('');
 
     //@ts-expect-error the thing breaks idfk
@@ -18,6 +36,7 @@ export default function Page() {
         setFile(e.target.files[0]);
     };
 
+
     const dropFile = (e: DragEvent) => {
         e.preventDefault();
         const files = e.dataTransfer?.files ?? []
@@ -40,23 +59,14 @@ export default function Page() {
         const formData = new FormData();
         formData.append('file', file);
 
-        await fetch(`${API_URL}/api/token`, {
+
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        const actualapikey = await apiKey()
-            //@ts-expect-error
+        console.log(actualapikey)
-            headers: {
-                'Authorization': getCookie("access_token"),
-            }
-        }).then(res => {
-            res.json().then(data => {
-                setApiKey(data.apiToken);
-            })
-        });
-        console.log(apiKey);
         await fetch(`${API_URL}/api/upload`, {
             method: 'POST',
             body: formData,
             headers: {
-                'Authorization': apiKey,
+                'Authorization': actualapikey,
             }
         }).then(async (res) => {
             if (res.status === 201) {