/* * Copyright (C) 2020 HERE Europe B.V. * Licensed under MIT, see full license in LICENSE * SPDX-License-Identifier: MIT */ import React, { useEffect } from "react" import useSWR from "swr" import { Box, Heading, Text, Flex, Link, Icon } from "@chakra-ui/core" import fetcher from "../../utils/fetcher" import { useTabStore } from "../../utils/store" import Listing from "../Listing" import Map from "../Map" import Search from "../Search" import Globe from "../Globe" import NavigationTabs from "../NavigationTabs" import CurrentCircle from "../CurrentCircle" import hereLogo from "../../images/here-logo.svg" import TimeSlider from "../TimeSlider" import AboutContent from "../AboutContent" import IntroParagraph from "../IntroParagraph" const spaceId = process.env.GATSBY_SPACE_ID const accessToken = process.env.GATSBY_ACCESS_TOKEN const App = () => { const currentTab = useTabStore(state => state.currentTab) const { data, error } = useSWR(`https://xyz.api.here.com/hub/spaces/${spaceId}/bbox?west=-180&north=90&east=180&south=-90&access_token=${accessToken}`, fetcher, { focusThrottleInterval: 60000 }) const points = data ? (data.features || []) : [] useEffect(() => { const cbox = document.getElementsByClassName("main-combobox")[0] if (cbox) cbox.focus() }, []) return ( <> <Box display={!currentTab ? "block" : ["none", null, "block"]} position="fixed" top="0" left="0" bottom="0" zIndex={999999} borderTop="0.25rem solid #00AFAA" width={["100%", null, "25rem", "30rem"]} boxShadow="lg" overflow="scroll" bg="white" pb="5rem" style={{ WebkitOverflowScrolling: "touch", }} > <Box px="1.25rem" pt="1.25rem"> <Heading fontSize={["1.5rem", "2rem", null, "2.5rem"]} lineHeight={1.125} mb="1.25rem"> <Text mr="0.75rem" as="span"> { "Tracking Coronavirus" } <br/> { "COVID-19" } </Text> </Heading> { points.length ? <IntroParagraph points={points} /> : null} { points.length ? <TimeSlider points={points} /> : null } </Box> { points.length ? <Listing rows={points} /> : null } </Box> <Flex position="absolute" bottom={["3.5rem", null, "1.25rem"]} left={["1rem", null, "26.25rem", "32.5rem"]} right={["1rem", null, "2rem"]} zIndex={2} justifyContent="space-between" alignItems="flex-end" > <Flex flexWrap="wrap" justifyContent="space-between" flex="1 1 auto" pr={["0.75rem", null, 0]}> <Text as="span" fontSize="xs" color="gray.900" fontWeight={600}> {"Data: "} <Link href="https://github.com/CSSEGISandData/COVID-19" color="#00AFAA" bg="white" py="0.125rem" px="0.25rem">{"JHU CSSE"}</Link> { " and " } <Link href="https://ncov.dxy.cn/ncovh5/view/pneumonia?scene=2&clicktime=1579582238&enterid=1579582238&from=singlemessage&isappinstalled=0" color="#00AFAA" bg="white" py="0.125rem" px="0.25rem"> {"DXY"} </Link> </Text> <Text as="span" fontSize="xs" color="gray.900" fontWeight={600}> {"Made with Leaflet, "} <Link href="https://developer.here.com/documentation/vector-tiles-api/dev_guide?cid=Freemium-DeveloperPortalTutorial-PJ-0-Javascript-DevPortal-&utm_source=DeveloperPortalTutorial&utm_medium=referral&utm_campaign=Webinar_IOT_2020_Golden-Age-Location-Enabled-AI-Jan-16" color="#00AFAA" bg="white" py="0.125rem" px="0.25rem">{"HERE Vector Map Tiles API"}</Link> {" and "} <Link href="https://developer.here.com/products/xyz?cid=Freemium-DeveloperPortalTutorial-PJ-0-XYZ-DevPortal-&utm_source=DeveloperPortalTutorial&utm_medium=referral&utm_campaign=CoronaVirusMap" color="#00AFAA" bg="white" py="0.125rem" px="0.25rem">{"HERE Data Hub APIs"}</Link> { " | " } <Link href="#" color="#00AFAA" bg="white" py="0.125rem" px="0.25rem"> {"Get the code"} <Icon name="github" ml="0.25rem" mt="-0.125rem" /> </Link> </Text> </Flex> <Link flex="none" href="https://developer.here.com/?cid=Freemium-DeveloperPortalTutorial-PJ-0-Javascript-DevPortal-&utm_source=DeveloperPortalTutorial&utm_medium=referral&utm_campaign=Webinar_IOT_2020_Golden-Age-Location-Enabled-AI-Jan-16"> <img src={hereLogo} alt="HERE logo" style={{ width: "2.5rem", marginLeft: "0.75rem" }} /> </Link> </Flex> <Map points={points} /> <Search /> <Box position="fixed" bottom={["5.5rem", null, "4rem"]} right={["1rem", null, "2.5rem"]} zIndex={2} width={["6rem", "8rem", "10rem"]} height={["6rem", "8rem", "10rem"]} boxShadow="lg" borderRadius="100%" bg="white" border="0.125rem solid" borderColor="gray.50" pointerEvents="none" > <Globe /> </Box> { currentTab === 2 ? ( <Box display="block" position="fixed" top="0" left="0" bottom="0" zIndex={999999} borderTop="0.25rem solid #00AFAA" width={["100%", null, "25rem", "30rem"]} boxShadow="lg" overflow="scroll" bg="white" pb="5rem" style={{ WebkitOverflowScrolling: "touch", }} > <Box px="1.25rem" pt="1.25rem"> <AboutContent /> </Box> </Box> ) : null } <NavigationTabs /> <CurrentCircle /> </> ) } export default App