+
+
+ <% } %>
+ <% if (!isInitialised) { %>
+
+
+ <%= strapi.config.environment %>
+
+ + The server is running successfully (v<%= strapi.config.info.version %>) +
+
+
+ <%= serverTime %>
+ Open the administration +
+
+
+ <% } %>
+
+ Let's get started!
+To discover the power provided by Strapi, you need to create an administrator.
+ Create the first administrator +
+ 
+ 
+ 
+
+
+
+
+
+
+
+ <%= strapi.config.environment %>
+
+ The server is running successfully.
+
+
+ <%= serverTime %>
+{ children }
;
+};
+
+Container.propTypes = {
+ children: PropTypes.node,
+ className: PropTypes.string,
+ type: PropTypes.string,
+};
+
+export default Container;
diff --git a/covid19-frontend/src/components/Footer.js b/covid19-frontend/src/components/Footer.js
new file mode 100644
index 00000000..d9588d28
--- /dev/null
+++ b/covid19-frontend/src/components/Footer.js
@@ -0,0 +1,15 @@
+import React from 'react';
+
+import Container from 'components/Container';
+
+const Footer = () => {
+ return (
+
+ );
+};
+
+export default Footer;
diff --git a/covid19-frontend/src/components/Header.js b/covid19-frontend/src/components/Header.js
new file mode 100644
index 00000000..49b32600
--- /dev/null
+++ b/covid19-frontend/src/components/Header.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import { Link } from 'gatsby';
+
+import Container from 'components/Container';
+
+const Header = () => {
+ return (
+ My Gatsby Site
+-
+
- + Home + +
- + Page 2 + +
+ { children }
+
+
+
+ );
+};
+
+Layout.propTypes = {
+ children: PropTypes.node.isRequired,
+ pageName: PropTypes.string,
+};
+
+export default Layout;
diff --git a/covid19-frontend/src/components/Map.js b/covid19-frontend/src/components/Map.js
new file mode 100644
index 00000000..c477075c
--- /dev/null
+++ b/covid19-frontend/src/components/Map.js
@@ -0,0 +1,65 @@
+import React, { useRef } from 'react';
+import PropTypes from 'prop-types';
+import { Map as BaseMap, TileLayer, ZoomControl } from 'react-leaflet';
+
+import { useConfigureLeaflet, useMapServices, useRefEffect } from 'hooks';
+import { isDomAvailable } from 'lib/util';
+
+const DEFAULT_MAP_SERVICE = 'OpenStreetMap';
+
+const Map = ( props ) => {
+ const { children, className, defaultBaseMap = DEFAULT_MAP_SERVICE, mapEffect, ...rest } = props;
+
+ const mapRef = useRef();
+
+ useConfigureLeaflet();
+
+ useRefEffect({
+ ref: mapRef,
+ effect: mapEffect,
+ });
+
+ const services = useMapServices({
+ names: [...new Set([defaultBaseMap, DEFAULT_MAP_SERVICE])],
+ });
+ const basemap = services.find(( service ) => service.name === defaultBaseMap );
+
+ let mapClassName = `map`;
+
+ if ( className ) {
+ mapClassName = `${mapClassName} ${className}`;
+ }
+
+ if ( !isDomAvailable()) {
+ return (
+
+
+ );
+ }
+
+ const mapSettings = {
+ className: 'map-base',
+ zoomControl: false,
+ ...rest,
+ };
+
+ return (
+ Loading map...
+
+
+ { children }
+ { basemap &&
+
+ );
+};
+
+Map.propTypes = {
+ children: PropTypes.node,
+ className: PropTypes.string,
+ defaultBaseMap: PropTypes.string,
+ mapEffect: PropTypes.func,
+};
+
+export default Map;
diff --git a/covid19-frontend/src/data/map-services.js b/covid19-frontend/src/data/map-services.js
new file mode 100644
index 00000000..0c7c1ca5
--- /dev/null
+++ b/covid19-frontend/src/data/map-services.js
@@ -0,0 +1,7 @@
+export const mapServices = [
+ {
+ name: 'OpenStreetMap',
+ attribution: '© OpenStreetMap contributors',
+ url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+ },
+];
diff --git a/covid19-frontend/src/hooks/index.js b/covid19-frontend/src/hooks/index.js
new file mode 100644
index 00000000..2f6fa924
--- /dev/null
+++ b/covid19-frontend/src/hooks/index.js
@@ -0,0 +1,3 @@
+export { default as useConfigureLeaflet } from './useConfigureLeaflet';
+export { default as useMapServices } from './useMapServices';
+export { default as useRefEffect } from './useRefEffect';
diff --git a/covid19-frontend/src/hooks/useConfigureLeaflet.js b/covid19-frontend/src/hooks/useConfigureLeaflet.js
new file mode 100644
index 00000000..56f1e1ff
--- /dev/null
+++ b/covid19-frontend/src/hooks/useConfigureLeaflet.js
@@ -0,0 +1,21 @@
+import L from 'leaflet';
+
+import { isDomAvailable } from 'lib/util';
+
+const useConfigureLeaflet = () => {
+ if ( !isDomAvailable()) return;
+
+ // To get around an issue with the default icon not being set up right between using React
+ // and importing the leaflet library, we need to reset the image imports
+ // See https://github.com/PaulLeCam/react-leaflet/issues/453#issuecomment-410450387
+
+ delete L.Icon.Default.prototype._getIconUrl;
+
+ L.Icon.Default.mergeOptions({
+ iconRetinaUrl: require( 'leaflet/dist/images/marker-icon-2x.png' ),
+ iconUrl: require( 'leaflet/dist/images/marker-icon.png' ),
+ shadowUrl: require( 'leaflet/dist/images/marker-shadow.png' ),
+ });
+};
+
+export default useConfigureLeaflet;
diff --git a/covid19-frontend/src/hooks/useMapServices.js b/covid19-frontend/src/hooks/useMapServices.js
new file mode 100644
index 00000000..7117ea6a
--- /dev/null
+++ b/covid19-frontend/src/hooks/useMapServices.js
@@ -0,0 +1,10 @@
+import { getMapServiceByName } from 'lib/map-services';
+import MapService from 'models/map-service';
+
+const useMapServices = ({ names = [], services: userServices } = {}) => {
+ const services = names.map(( name ) => getMapServiceByName( name, userServices ));
+
+ return services.map(( service ) => new MapService( service ));
+};
+
+export default useMapServices;
diff --git a/covid19-frontend/src/hooks/useRefEffect.js b/covid19-frontend/src/hooks/useRefEffect.js
new file mode 100644
index 00000000..8b3503ca
--- /dev/null
+++ b/covid19-frontend/src/hooks/useRefEffect.js
@@ -0,0 +1,9 @@
+import { useEffect } from 'react';
+
+const useRefEffect = ({ effect, ref = {} }) => {
+ useEffect(() => {
+ effect( ref.current );
+ }, [effect, ref]);
+};
+
+export default useRefEffect;
diff --git a/covid19-frontend/src/lib/map-services.js b/covid19-frontend/src/lib/map-services.js
new file mode 100644
index 00000000..98ba40b3
--- /dev/null
+++ b/covid19-frontend/src/lib/map-services.js
@@ -0,0 +1,20 @@
+import { mapServices } from 'data/map-services';
+
+/**
+ * getMapServicesByName
+ * @description Returns all preconfigured services
+ */
+
+export function getMapServices() {
+ return mapServices || [];
+}
+
+/**
+ * getMapServiceByName
+ * @description Tries to find a service given the name. Allows additional services passed in.
+ */
+
+export function getMapServiceByName( name, userServices = []) {
+ const services = [...getMapServices(), ...userServices];
+ return services.find(( service ) => service.name === name );
+}
diff --git a/covid19-frontend/src/lib/map.js b/covid19-frontend/src/lib/map.js
new file mode 100644
index 00000000..7c889906
--- /dev/null
+++ b/covid19-frontend/src/lib/map.js
@@ -0,0 +1,43 @@
+/**
+ * promiseToFlyTo
+ * @description
+ */
+
+export function promiseToFlyTo( map, { zoom, center }) {
+ return new Promise(( resolve, reject ) => {
+ const baseError = 'Failed to fly to area';
+
+ if ( !map.flyTo ) {
+ reject( `${baseError}: no flyTo method on map` );
+ }
+
+ if ( typeof zoom !== 'number' ) {
+ reject( `${baseError}: zoom invalid number ${zoom}` );
+ }
+
+ const mapCenter = center || map.getCenter();
+ const mapZoom = zoom || map.getZoom();
+
+ map.flyTo( mapCenter, mapZoom, {
+ duration: 2,
+ });
+
+ map.once( 'moveend', () => {
+ resolve();
+ });
+ });
+}
+
+/**
+ * getCurrentLocation
+ * @description
+ */
+
+export function getCurrentLocation() {
+ return new Promise(( resolve, reject ) => {
+ navigator.geolocation.getCurrentPosition(
+ ( pos ) => resolve({ lat: pos.coords.latitude, lng: pos.coords.longitude }),
+ ( err ) => reject( err )
+ );
+ });
+}
diff --git a/covid19-frontend/src/lib/util.js b/covid19-frontend/src/lib/util.js
new file mode 100644
index 00000000..ebdab9f6
--- /dev/null
+++ b/covid19-frontend/src/lib/util.js
@@ -0,0 +1,9 @@
+/**
+ * isDomAvailable
+ * @description Checks to see if the DOM is available by checking the existence of the window and document
+ * @see https://github.com/facebook/fbjs/blob/master/packages/fbjs/src/core/ExecutionEnvironment.js#L12
+ */
+
+export function isDomAvailable() {
+ return typeof window !== 'undefined' && !!window.document && !!window.document.createElement;
+}
diff --git a/covid19-frontend/src/models/map-service.js b/covid19-frontend/src/models/map-service.js
new file mode 100644
index 00000000..e0ec4cb6
--- /dev/null
+++ b/covid19-frontend/src/models/map-service.js
@@ -0,0 +1,11 @@
+class MapService {
+ constructor( service = {}) {
+ this._service = { ...service };
+
+ this.name = this._service.name;
+ this.attribution = this._service.attribution;
+ this.url = this._service.url;
+ }
+}
+
+export default MapService;
diff --git a/covid19-frontend/src/pages/404.js b/covid19-frontend/src/pages/404.js
new file mode 100644
index 00000000..33f5c653
--- /dev/null
+++ b/covid19-frontend/src/pages/404.js
@@ -0,0 +1,17 @@
+import React from 'react';
+
+import Layout from 'components/Layout';
+import Container from 'components/Container';
+
+const NotFoundPage = () => {
+ return (
+ Page Not Found
+You just hit a route that doesn't exist... the sadness.
+${country}
+-
+
- Confirmed: ${cases} +
- Deaths: ${deaths} +
- Recovered: ${recovered} +
- Last Update: ${updatedFormatted} +
Still Getting Started?
+Run the following in your terminal!
+
+ gatsby new [directory] https://github.com/colbyfayock/gatsby-starter-leaflet
+
+ Note: Gatsby CLI required globally for the above command
+Page Two
+Welcome to page 2
+