### Main

- **Remove `Immutable.js` in favor of `Immer`**
- **Migrate from `enzyme` to `react-testing-library`**
  - New instructions for snapshot and behavior testing
- **Embracing Hooks**
  - Add `eslint-plugin-react-hooks`
  - Migrate all class components to functions
  - Add `useInjectSaga` and `useInjectReducer` hooks
  - Remove generator options to extend `Component` or `PureComponent`. Replace with a `React.memo` option.
- **Use `React.lazy` and `Suspense` instead of `loadable-components` to code-split and asynchronously load components**
- **Upgrades to Babel 7, React 16.6, ESLint 5, styled-components 4**
  - Config file and Babel plugin cleanup
  - Fix extract-intl script for Babel 7
- **Upgrade Webpack to v4**
  - Syntax / function changes (mode, optimization, etc.)
  - Remove webpack loader syntax from main app
  - Better SVG handling
- **Webpack improvements**
  - Removal of dll plugin
  - Gzipping and better optimization config in prod
  - react-app-polyfill for targeted IE support
  - Switch from UglifyJS to Terser plugin
  - Icons generated by webpack-pwa-manifest plugin
- **Upgrade Enzyme to v3**
  - Add in new Adapter, as required
  - Minor Jest config tweaks to include new Enzyme setup config
- **Added support for node v9, v8**
  - Removed support for node v6
- **Add Prettier**
- **Upgrade ESLint to v4**
- **Add stylelint and stylelint config**

### Internals updates

- Many dependency updates including:
  - react and react-dom (`16.6` to `16.8.6`)
  - react-redux (`5` to `7`)
  - connected-react-router (`4` to `6`)
  - react-router-dom (`4` to `5`)
  - redux-saga (`0.16` to `1`)
  - sanitize.css (`4` to `8`)
- Update default saga injection mode to DAEMON
- Update generators to reflect all the stack changes
- Migrate default Node version to `lts/dubnium`
- Fix support for `stylelint`
- Fix setup script for Windows environments
- Generate passing tests for components/containers
- Rewrite generators code
- Complete rewrite or `generate-templates-for-linting.js`
- `webpack.DefinePlugin` => `webpack.EnvironmentPlugin`
- New Webpack code splitting config
- Remove `process.noDeprecation = true`
- Migration from deprecated react-router-redux to connected-react-router
- Migration from react-loadable to loadable-components
- Quick start - Clone to a named directory
- Scoped variables in i18n messages
- Use .prettierrc path relative to .eslintrc.js
- Fixes to generators
- babel-plugin-lodash for easier import syntax
- Miscellaneous fixes

Author: germanf

.eslintrc.js

@@ -1,15 +1,18 @@
 const fs = require('fs');
+const path = require('path');
 
-const prettierOptions = JSON.parse(fs.readFileSync('./.prettierrc', 'utf8'));
+const prettierOptions = JSON.parse(
+  fs.readFileSync(path.resolve(__dirname, '.prettierrc'), 'utf8'),
+);
 
 module.exports = {
   parser: 'babel-eslint',
   extends: ['airbnb', 'prettier', 'prettier/react'],
-  plugins: ['prettier', 'redux-saga', 'react', 'jsx-a11y'],
+  plugins: ['prettier', 'redux-saga', 'react', 'react-hooks', 'jsx-a11y'],
   env: {
+    jest: true,
     browser: true,
     node: true,
-    jest: true,
     es6: true,
   },
   parserOptions: {
@@ -41,21 +44,34 @@ module.exports = {
     ],
     'jsx-a11y/aria-props': 2,
     'jsx-a11y/heading-has-content': 0,
-    'jsx-a11y/label-has-for': 2,
+    'jsx-a11y/label-has-associated-control': [
+      2,
+      {
+        // NOTE: If this error triggers, either disable it or add
+        // your custom components, labels and attributes via these options
+        // See https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/label-has-associated-control.md
+        controlComponents: ['Input'],
+      },
+    ],
+    'jsx-a11y/label-has-for': 0,
     'jsx-a11y/mouse-events-have-key-events': 2,
     'jsx-a11y/role-has-required-aria-props': 2,
     'jsx-a11y/role-supports-aria-props': 2,
     'max-len': 0,
     'newline-per-chained-call': 0,
     'no-confusing-arrow': 0,
     'no-console': 1,
+    'no-unused-vars': 2,
     'no-use-before-define': 0,
     'prefer-template': 2,
+    'react/destructuring-assignment': 0,
+    'react-hooks/rules-of-hooks': 'error',
     'react/jsx-closing-tag-location': 0,
     'react/forbid-prop-types': 0,
     'react/jsx-first-prop-new-line': [2, 'multiline'],
     'react/jsx-filename-extension': 0,
     'react/jsx-no-target-blank': 0,
+    'react/jsx-uses-vars': 2,
     'react/require-default-props': 0,
     'react/require-extension': 0,
     'react/self-closing-comp': 0,

.travis.yml

@@ -1,13 +1,12 @@
 language: node_js
 
 node_js:
-  - 7
-  - 6
-  - 5
+  - 'node'
+  - 'lts/*'
 
 script:
   - node ./internals/scripts/generate-templates-for-linting
-  - npm run test
+  - npm test -- --maxWorkers=4
   - npm run build
 
 before_install:

app/app.js

@@ -6,38 +6,26 @@
  */
 
 // Needed for redux-saga es6 generator support
-import 'babel-polyfill';
+import '@babel/polyfill';
 
 // Import all the third party stuff
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { applyMiddleware } from 'redux';
-import { Route } from 'react-router-dom';
 import { Provider } from 'react-redux';
-import { ConnectedRouter } from 'react-router-redux';
+import { ConnectedRouter } from 'connected-react-router';
 import FontFaceObserver from 'fontfaceobserver';
-import createHistory from 'history/createBrowserHistory';
-import { syncHistory } from 'redux-simple-router';
+import history from 'utils/history';
 import 'sanitize.css/sanitize.css';
 
 // Import root app
-import App from 'containers/App/index';
+import App from 'containers/App';
 
 // Import Language Provider
 import LanguageProvider from 'containers/LanguageProvider/index';
 
 // Load the favicon, the manifest.json file and the .htaccess file
 /* eslint-disable import/no-unresolved, import/extensions */
 import '!file-loader?name=[name].[ext]!./images/favicon.png';
-import '!file-loader?name=[name].[ext]!./images/icon-72x72.png';
-import '!file-loader?name=[name].[ext]!./images/icon-96x96.png';
-import '!file-loader?name=[name].[ext]!./images/icon-128x128.png';
-import '!file-loader?name=[name].[ext]!./images/icon-144x144.png';
-import '!file-loader?name=[name].[ext]!./images/icon-152x152.png';
-import '!file-loader?name=[name].[ext]!./images/icon-192x192.png';
-import '!file-loader?name=[name].[ext]!./images/icon-384x384.png';
-import '!file-loader?name=[name].[ext]!./images/icon-512x512.png';
-import '!file-loader?name=[name].[ext]!./manifest.json';
 import '!file-loader?name=[name].[ext]!./osd.xml';
 import '!file-loader?name=[name].[ext]!./sitemap.xml';
 import 'file-loader?name=[name].[ext]!./.htaccess';
@@ -79,24 +67,15 @@ openSansObserver.load().then(
 );
 
 // Create redux store with history
-const initialState = {};
-const history = createHistory();
-// Sync dispatched route actions to the history
-const reduxRouterMiddleware = syncHistory(history);
-const createStoreWithMiddleware = applyMiddleware(reduxRouterMiddleware)(
-  configureStore,
-);
-
-// const store = configureStore(initialState, history);
-const store = createStoreWithMiddleware(initialState, history);
+const store = configureStore(initialState, history);
 const MOUNT_NODE = document.getElementById('app');
 
 const render = messages => {
   ReactDOM.render(
     <Provider store={store}>
       <LanguageProvider messages={messages}>
         <ConnectedRouter history={history}>
-          <Route component={App} />
+          <App />
         </ConnectedRouter>
       </LanguageProvider>
     </Provider>,
@@ -127,3 +106,10 @@ if (!window.Intl) {
 } else {
   render(translationMessages);
 }
+
+// Install ServiceWorker and AppCache in the end since
+// it's not most important operation and if main code fails,
+// we do not want it installed
+if (process.env.NODE_ENV === 'production') {
+  require('offline-plugin/runtime').install(); // eslint-disable-line global-require
+}

app/components/AssetInfo/index.jsx

@@ -8,7 +8,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
-import { routeActions } from 'redux-simple-router';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import moment from 'moment/src/moment';

app/components/BlockList/index.jsx

@@ -10,7 +10,6 @@ import styled from 'styled-components';
 import { Table, UncontrolledTooltip } from 'reactstrap';
 
 import { FormattedMessage } from 'react-intl';
-import { routeActions } from 'redux-simple-router';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { createStructuredSelector } from 'reselect';
@@ -22,7 +21,7 @@ import AssetLink from 'components/AssetLink';
 import { FormattedUnixDateTime } from 'components/FormattedDateTime';
 import ColoredHash from 'components/ColoredHash';
 import SanitizedFormattedNumber from 'components/SanitizedFormattedNumber';
-import InformationIcon from 'react-icons/lib/io/informatcircled';
+import { InformationIcon } from 'react-icons/io';
 
 import messages from './messages';
 
@@ -253,7 +252,6 @@ BlockList.propTypes = {
 
 function mapDispatchToProps(dispatch) {
   return {
-    changeRoute: url => dispatch(routeActions.push(url)),
     getProperty: propertyId => dispatch(startFetch(propertyId)),
     dispatch,
   };

app/components/CrowdsaleInfo/index.jsx

@@ -6,7 +6,6 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { routeActions } from 'redux-simple-router';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 import SanitizedFormattedNumber from 'components/SanitizedFormattedNumber';
@@ -120,7 +119,6 @@ CrowdsaleInfo.propTypes = {
 
 function mapDispatchToProps(dispatch) {
   return {
-    changeRoute: url => dispatch(routeActions.push(url)),
     dispatch,
   };
 }

app/components/CrowdsaleTransaction/index.jsx

@@ -9,14 +9,11 @@ import PropTypes from 'prop-types';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
-import { routeActions } from 'redux-simple-router';
 import { Col, Row, Tooltip } from 'reactstrap';
 import styled from 'styled-components';
 
 import CopyToClipboard from 'react-copy-to-clipboard';
-import CopyIcon from 'react-icons/lib/io/ios-copy';
-import ArrowIconRight from 'react-icons/lib/io/arrow-right-c';
-import ArrowIconDown from 'react-icons/lib/io/arrow-down-c';
+import { ArrowIconDown, ArrowIconRight, CopyIcon } from 'react-icons/io';
 
 import { CONFIRMATIONS } from 'containers/Transactions/constants';
 import { FormattedUnixDateTime } from 'components/FormattedDateTime';
@@ -84,56 +81,56 @@ const GrayArrowIconDown = styled(ArrowIconDown).attrs({
 class CrowdsaleTransaction extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
     super(props);
-
+    
     this.toggleTxTooltip = this.toggleTxTooltip.bind(this);
     this.toggleSenderTooltip = this.toggleSenderTooltip.bind(this);
     this.toggleRefererTooltip = this.toggleRefererTooltip.bind(this);
-
+    
     this.state = {
       tooltipTxOpen: false,
       tooltipSenderOpen: false,
       tooltipRefererOpen: false,
     };
   }
-
+  
   toggleTxTooltip() {
     this.setState({ tooltipTxOpen: true });
     setTimeout(() => this.setState({ tooltipTxOpen: false }), 1000);
   }
-
+  
   toggleSenderTooltip() {
     this.setState({ tooltipSenderOpen: true });
     setTimeout(() => this.setState({ tooltipSenderOpen: false }), 1000);
   }
-
+  
   toggleRefererTooltip() {
     this.setState({ tooltipRefererOpen: true });
     setTimeout(() => this.setState({ tooltipRefererOpen: false }), 1000);
   }
-
+  
   getHighlightIfOwner(address) {
     return (this.isOwner(address) ? 'text-success' : '');
   }
-
+  
   isOwner(address) {
     return (this.props.addr ? this.props.addr === address : false);
   }
-
+  
   render() {
     let statusCSSClass = 'btn btn-primary btn-block font-weight-light w-50';
     statusCSSClass = (this.props.valid ? `${statusCSSClass} btn-blue` : (this.props.confirmations === 0 ? `${statusCSSClass} btn-warning` : `${statusCSSClass} btn-danger`));
-
+    
     const status = StatusConfirmation({
       valid: this.props.valid,
       confirmations: this.props.confirmations,
       confirmed: CONFIRMATIONS,
     });
-
+    
     let arrowcname;
     let arrowcnameright;
     let addresscname;
     let showreferencecname;
-
+    
     if (this.props.referenceaddress) {
       arrowcname = 'transaction-arrow-icon';
       arrowcnameright = 'd-md-inline-flex';
@@ -143,11 +140,11 @@ class CrowdsaleTransaction extends React.PureComponent { // eslint-disable-line
       arrowcname = 'd-none';
       addresscname = 'd-none';
     }
-
+    
     const txcopyid = `txid_${this.props.txid.slice(0, 12)}`;
     const sendercopyid = `s-${txcopyid}`;
     const referercopyid = `r-${txcopyid}`;
-
+    
     const TransactionLabel = (props) => (props.type_int === 51 ?
         <WrapperTxLabel>{props.crowdsale.propertyname} crowdsale started</WrapperTxLabel> :
         <WrapperTxLabel>
@@ -167,7 +164,7 @@ class CrowdsaleTransaction extends React.PureComponent { // eslint-disable-line
           (+<SanitizedFormattedNumber value={props.issuertokens} fractionDigits={8}/> to Issuer)
         </WrapperTxLabel>
     );
-
+    
     const txAsset = this.props.type_int === 51 ?
       {
         ...this.props.crowdsale,
@@ -176,8 +173,8 @@ class CrowdsaleTransaction extends React.PureComponent { // eslint-disable-line
       {
         ...this.props.dessiredToken,
         name: this.props.dessiredToken.propertyname,
-      }
-
+      };
+    
     return (
       <div className="transation-result mx-auto text-center-down-md">
         <Row className="align-items-end pb-0">
@@ -186,7 +183,11 @@ class CrowdsaleTransaction extends React.PureComponent { // eslint-disable-line
               <AssetLogo
                 asset={txAsset}
                 prop={txAsset.propertyid}
-                style={{width: '4rem', height: '4rem', marginRight: '7px'}}
+                style={{
+                  width: '4rem',
+                  height: '4rem',
+                  marginRight: '7px',
+                }}
               />
             </AssetLink>
           </Col>
@@ -298,7 +299,6 @@ CrowdsaleTransaction.propTypes = {
 
 function mapDispatchToProps(dispatch) {
   return {
-    changeRoute: (url) => dispatch(routeActions.push(url)),
     dispatch,
   };
 }

app/components/ErrorBoundary/index.jsx

@@ -11,7 +11,6 @@ import { compose } from 'redux';
 import injectReducer from 'utils/injectReducer';
 
 import { Alert, Button, Modal, ModalHeader, ModalBody, ModalFooter, Jumbotron } from 'reactstrap';
-import { routeActions } from 'redux-simple-router';
 import { makeSelectStatus } from 'components/ServiceBlock/selectors';
 import { Link } from 'react-router-dom';
 import moment from 'moment/src/moment';

app/components/ErrorBoundary/reducer.js

@@ -6,11 +6,11 @@ import {
   ERROR_CLEAN,
 } from './constants';
 
-const initialState = fromJS({
+const initialState = {
   error: null,
   errorInfo: null,
   modal: false,
-});
+};
 
 const errorBoundaryReducer = (state = initialState, action = {}) => {
   const { error, errorInfo, type } = action;

app/components/Footer/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import styled from 'styled-components';
-import HeartIcon from 'react-icons/lib/io/heart';
+import { HeartIcon } from 'react-icons/io';
 import messages from './messages';
 
 const Wrapper = styled.footer`
@@ -30,7 +30,7 @@ function Footer() {
         <FormattedMessage
           {...messages.authorMessage}
           values={{
-            love: <HeartIcon color="red" size={24} />,
+            love: <HeartIcon color="red" size={24}/>,
             author: <A href="http://www.omnilayer.org/">The Omni Foundation</A>,
           }}
         />

app/components/Header/index.jsx

@@ -8,7 +8,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
-import { routeActions } from 'redux-simple-router';
 import styled from 'styled-components';
 import SearchBox from 'components/SearchBox';
 import { ECOSYSTEM_PROD_NAME, ECOSYSTEM_TEST_NAME } from 'containers/App/constants';
@@ -175,7 +174,6 @@ NavbarToggler.propTypes = {
 
 function mapDispatchToProps(dispatch) {
   return {
-    changeRoute: (url) => dispatch(routeActions.push(url)),
     dispatch,
   };
 }