skflowne

import React, { Suspense } from "react"
import { RecoilRoot } from "recoil"
import DataMap from "./components/map/DataMap"

const App = () => {
    return (
        <RecoilRoot>
            <Suspense fallback="Loading...">
                <DataMap />
            </Suspense>

skflowne

{
  cases: 5244238
  country: "US"
  deaths: 167029
  last_update: "2020-08-13T23:27:24"
  recovered: 1774648
}

skflowne

{
  cases: 5244238
  coordinates: [(-97, 38)]
  country: "US"
  deaths: 167029
  last_update: "2020-08-13T23:27:24"
  name: "United States of America"
  recovered: 1774648
}

skflowne

import React from "react"
import DeckGLMap from "./DeckGLMap"
import { ScatterplotLayer } from "@deck.gl/layers"
import { useRecoilValue } from "recoil"
import { statusByDateQuery, countriesQuery, API_DATE_FORMAT } from "../../state/api"
import { format } from "date-fns"

const DataMap = () => {
    const date = new Date()
    const formattedDate = format(date, API_DATE_FORMAT)

skflowne

<link href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />

skflowne

import { selector, selectorFamily } from "recoil"
 
export const API_DATE_FORMAT = "yyyy-MM-dd"

export const countriesQuery = selector({
    key: "countries",
    get: async () => {
        try {
            const res = await fetch("https://covid19-api.org/api/countries")
            const countries = await res.json()

skflowne

import React, { Suspense } from "react"
import { RecoilRoot } from "recoil"

import Countries from "./components/Countries"

const App = () => {
    return (
        <RecoilRoot>
            <Suspense fallback="Loading...">
                <Countries />

skflowne

import React from "react"
import { useRecoilValue } from "recoil"
import { countriesQuery } from "../state/api"

const Countries = () => {
    const countries = useRecoilValue(countriesQuery)
    return (
        <ul>
            {Object.keys(countries).map((alpha2) => {
                return <li key={alpha2}>{countries[alpha2].name}</li>

skflowne

import { selector } from "recoil"

export const countriesQuery = selector({
    key: "countries",
    get: async () => {
        try {
            const res = await fetch("https://covid19-api.org/api/countries")
            const countries = await res.json()
            return countries.reduce((dict, country) => {
                dict[country.alpha2] = country

skflowne

import React from "react"
import DeckGLMap from "./components/map/DeckGLMap"

const App = () => {
    return <DeckGLMap />
}

export default App