example/deep/component.tsx

@@ -4,14 +4,18 @@ import * as Iso from "@eno/iso";
 export default ()=>
 {
     const [countGet, countSet] = React.useState(1);   
-
     const [routeGet, routeSet] = Iso.Router.Consumer();
 
+    type CatFact = {fact:string, length:number}|undefined;
+    const [Data, Updating] = Iso.Fetch.Use(`https://catfact.ninja/fact`);
+
     return <div class="p-4 text-red-500">
         <Iso.Metas title="Component!"/>
         Route is: {routeGet.Path.toString()}
         <button className="p-4 bg-red-500 text-white" onClick={e=>{countSet(countGet+1); routeSet(["lol", "idk"], {count:countGet+1});}}>{countGet}</button>
         Component!!!
         <a href="/page/about-us" className="p-2 text(lg blue-500) font-bold">a link</a>
+        <p>Data:{Data && (Data as CatFact)?.fact}</p>
+        <p>Status:{Updating?'loading':'done'}</p>
     </div>;
 };

fetch.test.tsx

@@ -10,6 +10,15 @@ const delay =async(inHandler:()=>void, inDelay:number):Promise<void>=>
     });
 };
 
+const cacheRecord = {Promise:delay(()=>{}, 1000)};
+
+cacheRecord.Promise.then(()=>{console.log(`handler one`)});
+cacheRecord.Promise.then(()=>{console.log(`handler two`)});
+
+cacheRecord.Promise = delay(()=>{}, 3000);
+
+
+/*
 let r1, r2, r3;
 
 delay(()=>{r1 = Fetch.Request(`https://catfact.ninja/fact`, undefined, 0.2); console.log(r1); }, 10);
@@ -22,3 +31,5 @@ await delay(()=>{}, 3000);
 console.log(r1);
 console.log(r2);
 console.log(r3);
+
+*/

lib/iso.tsx

@@ -160,46 +160,44 @@ export const Switch =({children}:{children:Children})=>
 export const Case =({children, value}:{children:Children, value?:string, default?:true})=>null;
 export const useRouteVars =()=> React.useContext(SwitchContext).keys;
 
-
-type FetchRecord = {URL:string, CacheFor:number, CachedAt:number, DelaySSR:boolean, Error:boolean, Text:false|string};
+type FetchRecord = {URL:string, CacheFor:number, CachedAt:number, Promise?:Promise<FetchRecord>, DelaySSR:boolean, Error?:string, JSON?:object};
 export const Fetch = {
     Cache:new Map() as Map<string, FetchRecord>,
-    async Request(URL:string, Init?:RequestInit, CacheFor:number = 60, DelaySSR:boolean = true)
+    Request(URL:string, Init?:RequestInit, CacheFor:number = 60, DelaySSR:boolean = true)
     {
         let check = Fetch.Cache.get(URL);
         
-        const load =async(inCheck:FetchRecord)=>
+        const load =(inCheck:FetchRecord)=>
         {
             Fetch.Cache.set(URL, inCheck);
-            const resp = await fetch(URL, Init);
-            inCheck.Text = await resp.text();
-            inCheck.CachedAt = new Date().getTime();
-            console.log(`...cached!`);
+            inCheck.CachedAt = 0;
+            inCheck.Promise = fetch(URL, Init).then(resp=>resp.json()).then((json)=>{
+                inCheck.JSON = json;
+                inCheck.CachedAt = new Date().getTime();
+                console.log(`...cached!`);
+                return inCheck;
+            });
             return inCheck;
         }
 
         if(!check)
         {
             console.log(`making new cache record...`);
-            check = {URL, CacheFor, CachedAt:0, DelaySSR, Error:false, Text:false};
-            load(check);
-            return check;
+            return load({URL, CacheFor, CachedAt:0, DelaySSR});
         }
-        if(check.CachedAt == 0)
+        else if(check.CachedAt == 0)
         {
             console.log(`currently being cached...`);
             return check;
         }
-        else if(check?.Text)
+        else
         {
             console.log(`found in cache...`);
-            let secondsAge = Math.floor((new Date().getTime() - check.CachedAt)/1000);
+            let secondsAge = (new Date().getTime() - check.CachedAt)/1000;
             if(secondsAge > check.CacheFor)
             {
                 console.log(`...outdated...`);
-                check.CachedAt = 0;
-                load(check);
-                return check;
+                return load(check);
             }
             else
             {
@@ -208,5 +206,24 @@ export const Fetch = {
             }
 
         }
+    },
+    Use(URL:string, Init?:RequestInit, CacheFor:number = 60, DelaySSR:boolean = true)
+    {
+        type FetchHookState = [Data:undefined|object, Updating:boolean];
+        const [cacheGet, cacheSet] = React.useState([undefined, true] as FetchHookState);
+        React.useEffect(()=>
+        {
+            const receipt = Fetch.Request(URL, Init, CacheFor, DelaySSR);
+            receipt.Promise?.then(()=>{
+                ++count;
+                if(count > 10){return;}
+                console.log(`updating state`, receipt);
+                cacheSet([receipt.JSON, receipt.CachedAt === 0]);
+            });
+        }
+        , []);
+
+        return cacheGet;
     }
 };
+let count = 0;