#2473 get rid of unnecessary redux connects

#2473 remove some anonymous functions from Table components
#2473 upgrade transitions library
#2473 rewrite loader to a stateless component
#2473 switch RawWidget to PureComponent
#2473 change bunch of components to use PureComponent
#2473 move more components to using PureComponent
#2473 remove anonymous functions for WidgetTooltip
#2473 disconnect Lookup from the store and extend PureComponent
#2473 Lookup cleanup
#2473 simplify RawLookup and remove anonymous functions
#2473 remove anonymous functions from Header and switch to `getWidgetData`
#2473 rewrite MasterWidget to properly use `getWidgetData` instead of `widgetData` object
#2473 optimize header and inbox
#2473 simplify data structures to widgets and remove unused props
#2473 move Table to PureComponent
#2473 create selector for MasterWindow data
#2473 remove anonymous event handlers from DocumentListContextShortcuts
#2473 switch Prompt to PureComponent
#2473 revert `why-did-you-update` to stable for master
#2473 add missing props

package.json

@@ -174,6 +174,7 @@
     "react-router-redux": "4.0.8",
     "react-tagsinput": "3.19.0",
     "react-tether": "1.0.4",
+    "react-transition-group": "^4.3.0",
     "react-translate-component": "0.15.1",
     "redux": "3.7.2",
     "redux-actions": "2.3.0",
@@ -182,6 +183,8 @@
     "redux-test-utils": "0.3.0",
     "redux-thunk": "2.3.0",
     "reselect": "4.0.0",
+    "shallow-compare": "^1.2.2",
+    "shallowequal": "^1.1.0",
     "simple-promise-queue": "0.1.7",
     "sockjs-client": "1.4.0",
     "throttle-debounce": "2.1.0",

src/components/Process.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 
 import MasterWidget from './widget/MasterWidget';
 import Loader from './app/Loader';
@@ -9,10 +9,21 @@ import Loader from './app/Loader';
  * @module Process
  * @extends Component
  */
-class Process extends Component {
-  constructor(props) {
-    super(props);
-  }
+class Process extends PureComponent {
+  /**
+   * @method render
+   * @summary ToDo: Describe the method
+   * @todo Write the documentation
+   */
+  getWidgetData = (item) => {
+    const widgetData = item.fields.reduce((result) => result, []);
+
+    if (widgetData.length) {
+      return widgetData;
+    }
+
+    return [{}];
+  };
 
   /**
    * @method renderElements
@@ -26,30 +37,25 @@ class Process extends Component {
     const { disabled } = this.props;
     const elements = layout.elements;
     return elements.map((elem, id) => {
-      const widgetData = elem.fields.map((item) => data[item.field] || -1);
       return (
         <div key={`${id}-${layout.pinstanceId}`}>
           <MasterWidget
             entity="process"
             key={'element' + id}
             windowType={type}
             dataId={layout.pinstanceId}
-            widgetData={widgetData}
+            getWidgetData={this.getWidgetData}
             isModal={true}
             disabled={disabled}
             autoFocus={id === 0}
             {...elem}
+            item={elem}
           />
         </div>
       );
     });
   };
 
-  /**
-   * @method render
-   * @summary ToDo: Describe the method
-   * @todo Write the documentation
-   */
   render() {
     const { data, layout, type, disabled } = this.props;
     return (

src/components/Translation.js

@@ -1,4 +1,4 @@
-import { Component } from 'react';
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import counterpart from 'counterpart';
 import deepForceUpdate from 'react-deep-force-update';
@@ -9,7 +9,7 @@ import { getMessages } from '../actions/AppActions';
 // Fake singleton
 let INSTANCE = null;
 
-class Translation extends Component {
+class Translation extends PureComponent {
   static getMessages = () => {
     return getMessages().then((response) => {
       if (window.Cypress) {

src/components/Window.js

@@ -520,6 +520,17 @@ class Window extends PureComponent {
     });
   };
 
+  getWidgetData = (item) => {
+    const { data } = this.props;
+    const widgetData = item.fields.map((result) => data[result.field] || -1);
+
+    if (widgetData.length) {
+      return widgetData;
+    }
+
+    return [{}];
+  };
+
   /**
    * @method renderElements
    * @summary ToDo: Describe the method.
@@ -534,10 +545,8 @@ class Window extends PureComponent {
 
     return elements.map((elem, id) => {
       const autoFocus = isFocused && id === 0;
-      const widgetData = elem.fields.map((item) => data[item.field] || -1);
       const fieldName = elem.fields ? elem.fields[0].field : '';
       const relativeDocId = data.ID && data.ID.value;
-
       return (
         <MasterWidget
           ref={(c) => {
@@ -549,7 +558,7 @@ class Window extends PureComponent {
           key={'element' + id}
           windowType={windowId}
           dataId={dataId}
-          widgetData={widgetData}
+          getWidgetData={this.getWidgetData}
           isModal={!!modal}
           tabId={tabId}
           rowId={rowId}
@@ -561,6 +570,7 @@ class Window extends PureComponent {
           fieldName={fieldName}
           onBlurWidget={this.handleBlurWidget}
           {...elem}
+          item={elem}
         />
       );
     });

src/components/app/Avatar.js

@@ -1,13 +1,10 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
+
 import { getAvatar } from '../../api';
 import defaultAvatar from '../../assets/images/default-avatar.png';
 
-class Avatar extends Component {
-  constructor(props) {
-    super(props);
-  }
-
+export default class Avatar extends PureComponent {
   render() {
     const { size, className, id, title } = this.props;
     return (
@@ -30,5 +27,3 @@ Avatar.propTypes = {
   id: PropTypes.string,
   title: PropTypes.string,
 };
-
-export default Avatar;

src/components/app/Indicator.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import classnames from 'classnames';
 import { connect } from 'react-redux';
 
@@ -9,11 +9,7 @@ import { connect } from 'react-redux';
  * @module Indicator
  * @extends Component
  */
-class Indicator extends Component {
-  constructor(props) {
-    super(props);
-  }
-
+class Indicator extends PureComponent {
   /**
    * @method render
    * @summary ToDo: Describe the method

src/components/app/Loader.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
 import PropTypes from 'prop-types';
+import { CSSTransition } from 'react-transition-group';
 
 /**
  * @file Fnct component.
@@ -18,15 +18,14 @@ const Loader = (props) => {
       }
     >
       {!loaderType && (
-        <ReactCSSTransitionGroup
-          transitionName="rotate"
-          transitionEnterTimeout={1000}
-          transitionLeaveTimeout={1000}
+        <CSSTransition
+          classNames="rotate"
+          timeout={{ exit: 1000, enter: 1000 }}
         >
           <div className="rotate icon-rotate">
             <i className="meta-icon-settings" />
           </div>
-        </ReactCSSTransitionGroup>
+        </CSSTransition>
       )}
       {loaderType && loaderType === 'bootstrap' && (
         <div className="spinner-border text-success" role="status">
@@ -37,12 +36,12 @@ const Loader = (props) => {
   );
 };
 
-export default Loader;
-
 Loader.propTypes = {
   loaderType: PropTypes.string,
 };
 
 Loader.defaultProps = {
   loaderType: null,
 };
+
+export default Loader;

src/components/app/MasterWindow.js

@@ -282,6 +282,7 @@ export default class MasterWindow extends Component {
       includedView,
       processStatus,
       enableTutorial,
+      docStatusData,
     } = this.props;
     const {
       dropzoneFocused,
@@ -301,11 +302,6 @@ export default class MasterWindow extends Component {
       activeTab = master.layout.activeTab;
     }
 
-    const docStatusData = {
-      status: master.data.DocStatus || -1,
-      action: master.data.DocAction || -1,
-      displayed: true,
-    };
     const docSummaryData =
       documentSummaryElement &&
       master.data[documentSummaryElement.fields[0].field];
@@ -397,6 +393,7 @@ MasterWindow.propTypes = {
   rawModal: PropTypes.object.isRequired,
   indicator: PropTypes.string.isRequired,
   me: PropTypes.object.isRequired,
+  docStatusData: PropTypes.object,
   pluginModal: PropTypes.object,
   overlay: PropTypes.object,
   allowShortcut: PropTypes.bool,

src/components/app/Overlay.js

@@ -1,10 +1,10 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import { toggleOverlay } from '../../actions/WindowActions';
 import QRCode from './QRCode';
 
-class Overlay extends Component {
+class Overlay extends PureComponent {
   handleKeyDown = (e) => {
     const { toggleOverlay } = this.props;
 

src/components/app/Prompt.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
 
 import ModalContextShortcuts from '../keyshortcuts/ModalContextShortcuts';
@@ -9,11 +9,7 @@ import ModalContextShortcuts from '../keyshortcuts/ModalContextShortcuts';
  * @module Prompt
  * @extends Component
  */
-class Prompt extends Component {
-  constructor(props) {
-    super(props);
-  }
-
+class Prompt extends PureComponent {
   /**
    * @method renderCancelButton
    * @summary ToDo: Describe the method

src/components/app/QRCode.js

@@ -1,10 +1,10 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import onClickOutside from 'react-onclickoutside';
 import { BrowserQRCodeSvgWriter } from '@zxing/library';
 import currentDevice from 'current-device';
 
-class QRCode extends Component {
+class QRCode extends PureComponent {
   constructor(props) {
     super(props);
 

src/components/charts/Indicator.js

@@ -1,12 +1,8 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import Loader from '../app/Loader';
 
-class Indicator extends Component {
-  constructor(props) {
-    super(props);
-  }
-
+export default class Indicator extends PureComponent {
   render() {
     const {
       value,
@@ -47,5 +43,3 @@ Indicator.propTypes = {
   editmode: PropTypes.bool,
   framework: PropTypes.any,
 };
-
-export default Indicator;

src/components/dashboard/Sidenav.js

@@ -1,11 +1,12 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
+
 import { getRequest } from '../../actions/GenericActions';
 import Indicator from '../charts/Indicator';
 import ChartWidget from './ChartWidget';
 import DndWidget from './DndWidget';
 
-class Sidenav extends Component {
+export default class Sidenav extends PureComponent {
   constructor(props) {
     super(props);
 
@@ -78,5 +79,3 @@ class Sidenav extends Component {
 Sidenav.propTypes = {
   moveCard: PropTypes.func,
 };
-
-export default Sidenav;

src/components/header/Breadcrumb.js

@@ -1,6 +1,6 @@
 import counterpart from 'counterpart';
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
 import { push } from 'react-router-redux';
 
@@ -13,7 +13,7 @@ import MenuOverlay from './MenuOverlay';
  * @module Breadcrumb
  * @extends Component
  */
-class Breadcrumb extends Component {
+class Breadcrumb extends PureComponent {
   constructor(props) {
     super(props);
     this.state = {