From 7847410f3e6c624bc3461312681b9afb382c7010 Mon Sep 17 00:00:00 2001 From: Seth Trowbridge Date: Wed, 19 Apr 2023 20:56:30 -0400 Subject: [PATCH] fetch hook started --- example/deep/component.tsx | 6 ++++- fetch.test.tsx | 13 +++++++++- lib/iso.tsx | 53 +++++++++++++++++++++++++------------- 3 files changed, 52 insertions(+), 20 deletions(-) diff --git a/example/deep/component.tsx b/example/deep/component.tsx index 124ecfc..f588cf3 100644 --- a/example/deep/component.tsx +++ b/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
Route is: {routeGet.Path.toString()} Component!!! a link +

Data:{Data && (Data as CatFact)?.fact}

+

Status:{Updating?'loading':'done'}

; }; \ No newline at end of file diff --git a/fetch.test.tsx b/fetch.test.tsx index 1053023..8487a95 100644 --- a/fetch.test.tsx +++ b/fetch.test.tsx @@ -10,6 +10,15 @@ const delay =async(inHandler:()=>void, inDelay:number):Promise=> }); }; +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); @@ -21,4 +30,6 @@ await delay(()=>{}, 3000); console.log(r1); console.log(r2); -console.log(r3); \ No newline at end of file +console.log(r3); + +*/ \ No newline at end of file diff --git a/lib/iso.tsx b/lib/iso.tsx index bbc5be1..bdd2f90 100644 --- a/lib/iso.tsx +++ b/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, DelaySSR:boolean, Error?:string, JSON?:object}; export const Fetch = { Cache:new Map() as Map, - 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; } -}; \ No newline at end of file +}; +let count = 0; \ No newline at end of file