skflowne

const purgecss = require("@fullhuman/postcss-purgecss")({
    content: ["./src/**/*.html", "./src/**/*.svelte"],

    whitelistPatterns: [/svelte-/, /fa-icon/],

    defaultExtractor: (content) => content.match(/[A-Za-z0-9-_:/]+/g) || [],
})

const dev = process.env.ROLLUP_WATCH

skflowne

import React from "react"

const App = () => {
    return <div>Covid Tracker</div>
}

export default App

skflowne

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

skflowne

import React from "react"
import DeckGL from "@deck.gl/react"
import { StaticMap } from "react-map-gl"

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

// Viewport settings
const INITIAL_VIEW_STATE = {
    longitude: -20,
    latitude: 0,

skflowne

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

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

export default App

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 { 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 React, { Suspense } from "react"
import { RecoilRoot } from "recoil"

import Countries from "./components/Countries"

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

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

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