import React , { FC , useCallback , useEffect } from 'react' ; import { useSelector , useDispatch } from 'redux-with-domain' ; import Chart from './components/chart' ; import { Chart as ChartType } from '../../../../domain/chart' ; import module from '../index' ; import LoadingIcon from '../../../../common/component/LoadingIcon' ; import './index.css' ; interface Props { reportId : string ; } const ReportCanvas = props => { const dispatch = useDispatch ( ) ; const charts = useSelector ( state => { return module . selectors . getCharts ( state , props . reportId ) ; } ) ; const selectedChartId = useSelector ( module . selectors . getSelectedChartId ) ; const loading = useSelector ( module . selectors . getLoading ) ; const changeSelectedChart = useCallback ( ( id ) => { dispatch ( module . actions . setSelectedChart ( id ) ) ; } , [ ] ) ; const chartList = charts . map ( ( chart , index ) => { return ( < Chart chart = { chart } key = { chart . id } selectedChartId = { selectedChartId } changeSelectedChart = { changeSelectedChart } / > ) ; } ) ; return ( < div className = "report-canvas" > { loading ? ( < LoadingIcon / > ) : chartList . length ? ( < div className = "list" > { chartList } < /div>) : null} < /div>); } ; export default ReportCanvas ;