Merge branch 'master' into styleguide

public-convenience-ltd · Jun 4, 2020 · 939784d · 939784d
2 parents f11635c + 35463d9
commit 939784d
Show file tree

Hide file tree

Showing 16 changed files with 780 additions and 1,028 deletions.
diff --git a/.example.env b/.example.env
@@ -1,12 +1,12 @@
 # API
 # Set the mongodb instance for the API to use.
-MONGODB_URI=mongodb://127.0.0.1:27017/gbptm
+MONGODB_URI=mongodb://127.0.0.1:27017/toiletmap
+# Use this database in migration scripts
+DATABASE_NAME=toiletmap
 
 # UI
 # If you wish to avoid running a local API you can proxy to a remote
-# PROXY=https://gbptm-stage.herokuapp.com
+# PROXY=https://some.remote.api
 
+# Connect to GA in prod
 REACT_APP_GOOGLE_MAPS_API_KEY=
-
-# Decide whether to bundle with sponship branding, defaults to true on web builds, set to "false" to remove
-REACT_APP_BUNDLE_BRANDING=
diff --git a/package.json b/package.json
@@ -46,12 +46,12 @@
     "@fortawesome/free-brands-svg-icons": "5.13.0",
     "@fortawesome/free-regular-svg-icons": "5.13.0",
     "@fortawesome/free-solid-svg-icons": "5.13.0",
-    "@fortawesome/react-fontawesome": "0.1.9",
+    "@fortawesome/react-fontawesome": "0.1.10",
     "@material-ui/core": "4.10.1",
     "@material-ui/icons": "4.9.1",
     "@rehooks/component-size": "1.0.3",
     "@styled-system/prop-types": "5.1.5",
-    "apollo-server": "2.14.1",
+    "apollo-server": "2.14.2",
     "auth0-js": "9.13.2",
     "chart.js": "2.9.3",
     "date-fns": "2.14.0",
@@ -95,14 +95,14 @@
     "@lola-tech/graphql-kimera": "0.10.0-alpha.7",
     "@shelf/jest-mongodb": "1.1.5",
     "apollo-link-schema": "1.2.5",
-    "apollo-server-testing": "2.14.1",
+    "apollo-server-testing": "2.14.2",
     "cli-progress": "3.8.2",
     "customize-cra": "1.0.0",
     "dotenv": "8.2.0",
     "http-proxy-middleware": "1.0.4",
     "husky": "4.2.5",
     "jest-puppeteer": "4.4.0",
-    "lint-staged": "10.2.7",
+    "lint-staged": "10.2.9",
     "migrate-mongo": "7.2.1",
     "nodemon": "2.0.4",
     "prettier": "2.0.5",
@@ -112,7 +112,7 @@
     "react-styleguidist": "11.0.8",
     "serve": "11.3.1",
     "source-map-explorer": "2.4.2",
-    "stylelint": "13.5.0",
+    "stylelint": "13.6.0",
     "stylelint-config-standard": "20.0.0",
     "uuid": "8.1.0"
   },

diff --git a/src/Apollo.js b/src/Apollo.js
@@ -69,7 +69,7 @@ const errorLink = onError(({ graphQLErrors, networkError }) => {
 });
 
 const httpLink = new HttpLink({
-  uri: process.env.REACT_APP_BAKED_BACKEND || '/api',
+  uri: '/api',
 });
 
 const authLink = setContext((_, { headers }) => {

diff --git a/src/api/db/loo.js b/src/api/db/loo.js
@@ -81,7 +81,7 @@ LooSchema.statics.fromReports = async function (reports, idOverride) {
   });
 };
 
-LooSchema.statics.findNear = function (lon, lat, radius, complete) {
+LooSchema.statics.findNear = function (lon, lat, radius) {
   let args = [
     {
       $geoNear: {
@@ -92,7 +92,6 @@ LooSchema.statics.findNear = function (lon, lat, radius, complete) {
         distanceField: 'distance',
         maxDistance: radius,
         spherical: true,
-        limit: 2 ** 62, // infeasibly large number
       },
     },
     {
@@ -101,21 +100,6 @@ LooSchema.statics.findNear = function (lon, lat, radius, complete) {
       },
     },
   ];
-  if (!complete) {
-    args.push({
-      $project: {
-        distance: 1,
-        properties: {
-          geometry: 1,
-          noPayment: 1,
-          accessible: 1,
-          openingTimes: 1,
-          type: 1,
-          babyChange: 1,
-        },
-      },
-    });
-  }
   return this.aggregate(args);
 };
 

diff --git a/src/api/resolvers.js b/src/api/resolvers.js
@@ -99,12 +99,7 @@ const resolvers = {
       };
     },
     loosByProximity: (parent, args) =>
-      Loo.findNear(
-        args.from.lng,
-        args.from.lat,
-        args.from.maxDistance,
-        'complete'
-      ),
+      Loo.findNear(args.from.lng, args.from.lat, args.from.maxDistance),
     areas: async (parent, args) => {
       const data = await Area.find({}, { name: 1, type: 1 }).exec();
 

diff --git a/src/components/EntryForm.js b/src/components/EntryForm.js
@@ -229,18 +229,22 @@ const EntryForm = ({ title, loo, center, children, ...props }) => {
       lng: parseFloat(data.geometry.coordinates[1]),
     };
 
-    if (dirtyFieldNames.includes('noPayment') && data.noPayment) {
+    // remove payment details if the isFree field value has changed and is now
+    // either Yes or Don't know
+    if (dirtyFieldNames.includes('isFree') && data.isFree !== 'false') {
       transformed.paymentDetails = null;
     }
 
+    transformed.noPayment = data.isFree;
+
     // construct expected opening times structure if relevant fields have changed
     if (
       [...openingTimesFields, 'has-opening-times'].some(
         (field) => dirtyFieldNames.indexOf(field) >= 0
       )
     ) {
       if (data['has-opening-times']) {
-        const openingTimes = WEEKDAYS.map((day, index) => {
+        const openingTimes = WEEKDAYS.map((day) => {
           if (!data[`${day.toLowerCase()}-is-open`]) {
             return rangeTypes.CLOSED;
           }
@@ -259,7 +263,7 @@ const EntryForm = ({ title, loo, center, children, ...props }) => {
 
     transformed = omit(transformed, [
       'geometry',
-      'noPayment',
+      'isFree',
       'has-opening-times',
       ...openingTimesFields,
     ]);

diff --git a/src/components/Footer.js b/src/components/Footer.js
@@ -6,8 +6,6 @@ import styled from '@emotion/styled';
 import Box from './Box';
 import Text from './Text';
 
-import config from '../config';
-
 import domestosLogo from '../images/domestos_logo3.png';
 import domestosUseLoos from '../images/domestos_use_our_loos_logo.png';
 
@@ -36,30 +34,24 @@ const Footer = ({ children }) => (
     color="primary"
     height={['auto', 60]}
   >
-    {config.shouldShowSponsor() && (
-      <HashLink
-        to="/use-our-loos"
-        title="Domestos: Use Our Loos Campaign"
-        scroll={(el) => el.scrollIntoView(true)}
-      >
-        <Box
-          display="flex"
-          flexDirection={['column', 'row']}
-          alignItems="center"
-        >
-          <Text fontSize={14}>
-            <small>Proudly sponsored by Domestos</small>
-          </Text>
+    <HashLink
+      to="/use-our-loos"
+      title="Domestos: Use Our Loos Campaign"
+      scroll={(el) => el.scrollIntoView(true)}
+    >
+      <Box display="flex" flexDirection={['column', 'row']} alignItems="center">
+        <Text fontSize={14}>
+          <small>Proudly sponsored by Domestos</small>
+        </Text>
 
-          <Box display="flex" ml={[0, 3]} mb={[3, 0]} order={[-1, 0]}>
-            <UseOurLoosLogo />
-            <Box ml={2}>
-              <DomestosLogo />
-            </Box>
+        <Box display="flex" ml={[0, 3]} mb={[3, 0]} order={[-1, 0]}>
+          <UseOurLoosLogo />
+          <Box ml={2}>
+            <DomestosLogo />
           </Box>
         </Box>
-      </HashLink>
-    )}
+      </Box>
+    </HashLink>
 
     <Box order={[-1, 0]} mb={[4, 0]}>
       <Text fontSize={[12, 16]}>

diff --git a/src/components/LooMap/AccessibilityList.js b/src/components/LooMap/AccessibilityList.js
@@ -40,7 +40,7 @@ const Content = ({ toilets }) => {
       p={3}
       bg="white"
     >
-      <Text fontSize={16}>Use number keys to show a toilets details.</Text>
+      <Text fontSize={16}>Use number keys to show a toilet's details.</Text>
 
       <Spacer mt={3} />
 

diff --git a/src/components/LooMap/LocateMapControl.js b/src/components/LooMap/LocateMapControl.js
@@ -67,7 +67,7 @@ const LocateMapControl = ({ position }) => {
       <ControlButton
         type="button"
         onClick={() => (isActive ? stopLocate() : startLocate())}
-        aria-label=""
+        aria-label="Locate my position"
         variant={isActive && 'active'}
       >
         <svg

diff --git a/src/components/Tracking/AdobeTracking.js b/src/components/Tracking/AdobeTracking.js
@@ -1,7 +1,5 @@
 import React from 'react';
 import { Helmet } from 'react-helmet';
-
-import config from '../../config';
 import useOnLocationChange from './useOnLocationChange';
 
 const AdobeTracking = () => {
@@ -22,7 +20,7 @@ const AdobeTracking = () => {
     <Helmet>
       <script
         src={
-          config.getStage() === 'production'
+          window.location.hostname.match(/toiletmap\.org\.uk/)
             ? `${process.env.PUBLIC_URL}/adobe-digital-data.js`
             : `${process.env.PUBLIC_URL}/adobe-digital-data-stage.js`
         }

diff --git a/src/config.js b/src/config.js
@@ -1,5 +1,3 @@
-const { REACT_APP_BUNDLE_BRANDING } = process.env;
-
 export const FILTERS_KEY = 'filters';
 
 const filters = [
@@ -45,30 +43,15 @@ export default {
   messages,
   analyticsId:
     process.env.NODE_ENV === 'production' ? 'UA-52513593-1' : 'UA-111111111-1',
-  nearestRadius: 20000, // meters
-  nearestListLimit: 5,
   initialZoom: 16,
   minZoom: 12,
   maxZoom: 18,
   editMinZoom: 16,
-  allowAddEditLoo: true,
-  showBackButtons: false,
   fallbackLocation: {
     // Trafalgar Square. Because.
     lat: 51.507351,
     lng: -0.127758,
   },
-  getStage() {
-    if (process.env.NODE_ENV === 'production') {
-      if (window.location.hostname === 'www.toiletmap.org.uk') {
-        return 'production';
-      }
-
-      return 'staging';
-    }
-
-    return process.env.NODE_ENV;
-  },
   getSettings(namespace) {
     return JSON.parse(localStorage.getItem(namespace) || '{}');
   },
@@ -91,12 +74,6 @@ export default {
       })
     );
   },
-  shouldShowSponsor() {
-    if (REACT_APP_BUNDLE_BRANDING === 'false') {
-      return false;
-    }
-    return true;
-  },
   getTitle(appendText) {
     if (appendText) {
       return `${title}: ${appendText}`;

diff --git a/src/pages/AddPage.js b/src/pages/AddPage.js
@@ -3,6 +3,7 @@ import { Helmet } from 'react-helmet';
 import queryString from 'query-string';
 import { useMutation } from '@apollo/client';
 import { loader } from 'graphql.macro';
+import { Redirect } from 'react-router-dom';
 
 import PageLayout from '../components/PageLayout';
 import LooMap from '../components/LooMap';
@@ -16,7 +17,6 @@ import useMapPosition from '../components/useMapPosition';
 import useNearbyLoos from '../components/useNearbyLoos';
 
 import config from '../config';
-import history from '../history';
 
 const UPDATE_LOO = loader('./updateLoo.graphql');
 
@@ -61,7 +61,11 @@ const AddPage = (props) => {
 
   // redirect to new toilet entry page on successful addition
   if (saveResponse && saveResponse.submitReport.code === '200') {
-    history.push(`/loos/${saveResponse.submitReport.loo.id}?message=created`);
+    return (
+      <Redirect
+        to={`/loos/${saveResponse.submitReport.loo.id}?message=created`}
+      />
+    );
   }
 
   const save = (data) => {

diff --git a/src/pages/EditPage.js b/src/pages/EditPage.js
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { Helmet } from 'react-helmet';
-import { Link } from 'react-router-dom';
+import { Link, Redirect } from 'react-router-dom';
 import merge from 'lodash/merge';
 import cloneDeep from 'lodash/cloneDeep';
 import uniqBy from 'lodash/uniqBy';
@@ -20,7 +20,7 @@ import useNearbyLoos from '../components/useNearbyLoos';
 import useMapPosition from '../components/useMapPosition';
 
 import config from '../config';
-import history from '../history';
+// import history from '../history';
 
 const FIND_BY_ID = loader('./findLooById.graphql');
 const UPDATE_LOO = loader('./updateLoo.graphql');
@@ -119,12 +119,16 @@ const EditPage = (props) => {
 
   // redirect to index if loo is not active (i.e. removed)
   if (looData && !looData.loo.active) {
-    history.push('/');
+    return <Redirect to="/" />;
   }
 
   // redirect to new toilet entry page on successful addition
   if (saveResponse && saveResponse.submitReport.code === '200') {
-    history.push(`/loos/${saveResponse.submitReport.loo.id}?message=updated`);
+    return (
+      <Redirect
+        to={`/loos/${saveResponse.submitReport.loo.id}?message=updated`}
+      />
+    );
   }
 
   const getLoosToDisplay = () => {
@@ -159,6 +163,9 @@ const EditPage = (props) => {
           showCrosshair
           controlsOffset={20}
           withAccessibilityOverlays={false}
+          onViewportChanged={(mapPosition) => {
+            setMapCenter(mapPosition.center);
+          }}
         />
       </Box>
 

diff --git a/src/pages/HomePage.js b/src/pages/HomePage.js
@@ -20,6 +20,8 @@ import config, { FILTERS_KEY } from '../config';
 
 const FIND_BY_ID = loader('./findLooById.graphql');
 
+const SIDEBAR_BOTTOM_MARGIN = 32;
+
 const HomePage = ({ initialPosition, ...props }) => {
   const [mapPosition, setMapPosition] = useMapPosition(config.fallbackLocation);
 
@@ -120,10 +122,11 @@ const HomePage = ({ initialPosition, ...props }) => {
           top={0}
           left={[0, 3]}
           right={0}
-          bottom={['auto', 0]}
           m={3}
           maxWidth={326}
-          maxHeight="100%"
+          maxHeight={`calc(100% - ${
+            toiletPanelDimensions.height || 0
+          }px - ${SIDEBAR_BOTTOM_MARGIN}px)`}
           overflowY="auto"
           // center on small viewports
           mx={['auto', 0]}