skflowne

import React from "react"
import styled from "styled-components"
import { useRecoilState } from "recoil"
import { currentDateState } from "../../state/app"
import { addDays, subDays } from "date-fns"
import Button from "../ui/Button"

const StyledTimeTravelButtons = styled("div")`
    display: flex;
    flex-flow: row nowrap;

skflowne

import React from "react"
import styled from "styled-components"
import { useRecoilState } from "recoil"
import { currentDateState } from "../../state/app"
import { addDays, subDays, format } from "date-fns"
import Button from "../ui/Button"

const StyledTimeTravelButtons = styled("div")`
    display: flex;
    flex-flow: column;

skflowne

import React from "react"
import styled from "styled-components"
import Loader from "react-loader-spinner"

import "react-loader-spinner/dist/loader/css/react-spinner-loader.css"

const StyledLoadingIndicator = styled("div")`
    position: absolute;
    top: 1rem;
    left: 50%;

skflowne

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"

skflowne

import { selector, atom } from "recoil"
import { isAfter, isBefore } from "date-fns"

export const DATE_RANGE = [new Date("10 Jan 2020"), new Date()]

const dateState = atom({
    key: "date-state",
    default: DATE_RANGE[1],
})

skflowne

import React from "react"
import styled from "styled-components"

const StyledButton = styled("button")`
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    background-color: #4299e1;
    color: #bee3f8;

skflowne

import React from "react"
import styled from "styled-components"
import { useRecoilState } from "recoil"
import { currentDateState, DATE_RANGE } from "../../state/app"
import { addDays, subDays, format } from "date-fns"
import Button from "../ui/Button"

const StyledTimeTravelButtons = styled("div")`
    display: flex;
    flex-flow: column;

skflowne

import React from "react"
import styled from "styled-components"
import { useRecoilState } from "recoil"
import { currentDateState, DATE_RANGE } from "../../state/app"
import { differenceInCalendarDays, addDays } from "date-fns"

const StyledTimeTravelSlider = styled("div")`
    display: flex;
    flex-flow: column;
    align-items: center;

skflowne

import { selector, selectorFamily, waitForNone } from "recoil"
import { format, subDays, differenceInCalendarDays } from "date-fns"
import { currentDateState, DATE_RANGE } from "../app"

export const API_DATE_FORMAT = "yyyy-MM-dd"

export const countriesQuery = selector({
    key: "countries",
    get: async () => {
        try {

skflowne

import { selector, atom } from "recoil"
import { isAfter, isBefore } from "date-fns"

export const CASES = "cases"
export const DEATHS = "deaths"
export const RECOVERED = "recovered"

export const availableStats = [CASES, DEATHS, RECOVERED]

export const currentStatState = atom({