Upgrades, SSR fixes, refactors (#1308)

* feat: move next conf to mjs * refactor: remove old tool conf * chore: upgrade deps * chore: try upgrade to react 18 * chore: remove hooks eslint as its provided by another lib * fix: fresnel so that it runs with react 18 * feat: try out server components and edge
public-convenience-ltd · Mar 29, 2022 · 3e106bb · 3e106bb
1 parent dceb767
commit 3e106bb
Show file tree

Hide file tree

Showing 15 changed files with 280 additions and 217 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -4,8 +4,7 @@
     "next/core-web-vitals",
     "plugin:@typescript-eslint/recommended",
     "plugin:jsx-a11y/recommended",
-    "plugin:functional/no-mutations",
-    "plugin:react-hooks/recommended"
+    "plugin:functional/no-mutations"
   ],
   "parserOptions": {
     "ecmaFeatures": {

diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-16
+16.13
diff --git a/.yarnrc b/.yarnrc
diff --git a/codegen.yml b/codegen.yml
@@ -20,13 +20,7 @@ generates:
       importDocumentNodeExternallyFrom: ./graphql
       reactApolloVersion: 3
       withHooks: true
-      # withHOC: false
-      # excludePatterns: 'getComments'
-      # excludePatternsOptions: 'i'
-      # customDataIdFromObjectName: 'test'
-      # customDataIdFromObjectImport: 'abc'
       apolloClientInstanceImport: './withApollo'
-      # apolloStateKey: '__APOLLO_STATE__'
     preset: import-types
     presetConfig:
       typesPath: ./graphql

diff --git a/next.config.js b/next.config.js
@@ -7,6 +7,9 @@ module.exports = {
     // !! WARN !!
     ignoreBuildErrors: true,
   },
+  experimental: {
+    runtime: 'edge',
+  },
   async rewrites() {
     return [
       // Map lng-lat routes to a single page

diff --git a/package.json b/package.json
@@ -63,15 +63,15 @@
     "leaflet.markercluster": "1.5.3",
     "lodash": "4.17.21",
     "micro": "9.3.4",
-    "mongoose": "6.2.8",
+    "mongoose": "6.2.9",
     "mongoose-paginate": "5.0.3",
-    "next": "12.1.1",
-    "next-plausible": "3.1.6",
+    "next": "^12.1.2",
+    "next-plausible": "3.1.7",
     "ngeohash": "0.6.3",
     "prop-types": "15.8.1",
     "query-string": "7.1.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.0.0",
+    "react-dom": "18.0.0",
     "react-hook-form": "7.28.1",
     "react-leaflet": "3.2.5",
     "react-leaflet-control": "2.1.2",
@@ -92,22 +92,21 @@
     "@types/jest": "27.4.1",
     "@types/leaflet": "1.7.9",
     "@types/leaflet.markercluster": "^1.4.6",
-    "@types/lodash": "4.14.180",
+    "@types/lodash": "4.14.181",
     "@types/ngeohash": "0.6.4",
     "@types/node": "17.0.23",
     "@types/react": "17.0.43",
     "@types/react-dom": "17.0.14",
     "@types/react-leaflet": "2.8.2",
     "@types/styled-system": "5.1.15",
-    "@typescript-eslint/eslint-plugin": "5.16.0",
-    "@typescript-eslint/parser": "5.16.0",
+    "@typescript-eslint/eslint-plugin": "5.17.0",
+    "@typescript-eslint/parser": "5.17.0",
     "cli-progress": "3.10.0",
     "dotenv": "16.0.0",
     "eslint": "8.12.0",
-    "eslint-config-next": "12.1.1",
+    "eslint-config-next": "12.1.2",
     "eslint-plugin-functional": "4.2.0",
     "eslint-plugin-jsx-a11y": "6.5.1",
-    "eslint-plugin-react-hooks": "4.3.0",
     "geojson-precision": "1.0.0",
     "graphql-codegen-apollo-next-ssr": "1.7.1",
     "husky": "7.0.4",

diff --git a/src/components/EntryForm.tsx b/src/components/EntryForm.tsx
@@ -151,7 +151,6 @@ const Section: React.FC<{
 
       <Box as="tbody" pl={[2, 4]}>
         {questions.map(({ field, label, value, onChange }) => {
-          console.log(field, value);
           return (
             <Box as="tr" key={field} mt={3} onChange={onChange}>
               <Box as="td" width="52%" pl={[2, 4]}>
@@ -241,7 +240,7 @@ const EntryForm = ({ title, loo, children, ...props }) => {
     let transformed = pick(data, dirtyFieldNames);
 
     transformed = omit(transformed, ['geometry']);
-    console.log(data.geometry);
+
     // eslint-disable-next-line functional/immutable-data
     transformed.noPayment = data.isFree;
 

diff --git a/src/components/Logo/Logo.tsx b/src/components/Logo/Logo.tsx
@@ -4,15 +4,18 @@ import Image from 'next/image';
 import logo from './logo.svg';
 import Box from '../Box';
 
-const Logo = (props) => (
-  <Box width="150px">
+const Logo = React.forwardRef<HTMLDivElement>((props, ref) => (
+  <Box width="150px" ref={ref}>
     <Image
       src={logo}
       alt="The Great British Toilet Map"
       layout="responsive"
       {...props}
     />
   </Box>
-);
+));
+
+// eslint-disable-next-line functional/immutable-data
+Logo.displayName = 'Logo';
 
 export default Logo;
diff --git a/src/components/Media.tsx b/src/components/Media.tsx
@@ -2,7 +2,7 @@ import { createMedia } from '@artsy/fresnel';
 
 import theme from '../theme';
 
-const { MediaContextProvider, Media } = createMedia({
+const GBPTMMedia = createMedia({
   breakpoints: {
     sm: 0,
     md: parseInt(theme.breakpoints[0]),
@@ -11,4 +11,5 @@ const { MediaContextProvider, Media } = createMedia({
   },
 });
 
-export { MediaContextProvider, Media };
+export const mediaStyle = GBPTMMedia.createMediaStyle();
+export const { MediaContextProvider, Media } = GBPTMMedia;
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -11,45 +11,59 @@ import Header from '../components/Header';
 import Footer from '../components/Footer';
 import globalStyles from '../globalStyles';
 import theme from '../theme';
+import { useEffect, useState } from 'react';
 
-const App = ({ Component, pageProps }) => (
-  <PlausibleProvider
-    domain="toiletmap.org.uk"
-    customDomain="https://stats.toiletmap.org.uk/"
-  >
-    <UserProvider>
-      <MapStateProvider>
-        <ThemeProvider theme={theme}>
-          <MediaContextProvider>
-            {globalStyles}
+const App = ({ Component, pageProps }) => {
+  const [disableDynamicMediaQueries, setDisableDynamicMediaQueries] =
+    useState(true);
 
-            <Box display="flex" flexDirection="column" height="100%">
-              <Header>
-                <Footer />
-              </Header>
+  // Only enable dynamic media queries once the document has been hydrated.
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      setDisableDynamicMediaQueries(false);
+    }
+  }, [disableDynamicMediaQueries]);
 
-              <Box position="relative" display="flex" flexGrow={1}>
-                <Box
-                  as="main"
-                  flexGrow={1}
-                  // support screen readers in ie11
-                  role="main"
-                >
-                  <Component {...pageProps} />
-                </Box>
-              </Box>
+  return (
+    <PlausibleProvider
+      domain="toiletmap.org.uk"
+      customDomain="https://stats.toiletmap.org.uk/"
+    >
+      <UserProvider>
+        <MapStateProvider>
+          <ThemeProvider theme={theme}>
+            <MediaContextProvider
+              disableDynamicMediaQueries={disableDynamicMediaQueries}
+            >
+              {globalStyles}
 
-              <Box mt="auto">
-                <Media greaterThan="sm">
+              <Box display="flex" flexDirection="column" height="100%">
+                <Header>
                   <Footer />
-                </Media>
+                </Header>
+                <Box position="relative" display="flex" flexGrow={1}>
+                  <Box
+                    as="main"
+                    flexGrow={1}
+                    // support screen readers in ie11
+                    role="main"
+                  >
+                    <Component {...pageProps} />
+                  </Box>
+                </Box>
+
+                <Box mt="auto">
+                  <Media greaterThan="sm">
+                    <Footer />
+                  </Media>
+                </Box>
               </Box>
-            </Box>
-          </MediaContextProvider>
-        </ThemeProvider>
-      </MapStateProvider>
-    </UserProvider>
-  </PlausibleProvider>
-);
+            </MediaContextProvider>
+          </ThemeProvider>
+        </MapStateProvider>
+      </UserProvider>
+    </PlausibleProvider>
+  );
+};
 
 export default App;
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -0,0 +1,22 @@
+import { Html, Head, Main, NextScript } from 'next/document';
+import { mediaStyle } from '../components/Media';
+
+const Document = () => {
+  return (
+    <Html>
+      <Head>
+        <style
+          id="media-bps"
+          type="text/css"
+          dangerouslySetInnerHTML={{ __html: mediaStyle }}
+        />
+      </Head>
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+};
+
+export default Document;
diff --git a/src/pages/api/index.ts b/src/pages/api/index.ts
@@ -59,7 +59,7 @@ export const server = new ApolloServer({
         }
       }
     } catch (e) {
-      console.log(e);
+      console.error(e);
     }
     return {
       user,

diff --git a/tsconfig.json b/tsconfig.json
@@ -16,6 +16,6 @@
     "jsxImportSource": "@emotion/react",
     "incremental": true
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "next.config.js"],
   "exclude": ["node_modules"]
 }
diff --git a/typestat.json b/typestat.json