feat: IT RENDERS

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;
+//     }
+//   ),
+// };

next.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+    webpack: (config, { isServer }) => {
+      if (!isServer) {
+        config.resolve.fallback.fs = false;
+      }  
+      return config;
+    },
+  }

package.json

@@ -145,5 +145,10 @@
   },
   "msw": {
     "workerDirectory": "public"
+  },
+  "browser": {
+    "fs": false,
+    "path": false,
+    "os": false
   }
 }

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`,
     })
   );
 

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,33 +68,25 @@ 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',
   as: 'button',
 };
 
 /** @component */
-export default Button;
+export default StyledButton;

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. 
                 <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"

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>

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();
           }}
         />
       )}

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';

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';

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(

src/components/PageLayout.tsx

@@ -61,7 +61,7 @@ PageLayout.propTypes = {
   layoutMode: PropTypes.oneOf([LAYOUT_DEFAULT, LAYOUT_BLOG]),
 };
 
-PropTypes.defaultProps = {
+PageLayout.defaultProps = {
   layoutMode: LAYOUT_DEFAULT,
 };
 

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);

src/components/ProtectedRoute.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
-import { Route, Redirect } from 'next/link';
+import Link from 'next/link';
 
 import { useAuth } from '../Auth';
 
 const ProtectedRoute = ({ component: Component, injectProps, ...rest }) => {
   const auth = useAuth();
 
   return (
-    <Route
+    <Link
       {...rest}
       render={(props) => {
         if (auth.isAuthenticated()) {

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');
                   });
                 }}
               >