4204 - Add base map

src/client/pages/Kiosk/LatestActivities/LatestActivities.tsx

@@ -1,7 +1,9 @@
 import React from 'react'
 
+import MapWrapper from 'client/pages/Kiosk/LatestActivities/MapWrapper'
+
 const LatestActivities: React.FC = () => {
-  return <div />
+  return <MapWrapper />
 }
 
 export default LatestActivities

src/client/pages/Kiosk/LatestActivities/Map/Map.scss

@@ -0,0 +1,4 @@
+.kiosk-latest-activities__map {
+  flex: 1;
+  overflow: hidden;
+}

src/client/pages/Kiosk/LatestActivities/Map/Map.tsx

@@ -0,0 +1,12 @@
+import './Map.scss'
+import React from 'react'
+
+import { useLatestActivitiesMap } from './hooks/useLatestActivitiesMap'
+
+const Map: React.FC = () => {
+  const { ref } = useLatestActivitiesMap()
+
+  return <div ref={ref} className="kiosk-latest-activities__map" />
+}
+
+export default Map

src/client/pages/Kiosk/LatestActivities/Map/hooks/useLatestActivitiesMap.ts

@@ -0,0 +1,35 @@
+import { MutableRefObject, useEffect, useRef, useState } from 'react'
+
+type Returned = {
+  map: google.maps.Map
+  ref: MutableRefObject<HTMLDivElement>
+}
+
+const baseMapOptions = {
+  center: { lat: 0, lng: 0 },
+  disableDefaultUI: true,
+  fullscreenControl: false,
+  mapTypeControl: false,
+  mapTypeId: 'roadmap',
+  maxZoom: 15,
+  minZoom: 3,
+  rotateControl: false,
+  zoom: 3,
+}
+
+export const useLatestActivitiesMap = (): Returned => {
+  const ref = useRef<HTMLDivElement>(null)
+  const [map, setMap] = useState<google.maps.Map>()
+
+  useEffect(() => {
+    if (!ref.current || map) return
+
+    const mapSetup = new window.google.maps.Map(ref.current, baseMapOptions)
+
+    setMap(mapSetup)
+  }, [map, ref])
+
+  return { map, ref }
+}
+
+export default useLatestActivitiesMap

src/client/pages/Kiosk/LatestActivities/Map/index.ts

@@ -0,0 +1 @@
+export { default } from './Map'

src/client/pages/Kiosk/LatestActivities/MapWrapper/MapWrapper.scss

@@ -0,0 +1,8 @@
+@import 'src/client/style/partials';
+
+.kiosk-latest-activities__map-error {
+  align-self: center;
+  color: $ui-destructive;
+  font-size: $font-l;
+  margin: 0 auto;
+}

src/client/pages/Kiosk/LatestActivities/MapWrapper/MapWrapper.tsx

@@ -0,0 +1,31 @@
+import './MapWrapper.scss'
+import React from 'react'
+
+import { Status, Wrapper, WrapperProps } from '@googlemaps/react-wrapper'
+
+import Loading from 'client/components/Loading'
+import Map from 'client/pages/Kiosk/LatestActivities/Map'
+
+// @ts-ignore
+// from webpack DefinePlugin
+const apiKey: string = __GOOGLE_MAPS_API_KEY__
+
+const Components: Record<Status, React.FC> = {
+  [Status.LOADING]: () => <Loading />,
+  [Status.FAILURE]: () => (
+    <div className="kiosk-latest-activities__map-error">There was a problem while loading the map.</div>
+  ),
+  [Status.SUCCESS]: () => <Map />,
+}
+
+const MapWrapper: React.FC = () => {
+  const render: WrapperProps['render'] = (status) => {
+    const Component = Components[status]
+
+    return <Component />
+  }
+
+  return <Wrapper apiKey={apiKey} render={render} />
+}
+
+export default MapWrapper

src/client/pages/Kiosk/LatestActivities/MapWrapper/index.ts

@@ -0,0 +1 @@
+export { default } from './MapWrapper'