TimelineMap.js

import React from "react"
import { useRecoilValue } from "recoil"
import { format } from "date-fns"

import { mapboxToken } from "../../mapbox-token"

import { currentDateState } from "../../state/app"
import { API_DATE_FORMAT, statusByDateQuery, countriesQuery } from "../../state/api"

import DataMap from "./DataMap"

const TimelineMap = () => {
    const viewDate = useRecoilValue(currentDateState)
    const formattedDate = format(viewDate, API_DATE_FORMAT)
    const dateStatus = useRecoilValue(statusByDateQuery(formattedDate))
    const countries = useRecoilValue(countriesQuery)

    const data = dateStatus.map((status) => {
        const country = countries[status.country]
        return {
            name: country.name,
            coordinates: [country.longitude, country.latitude],
            ...status,
        }
    })

    return <DataMap mapboxToken={mapboxToken} data={data} />
}

export default TimelineMap