From d7daf2c8f383c1ef8b848ab4dbd3a0fda2104c22 Mon Sep 17 00:00:00 2001
From: Oliver Barnwell <barnwelloliver@gmail.com>
Date: Sun, 27 Jun 2021 16:49:47 +0100
Subject: [PATCH] feat: IT RENDERS

---
 config-overrides.js                           |  44 ++++----
 next.config.js                                |   8 ++
 package.json                                  |   5 +
 src/Auth.tsx                                  |  22 ++--
 src/components/Button/Button.tsx              |  27 ++---
 src/components/EntryForm.tsx                  |   4 +-
 src/components/Footer.tsx                     |  10 +-
 src/components/Header/Header.tsx              |   3 +-
 .../LocationSearch/LocationSearch.tsx         |   2 +-
 src/components/LooMap/AccessibilityList.tsx   |   3 +-
 src/components/LooMap/LooMap.tsx              |  14 +--
 src/components/PageLayout.tsx                 |   2 +-
 src/components/Portal.tsx                     |   2 +-
 src/components/ProtectedRoute.tsx             |   4 +-
 src/components/Sidebar.tsx                    |  10 +-
 src/components/Spacer/Spacer.tsx              |  11 +-
 src/components/ToiletDetailsPanel.tsx         |  13 ++-
 src/config.ts                                 |   5 +-
 src/explorer/Areas/index.tsx                  |   6 +-
 src/explorer/HeadlineStats/index.tsx          |   2 +-
 src/explorer/Layout.tsx                       |   2 +-
 src/explorer/Loo/index.tsx                    |   9 +-
 src/explorer/Map/Chloropleth.tsx              |   2 +-
 src/explorer/Search/Form/SearchForm.tsx       |   2 +-
 src/explorer/Search/Results/Row.tsx           |   4 +-
 src/explorer/Search/index.tsx                 |   2 +-
 src/explorer/explorer.module.css              |   9 +-
 src/explorer/index.tsx                        |  51 +++++----
 src/index.tsx                                 |  98 -----------------
 src/mocks.tsx                                 |   2 +-
 src/pages/AboutPage.tsx                       |   6 +-
 src/pages/AddPage.tsx                         |   2 +-
 src/pages/CookiesPage.tsx                     |   2 +-
 src/pages/EditPage.tsx                        |   6 +-
 src/pages/HomePage.tsx                        |  20 ++--
 src/pages/RemovePage.tsx                      |   2 +-
 src/pages/_app.tsx                            | 102 ++++++++++++++++++
 src/pages/_document.tsx                       |  22 ++++
 tsconfig.json                                 |   1 +
 39 files changed, 284 insertions(+), 257 deletions(-)
 create mode 100644 next.config.js
 delete mode 100644 src/index.tsx
 create mode 100644 src/pages/_app.tsx
 create mode 100644 src/pages/_document.tsx

diff --git a/config-overrides.js b/config-overrides.js
index 39816aa0c..5958308e4 100644
--- a/config-overrides.js
+++ b/config-overrides.js
@@ -1,24 +1,24 @@
-const webpack = require('webpack');
-const {
-  useBabelRc,
-  override,
-  useEslintRc,
-  addBabelPreset,
-} = require('customize-cra');
+// const webpack = require('webpack');
+// const {
+//   useBabelRc,
+//   override,
+//   useEslintRc,
+//   addBabelPreset,
+// } = require('customize-cra');
 
-module.exports = {
-  webpack: override(
-    useBabelRc(),
-    useEslintRc(),
-    addBabelPreset('@emotion/babel-preset-css-prop'),
-    function (config, env) {
-      config.plugins.push(
-        new webpack.ProvidePlugin({
-          L: 'leaflet',
-        })
-      );
+// module.exports = {
+//   webpack: override(
+//     useBabelRc(),
+//     useEslintRc(),
+//     addBabelPreset('@emotion/babel-preset-css-prop'),
+//     function (config, env) {
+//       config.plugins.push(
+//         new webpack.ProvidePlugin({
+//           L: 'leaflet',
+//         })
+//       );
 
-      return config;
-    }
-  ),
-};
+//       return config;
+//     }
+//   ),
+// };
diff --git a/next.config.js b/next.config.js
new file mode 100644
index 000000000..b0e999c5f
--- /dev/null
+++ b/next.config.js
@@ -0,0 +1,8 @@
+module.exports = {
+    webpack: (config, { isServer }) => {
+      if (!isServer) {
+        config.resolve.fallback.fs = false;
+      }  
+      return config;
+    },
+  }
\ No newline at end of file
diff --git a/package.json b/package.json
index 524941a29..d16af7ce6 100644
--- a/package.json
+++ b/package.json
@@ -145,5 +145,10 @@
   },
   "msw": {
     "workerDirectory": "public"
+  },
+  "browser": {
+    "fs": false,
+    "path": false,
+    "os": false
   }
 }
diff --git a/src/Auth.tsx b/src/Auth.tsx
index 0aca48302..3a4ba7bfe 100644
--- a/src/Auth.tsx
+++ b/src/Auth.tsx
@@ -19,7 +19,7 @@ export const useAuth = () => React.useContext(AuthContext);
 export const isAuthenticated = () => {
   // Check whether the current time is past the
   // Access Token's expiry time
-  let expiresAt = JSON.parse(localStorage.getItem('expires_at'));
+  let expiresAt = JSON.parse((typeof localStorage !== 'undefined') && localStorage.getItem('expires_at'));
   return new Date().getTime() < expiresAt;
 };
 
@@ -32,17 +32,19 @@ const redirectOnNextLogin = (location) => {
 };
 
 const redirectOnLogin = () => {
-  return JSON.parse(localStorage.getItem('redirectOnLogin'));
+  return JSON.parse((typeof localStorage !== 'undefined') && localStorage.getItem('redirectOnLogin'));
 };
 
 const logout = () => {
-  // Clear Access Token and ID Token from local storage also the cached email
-  localStorage.removeItem('name');
-  localStorage.removeItem('nickname');
-  localStorage.removeItem('access_token');
-  localStorage.removeItem('id_token');
-  localStorage.removeItem('expires_at');
-  localStorage.removeItem('permissions');
+  if(typeof window.localStorage !== 'undefined') {
+    // Clear Access Token and ID Token from local storage also the cached email
+    localStorage.removeItem('name');
+    localStorage.removeItem('nickname');
+    localStorage.removeItem('access_token');
+    localStorage.removeItem('id_token');
+    localStorage.removeItem('expires_at');
+    localStorage.removeItem('permissions');
+  }
 };
 
 const checkPermission = (perm) => {
@@ -58,7 +60,7 @@ const AuthProvider = ({ children }) => {
       audience: 'https://www.toiletmap.org.uk/graphql',
       scope: 'openid profile report:loo',
       clientID: CLIENT_ID,
-      redirectUri: `${window.location.origin}/callback`,
+      redirectUri: `${(typeof window !== 'undefined') ? window.location.origin : ''}/callback`,
     })
   );
 
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 722c95321..c94423d68 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -1,14 +1,13 @@
-import React, { AnchorHTMLAttributes, ComponentPropsWithoutRef, ElementType, LegacyRef } from 'react';
-import styled, { StyledComponent } from '@emotion/styled';
-import { buttonStyle, ButtonStyleProps, variant } from 'styled-system';
+import React from 'react';
+import styled from '@emotion/styled';
+import { variant } from 'styled-system';
 
 import Box from '../Box';
 import Text from '../Text';
 
 const BUTTON_HEIGHT = 34;
 
-
-const StyledButton = styled.button<IButtonProps>(
+const StyledButton = styled.button(
   (props) =>
     `
     display: inline-flex;
@@ -69,28 +68,20 @@ const StyledButton = styled.button<IButtonProps>(
         minHeight: 0,
       },
     },
-  }),
-  buttonStyle
+  })
 );
 
 const ButtonIcon = ({ icon }) => {
   return <Box mr={2}>{icon}</Box>;
 };
 
-
-interface IButtonProps extends ButtonStyleProps {
-  icon?: JSX.Element;
-}
-
-type ButtonProps = IButtonProps & ComponentPropsWithoutRef<typeof StyledButton>;
-
-const Button = React.forwardRef<HTMLButtonElement & HTMLAnchorElement, ButtonProps>(({ children, icon, ...props }, ref) => (
-  <StyledButton ref={ref} type="button" {...props}>
+const Button = ({ children, icon, ...props }) => (
+  <StyledButton type="button" {...props}>
     {Boolean(icon) && <ButtonIcon icon={icon} />}
 
     <Text as="span">{children}</Text>
   </StyledButton>
-));
+);
 
 Button.defaultProps = {
   variant: 'primary',
@@ -98,4 +89,4 @@ Button.defaultProps = {
 };
 
 /** @component */
-export default Button;
+export default StyledButton;
diff --git a/src/components/EntryForm.tsx b/src/components/EntryForm.tsx
index 35f464c7c..9d751c1db 100644
--- a/src/components/EntryForm.tsx
+++ b/src/components/EntryForm.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { useForm, Controller } from 'react-hook-form';
-import { Link } from 'next/link';
+import Link from 'next/link';
 import isFunction from 'lodash/isFunction';
 import omit from 'lodash/omit';
 import pick from 'lodash/pick';
@@ -600,7 +600,7 @@ const EntryForm = ({ title, loo, center, children, ...props }) => {
                 and bars.&nbsp;
                 <Button
                   as={Link}
-                  to="/use-our-loos"
+                  href="/use-our-loos"
                   variant="link"
                   aria-label="Read more about the Use Our Loos Campaign"
                   target="_blank"
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 135127c22..18653f889 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link } from 'next/link';
+import Link from 'next/link';
 import styled from '@emotion/styled';
 
 import Box from './Box';
@@ -20,7 +20,7 @@ const UseOurLoosLogo = styled((props) => (
   height: 2rem;
 `;
 
-const Footer = ({ children }) => (
+const Footer = ({ children = null }) => (
   <Box
     as="footer"
     display="flex"
@@ -34,9 +34,9 @@ const Footer = ({ children }) => (
     height={['auto', 60]}
   >
     <Link
-      to="/use-our-loos"
+      href="/use-our-loos"
       title="Domestos: Use Our Loos Campaign"
-      scroll={(el) => el.scrollIntoView(true)}
+      scroll={true}
     >
       <Box display="flex" flexDirection={['column', 'row']} alignItems="center">
         <Text fontSize={14}>
@@ -60,7 +60,7 @@ const Footer = ({ children }) => (
           ))}
 
           <Box as="li" ml={[0, 4]}>
-            <Link to="/privacy">Privacy Policy</Link>
+            <Link href="/privacy">Privacy Policy</Link>
           </Box>
         </Box>
       </Text>
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 44edce44f..38ef3374f 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import Link from 'next/link';
+import Router from 'next/router';
 import { faBars, faTimes } from '@fortawesome/free-solid-svg-icons';
 
 import Box from '../Box';
@@ -56,7 +57,7 @@ const Header = ({ mapCenter, children }) => {
         <CovidNotification
           onClose={() => {
             config.setSetting('notification', 'covid', 'dismissed');
-            window.location.reload();
+            Router.reload();
           }}
         />
       )}
diff --git a/src/components/LocationSearch/LocationSearch.tsx b/src/components/LocationSearch/LocationSearch.tsx
index b76f877d5..bf4ae4320 100644
--- a/src/components/LocationSearch/LocationSearch.tsx
+++ b/src/components/LocationSearch/LocationSearch.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useCombobox } from 'downshift';
-import { useTheme } from 'emotion-theming';
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSearch, faTimes } from '@fortawesome/free-solid-svg-icons';
diff --git a/src/components/LooMap/AccessibilityList.tsx b/src/components/LooMap/AccessibilityList.tsx
index 4434894a0..aa70ebe67 100644
--- a/src/components/LooMap/AccessibilityList.tsx
+++ b/src/components/LooMap/AccessibilityList.tsx
@@ -1,7 +1,6 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { css } from '@emotion/core';
-import { useTheme } from 'emotion-theming';
+import { useTheme, css } from '@emotion/react';
 
 import Box from '../Box';
 import Text from '../Text';
diff --git a/src/components/LooMap/LooMap.tsx b/src/components/LooMap/LooMap.tsx
index d23596190..d2ee32998 100644
--- a/src/components/LooMap/LooMap.tsx
+++ b/src/components/LooMap/LooMap.tsx
@@ -1,11 +1,11 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { useHistory } from 'next/link';
-import { css } from '@emotion/core';
+import Router from 'next/router';
+import { css } from '@emotion/react';
 import { Map, TileLayer, ZoomControl } from 'react-leaflet';
 import 'focus-visible';
 
-import config from '../../config.js';
+import config from '../../config';
 import LocateMapControl from './LocateMapControl';
 import ToiletMarkerIcon from './ToiletMarkerIcon';
 import AccessibilityIntersection from './AccessibilityIntersection';
@@ -77,7 +77,7 @@ const LooMap = ({
     });
   };
 
-  const { push } = useHistory();
+
 
   const memoizedMarkers = React.useMemo(
     () =>
@@ -96,18 +96,18 @@ const LooMap = ({
           label={toilet.name || 'Unnamed toilet'}
           onClick={() => {
             if (!staticMap) {
-              push(`/loos/${toilet.id}`);
+              Router.push(`/loos/${toilet.id}`);
             }
           }}
           onKeyDown={(event) => {
             if (!staticMap && event.originalEvent.keyCode === KEY_ENTER) {
-              push(`/loos/${toilet.id}`);
+              Router.push(`/loos/${toilet.id}`);
             }
           }}
           keyboard={false}
         />
       )),
-    [loos, staticMap, push]
+    [loos, staticMap, Router.push]
   );
 
   const keyboardSelectionHandler = React.useCallback(
diff --git a/src/components/PageLayout.tsx b/src/components/PageLayout.tsx
index 3188512fe..57df7bb38 100644
--- a/src/components/PageLayout.tsx
+++ b/src/components/PageLayout.tsx
@@ -61,7 +61,7 @@ PageLayout.propTypes = {
   layoutMode: PropTypes.oneOf([LAYOUT_DEFAULT, LAYOUT_BLOG]),
 };
 
-PropTypes.defaultProps = {
+PageLayout.defaultProps = {
   layoutMode: LAYOUT_DEFAULT,
 };
 
diff --git a/src/components/Portal.tsx b/src/components/Portal.tsx
index 0756ea4dd..6765b3fd4 100644
--- a/src/components/Portal.tsx
+++ b/src/components/Portal.tsx
@@ -6,7 +6,7 @@ const Portal = (props) => {
   // https://github.com/facebook/react/issues/13097#issuecomment-405658104
   const [isMounted, setIsMounted] = React.useState(false);
 
-  const element = document.querySelector(props.selector);
+  const element = (typeof document !== 'undefined') && document.querySelector(props.selector);
 
   React.useEffect(() => {
     setIsMounted(true);
diff --git a/src/components/ProtectedRoute.tsx b/src/components/ProtectedRoute.tsx
index cfe08a54a..ed4d69fca 100644
--- a/src/components/ProtectedRoute.tsx
+++ b/src/components/ProtectedRoute.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Route, Redirect } from 'next/link';
+import Link from 'next/link';
 
 import { useAuth } from '../Auth';
 
@@ -7,7 +7,7 @@ const ProtectedRoute = ({ component: Component, injectProps, ...rest }) => {
   const auth = useAuth();
 
   return (
-    <Route
+    <Link
       {...rest}
       render={(props) => {
         if (auth.isAuthenticated()) {
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 48e85d999..dcbc880b9 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -9,7 +9,7 @@ import {
   faPlusCircle,
   faMapMarkerAlt,
 } from '@fortawesome/free-solid-svg-icons';
-import { NavLink } from 'next/link';
+import Link from 'next/link';
 
 import { Media } from './Media';
 import VisuallyHidden from './VisuallyHidden';
@@ -40,7 +40,7 @@ Arrow.propTypes = {
   isExpanded: PropTypes.bool,
 };
 
-const StyledNavLink = styled(NavLink)`
+const StyledNavLink = styled(Link)`
   display: flex;
   align-items: center;
 `;
@@ -93,7 +93,7 @@ const Sidebar = ({
                   center: location,
                 });
 
-                window.plausible('Find a toilet near me');
+                (typeof window !== 'undefined') && window.plausible('Find a toilet near me');
               });
             }}
             aria-label="Find a toilet near me"
@@ -206,7 +206,7 @@ const Sidebar = ({
               <VisuallyHidden>Add a toilet</VisuallyHidden>
             </h2>
             <StyledNavLink
-              to={`/loos/add?lat=${mapCenter.lat}&lng=${mapCenter.lng}`}
+              href={`/loos/add?lat=${mapCenter.lat}&lng=${mapCenter.lng}`}
             >
               <Icon icon={faPlusCircle} fixedWidth size="lg" />
               <Box mx={2}>
@@ -236,7 +236,7 @@ const Sidebar = ({
                       center: location,
                     });
 
-                    window.plausible('Find a toilet near me');
+                    (typeof window !== 'undefined') && window.plausible('Find a toilet near me');
                   });
                 }}
               >
diff --git a/src/components/Spacer/Spacer.tsx b/src/components/Spacer/Spacer.tsx
index 62310c2bd..6c31f09a8 100644
--- a/src/components/Spacer/Spacer.tsx
+++ b/src/components/Spacer/Spacer.tsx
@@ -1,14 +1,15 @@
 import styled from '@emotion/styled';
-import { space } from 'styled-system';
+import { space, SpaceProps } from 'styled-system';
 import { createPropTypes } from '@styled-system/prop-types';
 
-const Spacer = styled.div`
+interface ISpacerProps extends SpaceProps {
+
+}
+
+const Spacer = styled.div<ISpacerProps>`
   ${space}
 `;
 
-Spacer.propTypes = {
-  ...createPropTypes(space.propNames),
-};
 
 /** @component */
 export default Spacer;
diff --git a/src/components/ToiletDetailsPanel.tsx b/src/components/ToiletDetailsPanel.tsx
index fbe9610ff..d722519f8 100644
--- a/src/components/ToiletDetailsPanel.tsx
+++ b/src/components/ToiletDetailsPanel.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from '@emotion/styled';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { faClock, faEdit } from '@fortawesome/free-regular-svg-icons';
 import {
   faDirections,
@@ -23,11 +23,11 @@ import lightFormat from 'date-fns/lightFormat';
 import getISODay from 'date-fns/getISODay';
 import parseISO from 'date-fns/parseISO';
 import add from 'date-fns/add';
-import { Link } from 'next/link';
+import Link from 'next/link';
 import useComponentSize from '@rehooks/component-size';
 import L from 'leaflet';
 import { mutate } from 'swr';
-import { loader } from 'graphql.macro';
+// // import { loader } from 'graphql.macro';
 import { print } from 'graphql/language/printer';
 
 import Box from './Box';
@@ -143,7 +143,6 @@ const ToiletDetailsPanel = ({
   children,
 }) => {
   const [isExpanded, setIsExpanded] = React.useState(startExpanded);
-
   const [
     submitVerificationMutation,
     { loading: submitVerificationLoading },
@@ -341,7 +340,7 @@ const ToiletDetailsPanel = ({
             variant="secondary"
             icon={<Icon icon={faEdit} />}
             as={Link}
-            to={editUrl}
+            href={editUrl}
             data-testid="edit-button"
           >
             Edit
@@ -350,7 +349,7 @@ const ToiletDetailsPanel = ({
       </Box>
       <Spacer mb={[0, 2]} />
       Last {verifiedOrUpdated}:{' '}
-      <Link to={`/explorer/loos/${data.id}`}>
+      <Link href={`/explorer/loos/${data.id}`}>
         {lightFormat(verifiedOrUpdatedDate, 'dd/MM/yyyy, hh:mm aa')}
       </Link>
     </Box>
@@ -528,7 +527,7 @@ const ToiletDetailsPanel = ({
                 you know these hours to be out of date please{' '}
                 <Button
                   as={Link}
-                  to={editUrl}
+                  href={editUrl}
                   variant="link"
                   data-testid="edit-link"
                 >
diff --git a/src/config.ts b/src/config.ts
index 6667b8861..baa1cb1dc 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -1,3 +1,4 @@
+import Router from 'next/router'
 export const FILTERS_KEY = 'filters';
 
 const filters = [
@@ -41,7 +42,7 @@ export default {
   },
   filters,
   messages,
-  analyticsId: window.location.hostname.match(/toiletmap\.org\.uk/)
+  analyticsId: (typeof window !== 'undefined') && window.location.hostname.match(/toiletmap\.org\.uk/)
     ? 'UA-52513593-1'
     : null,
   initialZoom: 16,
@@ -54,7 +55,7 @@ export default {
     lng: -0.127758,
   },
   getSettings(namespace) {
-    return JSON.parse(localStorage.getItem(namespace) || '{}');
+    return JSON.parse((typeof localStorage !== 'undefined') && localStorage.getItem(namespace) || '{}');
   },
   getSetting(namespace, key, defaultVal = '') {
     const val = this.getSettings(namespace)[key];
diff --git a/src/explorer/Areas/index.tsx b/src/explorer/Areas/index.tsx
index edd36972f..51b3a7696 100644
--- a/src/explorer/Areas/index.tsx
+++ b/src/explorer/Areas/index.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import useSWR from 'swr';
-import { Link } from 'next/link';
+import Link from 'next/link';
 import get from 'lodash/get';
-import { loader } from 'graphql.macro';
+// import { loader } from 'graphql.macro';
 import { print } from 'graphql/language/printer';
 
 import Table from '@material-ui/core/Table';
@@ -76,7 +76,7 @@ function Areas() {
                 ))}
 
                 <TableCell key={`link_${area.meta.name}`}>
-                  <Link to={`./search?areaName=${area.meta.name}`}>
+                  <Link href={`./search?areaName=${area.meta.name}`}>
                     view loos
                   </Link>
                 </TableCell>
diff --git a/src/explorer/HeadlineStats/index.tsx b/src/explorer/HeadlineStats/index.tsx
index a2891ad0f..84d7c6e49 100644
--- a/src/explorer/HeadlineStats/index.tsx
+++ b/src/explorer/HeadlineStats/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import useSWR from 'swr';
 import { Doughnut } from 'react-chartjs-2';
-import { loader } from 'graphql.macro';
+// import { loader } from 'graphql.macro';
 import { print } from 'graphql/language/printer';
 
 import LooIcon from '@material-ui/icons/Wc';
diff --git a/src/explorer/Layout.tsx b/src/explorer/Layout.tsx
index fee5d6ce9..e690a7669 100644
--- a/src/explorer/Layout.tsx
+++ b/src/explorer/Layout.tsx
@@ -44,7 +44,7 @@ function SidebarItem(props) {
   return (
     <CentredListItem button>
       <Link
-        to={`${match.path}/${props.pathName}`}
+        href={`${match.path}/${props.pathName}`}
         style={{ textDecoration: 'none' }}
       >
         <div className={styles.centredLink}>
diff --git a/src/explorer/Loo/index.tsx b/src/explorer/Loo/index.tsx
index f02dee4d0..e685a2583 100644
--- a/src/explorer/Loo/index.tsx
+++ b/src/explorer/Loo/index.tsx
@@ -1,10 +1,9 @@
 import React from 'react';
 import useSWR from 'swr';
-import { useParams } from 'next/link';
-import { loader } from 'graphql.macro';
+// import { loader } from 'graphql.macro';
 import { print } from 'graphql/language/printer';
 
-import Map from './Map';
+import dynamic from 'next/dynamic';
 import PropertyTable from './PropertyTable';
 import ExpandableReport from './ExpandableReport';
 
@@ -23,7 +22,9 @@ const LOO_DETAILS = print(loader('./looDetails.graphql'));
 function Loo(props) {
   const auth = useAuth();
   let { id } = useParams();
-
+  const Map = React.useMemo(
+    () => dynamic(() => import('./Map'), { loading: () => <p>Loading map...</p>, ssr: false, }), []
+  ) 
   const { isValidating: loading, data, error } = useSWR([
     LOO_DETAILS,
     JSON.stringify({ id }),
diff --git a/src/explorer/Map/Chloropleth.tsx b/src/explorer/Map/Chloropleth.tsx
index d28f7118e..0cb7e31c3 100644
--- a/src/explorer/Map/Chloropleth.tsx
+++ b/src/explorer/Map/Chloropleth.tsx
@@ -6,7 +6,7 @@ import {
   Geographies,
   Geography,
 } from 'react-simple-maps';
-import { loader } from 'graphql.macro';
+// import { loader } from 'graphql.macro';
 import { print } from 'graphql/language/printer';
 import cloneDeep from 'lodash/cloneDeep';
 import { scaleQuantile } from 'd3-scale';
diff --git a/src/explorer/Search/Form/SearchForm.tsx b/src/explorer/Search/Form/SearchForm.tsx
index ba1501cd7..e9f7128cf 100644
--- a/src/explorer/Search/Form/SearchForm.tsx
+++ b/src/explorer/Search/Form/SearchForm.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { loader } from 'graphql.macro';
+// import { loader } from 'graphql.macro';
 import { print } from 'graphql/language/printer';
 
 import Grid from '@material-ui/core/Grid';
diff --git a/src/explorer/Search/Results/Row.tsx b/src/explorer/Search/Results/Row.tsx
index 6d8b84b18..d4892b339 100644
--- a/src/explorer/Search/Results/Row.tsx
+++ b/src/explorer/Search/Results/Row.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import uniq from 'lodash/uniq';
 import TableRow from '@material-ui/core/TableRow';
 import TableCell from '@material-ui/core/TableCell';
-import { Link } from 'next/link';
+import Link from 'next/link';
 import Chip from '@material-ui/core/Chip';
 import Avatar from '@material-ui/core/Avatar';
 
@@ -25,7 +25,7 @@ export default function ResultRow({ loo }) {
   return (
     <TableRow>
       <TableCell component="th" scope="row">
-        <Link to={`./loos/${loo.id}`}>
+        <Link href={`./loos/${loo.id}`}>
           <Chip
             avatar={
               <Avatar>
diff --git a/src/explorer/Search/index.tsx b/src/explorer/Search/index.tsx
index 7af0156df..a7f663ed3 100644
--- a/src/explorer/Search/index.tsx
+++ b/src/explorer/Search/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import useSWR from 'swr';
 import { useLocation, useHistory, useRouteMatch } from 'next/link';
 import { parse, stringify } from 'query-string';
-import { loader } from 'graphql.macro';
+// import { loader } from 'graphql.macro';
 import { print } from 'graphql/language/printer';
 
 import Results from './Results';
diff --git a/src/explorer/explorer.module.css b/src/explorer/explorer.module.css
index 92e0e34e6..d3b9cfda9 100644
--- a/src/explorer/explorer.module.css
+++ b/src/explorer/explorer.module.css
@@ -1,8 +1,3 @@
-body {
-  background-color: #e8eaf6;
-  margin: 0;
-}
-
 .main {
   flex: 1;
   padding: 2rem;
@@ -21,6 +16,6 @@ body {
   text-decoration: underline;
 }
 
-:global(.leaflet-container) {
+/* :global(.leaflet-container) {
   z-index: 0;
-}
+} */
diff --git a/src/explorer/index.tsx b/src/explorer/index.tsx
index 41d3f2c80..a825dbb26 100644
--- a/src/explorer/index.tsx
+++ b/src/explorer/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import { Switch, Route, useRouteMatch } from 'next/link';
-
+import Link from 'next/link';
+import Router from 'next/router';
 import Layout from './Layout';
 import Home from './Home';
 import HeadlineStats from './HeadlineStats';
@@ -11,33 +11,32 @@ import Voyager from './Voyager';
 import Map from './Map';
 
 export default function Explorer() {
-  let match = useRouteMatch();
+
 
   return (
     <Layout>
-      <Switch>
-        <Route exact path={`${match.path}/`}>
-          <Home />
-        </Route>
-        <Route path={`${match.path}/loos/:id`}>
-          <Loo />
-        </Route>
-        <Route path={`${match.path}/statistics`}>
-          <HeadlineStats />
-        </Route>
-        <Route path={`${match.path}/areas`}>
-          <Areas />
-        </Route>
-        <Route path={`${match.path}/search`}>
-          <Search />
-        </Route>
-        <Route path={`${match.path}/voyager`}>
-          <Voyager />
-        </Route>
-        <Route exact path={`${match.path}/map`}>
-          <Map />
-        </Route>
-      </Switch>
+      <Link exact href={`${Router.pathname}/`}>
+        <Home />
+      </Link>
+      <Link href={`${Router.pathname}/loos/:id`}>
+        <Loo />
+      </Link>
+      <Link href={`${Router.pathname}/statistics`}>
+        <HeadlineStats />
+      </Link>
+      <Link href={`${Router.pathname}/areas`}>
+        <Areas />
+      </Link>
+      <Link href={`${Router.pathname}/search`}>
+        <Search />
+      </Link>
+      <Link href={`${Router.pathname}/voyager`}>
+        <Voyager />
+      </Link>
+      <Link exact href={`${Router.pathname}/map`}>
+        <Map />
+      </Link>
+
     </Layout>
   );
 }
diff --git a/src/index.tsx b/src/index.tsx
deleted file mode 100644
index 205f8754a..000000000
--- a/src/index.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-// Polyfills
-import 'react-app-polyfill/ie11';
-import 'react-app-polyfill/stable';
-import 'resize-observer-polyfill';
-
-import React, { Suspense, lazy } from 'react';
-import ReactDOM from 'react-dom';
-import { Router, Route, Switch, Redirect } from 'next/link';
-import { createBrowserHistory } from 'history';
-import { SWRConfig } from 'swr';
-
-import ProtectedRoute from './components/ProtectedRoute';
-import AuthCallback from './pages/AuthCallback';
-import HomePage from './pages/HomePage';
-import AboutPage from './pages/AboutPage';
-import ContactPage from './pages/ContactPage';
-import ContributePage from './pages/ContributePage';
-import MapPage from './pages/MapPage';
-import UseOurLoosPage from './pages/UseOurLoosPage';
-import CookiesPage from './pages/CookiesPage';
-import PrivacyPage from './pages/PrivacyPage';
-import NotFound from './pages/404';
-import PageLoading from './components/PageLoading';
-
-import AuthProvider from './Auth';
-import fetcher from './graphql/fetcher';
-import { MapStateProvider } from './components/MapState';
-
-if (process.env.REACT_APP_MOCKS) {
-  require('./mocks');
-}
-
-const history = createBrowserHistory();
-
-const Explorer = lazy(() =>
-  import(/*webpackChunkName: 'explorer'*/ './explorer')
-);
-const AddPage = lazy(() =>
-  import(/*webpackChunkName: 'add'*/ './pages/AddPage')
-);
-const EditPage = lazy(() =>
-  import(/*webpackChunkName: 'edit'*/ './pages/EditPage')
-);
-const RemovePage = lazy(() =>
-  import(/*webpackChunkName: 'remove'*/ './pages/RemovePage')
-);
-
-ReactDOM.render(
-  <AuthProvider>
-    <SWRConfig
-      value={{
-        fetcher,
-      }}
-    >
-      <MapStateProvider>
-        <Router history={history}>
-          <Suspense fallback={<PageLoading />}>
-            <Switch>
-              <Route exact path="/" component={HomePage} />
-              <ProtectedRoute path="/loos/add" component={AddPage} />
-              <Route path="/loos/:id" exact component={HomePage} />
-              <Route exact path="/about" component={AboutPage} />
-              <Route exact path="/cookies" component={CookiesPage} />
-              <Route exact path="/privacy" component={PrivacyPage} />
-              <Route exact path="/use-our-loos" component={UseOurLoosPage} />
-              <Route exact path="/contact" component={ContactPage} />
-              <Route
-                path="/contribute"
-                render={(props) => <ContributePage {...props} />}
-              />
-              <Route
-                path="/login"
-                render={() => <Redirect to="/contribute" />}
-              />
-              <Route
-                path="/map/:lng/:lat"
-                render={(props) => <MapPage {...props} />}
-              />
-              <Route
-                exact
-                path="/callback"
-                render={(props) => <AuthCallback {...props} />}
-              />
-              <Route
-                path="/explorer"
-                render={(props) => <Explorer {...props} />}
-              />
-              <ProtectedRoute path="/loos/:id/edit" component={EditPage} />
-              <ProtectedRoute path="/loos/:id/remove" component={RemovePage} />
-              <Route component={NotFound} />
-            </Switch>
-          </Suspense>
-        </Router>
-      </MapStateProvider>
-    </SWRConfig>
-  </AuthProvider>,
-  document.getElementById('root')
-);
diff --git a/src/mocks.tsx b/src/mocks.tsx
index 508067e8c..2deddd06e 100644
--- a/src/mocks.tsx
+++ b/src/mocks.tsx
@@ -2,7 +2,7 @@ import { setupWorker, rest } from 'msw';
 import { graphql } from 'graphql';
 import { getExecutableSchema, mockResolver } from '@lola-tech/graphql-kimera';
 import { v4 as uuid } from 'uuid';
-import { loader } from 'graphql.macro';
+// import { loader } from 'graphql.macro';
 
 const typeDefs = loader('./api/typeDefs.graphql');
 
diff --git a/src/pages/AboutPage.tsx b/src/pages/AboutPage.tsx
index c5f7549c2..c41e164fe 100644
--- a/src/pages/AboutPage.tsx
+++ b/src/pages/AboutPage.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link } from 'next/link';
+import Link from 'next/link';
 import { Helmet } from 'react-helmet';
 import styled from '@emotion/styled';
 
@@ -77,7 +77,7 @@ const AboutPage = (props) => {
         <p>
           The information comes from the public - anyone can go on the website
           and{' '}
-          <Button variant="link" as={Link} to="/">
+          <Button variant="link" as={Link} href="/">
             add, edit or remove toilets
           </Button>
           . We also use open data and request information from councils,{' '}
@@ -138,7 +138,7 @@ const AboutPage = (props) => {
         <SubHeading>The Explorer</SubHeading>
         <p>
           <Button variant="link" as="a" href="">
-            <Link to="/explorer">Visit the Explorer</Link>
+            <Link href="/explorer">Visit the Explorer</Link>
           </Button>
           &nbsp;to get an overview of the statistics and details related to the
           Toilet Map. These statistics are calculated on-demand, so will be up
diff --git a/src/pages/AddPage.tsx b/src/pages/AddPage.tsx
index e20f86959..0c484ad8e 100644
--- a/src/pages/AddPage.tsx
+++ b/src/pages/AddPage.tsx
@@ -3,7 +3,7 @@ import { Helmet } from 'react-helmet';
 import queryString from 'query-string';
 import { Redirect } from 'next/link';
 import { mutate } from 'swr';
-import { loader } from 'graphql.macro';
+// import { loader } from 'graphql.macro';
 import { print } from 'graphql/language/printer';
 
 import PageLayout from '../components/PageLayout';
diff --git a/src/pages/CookiesPage.tsx b/src/pages/CookiesPage.tsx
index 908edfa3e..5dc736f0c 100644
--- a/src/pages/CookiesPage.tsx
+++ b/src/pages/CookiesPage.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link } from 'next/link';
+import Link from 'next/link';
 import { Helmet } from 'react-helmet';
 
 import PageLayout from '../components/PageLayout';
diff --git a/src/pages/EditPage.tsx b/src/pages/EditPage.tsx
index f1177e856..45ab65b4b 100644
--- a/src/pages/EditPage.tsx
+++ b/src/pages/EditPage.tsx
@@ -1,12 +1,12 @@
 import React, { useState, useEffect } from 'react';
 import { Helmet } from 'react-helmet';
-import { Link, Redirect } from 'next/link';
+import Link from 'next/link';
 import merge from 'lodash/merge';
 import cloneDeep from 'lodash/cloneDeep';
 import uniqBy from 'lodash/uniqBy';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import useSWR, { mutate } from 'swr';
-import { loader } from 'graphql.macro';
+// import { loader } from 'graphql.macro';
 import { print } from 'graphql/language/printer';
 
 import PageLayout from '../components/PageLayout';
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index b2a3f69a6..944a25a10 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -1,17 +1,15 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { useParams, useRouteMatch } from 'next/link';
+import Link from 'next/link';
 import queryString from 'query-string';
 import { Helmet } from 'react-helmet';
 import useSWR from 'swr';
-import { loader } from 'graphql.macro';
-import { print } from 'graphql/language/printer';
-
+// // import { loader } from 'graphql.macro';
+// import { print } from 'graphql/language/printer';
+import dynamic from 'next/dynamic';
 import PageLayout from '../components/PageLayout';
-import LooMap from '../components/LooMap';
 import useNearbyLoos from '../components/useNearbyLoos';
 import Box from '../components/Box';
-import ToiletDetailsPanel from '../components/ToiletDetailsPanel';
 import Sidebar from '../components/Sidebar';
 import Notification from '../components/Notification';
 import VisuallyHidden from '../components/VisuallyHidden';
@@ -19,13 +17,14 @@ import { useMapState } from '../components/MapState';
 
 import config, { FILTERS_KEY } from '../config';
 
-const FIND_LOO_BY_ID_QUERY = print(loader('../graphql/findLooById.graphql'));
+// const FIND_LOO_BY_ID_QUERY = print(loader('../graphql/findLooById.graphql'));
 
 const SIDEBAR_BOTTOM_MARGIN = 32;
 
 const HomePage = ({ initialPosition, ...props }) => {
   const [mapState, setMapState] = useMapState();
-
+  const LooMap = React.useMemo(() => dynamic(() => import('../components/LooMap'), { loading: () => <p>Loading map...</p>, ssr: false, }), [])
+  const ToiletDetailsPanel = React.useMemo(() => dynamic(() => import('../components/ToiletDetailsPanel'), { loading: () => <p>Loading map...</p>, ssr: false, }), [])
   let initialState = config.getSettings(FILTERS_KEY);
 
   // default any unsaved filters as 'false'
@@ -122,9 +121,8 @@ const HomePage = ({ initialPosition, ...props }) => {
           right={0}
           m={3}
           maxWidth={326}
-          maxHeight={`calc(100% - ${
-            toiletPanelDimensions.height || 0
-          }px - ${SIDEBAR_BOTTOM_MARGIN}px)`}
+          maxHeight={`calc(100% - ${toiletPanelDimensions.height || 0
+            }px - ${SIDEBAR_BOTTOM_MARGIN}px)`}
           overflowY="auto"
           // center on small viewports
           mx={['auto', 0]}
diff --git a/src/pages/RemovePage.tsx b/src/pages/RemovePage.tsx
index 4cec53881..1fec37685 100644
--- a/src/pages/RemovePage.tsx
+++ b/src/pages/RemovePage.tsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { Helmet } from 'react-helmet';
 import useSWR from 'swr';
 import { Redirect, useParams, useHistory } from 'next/link';
-import { loader } from 'graphql.macro';
+// import { loader } from 'graphql.macro';
 import { print } from 'graphql/language/printer';
 
 import config from '../config';
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
new file mode 100644
index 000000000..3b159f729
--- /dev/null
+++ b/src/pages/_app.tsx
@@ -0,0 +1,102 @@
+// Polyfills
+import 'react-app-polyfill/ie11';
+import 'react-app-polyfill/stable';
+import 'resize-observer-polyfill';
+
+import React, { Suspense, lazy } from 'react';
+import ReactDOM from 'react-dom';
+import Router from 'next/router';
+import Link from 'next/link';
+import { SWRConfig } from 'swr';
+
+import ProtectedRoute from '../components/ProtectedRoute';
+import AuthCallback from './AuthCallback';
+import HomePage from './HomePage';
+import AboutPage from './AboutPage';
+import ContactPage from './ContactPage';
+import ContributePage from './ContributePage';
+import MapPage from './MapPage';
+import UseOurLoosPage from './UseOurLoosPage';
+import CookiesPage from './CookiesPage';
+import PrivacyPage from './PrivacyPage';
+import NotFound from './404';
+import PageLoading from '../components/PageLoading';
+
+import AuthProvider from '../Auth';
+import fetcher from '../graphql/fetcher';
+import { MapStateProvider } from '../components/MapState';
+
+// if (process.env.REACT_APP_MOCKS) {
+//   lazy(() =>
+//     import(/*webpackChunkName: 'explorer'*/ '../mocks')
+//   );
+// }
+
+const Explorer = lazy(() =>
+  import(/*webpackChunkName: 'explorer'*/ '../explorer')
+);
+const AddPage = lazy(() =>
+  import(/*webpackChunkName: 'add'*/ './AddPage')
+);
+const EditPage = lazy(() =>
+  import(/*webpackChunkName: 'edit'*/ './EditPage')
+);
+const RemovePage = lazy(() =>
+  import(/*webpackChunkName: 'remove'*/ './RemovePage')
+);
+
+// ReactDOM.render(
+//  ,
+//   (typeof document !== 'undefined') && document.getElementById('root')
+// );
+
+
+const App = ({Component, pageProps}) => (
+  <AuthProvider>
+  <SWRConfig
+    value={{
+      fetcher,
+    }}
+  >
+    <MapStateProvider>
+      <Component {...pageProps} />
+        {/* <Suspense fallback={<PageLoading />}> */}
+            {/* <Link exact href="/" component={HomePage} /> */}
+            {/* <ProtectedRoute href="/loos/add" component={AddPage} />
+            <Link href="/loos/:id" exact component={HomePage} />
+            <Link exact href="/about" component={AboutPage} />
+            <Link exact href="/cookies" component={CookiesPage} />
+            <Link exact href="/privacy" component={PrivacyPage} />
+            <Link exact href="/use-our-loos" component={UseOurLoosPage} />
+            <Link exact href="/contact" component={ContactPage} />
+            <Link
+              href="/contribute"
+              render={(props) => <ContributePage {...props} />}
+            />
+            <Link
+              href="/login"
+              render={() => <Redirect to="/contribute" />}
+            />
+            <Link
+              href="/map/:lng/:lat"
+              render={(props) => <MapPage {...props} />}
+            />
+            <Link
+              exact
+              href="/callback"
+              render={(props) => <AuthCallback {...props} />}
+            />
+            <Link
+              href="/explorer"
+              render={(props) => <Explorer {...props} />}
+            />
+            <ProtectedRoute href="/loos/:id/edit" component={EditPage} />
+            <ProtectedRoute href="/loos/:id/remove" component={RemovePage} />
+            <Link component={NotFound} /> */}
+        {/* </Suspense> */}
+    </MapStateProvider>
+  </SWRConfig>
+</AuthProvider>
+)
+
+export default App;
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
new file mode 100644
index 000000000..bb720f603
--- /dev/null
+++ b/src/pages/_document.tsx
@@ -0,0 +1,22 @@
+import Document, { Html, Head, Main, NextScript } from 'next/document'
+
+class MyDocument extends Document {
+  static async getInitialProps(ctx) {
+    const initialProps = await Document.getInitialProps(ctx)
+    return { ...initialProps }
+  }
+
+  render() {
+    return (
+      <Html>
+        <Head />
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}
+
+export default MyDocument
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index 37afa241f..47aeaa895 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "types": ["node", "@emotion/react"],
     "target": "es5",
     "lib": [
       "dom",