Merge pull request #1843 from rschamp/upgrade-react

Upgrade to React 16
scratchfoundation · Apr 2, 2018 · ba45940 · ba45940
2 parents 18ddbbf + 2f8017b
commit ba45940
Show file tree

Hide file tree

Showing 22 changed files with 305 additions and 186 deletions.
diff --git a/dev-server/index.js b/dev-server/index.js
@@ -6,7 +6,8 @@ var webpack = require('webpack');
 var compiler = webpack(require('../webpack.config.js'));
 var handler = require('./handler');
 var log = require('./log');
-var routes = require('../src/routes.json').concat(require('../src/routes-dev.json'));
+var routes = require('../src/routes.json').concat(require('../src/routes-dev.json'))
+    .filter(route => !process.env.VIEW || process.env.VIEW === route.view);
 
 // Create server
 var app = express();

diff --git a/package.json b/package.json
@@ -31,6 +31,7 @@
     "raven": "0.10.0"
   },
   "devDependencies": {
+    "ajv": "6.4.0",
     "async": "1.5.2",
     "autoprefixer": "6.3.6",
     "babel-cli": "6.26.0",
@@ -54,8 +55,8 @@
     "exenv": "1.2.0",
     "fastly": "1.2.1",
     "file-loader": "0.8.4",
-    "formsy-react": "0.19.5",
-    "formsy-react-components": "0.11.1",
+    "formsy-react": "1.1.4",
+    "formsy-react-components": "1.0.0",
     "git-bundle-sha": "0.0.2",
     "glob": "5.0.15",
     "google-libphonenumber": "1.0.21",
@@ -79,15 +80,15 @@
     "postcss-loader": "2.0.10",
     "prop-types": "15.6.0",
     "raven-js": "3.0.4",
-    "react": "15.5.4",
-    "react-dom": "15.5.4",
-    "react-intl": "2.1.2",
+    "react": "16.2.0",
+    "react-dom": "16.2.0",
+    "react-intl": "2.4.0",
     "react-modal": "3.1.11",
     "react-onclickoutside": "6.7.1",
-    "react-redux": "4.4.5",
+    "react-redux": "5.0.7",
     "react-responsive": "3.0.0",
-    "react-slick": "0.12.2",
-    "react-telephone-input": "3.8.6",
+    "react-slick": "0.20.0",
+    "react-telephone-input": "4.3.4",
     "redux": "3.5.2",
     "redux-thunk": "2.0.1",
     "sass-lint": "1.5.1",

diff --git a/src/components/carousel/carousel.jsx b/src/components/carousel/carousel.jsx
@@ -2,8 +2,7 @@ const classNames = require('classnames');
 const defaults = require('lodash.defaults');
 const PropTypes = require('prop-types');
 const React = require('react');
-const Slider = require('react-slick');
-
+const Slider = require('react-slick').default;
 const Thumbnail = require('../thumbnail/thumbnail.jsx');
 
 const frameless = require('../../lib/frameless.js');

diff --git a/src/components/carousel/legacy-carousel.jsx b/src/components/carousel/legacy-carousel.jsx
@@ -5,7 +5,7 @@ const classNames = require('classnames');
 const defaults = require('lodash.defaults');
 const PropTypes = require('prop-types');
 const React = require('react');
-const Slider = require('react-slick');
+const Slider = require('react-slick').default;
 
 const Thumbnail = require('../thumbnail/thumbnail.jsx');
 

diff --git a/src/components/crashmessage/crashmessage.jsx b/src/components/crashmessage/crashmessage.jsx
@@ -0,0 +1,38 @@
+const classNames = require('classnames');
+const PropTypes = require('prop-types');
+const React = require('react');
+const FormattedMessage = require('react-intl').FormattedMessage;
+
+const Button = require('../forms/button.jsx');
+
+require('./crashmessage.scss');
+
+const CrashMessage = props => (
+    <div className={classNames(['crash-container', props.className])}>
+        <img
+            className=""
+            src="/images/unhandled.png"
+        />
+        <div className="crash-message">
+            <h2>
+                <FormattedMessage id="general.error" />
+            </h2>
+            <p>
+                <FormattedMessage id="general.unhandledError" />
+            </p>
+            <Button
+                className=""
+                onClick={props.onBack}
+            >
+                <FormattedMessage id="general.back" />
+            </Button>
+        </div>
+    </div>
+);
+
+CrashMessage.propTypes = {
+    className: PropTypes.string,
+    onBack: PropTypes.func
+};
+
+module.exports = CrashMessage;
diff --git a/src/components/crashmessage/crashmessage.scss b/src/components/crashmessage/crashmessage.scss
@@ -0,0 +1,22 @@
+.crash-container {
+    @import "../../colors";
+    @import "../../frameless";
+
+    margin: 3rem auto;
+
+    border: 1px solid $ui-border;
+    border-radius: 10px;
+    background-color: $background-color;
+    width: 60%;
+    overflow: hidden;
+    text-align: center;
+
+    img {
+        width: 100%;
+    }
+
+    .crash-message {
+        margin: 2rem;
+    }
+
+}
diff --git a/src/components/errorboundary/errorboundary.jsx b/src/components/errorboundary/errorboundary.jsx
@@ -0,0 +1,36 @@
+const PropTypes = require('prop-types');
+const React = require('react');
+
+const CrashMessageComponent = require('../crashmessage/crashmessage.jsx');
+import log from '../../lib/log.js';
+
+class ErrorBoundary extends React.Component {
+    constructor (props) {
+        super(props);
+        this.state = {
+            hasError: false
+        };
+    }
+
+    componentDidCatch (error, info) {
+        // Display fallback UI
+        this.setState({hasError: true});
+        log.error(`Unhandled Error: ${error}, info: ${info}`);
+    }
+
+    handleBack () {
+        window.history.back();
+    }
+
+    render () {
+        if (this.state.hasError) {
+            return <CrashMessageComponent onBack={this.handleBack} />;
+        }
+        return this.props.children;
+    }
+}
+ErrorBoundary.propTypes = {
+    children: PropTypes.node
+};
+
+module.exports = ErrorBoundary;
diff --git a/src/components/forms/checkbox.jsx b/src/components/forms/checkbox.jsx
@@ -17,7 +17,14 @@ const Checkbox = props => (
 );
 
 Checkbox.propTypes = {
-    className: PropTypes.string
+    className: PropTypes.string,
+    value: PropTypes.bool,
+    valueLabel: PropTypes.string
+};
+
+Checkbox.defaultProps = {
+    value: false,
+    valueLabel: ''
 };
 
 module.exports = inputHOC(defaultValidationHOC(Checkbox));
diff --git a/src/components/forms/form.jsx b/src/components/forms/form.jsx
@@ -27,7 +27,7 @@ class Form extends React.Component {
     }
     render () {
         return (
-            <Formsy.Form
+            <Formsy.default
                 className={classNames('form', this.props.className)}
                 ref={form => {
                     this.formsy = form;
@@ -36,13 +36,13 @@ class Form extends React.Component {
                 {...this.props}
             >
                 {React.Children.map(this.props.children, child => {
-                    if (!child) return child;
+                    if (!child) return null;
                     if (child.props.name === 'all') {
                         return React.cloneElement(child, {value: this.state.allValues});
                     }
                     return child;
                 })}
-            </Formsy.Form>
+            </Formsy.default>
         );
     }
 }

diff --git a/src/components/forms/general-error.jsx b/src/components/forms/general-error.jsx
@@ -11,18 +11,21 @@ require('./general-error.scss');
  * give it a name, and apply your validation error to
  * the name of the GeneralError component.
  */
-const GeneralError = props => {
-    if (!props.showError()) return null;
-    return (
-        <p className="general-error">
-            {props.getErrorMessage()}
-        </p>
-    );
-};
+/* eslint-disable react/prefer-stateless-function */
+class GeneralError extends React.Component {
+    render () {
+        if (!this.props.showError()) return null;
+        return (
+            <p className="general-error">
+                {this.props.getErrorMessage()}
+            </p>
+        );
+    }
+}
 
 GeneralError.propTypes = {
     getErrorMessage: PropTypes.func,
     showError: PropTypes.func
 };
 
-module.exports = Formsy.HOC(GeneralError);
+module.exports = Formsy.withFormsy(GeneralError);
diff --git a/src/components/forms/input.jsx b/src/components/forms/input.jsx
@@ -1,4 +1,3 @@
-const bindAll = require('lodash.bindall');
 const classNames = require('classnames');
 const FRCInput = require('formsy-react-components').Input;
 const omit = require('lodash.omit');
@@ -11,43 +10,21 @@ const inputHOC = require('./input-hoc.jsx');
 require('./input.scss');
 require('./row.scss');
 
-class Input extends React.Component {
-    constructor (props) {
-        super(props);
-        bindAll(this, [
-            'handleInvalid',
-            'handleValid'
-        ]);
-        this.state = {
-            status: ''
-        };
-    }
-    handleValid () {
-        this.setState({
-            status: 'pass'
-        });
-    }
-    handleInvalid () {
-        this.setState({
-            status: 'fail'
-        });
-    }
-    render () {
-        return (
-            <FRCInput
-                className="input"
-                rowClassName={classNames(
-                    this.state.status,
-                    this.props.className,
-                    {'no-label': (typeof this.props.label === 'undefined')}
-                )}
-                onInvalid={this.handleInvalid}
-                onValid={this.handleValid}
-                {...omit(this.props, ['className'])}
-            />
-        );
-    }
-}
+const Input = ({
+    className,
+    label,
+    ...props
+}) => (
+    <FRCInput
+        className="input"
+        label={label}
+        rowClassName={classNames(
+            className,
+            {'no-label': (typeof label === 'undefined')}
+        )}
+        {...omit(props, ['className'])}
+    />
+);
 
 Input.propTypes = {
     className: PropTypes.string,