TimelineMap.js

import React from "react"
import { useRecoilValueLoadable } from "recoil"

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

import { countriesQuery, currentDateStatusState } from "../../state/api"

import DataMap from "./DataMap"
import LoadingIndicator from "../ui/LoadingIndicator"

const TimelineMap = () => {
    const dateStatus = useRecoilValueLoadable(currentDateStatusState)
    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