Move property subscription logic out of upload button component

modules/webgui/web/src/components/DataLoader/DataLoader.jsx

@@ -7,6 +7,7 @@ import DataItemList from './presentational/DataItemList';
 import { stringListToArray } from './utils/helpers';
 
 import DataManager from '../../api/DataManager';
+import SubscriptionManager from './SubscriptionManager';
 import styles from './DataLoader.scss';
 import Button from '../common/Input/Button/Button';
 import Label from '../common/Label/Label';
@@ -85,6 +86,8 @@ class DataLoader extends Component {
               )}
             </div>
           </div>
+
+          <SubscriptionManager />
       </Popover>
     );  
   }

modules/webgui/web/src/components/DataLoader/PrepareUploadedData.jsx

@@ -80,7 +80,11 @@ class PrepareUploadedData extends Component {
   componentDidUpdate(prevProps, prevState) {
     const { selectedFilePaths } = this.props;
 
-    if (selectedFilePaths.length > 0 && JSON.stringify(selectedFilePaths) !== JSON.stringify(prevProps.selectedFilePaths)) {
+    // const hasFilePaths = selectedFilePaths.length > 0 && selectedFilePaths[0] !== '';
+    const hasFilePaths = selectedFilePaths.length > 0;
+    const filePathsDiffer = JSON.stringify(selectedFilePaths) !== JSON.stringify(prevProps.selectedFilePaths);
+
+    if (hasFilePaths && filePathsDiffer) {
       this.setState({ 
         activated: true, 
         uploadButtonIsClicked: false

modules/webgui/web/src/components/DataLoader/SubscriptionManager.jsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import DataManager from '../../api/DataManager';
+import { setSelectedFilePaths, setVolumesConvertedCount, setVolumesToConvertCount } from '../../api/Actions/dataLoaderActions';
+import { stringListToArray } from './utils/helpers';
+
+class SubscriptionManager extends React.Component {
+    constructor(props) {
+		super(props);
+		
+		this.handleSelectedFiles = this.handleSelectedFiles.bind(this);
+		this.subscribeToFilepaths = this.subscribeToFilepaths.bind(this);
+		this.handleVolumesConvertedCount = this.handleVolumesConvertedCount.bind(this);
+		this.handleVolumesToConvertCount = this.handleVolumesToConvertCount.bind(this);
+	}
+
+    componentDidMount() {
+        this.subscribeToFilepaths();
+    }
+
+    componendWillUnmount() {
+        console.log('unmounting subscription man.')
+    }
+
+	subscribeToFilepaths() {
+        DataManager.subscribe('Modules.DataLoader.Loader.SelectedFiles', this.handleSelectedFiles);
+        DataManager.subscribe('Modules.DataLoader.Loader.CurrentVolumesConvertedCount', this.handleVolumesConvertedCount);
+        DataManager.subscribe('Modules.DataLoader.Loader.CurrentVolumesToConvertCount', this.handleVolumesToConvertCount);
+    }
+
+	handleSelectedFiles(data) {
+        console.log('got files', data);
+        this.props.setSelectedFilePaths(stringListToArray(data.Value));
+    }
+
+	handleVolumesConvertedCount(data) {
+        this.props.setVolumesConvertedCount(Number(data.Value));
+    }
+
+	handleVolumesToConvertCount(data) {
+        this.props.setVolumesToConvertCount(Number(data.Value));
+    }
+	
+	render() {
+        return null;
+	}
+}
+
+const mapDispatchToProps = dispatch => ({
+  setSelectedFilePaths: (filePaths) => {
+    dispatch(setSelectedFilePaths(filePaths))
+  },
+  setVolumesConvertedCount: (count) => {
+    dispatch(setVolumesConvertedCount(count))
+  },
+  setVolumesToConvertCount: (count) => {
+    dispatch(setVolumesToConvertCount(count))
+  }
+});
+
+SubscriptionManager = connect(
+  null,
+  mapDispatchToProps
+)(SubscriptionManager);
+
+export default SubscriptionManager;

modules/webgui/web/src/components/DataLoader/UploadDataButton.jsx

@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import { Link } from 'react-router-dom';
 import { connect } from 'react-redux';
 import Proptypes from 'prop-types'; 
 
@@ -15,12 +14,12 @@ class UploadDataButton extends Component {
 		super(props);
 		
 		this.handleSelectedFiles = this.handleSelectedFiles.bind(this);
+		this.subscribeToFilepaths = this.subscribeToFilepaths.bind(this);
 		this.handleVolumesConvertedCount = this.handleVolumesConvertedCount.bind(this);
 		this.handleVolumesToConvertCount = this.handleVolumesToConvertCount.bind(this);
 	}
 
 	handleClick() {
-    this.subscribeToFilepaths();
     this.triggerFilesToUpload();
   }
 
@@ -28,6 +27,10 @@ class UploadDataButton extends Component {
     DataManager.trigger(`Modules.DataLoader.Loader.UploadDataTrigger`)
   }
 
+  componentDidMount() {
+    this.subscribeToFilepaths();
+  }
+
   // This could be in a more fitting component
 	subscribeToFilepaths() {
     DataManager.subscribe('Modules.DataLoader.Loader.SelectedFiles', this.handleSelectedFiles);
@@ -35,6 +38,7 @@ class UploadDataButton extends Component {
     DataManager.subscribe('Modules.DataLoader.Loader.CurrentVolumesToConvertCount', this.handleVolumesToConvertCount);
 	}
 	handleSelectedFiles(data) {
+    console.log(data)
     this.props.setSelectedFilePaths(stringListToArray(data.Value));
   }
 	handleVolumesConvertedCount(data) {