perf: update gatsby to v3 (#179)

* chore(deps): update gatsby monorepo

* ci(orb): update cypress executor to browsers-chrome78-ff70

* chore(deps): migrate project to Gatsby v3

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Justin Hall <justin.r.hall@gmail.com>

.circleci/config.yml

@@ -5,13 +5,13 @@ orbs:
 
 jobs:
   validate:
-    executor: cypress/browsers-chrome77
+    executor: cypress/browsers-chrome78-ff70
     steps:
       - attach_workspace:
           at: ~/
       - run: yarn validate
   release:
-    executor: cypress/browsers-chrome77
+    executor: cypress/browsers-chrome78-ff70
     steps:
       - attach_workspace:
           at: ~/
@@ -22,7 +22,7 @@ workflows:
     jobs:
       - cypress/run:
           yarn: true
-          executor: cypress/browsers-chrome77
+          executor: cypress/browsers-chrome78-ff70
           browser: chrome
           start: yarn serve
           wait-on: '--timeout 90000 http://localhost:8000'

cypress/e2e/settings-page.spec.ts

@@ -1,4 +1,4 @@
-import * as pkg from '../../package.json';
+import pkg from '../../package.json';
 
 function fillOutSettings(): Cypress.Chainable {
   cy.findByLabelText(/default party size/i)

gatsby-config.js

@@ -51,7 +51,6 @@ module.exports = {
   ],
   flags: {
     FAST_DEV: true,
-    FAST_REFRESH: true,
     PRESERVE_WEBPACK_CACHE: true,
     PRESERVE_FILE_DOWNLOAD_CACHE: true,
   },

package.json

@@ -46,14 +46,14 @@
     "@quid/merge-refs": "4.0.0",
     "@wkovacs64/normalize.css": "8.0.1",
     "currency.js": "2.0.3",
-    "gatsby": "2.32.9",
-    "gatsby-plugin-emotion": "5.4.0",
-    "gatsby-plugin-manifest": "2.12.1",
-    "gatsby-plugin-netlify": "2.11.0",
-    "gatsby-plugin-offline": "3.10.2",
-    "gatsby-plugin-react-helmet": "3.10.0",
-    "gatsby-plugin-typescript": "2.12.1",
-    "gatsby-plugin-typography": "2.12.0",
+    "gatsby": "3.0.3",
+    "gatsby-plugin-emotion": "6.0.0",
+    "gatsby-plugin-manifest": "3.0.0",
+    "gatsby-plugin-netlify": "3.0.0",
+    "gatsby-plugin-offline": "4.0.0",
+    "gatsby-plugin-react-helmet": "4.0.0",
+    "gatsby-plugin-typescript": "3.0.0",
+    "gatsby-plugin-typography": "3.0.0",
     "gatsby-plugin-use-dark-mode": "1.3.0",
     "git-current-commit": "1.1.0",
     "hex-rgb": "4.2.0",
@@ -86,7 +86,9 @@
     "@wkovacs64/prettier-config": "3.0.0",
     "axe-core": "4.1.3",
     "babel-eslint": "10.1.0",
+    "babel-preset-gatsby": "1.0.0",
     "commitizen": "4.2.3",
+    "core-js": "3.9.1",
     "cypress": "6.6.0",
     "cypress-axe": "0.12.2",
     "cz-conventional-changelog": "3.3.0",

src/@types/gatsbyjs__reach-router.d.ts

@@ -0,0 +1 @@
+declare module '@gatsbyjs/reach-router';

src/components/footer.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import { FaGithub } from 'react-icons/fa';
 // eslint-disable-next-line import/no-extraneous-dependencies
-import { useLocation } from '@reach/router'; // comes with Gatsby
+import { useLocation } from '@gatsbyjs/reach-router'; // comes with Gatsby
 import { rhythm } from '../theme';
 import A from './external-link';
 

src/components/header.tsx

@@ -2,9 +2,9 @@ import { useStaticQuery, graphql } from 'gatsby';
 import styled from '@emotion/styled';
 import { MdSettings } from 'react-icons/md';
 // eslint-disable-next-line import/no-extraneous-dependencies
-import { useLocation } from '@reach/router'; // comes with Gatsby
+import { useLocation } from '@gatsbyjs/reach-router'; // comes with Gatsby
 import currency from 'currency.js';
-import * as pkg from '../../package.json';
+import pkg from '../../package.json';
 import Content from '../elements/content';
 import H1 from '../elements/h1';
 import H2 from '../elements/h2';
@@ -44,10 +44,7 @@ const HeaderTitle: React.FunctionComponent = () => {
 };
 
 const Header: React.FunctionComponent = () => {
-  // TODO: remove this nonsense and just get `location` typed correctly
-  const location = useLocation() as import('reach__router').WindowLocation<{
-    bill?: string;
-  }>;
+  const location = useLocation();
 
   return (
     <HeaderContainer>

src/pages/index.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { navigate } from 'gatsby';
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
 import Layout from '../components/layout';
@@ -34,19 +35,15 @@ const BillInput = styled(NumericInput)`
   }
 `;
 
-const IndexPage: React.FunctionComponent<
-  import('reach__router').RouteComponentProps
-> = ({ navigate }) => {
+const IndexPage: React.FunctionComponent = () => {
   const [bill, setBill] = React.useState('');
   const [billInputDisabled, setBillInputDisabled] = React.useState(false);
   const [nextButtonDisabled, setNextButtonDisabled] = React.useState(true);
 
   function navigateToCalc(): void {
     setBillInputDisabled(true);
     setNextButtonDisabled(true);
-    if (navigate) {
-      navigate('calc', { state: { bill }, replace: true });
-    }
+    navigate('calc', { state: { bill }, replace: true });
   }
 
   const handleBillChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {