TimelineMap.js

import React from "react"
import { useRecoilValue, useRecoilValueLoadable } 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"
import LoadingIndicator from "../ui/LoadingIndicator"

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

    const isLoading = dateStatus.state === "loading" || countries.state === "loading"
    
    let data = []
    if (!isLoading) {
        data = dateStatus.contents.map((status) => {
            const country = countries.contents[status.country]
            return {
                name: country.name,
                coordinates: [country.longitude, country.latitude],
                ...status,
            }
        })
    }

    return (
        <div className="timeline-map">
            {isLoading ? <LoadingIndicator /> : null}
            <DataMap mapboxToken={mapboxToken} data={data} />
        </div>
    )
}

export default TimelineMap