Merge 04132f3 into b6cfa4b

.travis.yml

@@ -45,12 +45,12 @@ _test_defaults: &_test_defaults
     # A bit ugly to look into, but this starts the platform server with ci environment variables,
     # waits until it's fully responsive, and then executes cypress tests for a given browser and parallel node
     # see https://docs.cypress.io/guides/guides/parallelization.html
-    # - npm run test ci
+    - npm run test ci
     # to kill all background jobs (like "npm start &")
     - kill $(jobs -p) || true
 # Create common predeploy steps which can be included as part of other deploy scripts (data not persisted between jobs otherwise)
 _predeploy_defaults: &_predeploy_defaults
-  - process.env.CI=false npm run build
+  - npm run build
   - npm install -g firebase-tools
   - export FIREBASE_TOKEN=$(if [ "$TRAVIS_BRANCH" == "production" ]; then echo "$FIREBASE_PRODUCTION_TOKEN"; else echo "$FIREBASE_STAGING_TOKEN"; fi)
 # Jobs run in parallel, so split chrome and firefox tests running each across 2 machines.
@@ -90,8 +90,7 @@ jobs:
         - *_predeploy_defaults
         - bash scripts/deploy.dev.sh
     - stage: Deploy Production
-      # Note BG 19/08/20 - removing AND type = push because production deploy is only from PR
-      if: branch = production
+      if: branch = production AND type = push
       script:
         - *_predeploy_defaults
         - bash scripts/deploy.prod.sh

functions/package.json

@@ -21,7 +21,7 @@
     "cors": "^2.8.5",
     "dateformat": "^3.0.3",
     "express": "^4.16.4",
-    "firebase-admin": "^8.3.0",
+    "firebase-admin": "8.3.0",
     "firebase-functions": "^3.2.0",
     "fs-extra": "^7.0.1",
     "google-auth-library": "^2.0.1",

src/pages/Events/Events.tsx

@@ -37,4 +37,4 @@ class EventsPageClass extends React.Component<IProps, any> {
     )
   }
 }
-export const EventsPage: any = withRouter(EventsPageClass as any)
+export const EventsPage = withRouter(EventsPageClass as any)

src/pages/Home/Home.tsx

@@ -28,4 +28,4 @@ class HomePageClass extends React.Component<IState, any> {
   }
 }
 
-export const HomePage: any = withRouter(HomePageClass as any)
+export const HomePage = withRouter(HomePageClass as any)

src/pages/Howto/Howto.tsx

@@ -4,6 +4,7 @@ import { Howto } from './Content/Howto/Howto'
 import CreateHowto from './Content/CreateHowto/CreateHowto'
 import { EditHowto } from './Content/EditHowto/EditHowto'
 import { HowtoList } from './Content/HowtoList/HowtoList'
+import { AuthRoute } from '../common/AuthRoute'
 
 class HowtoPageClass extends React.Component<any, any> {
   constructor(props: any) {
@@ -38,4 +39,4 @@ class HowtoPageClass extends React.Component<any, any> {
     )
   }
 }
-export const HowtoPage: any = withRouter(HowtoPageClass as any)
+export const HowtoPage = withRouter(HowtoPageClass as any)

src/pages/Maps/Content/View/Cluster.tsx

@@ -6,7 +6,7 @@ import 'react-leaflet-markercluster/dist/styles.min.css'
 
 import { createClusterIcon, createMarkerIcon } from './Sprites'
 
-import { IMapPin } from 'src/models/maps.models'
+import { IPinGrouping, IMapPin } from 'src/models/maps.models'
 
 interface IProps {
   pins: Array<IMapPin>
@@ -16,31 +16,48 @@ interface IProps {
 export const Clusters: React.FunctionComponent<IProps> = ({
   pins,
   onPinClick,
+  children,
 }) => {
-  /**
-   * Documentation of Leaflet Clusters for better understanding
-   * https://github.com/Leaflet/Leaflet.markercluster#clusters-methods
-   *
-   */
+  const entities = pins.reduce(
+    (accumulator, pin) => {
+      const grouping = pin.type
+      if (!accumulator.hasOwnProperty(grouping)) {
+        accumulator[grouping] = []
+      }
+      accumulator[grouping].push(pin)
+      return accumulator
+    },
+    {} as Record<IPinGrouping, Array<IMapPin>>,
+  )
+
   return (
-    <MarkerClusterGroup
-      iconCreateFunction={createClusterIcon()}
-      showCoverageOnHover={false}
-      spiderfyOnMaxZoom={true}
-      // Pin Icon size is always 37x37 px
-      // This means max overlay of pins is 5px when not clustered
-      maxClusterRadius={32}
-    >
-      {pins.map(pin => (
-        <Marker
-          key={pin._id}
-          position={[pin.location.lat, pin.location.lng]}
-          icon={createMarkerIcon(pin)}
-          onClick={() => {
-            onPinClick(pin)
-          }}
-        />
-      ))}
-    </MarkerClusterGroup>
+    <React.Fragment>
+      {Object.keys(entities).map(key => {
+        return (
+          <MarkerClusterGroup
+            iconCreateFunction={createClusterIcon({ key })}
+            key={key}
+            showCoverageOnHover={false}
+            spiderfyOnMaxZoom={true}
+            // in pixels, radius a cluster can cover
+            // max zoom level 18
+            maxClusterRadius={(zoomLevel: number) => {
+              return 30 - 5 * zoomLevel
+            }}
+          >
+            {entities[key].map(pin => (
+              <Marker
+                key={pin._id}
+                position={[pin.location.lat, pin.location.lng]}
+                icon={createMarkerIcon(pin)}
+                onClick={() => {
+                  onPinClick(pin)
+                }}
+              />
+            ))}
+          </MarkerClusterGroup>
+        )
+      })}
+    </React.Fragment>
   )
 }

src/pages/Maps/Maps.tsx

@@ -9,6 +9,7 @@ import { Box } from 'rebass'
 import './styles.css'
 
 import { ILatLng } from 'src/models/maps.models'
+import { IUser } from 'src/models/user.models'
 import { GetLocation } from 'src/utils/geolocation'
 import { Map } from 'react-leaflet'
 import { MAP_GROUPINGS } from 'src/stores/Maps/maps.groupings'
@@ -140,4 +141,4 @@ class MapsPageClass extends React.Component<IProps, IState> {
   }
 }
 
-export const MapsPage: any = withRouter(MapsPageClass as any)
+export const MapsPage = withRouter(MapsPageClass as any)

src/pages/admin/Admin.tsx

@@ -66,4 +66,4 @@ class AdminPageClass extends React.Component<IProps, any> {
     )
   }
 }
-export const AdminPage: any = withRouter(AdminPageClass as any)
+export const AdminPage = withRouter(AdminPageClass as any)