Merge pull request #457 from gladly-team/kevin/code-split-routes

Preparation to code split by route and measure impact

.eslintignore

@@ -0,0 +1,3 @@
+node_modules
+coverage
+build

.eslintrc.json

@@ -0,0 +1,17 @@
+{
+  "extends": ["airbnb", "prettier"],
+  "plugins": ["prettier"],
+  "rules": {
+    "prettier/prettier": "error",
+    "global-require": 0,
+    "no-console": 0,
+    "no-underscore-dangle": 0
+  },
+  "parserOptions": {
+    "ecmaVersion": 2018,
+    "sourceType": "module"
+  },
+  "env": {
+    "es6": true
+  }
+}

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "useTabs": false,
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": es5,
+}

.travis.yml

@@ -39,6 +39,7 @@ env:
   - TEST_REACT_APP_SENTRY_STAGE=test
   - TEST_REACT_APP_ADS_ENABLED=false
   - TEST_REACT_APP_FEATURE_FLAG_SEARCH_PAGE_ENABLED=false
+  - TEST_REACT_APP_MEASURE_TIME_TO_INTERACTIVE=false
   # GraphQL / Lambda
   - TEST_GQL_LOGGER=sentry
   - TEST_GQL_SENTRY_PUBLIC_KEY=55d60901ba254432814cd9015d100959
@@ -88,6 +89,7 @@ env:
   - DEV_REACT_APP_SENTRY_STAGE=dev
   - DEV_REACT_APP_ADS_ENABLED=true
   - DEV_REACT_APP_FEATURE_FLAG_SEARCH_PAGE_ENABLED=true
+  - DEV_REACT_APP_MEASURE_TIME_TO_INTERACTIVE=true
   # GraphQL / Lambda
   - DEV_GQL_LOGGER=sentry
   - DEV_GQL_SENTRY_PUBLIC_KEY=55d60901ba254432814cd9015d100959
@@ -132,6 +134,7 @@ env:
   - PROD_REACT_APP_SENTRY_STAGE=prod
   - PROD_REACT_APP_ADS_ENABLED=true
   - PROD_REACT_APP_FEATURE_FLAG_SEARCH_PAGE_ENABLED=false
+  - PROD_REACT_APP_MEASURE_TIME_TO_INTERACTIVE=false
   # GraphQL / Lambda
   - PROD_GQL_LOGGER=sentry
   - PROD_GQL_SENTRY_PUBLIC_KEY=55d60901ba254432814cd9015d100959

package.json

@@ -10,12 +10,20 @@
     "@babel/preset-env": "^7.2.3",
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^23.6.0",
+    "eslint": "5.6.0",
+    "eslint-config-airbnb": "^17.1.0",
+    "eslint-config-prettier": "^4.0.0",
+    "eslint-plugin-import": "^2.16.0",
+    "eslint-plugin-jsx-a11y": "^6.2.0",
+    "eslint-plugin-prettier": "^3.0.1",
+    "eslint-plugin-react": "^7.12.4",
     "husky": "^1.3.1",
     "jest": "^23.6.0",
     "lint-staged": "^8.1.0",
     "nodemon": "^1.18.9",
     "npm-run-all": "^4.1.5",
-    "npmlog": "^4.1.2"
+    "npmlog": "^4.1.2",
+    "prettier": "^1.16.2"
   },
   "scripts": {
     "build": "yarn run all:install & docker-compose build",
@@ -29,8 +37,9 @@
     "ci:test": "babel-node ./scripts/runTests.js",
     "ci:test:integration": "babel-node ./scripts/runEndToEndTests.js",
     "parent:install": "yarn install",
-    "parent:lint": "echo \"TODO: lint scripts/**/*.js\"",
-    "parent:lint:fix": "echo \" TODO: lint fix scripts/**/*.js\"",
+    "parent:format": "prettier \"scripts/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
+    "parent:format:fix": "yarn run parent:format --write",
+    "parent:lint": "eslint \"scripts/*.{js,jsx}\"",
     "parent:test": "yarn run parent:lint && jest",
     "all:install": "yarn run parent:install && npm-run-all -s s3:install web:install graphql:install dynamodb:install lambda:install",
     "docker:start": "docker-compose up 2>&1 | node scripts/log-prefix.js [docker] cyan",
@@ -68,6 +77,7 @@
   },
   "lint-staged": {
     "**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
+      "yarn run parent:format:fix",
       "yarn run web:format:fix",
       "yarn run graphql:format:fix",
       "yarn run lambda:format:fix",

scripts/assign-env-vars.js

@@ -1,4 +1,3 @@
-
 // Used to assign stage-specific env vars in our CI setup
 // to the env var names used in app code.
 // For example, in the "dev" stage, we assign the value of
@@ -29,6 +28,7 @@ export const envVars = [
   { name: 'REACT_APP_SENTRY_DEBUG', optional: true },
   { name: 'REACT_APP_SENTRY_ENABLE_AUTO_BREADCRUMBS', optional: true },
   { name: 'REACT_APP_FEATURE_FLAG_SEARCH_PAGE_ENABLED', optional: true },
+  { name: 'REACT_APP_MEASURE_TIME_TO_INTERACTIVE', optional: true },
   // GraphQL / Lambda
   { name: 'GQL_LOGGER' },
   { name: 'GQL_SENTRY_PUBLIC_KEY' },
@@ -55,24 +55,24 @@ export const envVars = [
   { name: 'SELENIUM_DRIVER_TYPE', optional: true },
   { name: 'SELENIUM_HOST', optional: true },
   { name: 'BROWSERSTACK_USER', optional: true },
-  { name: 'BROWSERSTACK_KEY', optional: true }
+  { name: 'BROWSERSTACK_KEY', optional: true },
 ]
 
 // Expect one argument, the stage name.
-const assignEnvVars = function (stageName, allEnvVarsRequired = true) {
+const assignEnvVars = (stageName, allEnvVarsRequired = true) => {
   // Using the name of the stage, assign the stage-specific
   // value to the environment value name.
   const stageNameUppercase = stageName ? stageName.toUpperCase() : ''
   const stagePrefix = stageNameUppercase ? `${stageNameUppercase}_` : ''
-  envVars.forEach((envVar) => {
+  envVars.forEach(envVar => {
     const envVarName = envVar.name
 
     // Delete the existing env var so that any undefined,
     // optional stage-specific env vars remain undefined.
     delete process.env[envVarName]
 
-    let stageEnvVarName = `${stagePrefix}${envVarName}`
-    let stageEnvVar = process.env[stageEnvVarName]
+    const stageEnvVarName = `${stagePrefix}${envVarName}`
+    const stageEnvVar = process.env[stageEnvVarName]
 
     if (typeof stageEnvVar === 'undefined' || stageEnvVar === null) {
       // If the env var is optional and unset, log the info.

scripts/deploy.js

@@ -22,7 +22,9 @@ process.env.SLS_STAGE = serverlessStage
 console.log(`Set Serverless stage (SLS_STAGE) to "${serverlessStage}".`)
 
 console.log('Deploying...')
-const deploy = spawn('yarn', ['run', 'ci:deployservices'], {stdio: 'inherit'})
+const deploy = spawn('yarn', ['run', 'ci:deployservices'], {
+  stdio: 'inherit',
+})
 
 // Exit this process with the child process code.
-deploy.on('exit', (code) => process.exit(code))
+deploy.on('exit', code => process.exit(code))

scripts/deployHelpers.js

@@ -6,10 +6,12 @@
  * @param {(string|undefined)} envCI - The value of process.env.CI
  * @return {boolean} Returns `true` if there are no errors.
  */
-export const checkDeployValidity = function (stageName, envCI) {
+export const checkDeployValidity = (stageName, envCI) => {
   const acceptableStages = ['', 'DEV', 'TEST', 'STAGING', 'PROD']
   if (acceptableStages.indexOf(stageName) === -1) {
-    throw new Error(`Deployment stage name must be one of: DEV, TEST, STAGING, PROD`)
+    throw new Error(
+      `Deployment stage name must be one of: DEV, TEST, STAGING, PROD`
+    )
   }
   if (envCI !== 'true') {
     throw new Error('Deployment should only happen via a CI server.')
@@ -22,7 +24,7 @@ export const checkDeployValidity = function (stageName, envCI) {
  * @param {string} stageName - The name of the deployment stage
  * @return {string} Returns the corresponding stage name string.
  */
-export const getServerlessStageName = function (stageName) {
+export const getServerlessStageName = stageName => {
   const acceptableSlsStages = ['dev', 'test', 'staging', 'prod']
   const slsStageName = stageName.toLowerCase()
   if (acceptableSlsStages.indexOf(slsStageName) === -1) {

scripts/log-prefix.js

@@ -1,12 +1,12 @@
-
+/* eslint import/no-extraneous-dependencies: 0 */
 // Add prefixes to logs to know which service they're coming from.
 
 const log = require('npmlog')
 const readline = require('readline')
 
 // Expect two arguments, a prefix string and a color string.
 const args = process.argv.slice(2)
-var heading = args[0] || ''
+let heading = args[0] || ''
 const headingColor = args[1] || 'black'
 
 // Set log heading and styling.
@@ -19,16 +19,16 @@ while (heading.length < HEADER_CHAR_MIN_LENGTH) {
 log.heading = heading
 log.headingStyle = {
   fg: headingColor,
-  bold: false
+  bold: false,
 }
 
 // Creating our own log level simply to hide thelog level prefix in output.
 log.addLevel('all', 2500, {}, '')
 
 const rl = readline.createInterface({
-  input: process.stdin
+  input: process.stdin,
 })
 
-rl.on('line', function (line) {
+rl.on('line', line => {
   log.all('', line)
 })

scripts/manage-fixtures.js

@@ -6,7 +6,7 @@
 import path from 'path'
 import {
   deleteFixturesFromTable,
-  loadFixturesIntoTable
+  loadFixturesIntoTable,
 } from '../graphql/integration-tests/utils/fixture-utils'
 
 const args = process.argv.slice(2)
@@ -15,33 +15,51 @@ switch (command) {
   // load [table-name] [file-path]
   // e.g.:
   // yarn run manage-fixtures load BackgroundImages-dev ./migration/fixtures-prod/BackgroundImages.json
-  case 'load':
+  case 'load': {
     const tableNameToLoad = args[1]
     const fixturesFileToLoad = args[2]
-    const fixturesFilePathToLoad = path.join(__dirname, '../', fixturesFileToLoad)
+    const fixturesFilePathToLoad = path.join(
+      __dirname,
+      '../',
+      fixturesFileToLoad
+    )
     console.log('Loading fixtures:', tableNameToLoad, fixturesFilePathToLoad)
     loadFixturesIntoTable(fixturesFilePathToLoad, tableNameToLoad)
       .then(() => {
         console.log('Finished loading fixtures.')
       })
-      .catch((err) => {
+      .catch(err => {
         console.error(err)
       })
     break
-  case 'delete':
+  }
+  case 'delete': {
     const tableNameToDelete = args[1]
     const fixturesFileToDelete = args[2]
     const hashKeyNameToDelete = args[3]
-    const fixturesFilePathToDelete = path.join(__dirname, '../', fixturesFileToDelete)
-    console.log('Deleting fixtures:', tableNameToDelete, fixturesFilePathToDelete)
-    deleteFixturesFromTable(fixturesFilePathToDelete, tableNameToDelete, hashKeyNameToDelete)
+    const fixturesFilePathToDelete = path.join(
+      __dirname,
+      '../',
+      fixturesFileToDelete
+    )
+    console.log(
+      'Deleting fixtures:',
+      tableNameToDelete,
+      fixturesFilePathToDelete
+    )
+    deleteFixturesFromTable(
+      fixturesFilePathToDelete,
+      tableNameToDelete,
+      hashKeyNameToDelete
+    )
       .then(() => {
         console.log('Finished deleting fixtures.')
       })
-      .catch((err) => {
+      .catch(err => {
         console.error(err)
       })
     break
+  }
   default:
     console.log('Invalid command passed to manage-fixtures.')
     process.exit()

scripts/runEndToEndTests.js

@@ -6,7 +6,7 @@ import assignEnvVars from './assign-env-vars'
 // Set env vars.
 assignEnvVars('test')
 
-const tests = spawn('yarn', ['run', 'test:integration'], {stdio: 'inherit'})
+const tests = spawn('yarn', ['run', 'test:integration'], { stdio: 'inherit' })
 
 // Exit this process with the child process code.
-tests.on('exit', (code) => process.exit(code))
+tests.on('exit', code => process.exit(code))

scripts/runTests.js

@@ -7,7 +7,7 @@ import assignEnvVars from './assign-env-vars'
 const requireAllEnvVarsSet = true
 assignEnvVars('test', requireAllEnvVarsSet)
 
-const tests = spawn('yarn', ['run', 'test'], {stdio: 'inherit'})
+const tests = spawn('yarn', ['run', 'test'], { stdio: 'inherit' })
 
 // Exit this process with the child process code.
-tests.on('exit', (code) => process.exit(code))
+tests.on('exit', code => process.exit(code))

web/.env

@@ -25,6 +25,9 @@ REACT_APP_MOCK_DEV_AUTHENTICATION=true
 # Ads
 REACT_APP_ADS_ENABLED=false
 
+# Performance monitoring
+REACT_APP_MEASURE_TIME_TO_INTERACTIVE=false
+
 # End to end tests
 SELENIUM_DRIVER_TYPE=local
 SELENIUM_HOST=http://localhost:3000

web/package.json

@@ -25,7 +25,8 @@
     "relay-compiler": "^2.0.0",
     "relay-runtime": "^2.0.0",
     "selenium-webdriver": "^3.4.0",
-    "serverless": "^1.36.1"
+    "serverless": "^1.36.1",
+    "source-map-explorer": "^1.6.0"
   },
   "dependencies": {
     "@material-ui/core": "^3.9.0",
@@ -53,11 +54,12 @@
     "react-measure": "2.1.3",
     "react-relay": "^2.0.0",
     "react-router": "^4.3.1",
-    "react-router-dom": "^4.3.1",
+    "react-router-dom": "4.4.0-beta.6",
     "react-sparkle": "^1.0.4",
     "react-transition-group": "^2.5.3",
     "relay-commit-mutation-promise": "^1.0.1",
     "sanitize-html": "^1.19.1",
+    "tti-polyfill": "^0.2.2",
     "uuid": "^3.3.2",
     "xregexp": "^4.2.0"
   },
@@ -66,6 +68,7 @@
     "start:react-app": "cross-env NODE_PATH=src/ react-scripts start",
     "build": "yarn run relay --watchman false && cross-env NODE_PATH=src/ react-scripts build",
     "eject": "react-scripts eject",
+    "analyze": "source-map-explorer",
     "postinstall": "patch-package",
     "deploy": "npm-run-all -s build sls:s3sync sls:deploy",
     "relay": "relay-compiler --src ./src/ --schema ./data/schema.graphql",

web/public/index.html

@@ -24,6 +24,19 @@
     -->
     <title>Tab for a Cause</title>
 
+    <!--
+      @gladly-customization:
+      Set up the TTI polyfill for non-production environments:
+      https://github.com/GoogleChromeLabs/tti-polyfill
+    -->
+    <% if (process.env.REACT_APP_MEASURE_TIME_TO_INTERACTIVE === "true"){ %>
+    <script>
+    !function(){if('PerformanceLongTaskTiming' in window){var g=window.__tti={e:[]};
+    g.o=new PerformanceObserver(function(l){g.e=g.e.concat(l.getEntries())});
+    g.o.observe({entryTypes:['longtask']})}}();
+    </script>
+    <% } %>
+
     <!--
       @gladly-customization:
       global style for all served HTML

web/src/index.js

@@ -2,7 +2,6 @@ import Raven from 'raven-js'
 import React from 'react'
 import ReactDOM from 'react-dom'
 import Root from 'js/root'
-import { initializeFirebase } from 'js/authentication/firebaseConfig'
 import { getUsername } from 'js/authentication/user'
 import * as serviceWorker from 'js/serviceWorker'
 
@@ -44,9 +43,6 @@ try {
 }
 
 const initApp = () => {
-  // Init Firebase
-  initializeFirebase()
-
   require('./index.css')
   ReactDOM.render(<Root />, document.getElementById('root'))
 }