import React , { createContext } from 'react' ; import { Annotation } from '../../../common/annotations' ; import { useFetcher } from '../../hooks/use_fetcher' ; export const AnnotationsContext = createContext ( { annotations : [ ] } as { annotations : Annotation [ ] ; } ) ; const INITIAL_STATE = { annotations : [ ] } ; export function AnnotationsContextProvider ( { children , environment , start , end , serviceName , } ) { const { data = INITIAL_STATE } = useFetcher ( ( callApmApi ) => { if ( start && end && serviceName ) { return callApmApi ( { endpoint : 'GET /api/apm/services/{serviceName}/annotation/search' , params : { path : { serviceName , } , query : { environment , start , end , } , } , } ) ; } } , [ environment , start , end , serviceName ] ) ; return < AnnotationsContext . Provider value = { data } children = { children } / > ; }