import React , { FC , useContext , useEffect , useState } from 'react' ; import { InfluencersSelect } from './influencers_select' ; import { JobCreatorContext } from '../../../job_creator_context' ; import { newJobCapsService } from '../../../../../../../services/new_job_capabilities/new_job_capabilities_service' ; import { MultiMetricJobCreator , PopulationJobCreator , AdvancedJobCreator , } from '../../../../../common/job_creator' ; import { Description } from './description' ; export const Influencers = ( ) => { const { jobCreator : jc , jobCreatorUpdate , jobCreatorUpdated } = useContext ( JobCreatorContext ) ; const jobCreator = jc as MultiMetricJobCreator | PopulationJobCreator | AdvancedJobCreator ; const { fields } = newJobCapsService ; const [ influencers , setInfluencers ] = useState ( [ ... jobCreator . influencers ] ) ; useEffect ( ( ) => { jobCreator . removeAllInfluencers ( ) ; influencers . forEach ( ( i ) => jobCreator . addInfluencer ( i ) ) ; jobCreatorUpdate ( ) ; } , [ influencers . join ( ) ] ) ; useEffect ( ( ) => { setInfluencers ( [ ... jobCreator . influencers ] ) ; } , [ jobCreatorUpdated ] ) ; return ( < Description > < InfluencersSelect fields = { fields } changeHandler = { setInfluencers } selectedInfluencers = { influencers } / > < /Description>); } ;