refactor(*): Support React 16

package.json

@@ -23,22 +23,24 @@
   },
   "dependencies": {
     "prop-types": "15.5.10",
-    "react-modal": "2.3.2"
+    "react-modal": "3.1.11"
   },
   "peerDependencies": {
-    "react": "15.x",
-    "redux": "3.7.x",
-    "react-redux": "5.x"
+    "react": "16.x",
+    "react-dom": "16.x",
+    "react-redux": "5.x",
+    "redux": "3.7.x"
   },
   "devDependencies": {
     "babel-eslint": "8.0.0",
     "commitizen": "2.9.6",
     "cz-conventional-changelog": "2.0.0",
     "eslint": "4.6.1",
     "eslint-plugin-react": "7.3.0",
+    "faker": "4.1.0",
     "nwb": "0.18.x",
-    "react": "15.6.1",
-    "react-dom": "15.6.1",
+    "react": "16.2.0",
+    "react-dom": "16.2.0",
     "react-redux": "5.0.6",
     "redux": "3.7.2",
     "redux-logger": "3.0.6",

src/component/Modal.js

@@ -1,7 +1,7 @@
-import React from 'react';
-import ReactModal from 'react-modal';
-import PropTypes from 'prop-types';
-import { propTypes as ModalProps } from 'react-modal/lib/components/Modal';
+import React from 'react'
+import ReactModal from 'react-modal'
+import PropTypes from 'prop-types'
+import { propTypes as ModalProps } from 'react-modal/lib/components/Modal'
 
 class Modal extends React.Component {
 	static propTypes = {
@@ -15,7 +15,7 @@ class Modal extends React.Component {
 	}
 
 	render() {
-		const { title, showClose, children, onRequestClose, ...rest } = this.props;
+		const { title, showClose, children, onRequestClose, ...rest } = this.props
 
 		return (
 			<ReactModal isOpen={ true }
@@ -31,8 +31,8 @@ class Modal extends React.Component {
 					</article>
 				</section>
 			</ReactModal>
-		);
+		)
 	}
 }
 
-export default Modal;
+export default Modal

src/container/ModalContainer.js

@@ -1,20 +1,19 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import Modal from '../component/Modal';
-import { getModalState } from '../reducer';
-import { unsetModal } from '../actions';
+import React from 'react'
+import { connect } from 'react-redux'
+import Modal from '../component/Modal'
+import { getModalState } from '../reducer'
+import { unsetModal } from '../actions'
 
 const ModalContainer = ({ state, unsetModal }) => {
-	if(!state) return null;
-	const { Component, props: { modalProps={}, componentProps={} } } = state;
-
+	if(!state) return <div />
+	const { Component, props: { modalProps={}, componentProps={} } } = state
 	return (
 		<Modal onRequestClose={ unsetModal } { ...modalProps }>
 			<Component { ...componentProps } />
 		</Modal>
-	);
+	)
 }
 
 export default connect(state => ({
 	state: getModalState(state)
-}), { unsetModal })(ModalContainer);
+}), { unsetModal })(ModalContainer)

src/reducer.js

@@ -1,19 +1,19 @@
-import { Actions } from './actions';
+import { Actions } from './actions'
 
-export const getModalState = state => state.modal;
+export const getModalState = state => state.modal
 
 export default (state = null, action) => {
 	switch(action.type) {
-		case Actions.SET_MODAL: {
-			const { Component, props } = action.payload;
-			return Object.assign({}, state, { Component, props });
-		}
+	case Actions.SET_MODAL: {
+		const { Component, props } = action.payload
+		return Object.assign({}, state, { Component, props })
+	}
 
-		case Actions.UNSET_MODAL: {
-			return null;
-		}
+	case Actions.UNSET_MODAL: {
+		return null
+	}
 
-		default:
-			return state;
+	default:
+		return state
 	}
 }