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 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 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 { 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"

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

skflowne

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

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

skflowne

import React from "react"
import { useRecoilValue } 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 React from "react"
import DeckGL from "@deck.gl/react"
import { StaticMap } from "react-map-gl"

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

skflowne

import React from "react"
import DeckGLMap from "./DeckGLMap"
import { ScatterplotLayer } from "@deck.gl/layers"

const DataMap = ({ mapboxToken = "", data = [] }) => {
    const scatterplotLayer = new ScatterplotLayer({
        id: "scatterplot-layer",
        data,
        stroked: false,
        filled: true,

skflowne

import { atom } from "recoil"

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

export const currentDateState = atom({
    key: "current-date-state",
    default: new Date(),
})