Deals with the absence of data on the selected date

components/date-warning.js

@@ -0,0 +1,54 @@
+import React, {useContext} from 'react'
+import PropTypes from 'prop-types'
+import {Info} from 'react-feather'
+
+import colors from '../styles/colors'
+
+import {formatDate} from '../lib/date'
+
+import {ThemeContext} from '../pages'
+
+import theme from '../styles/theme'
+
+const DateWarning = ({date}) => {
+  const themeContext = useContext(ThemeContext)
+  return (
+    <div className='date-warning'>
+      <div><Info /></div>
+      <div>Les données du jour sélectionné ne sont pas encore disponibles. Les données affichées sont celles du <b>{formatDate(date)}</b>.</div>
+
+      <style jsx>{`
+      .date-warning {
+        display: flex;
+        color: #fff;
+        justify-content: center;
+        align-items: center;
+        padding: 0.4em;
+        background-color: ${themeContext.secondary};
+        box-shadow: 0 1px 4px ${colors.lightGrey};
+      }
+
+      .date-warning b {
+        text-decoration: underline;
+      }
+
+      .date-warning > div {
+        margin: 0 0.2em;
+      }
+
+      @media (max-width: ${theme.mobileDisplay}) {
+        .date-warning {
+          font-size: 0.8em;
+          box-shadow: ’’;
+        }
+      }
+    `}</style>
+    </div>
+  )
+}
+
+DateWarning.propTypes = {
+  date: PropTypes.string.isRequired
+}
+
+export default DateWarning

components/layouts/covid-tests/covid-tests-mobile-map.js

@@ -17,7 +17,7 @@ const SHOW_STATS_HEIGHT = 38
 const CovidTestsMobileMap = () => {
   let report
   const themeContext = useContext(ThemeContext)
-  const {date, selectedLocation} = useContext(AppContext)
+  const {date, forcedDate, selectedLocation} = useContext(AppContext)
   const {selectedMapIdx, setSelectedMapIdx} = useContext(CovidTestsContext)
 
   const [showStats, setShowStats] = useState(false)
@@ -26,7 +26,8 @@ const CovidTestsMobileMap = () => {
   const {layers} = bigPictureMaps[selectedMapIdx]
 
   if (selectedLocation) {
-    report = getReport(date, selectedLocation)
+    const selectedDate = forcedDate || date
+    report = getReport(selectedDate, selectedLocation)
   }
 
   return (

components/layouts/covid-tests/index.js

@@ -1,11 +1,13 @@
-import React, {useState, useContext} from 'react'
+import React, {useState, useContext, useEffect} from 'react'
 import {FileText, Map, BarChart2} from 'react-feather'
 
 import theme from '../../../styles/theme'
 import colors from '../../../styles/colors'
 
 import {AppContext, ThemeContext} from '../../../pages'
 
+import {getPreviousDate, hasSpecificData} from '../../../lib/data'
+
 import Scrollable from '../../scrollable'
 import ReactMapGl from '../../react-map-gl'
 import Drom from '../../react-map-gl/drom'
@@ -165,12 +167,21 @@ const DesktopCovidTests = () => {
 }
 
 const CovidTests = props => {
-  const {isMobileDevice} = useContext(AppContext)
+  const {date, setForcedDate, selectedLocation, isMobileDevice} = useContext(AppContext)
 
   const [selectedMapIdx, setSelectedMapIdx] = useState(1)
 
   const Component = isMobileDevice ? MobileCovidTests : DesktopCovidTests
 
+  useEffect(() => {
+    const location = selectedLocation || 'FR'
+    if (hasSpecificData(date, location, 'testsRealises')) {
+      setForcedDate(null)
+    } else {
+      setForcedDate(getPreviousDate(date))
+    }
+  }, [date, selectedLocation, setForcedDate])
+
   return (
     <CovidTestsContext.Provider value={{selectedMapIdx, setSelectedMapIdx}}>
       <Component {...props} />

components/react-map-gl/index.js

@@ -10,12 +10,13 @@ import Map from './map'
 import SumUp from './sumup'
 
 const ReactMapGL = ({code, layers, hidePopup, hideAttribution}) => {
-  const {date, isMobileDevice} = useContext(AppContext)
+  const {date, forcedDate, isMobileDevice} = useContext(AppContext)
 
   const [hovered, setHovered] = useState(null)
 
-  const report = getReport(date, code === 'FR' ? 'REG' : 'DEP')
-  const layerData = reportToGeoJSON(report, date)
+  const selectedDate = forcedDate || date
+  const report = getReport(selectedDate, code === 'FR' ? 'REG' : 'DEP')
+  const layerData = reportToGeoJSON(report, selectedDate)
 
   const onHover = event => {
     event.stopPropagation()

layouts/desktop.js

@@ -6,11 +6,12 @@ import colors from '../styles/colors'
 
 import DateNav from '../components/date-nav'
 import LayoutSelector from '../components/layout-selector'
+import DateWarning from '../components/date-warning'
 
 const HEADER_HEIGHT = '50px'
 
 const DesktopPage = () => {
-  const {selectedLayout} = useContext(AppContext)
+  const {selectedLayout, forcedDate} = useContext(AppContext)
   const themeContext = useContext(ThemeContext)
 
   return (
@@ -20,6 +21,8 @@ const DesktopPage = () => {
         <LayoutSelector />
       </div>
 
+      {forcedDate && <DateWarning date={forcedDate} />}
+
       <div className='desktop-content'>
         {selectedLayout.component}
       </div>
@@ -35,7 +38,7 @@ const DesktopPage = () => {
           z-index: 10;
           display: flex;
           background-color: ${themeContext.primary};
-          box-shadow: 0 1px 4px ${colors.lightGrey};
+          box-shadow: ${forcedDate ? '' : `0 1px 4px ${colors.lightGrey}`};
           width: 100%;
           height: ${HEADER_HEIGHT};
         }

layouts/mobile.js

@@ -4,9 +4,10 @@ import {AppContext} from '../pages'
 
 import DateNav from '../components/date-nav'
 import LayoutSelector from '../components/layout-selector'
+import DateWarning from '../components/date-warning'
 
 const MobilePage = () => {
-  const {selectedLayout} = useContext(AppContext)
+  const {selectedLayout, forcedDate} = useContext(AppContext)
 
   return (
     <div className='mobile-page-container'>
@@ -15,6 +16,8 @@ const MobilePage = () => {
         <LayoutSelector />
       </div>
 
+      {forcedDate && <DateWarning date={forcedDate} />}
+
       {selectedLayout.component}
 
       <style jsx>{`

lib/data.js

@@ -27,6 +27,11 @@ export function reportToGeoJSON(report, date) {
   }
 }
 
+export function hasSpecificData(date, code, index) {
+  const report = getReport(date, code)
+  return Boolean(report[index])
+}
+
 export function getReport(date, code) {
   const filteredReports = records.filter(item => item.code.includes(code))
   return {

pages/index.js

@@ -43,6 +43,7 @@ const MainPage = () => {
   const [isMobileDevice, setIsMobileDevice] = useState(false)
   const [isTouchScreenDevice, setIsTouchScreenDevice] = useState(false)
   const [date, setDate] = useState(dates[dates.length - 1])
+  const [forcedDate, setForcedDate] = useState(null)
   const [selectedLocation, setSelectedLocation] = useState(null)
   const [selectedLayout, setSelectedLayout] = useState(LAYOUTS[0])
 
@@ -80,6 +81,8 @@ const MainPage = () => {
         <AppContext.Provider value={{
           date,
           setDate,
+          forcedDate,
+          setForcedDate,
           selectedLocation,
           setSelectedLocation,
           isIframe,