[react-v16] Part I: Basics

__test__/AssignmentSummary.test.js

@@ -4,7 +4,6 @@
 import React from 'react'
 import { mount } from 'enzyme'
 import { StyleSheetTestUtils } from 'aphrodite'
-import injectTapEventPlugin from 'react-tap-event-plugin'
 import each from 'jest-each'
 import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
 import { CardActions, CardTitle } from 'material-ui/Card'
@@ -64,7 +63,6 @@ describe('AssignmentSummary text', function t() {
 })
 
 describe('AssignmentSummary actions inUSA and NOT AllowSendAll', () => {
-  injectTapEventPlugin()  // prevents warning
   function create(unmessaged, unreplied, badTimezone, past, skipped, isDynamic) {
     window.NOT_IN_USA = 0
     window.ALLOW_SEND_ALL = false
@@ -163,10 +161,7 @@ it('renders "Send later" when there is a badTimezoneCount', () => {
 })
 
 describe('contacts filters', () => {
-  // These are an attempt to confirm that the buttons will work.
-  // It would be better to simulate clicking them, but I can't
-  // get it to work right now because of 'react-tap-event-plugin'
-  // some hints are here https://github.com/mui-org/material-ui/issues/4200#issuecomment-217738345
+  // TODO: material-ui switch test to clicks
 
   it('filters correctly in USA', () => {
     window.NOT_IN_USA = 0

__test__/setup.js

@@ -1,5 +1,5 @@
 import { configure } from 'enzyme'
-import Adapter from 'enzyme-adapter-react-15'
+import Adapter from 'enzyme-adapter-react-16'
 
 
 configure({ adapter: new Adapter() })

docs/HOWTO-upgrade-react.md

@@ -0,0 +1,50 @@
+# Upgrading to React v16
+
+## Upgrade Plan
+
+Upgrading to React v16 requires upgrading the following dependencies at the same time due to breaking internal API changes: `material-ui`, `webpack` + `react-hot-loader`, `react-apollo`, and `react-router`. The plan is to:
+
+1. Make changes common to each dependency upgrade.
+2. For each dependency, open a PR getting it the first ~90% of the way there (the last ~10% requiring updates from another dependency)
+3. Merge these dependency-specific PRs, resolving (hopefully minimal) conflicts
+4. Disable all routes and get application to compile and run.
+5. Open additional PRs to enable functionality route by route
+
+## Dependency Notes
+
+### `react`
+
+Replace `onTouchTap` with `onClick` and drop the [now-deprecated](https://github.com/zilverline/react-tap-event-plugin#deprecated) `react-tap-event-plugin`.
+
+### `webpack` + `react-hot-loader`
+
+`react-hot-loader` upgrade is a mix of instructions from:
+
+- https://github.com/gaearon/react-hot-loader#getting-started
+- http://gaearon.github.io/react-hot-loader/getstarted/
+
+Ex. the use of the `hot` HOC is listed as preferred in the repo's readme but not mentioned at all in the official documentation.
+
+### `material-ui`
+
+v1.2.0 adds longer term support, better layout support, and more functionality to `Table` components, which would be helpful for MoveOnOrg/Spoke#579 and addresses MoveOnOrg/Spoke#480.
+
+**Gotchas**:
+
+- Functionality for `AutoComplete` has been removed in favor of one of three 3rd party choices (98f6484)
+- `DatePicker` does not have a working implementation in v1.2.0 (40604ae)
+- Remove `react-addons-css-transition-group` (it's not being used anywhere) (70113cd)
+- Update Toggle --> Switch (401da20)
+- Update DropDownMenu --> List + Menu (d294314)
+- Confirm that the [`material-ui-color-picker` package](https://www.npmjs.com/package/material-ui-color-picker) works with v1.2.0
+
+### `react-router`
+
+Update `react-router` [from v2.5 to v4.3](https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/migrating.md).
+Switch from deprecated `react-router-redux` to [`connected-react-router`](https://github.com/supasate/connected-react-router).
+
+### `react-apollo`
+
+Update `react-apollo` from v0.3 to v2.1. Inspired by [MoveOnOrg/Spoke#418](https://github.com/MoveOnOrg/Spoke/pull/418).
+
+* v2.x [drops `redux`](https://www.apollographql.com/docs/react/recipes/2.0-migration.html#redux) for its store

package.json

@@ -87,7 +87,7 @@
     "cookie-session": "^2.0.0-alpha.1",
     "dataloader": "^1.2.0",
     "dotenv": "^2.0.0",
-    "draft-js": "^0.7.0",
+    "draft-js": "^0.10.5",
     "express": "^4.14.0",
     "faker": "^3.1.0",
     "fs": "^0.0.2",
@@ -121,16 +121,15 @@
     "pg": "^6.4.2",
     "prop-types": "^15.6.0",
     "query-string": "^4.1.0",
-    "react": "^15.6.1",
+    "react": "^16.4.1",
     "react-addons-css-transition-group": "^15.2.1",
     "react-apollo": "^0.3.15",
     "react-async-script": "^0.6.0",
     "react-chartjs": "^0.7.3",
-    "react-dom": "^15.6.1",
-    "react-formal": "^0.18.5",
+    "react-dom": "^16.4.1",
+    "react-formal": "^0.28.4",
     "react-router": "^2.5.2",
     "react-router-redux": "^4.0.5",
-    "react-tap-event-plugin": "^2.0.0",
     "redis": "^2.8.0",
     "redux": "^3.7.2",
     "redux-thunk": "^2.1.0",
@@ -151,7 +150,7 @@
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-es2017": "^6.24.1",
     "enzyme": "^3.3.0",
-    "enzyme-adapter-react-15": "^1.0.5",
+    "enzyme-adapter-react-16": "^1.1.1",
     "eslint": "2.13.1",
     "eslint-config-airbnb": "^9.0.1",
     "eslint-plugin-import": "^1.10.2",
@@ -166,7 +165,7 @@
     "prettier": "1.13.6",
     "react-hot-loader": "^1.3.0",
     "react-scripts": "^1.1.0",
-    "react-test-renderer": "15",
+    "react-test-renderer": "16.4.1",
     "regenerator-runtime": "^0.10.5",
     "selenium-webdriver": "^3.6.0",
     "sqlite3": "^3.1.9",

src/components/App.jsx

@@ -4,16 +4,12 @@ import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
 import muiTheme from '../styles/mui-theme'
 import theme from '../styles/theme'
 import { StyleSheet, css } from 'aphrodite'
-import injectTapEventPlugin from 'react-tap-event-plugin'
 import Form from 'react-formal'
 import GSTextField from './forms/GSTextField'
 import GSDateField from './forms/GSDateField'
 import GSScriptField from './forms/GSScriptField'
 import GSSelectField from './forms/GSSelectField'
 
-// Needed for MaterialUI
-injectTapEventPlugin()
-
 Form.addInputTypes({
   string: GSTextField,
   number: GSTextField,

src/components/AssignmentTexter.jsx

@@ -154,13 +154,13 @@ class AssignmentTexter extends React.Component {
         text={title}
       />,
       <IconButton
-        onTouchTap={this.handleNavigatePrevious}
+        onClick={this.handleNavigatePrevious}
         disabled={!this.hasPrevious()}
       >
         <NavigateBeforeIcon />
         </IconButton>,
       <IconButton
-        onTouchTap={this.handleNavigateNextforSkip}
+        onClick={this.handleNavigateNextforSkip}
         disabled={!this.hasNext()}
       >
         <NavigateNextIcon />

src/components/BulkSendButton.jsx

@@ -33,7 +33,7 @@ export default class BulkSendButton extends Component {
     return (
       <div className={css(styles.container)}>
         <RaisedButton
-          onTouchTap={this.sendMessages}
+          onClick={this.sendMessages}
           label={this.state.isSending ? 'Sending...' : `Send Bulk (${window.BULK_SEND_CHUNK_SIZE})`}
           disabled={this.state.isSending}
           primary

src/components/CampaignCannedResponseForm.jsx

@@ -61,7 +61,7 @@ class CannedResponseForm extends React.Component {
             />
             <FlatButton
               label='Cancel'
-              onTouchTap={() => this.setState({ showForm: false })}
+              onClick={() => this.setState({ showForm: false })}
               style={{
                 marginLeft: 5,
                 display: 'inline-block'

src/components/CampaignCannedResponsesForm.jsx

@@ -78,7 +78,7 @@ export default class CampaignCannedResponsesForm extends React.Component {
         secondary
         label='Add new canned response'
         icon={<CreateIcon />}
-        onTouchTap={() => this.setState({ showForm: true })}
+        onClick={() => this.setState({ showForm: true })}
       />
     )
   }
@@ -92,7 +92,7 @@ export default class CampaignCannedResponsesForm extends React.Component {
         secondaryText={response.text}
         rightIconButton={(
           <IconButton
-            onTouchTap={() => {
+            onClick={() => {
               const newVals = this.props.formValues.cannedResponses.map((responseToDelete) => {
                 if (responseToDelete.id === response.id) {
                   return null

src/components/CampaignInteractionStepsForm.jsx

@@ -135,7 +135,7 @@ export default class CampaignInteractionStepsForm extends React.Component {
               fullWidth
               hintText='Answer to the previous question'
             /> : ''}
-            {interactionStep.parentInteractionId ? <DeleteIcon style={styles.pullRight} onTouchTap={this.deleteStep(interactionStep.id).bind(this)} /> : ''}
+            {interactionStep.parentInteractionId ? <DeleteIcon style={styles.pullRight} onClick={this.deleteStep(interactionStep.id).bind(this)} /> : ''}
             {interactionStep.parentInteractionId && this.props.availableActions && this.props.availableActions.length ?
               (<div key={`answeractions-${interactionStep.id}`}>
                  <Form.Field
@@ -187,7 +187,7 @@ export default class CampaignInteractionStepsForm extends React.Component {
         {interactionStep.questionText && interactionStep.script && (!interactionStep.parentInteractionId || interactionStep.answerOption) ? <div>
           <RaisedButton
             label='+ Add a response'
-            onTouchTap={this.addStep(interactionStep.id).bind(this)}
+            onClick={this.addStep(interactionStep.id).bind(this)}
             style={{ marginBottom: '10px' }}
           />
         </div> : ''}
@@ -217,7 +217,7 @@ export default class CampaignInteractionStepsForm extends React.Component {
           {...dataTest('interactionSubmit')}
           primary
           label={this.props.saveLabel}
-          onTouchTap={this.onSave.bind(this)}
+          onClick={this.onSave.bind(this)}
         />
       </div>
     )

src/components/CampaignTextersForm.jsx

@@ -396,7 +396,7 @@ export default class CampaignTextersForm extends React.Component {
            : ''}
           <div className={css(styles.removeButton)}>
             <IconButton
-              onTouchTap={async () => {
+              onClick={async () => {
                 const currentFormValues = this.formValues()
                 const newFormValues = {
                   ...currentFormValues
@@ -468,7 +468,7 @@ export default class CampaignTextersForm extends React.Component {
               <RaisedButton
                 {...dataTest('addAll')}
                 label='Add All'
-                onTouchTap={(() => this.addAllTexters())}
+                onClick={(() => this.addAllTexters())}
               />
             </div>
           </div>

src/components/Chip.jsx

@@ -29,11 +29,11 @@ const styles = {
   }
 }
 
-function Chip({ text, iconRightClass, onIconRightTouchTap, onTouchTap, style = {} }) {
+function Chip({ text, iconRightClass, onIconRightTouchTap, onClick, style = {} }) {
   return (
-    <div style={_.extend({}, styles.chip, style)} onTouchTap={onTouchTap}>
+    <div style={_.extend({}, styles.chip, style)} onClick={onClick}>
       {text}
-      {iconRightClass ? React.createElement(iconRightClass, { style: styles.icon, onTouchTap: onIconRightTouchTap }) : ''}
+      {iconRightClass ? React.createElement(iconRightClass, { style: styles.icon, onClick: onIconRightTouchTap }) : ''}
     </div>
   )
 }
@@ -42,7 +42,7 @@ Chip.propTypes = {
   text: PropTypes.element,
   iconRightClass: PropTypes.string,
   onIconRightTouchTap: PropTypes.func,
-  onTouchTap: PropTypes.func,
+  onClick: PropTypes.func,
   style: PropTypes.object
 }
 

src/components/ConfirmButton.jsx

@@ -46,7 +46,7 @@ export default class ConfirmButton extends Component {
     return (
       <div className={css(styles.container)}>
         <RaisedButton
-          onTouchTap={this.toggleConfirmationDialog}
+          onClick={this.toggleConfirmationDialog}
           label={this.props.label}
         />
         <Dialog

src/components/Navigation.jsx

@@ -24,7 +24,7 @@ const Navigation = function Navigation(props) {
             {...dataTest(camelCase(`nav ${section.path}`))}
             key={section.name}
             primaryText={section.name}
-            onTouchTap={() => props.router.push(section.url)}
+            onClick={() => props.router.push(section.url)}
           />
         ))}
         <Divider />

src/components/ScriptEditor.jsx

@@ -162,7 +162,7 @@ class ScriptEditor extends React.Component {
           <Chip
             style={styles.scriptFieldButton}
             text={delimit(field)}
-            onTouchTap={() => this.addCustomField(field)}
+            onClick={() => this.addCustomField(field)}
           />
         ))}
       </div>

src/components/ScriptList.jsx

@@ -82,12 +82,12 @@ class ScriptList extends React.Component {
     //     targetOrigin={{horizontal: 'left', vertical: 'bottom'}}
     //   >
     //     <MenuItem primaryText={duplicateCampaignResponses && !script.isUserCreated ? "Duplicate and edit" : "Edit"}
-    //       onTouchTap={() => this.handleEditScript(script)}
+    //       onClick={() => this.handleEditScript(script)}
     //     />
     //     {
     //       script.isUserCreated ? (
     //         <MenuItem primaryText="Delete"
-    //           onTouchTap={() => this.handleDeleteScript(script.id)}
+    //           onClick={() => this.handleDeleteScript(script.id)}
     //         />
     //       ) : ''
     //     }
@@ -98,7 +98,7 @@ class ScriptList extends React.Component {
     const listItems = scripts.map((script) => (
       <ListItem
         value={script.text}
-        onTouchTap={() => onSelectCannedResponse(script)}
+        onClick={() => onSelectCannedResponse(script)}
         key={script.id}
         primaryText={script.title}
         secondaryText={script.text}
@@ -123,7 +123,7 @@ class ScriptList extends React.Component {
           <FlatButton
             label='Add new canned response'
             icon={<CreateIcon />}
-            onTouchTap={this.handleOpenDialog}
+            onClick={this.handleOpenDialog}
           />
         ) : ''}
         <Form.Context>
@@ -133,7 +133,7 @@ class ScriptList extends React.Component {
             actions={[
               <FlatButton
                 label='Cancel'
-                onTouchTap={this.handleCloseDialog}
+                onClick={this.handleCloseDialog}
               />,
               <Form.Button
                 type='submit'

src/components/SendButton.jsx

@@ -36,7 +36,7 @@ class SendButton extends Component {
     return (
       <div className={css(styles.container)}>
         <RaisedButton
-          onTouchTap={this.handleTouchTap}
+          onClick={this.handleTouchTap}
           disabled={this.props.disabled}
           label={this.clickStepLabels()[this.state.clickStepIndex]}
           primary

src/components/TexterFaqs.jsx

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types'
 import { Card, CardTitle, CardText } from 'material-ui/Card'
 
 const TexterFaqs = ({ faqs }) => {
-
   return (
     <div>
       <h1>Frequently Asked Questions</h1>