gardening

.babelrc

@@ -1,10 +1,16 @@
 {
-  "env": {
-    "production": {
-      "plugins": ["emotion"]
-    },
-    "development": {
-      "plugins": [["emotion", { "sourceMap": true }]]
-    }
-  }
-}
+    "presets": [
+        [
+            "next/babel",
+            {
+                "preset-react": {
+                    "runtime": "automatic",
+                    "importSource": "@emotion/react"
+                }
+            }
+        ]
+    ],
+    "plugins": [
+        "@emotion/babel-plugin"
+    ]
+}

.eslintrc.js

@@ -6,7 +6,7 @@ module.exports = {
     node: true,
     jest: true,
   },
-  extends: ['eslint:recommended', 'react-app'],
+  extends: ['eslint:recommended'/*, 'react-app'*/],
   parserOptions: {
     ecmaVersion: 2017,
     ecmaFeatures: {

.example.env

@@ -4,9 +4,19 @@ 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://some.remote.api
-
-# Connect to GA in prod
-REACT_APP_GOOGLE_MAPS_API_KEY=
+# A long, secret value used to encrypt the session cookie
+AUTH0_SECRET='A REALLY LONG STRING'
+# The base url of your application
+AUTH0_BASE_URL='http://localhost:3000'
+# The url of your Auth0 tenant domain
+AUTH0_ISSUER_BASE_URL='https://gbptm.eu.auth0.com'
+# Your Auth0 application's Client ID
+AUTH0_CLIENT_ID='ASK FOR THIS'
+# Your Auth0 application's Client Secret
+AUTH0_CLIENT_SECRET='ASK FOR THIS'
+# Our API's audience setting
+AUTH0_AUDIENCE='https://www.toiletmap.org.uk/graphql'
+# The key in the session or token where we keep user permissions
+AUTH0_PERMISSIONS_KEY='https://toiletmap.org.uk/permissions'
+#The key in the session or token where we keep profile info
+AUTH0_PROFILE_KEY='https://toiletmap.org.uk/profile'

.github/workflows/ci.yml

@@ -12,7 +12,7 @@ jobs:
     name: Tests
 
     runs-on: ubuntu-latest
-
+ 
     steps:
     - uses: actions/checkout@v2
     - name: Yarn install (with caching)

.gitignore

@@ -21,3 +21,6 @@ build
 .idea
 
 .vercel
+
+# nextjs
+.next

codegen.yml

@@ -0,0 +1,34 @@
+overwrite: true
+schema: "http://localhost:3000/api"
+documents: "src/**/*.graphql"
+generates:
+  src/generated/graphql.tsx:
+    plugins:
+      - "typescript"
+      - "typescript-operations"
+      - "typescript-react-apollo"
+    config:
+          reactApolloVersion: 3
+          withHooks: false
+          withHOC: false
+          withComponent: false
+          exportFragmentSpreadSubTypes: true
+          documentMode: graphQLTag
+  src/generated/page.tsx:
+    config:
+      documentMode: external
+      importDocumentNodeExternallyFrom: ./graphql
+      reactApolloVersion: 3
+      withHooks: true
+      # withHOC: false
+      # excludePatterns: 'getComments'
+      # excludePatternsOptions: 'i'
+      # customDataIdFromObjectName: 'test'
+      # customDataIdFromObjectImport: 'abc'
+      apolloClientInstanceImport: '../components/withApollo'
+      # apolloStateKey: '__APOLLO_STATE__'
+    preset: import-types
+    presetConfig:
+      typesPath: ./graphql
+    plugins:
+      - graphql-codegen-apollo-next-ssr # replace by - graphql-codegen-apollo-next-ssr

graphql.d.ts

@@ -0,0 +1,6 @@
+declare module '*.graphql' {
+  import { DocumentNode } from 'graphql';
+  const Schema: DocumentNode;
+
+  export = Schema;
+}

lint-staged.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  '*.{js,ts,tsx}': ['prettier --write', 'eslint --max-warnings=0'],
+  '**/*.ts?(x)': () => 'tsc -p tsconfig.json --noEmit',
+  '*.{json,md,yml}': ['prettier --write'],
+};

next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+  typescript: {
+    // !! WARN !!
+    // Dangerously allow production builds to successfully complete even if
+    // your project has type errors.
+    // !! WARN !!
+    ignoreBuildErrors: true,
+  },
+  eslint: {
+    // Warning: Dangerously allow production builds to successfully complete even if
+    // your project has ESLint errors.
+    ignoreDuringBuilds: true,
+  },
+};

package.json

@@ -4,19 +4,17 @@
   "version": "2.0.0",
   "description": "",
   "scripts": {
-    "analyze": "source-map-explorer 'build/static/js/*.js'",
-    "build": "react-app-rewired build",
-    "dev": "react-app-rewired start",
-    "api": "node -r dotenv/config ./api/index.js",
+    "build": "next build",
+    "dev": "next dev",
+    "start": "next start",
     "lint": "eslint . && stylelint \"src/**/*.css\"",
     "format": "prettier --write \"./**/*.{js,json}\"",
     "test": "jest",
-    "build:testable": "CI= REACT_APP_MOCKS=true yarn build",
     "migrate": "migrate-mongo up",
     "generate": "node -r dotenv/config ./src/api/db/manage/generate/index.js --confirm",
     "areas": "node -r dotenv/config ./src/api/db/manage/areaToDatabase/index.js",
-    "styleguide": "styleguidist server",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "gql:codegen": "start-server-and-test dev http-get://localhost:3000/api 'graphql-codegen --config codegen.yml'"
   },
   "repository": {
     "type": "git",
@@ -27,62 +25,57 @@
   "bugs": {
     "url": "https://github.com/neontribe/gbptm/issues"
   },
-  "lint-staged": {
-    "*.js": [
-      "eslint --max-warnings 0",
-      "prettier --write"
-    ],
-    "*.css": "stylelint"
-  },
   "dependencies": {
+    "@apollo/client": "3.4.10",
     "@artsy/fresnel": "1.5.0",
-    "@emotion/babel-preset-css-prop": "10.2.1",
-    "@emotion/core": "10.1.1",
+    "@auth0/nextjs-auth0": "1.5.0",
+    "@emotion/babel-plugin": "11.3.0",
     "@emotion/is-prop-valid": "0.8.8",
-    "@emotion/styled": "10.0.27",
+    "@emotion/react": "11.4.0",
+    "@emotion/styled": "11.3.0",
     "@fortawesome/fontawesome-svg-core": "1.2.35",
     "@fortawesome/free-brands-svg-icons": "5.15.3",
     "@fortawesome/free-regular-svg-icons": "5.15.3",
     "@fortawesome/free-solid-svg-icons": "5.15.3",
     "@fortawesome/react-fontawesome": "0.1.14",
+    "@graphql-tools/schema": "8.2.0",
+    "@graphql-tools/utils": "8.2.2",
     "@material-ui/core": "4.11.4",
     "@material-ui/icons": "4.11.2",
     "@rehooks/component-size": "1.0.3",
     "@styled-system/prop-types": "5.1.5",
-    "apollo-server": "2.24.1",
-    "auth0-js": "9.16.2",
+    "apollo-server-core": "3.3.0",
+    "apollo-server-micro": "3.3.0",
     "chart.js": "2.9.4",
     "d3-scale": "3.3.0",
     "date-fns": "2.22.1",
     "downshift": "6.1.3",
-    "emotion-theming": "10.0.27",
     "focus-visible": "5.2.0",
     "framer-motion": "2.9.5",
+    "graphql": "15.5.3",
     "graphql-iso-date": "3.6.1",
-    "graphql-request": "3.4.0",
+    "graphql-request": "3.5.0",
     "graphql-voyager": "1.0.0-rc.31",
-    "graphql.macro": "1.4.2",
     "hasha": "5.2.2",
     "jsonwebtoken": "8.5.1",
     "jwks-rsa": "2.0.4",
     "leaflet": "1.7.1",
     "lodash": "4.17.21",
+    "micro": "9.3.4",
     "mongoose": "5.12.14",
     "mongoose-paginate": "5.0.3",
+    "next": "11.1.2",
     "node-fetch": "2.6.1",
     "prop-types": "15.7.2",
     "query-string": "7.0.1",
     "react": "17.0.2",
     "react-animated-number": "0.4.4",
-    "react-app-polyfill": "2.0.0",
     "react-chartjs-2": "2.11.2",
     "react-dom": "17.0.2",
     "react-helmet": "6.1.0",
     "react-hook-form": "6.15.8",
     "react-leaflet": "2.8.0",
     "react-leaflet-control": "2.1.2",
-    "react-router-dom": "5.2.0",
-    "react-router-hash-link": "2.4.3",
     "react-simple-maps": "2.3.0",
     "react-tooltip": "4.2.21",
     "resize-observer-polyfill": "1.5.1",
@@ -91,55 +84,53 @@
     "timeago-react": "3.0.3"
   },
   "devDependencies": {
-    "@commitlint/cli": "12.1.4",
-    "@commitlint/config-conventional": "12.1.4",
+    "@commitlint/cli": "13.1.0",
+    "@commitlint/config-conventional": "13.1.0",
+    "@graphql-codegen/cli": "2.1.1",
+    "@graphql-codegen/import-types-preset": "2.1.3",
+    "@graphql-codegen/typescript": "2.2.0",
+    "@graphql-codegen/typescript-operations": "2.1.3",
+    "@graphql-codegen/typescript-react-apollo": "3.1.3",
     "@lola-tech/graphql-kimera": "1.0.1",
     "@mapbox/geojson-area": "0.2.2",
     "@mapbox/geojson-rewind": "0.5.1",
     "@shelf/jest-mongodb": "1.3.4",
+    "@types/jest": "26.0.24",
+    "@types/node": "16.7.10",
     "@types/puppeteer": "5.4.4",
-    "apollo-server-testing": "2.24.1",
+    "@types/react": "17.0.20",
+    "@types/react-dom": "17.0.9",
+    "@types/react-leaflet": "2.8.1",
+    "@types/styled-system": "5.1.11",
+    "apollo-server-testing": "2.25.2",
     "cli-progress": "3.9.0",
     "customize-cra": "1.0.0",
     "dotenv": "10.0.0",
+    "eslint": "7.32.0",
+    "eslint-config-next": "11.1.2",
     "geojson-precision": "1.0.0",
-    "http-proxy-middleware": "2.0.1",
-    "husky": "6.0.0",
+    "graphql-codegen-apollo-next-ssr": "1.7.0",
+    "husky": "7.0.2",
     "jest-puppeteer": "5.0.3",
-    "lint-staged": "11.1.1",
+    "lint-staged": "11.1.2",
     "migrate-mongo": "8.2.3",
     "msw": "0.33.0",
-    "nodemon": "2.0.12",
     "prettier": "2.3.2",
     "puppeteer": "10.1.0",
-    "react-app-rewired": "2.1.8",
-    "react-scripts": "3.4.4",
-    "react-styleguidist": "11.1.7",
-    "serve": "12.0.0",
-    "source-map-explorer": "2.5.2",
+    "start-server-and-test": "1.14.0",
     "stylelint": "13.13.1",
     "stylelint-config-standard": "22.0.0",
     "topojson-server": "3.0.1",
     "topojson-simplify": "3.0.3",
+    "typescript": "4.4.2",
     "uuid": "8.3.2"
   },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version",
-      "ie 11"
-    ]
-  },
-  "resolutions": {
-    "graphql": "14.7.0"
-  },
   "msw": {
     "workerDirectory": "public"
+  },
+  "browser": {
+    "fs": false,
+    "path": false,
+    "os": false
   }
 }