import React , { useContext , useEffect , useMemo , useState } from 'react' ; import { Config , State } from '../types' ; import getActions from './actions' ; import getInitialState from './getInitialState' ; /**
 * The context to be used in useAppContext
 */ const Context = React . createContext < { state : State | null ; actions : Actions | null ; } > ( { state : null , actions : null } ) ; /**
 * Context provider
 */ const AppProvider = Context . Provider ; /**
 * The main hook used to manage the state (`state`, `setState`).
 */ const useAppState = ( props ) => { const [ state , setState ] = useState < State > ( getInitialState ( ) ) ; const actions = useMemo ( ( ) => getActions ( setState ) , [ setState ] ) ; useEffect ( ( ) => { if ( props . ui ) actions . mergeUiConfig ( props . ui ) ; } , [ props . ui ] ) ; useEffect ( ( ) => { if ( props . pages ) actions . setPages ( props . pages ) ; } , [ props . pages ] ) ; return { state , actions } ; } ; /**
 * Pick up what's given in AppProvider
 */ const useAppContext = ( ) => { return useContext ( Context ) ; } ; export type Actions = ReturnType < typeof useAppState > [ 'actions' ] ; export { useAppState , useAppContext , AppProvider , Context as AppContext } ;