import React, {useState, useContext, useEffect} from 'react' import {FileText, Map, BarChart2} from 'react-feather' import {keyBy} from 'lodash' import theme from '../../../styles/theme' import colors from '../../../styles/colors' import {AppContext, ThemeContext} from '../../../pages' import {findMostRecentDateForData, getReport} from '../../../lib/data' import Scrollable from '../../scrollable' import CovidTestsMaps from './covid-tests-maps' import CovidTestsStatistics from './covid-tests-statistics' import CovidTestsInformations from './covid-tests-informations' import TerritoriesMobileMap from '../../territories-mobile-map' import TerritoriesDesktopMap from '../../territories-desktop-map' export const CovidTestsContext = React.createContext() const MobileCovidTests = () => { const [selectedView, setSelectedView] = useState('stats') const app = useContext(AppContext) const theme = useContext(ThemeContext) const views = { map: ( <TerritoriesMobileMap maps={CovidTestsMaps} context={CovidTestsContext} > <CovidTestsStatistics /> </TerritoriesMobileMap> ), stats: ( <Scrollable> <CovidTestsStatistics /> </Scrollable> ), informations: ( <Scrollable> <CovidTestsInformations /> </Scrollable> ) } const handleClick = view => { app.setSelectedLocation('FRA') setSelectedView(view) } return ( <> {views[selectedView]} <div className='view-selector'> <div className={`${selectedView === 'stats' ? 'selected' : ''}`} onClick={() => handleClick('stats')}> <BarChart2 size={32} color={selectedView === 'stats' ? theme.primary : colors.black} /> </div> <div className={`${selectedView === 'map' ? 'selected' : ''}`} onClick={() => handleClick('map')}> <Map size={32} color={selectedView === 'map' ? theme.primary : colors.black} /> </div> <div className={`${selectedView === 'informations' ? 'selected' : ''}`} onClick={() => handleClick('informations')}> <FileText size={32} color={selectedView === 'informations' ? theme.primary : colors.black} /> </div> </div> <style jsx>{` .view-selector { z-index: 1; display: grid; grid-template-columns: 1fr 1fr 1fr; justify-content: center; align-items: center; background-color: #fff; box-shadow: 0 -1px 4px ${colors.lightGrey}; } .view-selector > div { padding: 0.5em; margin: auto; margin-bottom: -4px; } .view-selector > div.selected { border-top: 4px solid ${theme.primary}; } `}</style> </> ) } const DesktopCovidTests = () => { return ( <> <div className='menu'> <Scrollable> <CovidTestsStatistics /> <CovidTestsInformations /> </Scrollable> </div> <div className='map'> <TerritoriesDesktopMap maps={CovidTestsMaps} context={CovidTestsContext} /> </div> <style jsx>{` .menu { z-index: 1; display: flex; flex-direction: column; max-width: ${theme.menuWidth}; width: ${theme.menuWidth}; box-shadow: 0 1px 4px ${colors.lightGrey}; } .map { display: flex; flex: 1; flex-direction: column; height: 100%; } `}</style> </> ) } const CovidTests = props => { const {date, setForcedDate, selectedLocation, isMobileDevice} = useContext(AppContext) const [selectedMapId, setSelectedMapId] = useState('Tests positifs - ce jour') const [selectedStat, setSelectedStat] = useState(null) const Component = isMobileDevice ? MobileCovidTests : DesktopCovidTests useEffect(() => { let isCancelled = false async function fetchMostRecentDateForData() { const report = await getReport(date, selectedLocation) const mostRecentDate = findMostRecentDateForData(report, 'testsRealises') if (!isCancelled) { setForcedDate(mostRecentDate === date ? null : mostRecentDate) } } fetchMostRecentDateForData() return () => { isCancelled = true } }, [date, selectedLocation, setForcedDate]) useEffect(() => { const mapProperties = keyBy(CovidTestsMaps, 'property') if (mapProperties[selectedStat]) { setSelectedMapId(mapProperties[selectedStat].name) } else if (selectedStat === 'mixed') { setSelectedMapId(mapProperties.testsPositifs.name) } }, [selectedStat]) return ( <CovidTestsContext.Provider value={{selectedMapId, setSelectedMapId, selectedStat, setSelectedStat}}> <Component {...props} /> </CovidTestsContext.Provider> ) } export default CovidTests