import { Client , User , UserListener } from "./client" ; import React , { createContext , FunctionComponent , useMemo , useEffect , useState , Dispatch , SetStateAction } from "react" ; export interface Config { client : Client ; initialized : boolean ; initializing : boolean ; onWindowFocus : Date ; onWindowBlur : Date ; user ? : User ; refetchMountedQueries : Date ; setRefetchMountedQueries : Dispatch < SetStateAction < Date > > ; queryCache : { [ key ] : Object ; } ; } export const WunderGraphContext = createContext < Config | undefined > ( undefined ) ; export interface Props { endpoint ? : string ; } export const WunderGraphProvider = ( { endpoint , children } ) => { const [ initialized , setInitialized ] = useState ( false ) ; const [ initializing , setInitializing ] = useState ( false ) ; const [ refetchMountedQueries , setRefetchMountedQueries ] = useState ( new Date ( ) ) ; const queryCache = { } ; const client = useMemo < Client > ( ( ) => { const client = new Client ( { baseURL : endpoint } ) ; client . setLogoutCallback ( ( ) => { Object . keys ( queryCache ) . forEach ( ( key ) => { delete queryCache [ key ] ; } ) ; } ) ; return client ; } , [ endpoint ] ) ; const [ onWindowBlur , setOnWindowBlur ] = useState ( new Date ( ) ) ; const [ onWindowFocus , setOnWindowFocus ] = useState ( new Date ( ) ) ; useEffect ( ( ) => { setInitialized ( true ) ; const onFocus = async ( ) => { setOnWindowFocus ( new Date ( ) ) ; setInitialized ( true ) ; } ; const onBlur = ( ) => { setOnWindowBlur ( new Date ( ) ) ; setInitialized ( false ) ; } ; window . addEventListener ( "focus" , onFocus ) ; window . addEventListener ( "blur" , onBlur ) ; return ( ) => { window . removeEventListener ( "focus" , onFocus ) ; window . removeEventListener ( "blur" , onBlur ) ; } ; } , [ client ] ) ; const [ user , setUser ] = useState < User | undefined > ( ) ; const userListener = useMemo < UserListener > ( ( ) => { return ( userOrNull ) => { if ( userOrNull === null ) { setUser ( undefined ) ; } else { setUser ( userOrNull ) ; } } ; } , [ ] ) ; useEffect ( ( ) => { client . setUserListener ( userListener ) ; ( async ( ) => { await client . fetchUser ( ) ; setInitialized ( true ) ; } ) ( ) ; const onFocus = async ( ) => { setInitializing ( true ) ; await client . fetchUser ( ) ; setOnWindowFocus ( new Date ( ) ) ; setInitialized ( true ) ; setInitializing ( false ) ; } ; const onBlur = ( ) => { setInitialized ( false ) ; setOnWindowBlur ( new Date ( ) ) ; } ; window . addEventListener ( "focus" , onFocus ) ; window . addEventListener ( "blur" , onBlur ) ; return ( ) => { window . removeEventListener ( "focus" , onFocus ) ; window . removeEventListener ( "blur" , onBlur ) ; } ; } , [ client ] ) ; const providerData = { user , onWindowBlur , onWindowFocus , client , initialized , initializing , refetchMountedQueries , setRefetchMountedQueries , queryCache , } ; return < WunderGraphContext . Provider value = { providerData } > { children } < /WunderGraphContext.Provider>; } ;