PropTypes and refactoring

.vim/coc-settings.json

@@ -30,6 +30,7 @@
     "siaprime",
     "skylink",
     "undocked",
+    "valign",
     "windir"
   ]
 }

src/components/InfoDetails/InfoDetails.js

@@ -43,6 +43,7 @@ const InfoDetails = (props) => {
           <textarea
             autoFocus
             rows={9}
+            onChange={() => {}}
             value={msg}
             className={'SkynetImportTextArea'}
             onClick={(e) => scrollToTop(e.target)}

src/containers/Configuration/ConfigurationItem/ConfigurationItem.js

@@ -1,26 +1,17 @@
 import React from 'react';
 import './ConfigurationItem.css';
 import CheckBox from '../../../components/UI/CheckBox/CheckBox';
-import { connect } from 'react-redux';
-import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { notifyError, notifyInfo } from '../../../redux/actions/error_actions';
-import settings from '../../../assets/settings';
 import DropDown from '../../../components/UI/DropDown/DropDown';
 import HostList from '../../HostList/HostList';
 import Password from '../../../containers/UI/Password/Password';
+import PropTypes from 'prop-types';
+import settings from '../../../assets/settings';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { connect } from 'react-redux';
+import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
+import { notifyError, notifyInfo } from '../../../redux/actions/error_actions';
 
-const mapDispatchToProps = (dispatch) => {
+const ConfigurationItem = (props) => {
-  return {
-    notifyError: (msg) => dispatch(notifyError(msg)),
-    notifyInfo: (title, msg) => dispatch(notifyInfo(title, msg)),
-  };
-};
-
-export default connect(
-  null,
-  mapDispatchToProps
-)((props) => {
   const handleChanged = (e) => {
     const target = e.target;
     if (target.type === 'checkbox') {
@@ -261,4 +252,26 @@ export default connect(
       </table>
     </div>
   );
-});
+};
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    notifyError: (msg) => dispatch(notifyError(msg)),
+    notifyInfo: (title, msg) => dispatch(notifyInfo(title, msg)),
+  };
+};
+
+ConfigurationItem.propTypes = {
+  autoFocus: PropTypes.bool,
+  changed: PropTypes.func.isRequired,
+  grouping: PropTypes.string,
+  items: PropTypes.array,
+  label: PropTypes.string,
+  notifyError: PropTypes.func.isRequired,
+  notifyInfo: PropTypes.func.isRequired,
+  readOnly: PropTypes.bool,
+  template: PropTypes.object.isRequired,
+  value: PropTypes.oneOfType([PropTypes.array, PropTypes.string, PropTypes.number]),
+};
+
+export default connect(null, mapDispatchToProps)(ConfigurationItem);

src/containers/IPCContainer/IPCContainer.js

@@ -3,7 +3,7 @@ import { getIPCRenderer } from '../../utils.jsx';
 
 const ipcRenderer = getIPCRenderer();
 
-export default class IPCContainer extends Component {
+class IPCContainer extends Component {
   handlerList = {};
 
   componentWillUnmount() {
@@ -42,3 +42,5 @@ export default class IPCContainer extends Component {
     }
   };
 }
+
+export default IPCContainer;

src/containers/MountItems/MountItem/MountItem.js

@@ -1,46 +1,25 @@
 import React from 'react';
 import './MountItem.css';
-import { connect } from 'react-redux';
-import DropDown from '../../../components/UI/DropDown/DropDown';
 import Button from '../../../components/UI/Button/Button';
-import Loader from 'react-loader-spinner';
+import CheckBox from '../../../components/UI/CheckBox/CheckBox';
-import Text from '../../../components/UI/Text/Text';
+import DropDown from '../../../components/UI/DropDown/DropDown';
 import Grid from '../../../components/UI/Grid/Grid';
-import configureImage from '../../../assets/images/configure.png';
+import Loader from 'react-loader-spinner';
+import PropTypes from 'prop-types';
 import RootElem from '../../../components/UI/RootElem/RootElem';
+import Text from '../../../components/UI/Text/Text';
+import configureImage from '../../../assets/images/configure.png';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { connect } from 'react-redux';
 import {
   displayConfiguration,
   removeMount,
   setProviderState,
 } from '../../../redux/actions/mount_actions';
 import { displaySkynetExport, displaySkynetImport } from '../../../redux/actions/skynet_actions';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faTrashAlt } from '@fortawesome/free-solid-svg-icons';
-import CheckBox from '../../../components/UI/CheckBox/CheckBox';
 
-const mapStateToProps = (state, ownProps) => {
+const MountItem = (props) => {
-  return {
-    MState: state.mounts.MountState[ownProps.provider],
-    Platform: state.common.Platform,
-    PState: state.mounts.ProviderState[ownProps.provider],
-  };
-};
-
-const mapDispatchToProps = (dispatch) => {
-  return {
-    displayConfiguration: (provider, remote, s3) =>
-      dispatch(displayConfiguration(provider, remote, s3)),
-    displaySkynetExport: (display) => dispatch(displaySkynetExport(display)),
-    displaySkynetImport: (display) => dispatch(displaySkynetImport(display)),
-    removeMount: (provider) => dispatch(removeMount(provider)),
-    setProviderState: (provider, state) => dispatch(setProviderState(provider, state)),
-  };
-};
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)((props) => {
   const handleAutoMountChanged = (e) => {
     const state = {
       ...props.PState,
@@ -256,4 +235,43 @@ export default connect(
       </Grid>
     </div>
   );
-});
+};
+
+const mapStateToProps = (state, ownProps) => {
+  return {
+    MState: state.mounts.MountState[ownProps.provider],
+    Platform: state.common.Platform,
+    PState: state.mounts.ProviderState[ownProps.provider],
+  };
+};
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    displayConfiguration: (provider, remote, s3) =>
+      dispatch(displayConfiguration(provider, remote, s3)),
+    displaySkynetExport: (display) => dispatch(displaySkynetExport(display)),
+    displaySkynetImport: (display) => dispatch(displaySkynetImport(display)),
+    removeMount: (provider) => dispatch(removeMount(provider)),
+    setProviderState: (provider, state) => dispatch(setProviderState(provider, state)),
+  };
+};
+
+MountItem.propTypes = {
+  MState: PropTypes.object.isRequired,
+  PState: PropTypes.object.isRequired,
+  Platform: PropTypes.string.isRequired,
+  allowRemove: PropTypes.bool,
+  browseClicked: PropTypes.func.isRequired,
+  changed: PropTypes.func.isRequired,
+  clicked: PropTypes.func.isRequired,
+  displayConfiguration: PropTypes.func.isRequired,
+  displaySkynetExport: PropTypes.func.isRequired,
+  displaySkynetImport: PropTypes.func.isRequired,
+  provider: PropTypes.string.isRequired,
+  remote: PropTypes.bool,
+  removeMount: PropTypes.func.isRequired,
+  s3: PropTypes.bool,
+  setProviderState: PropTypes.func.isRequired,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(MountItem);

src/containers/MountItems/MountItems.js

@@ -1,12 +1,13 @@
 import React from 'react';
+import './MountItems.css';
 import AddMount from '../AddMount/AddMount';
 import Box from '../../components/UI/Box/Box';
 import Button from '../../components/UI/Button/Button';
-import { connect } from 'react-redux';
+import IPCContainer from '../IPCContainer/IPCContainer';
-import './MountItems.css';
 import Modal from '../../components/UI/Modal/Modal';
 import MountItem from './MountItem/MountItem';
-import IPCContainer from '../IPCContainer/IPCContainer';
+import { connect } from 'react-redux';
+import { notifyError } from '../../redux/actions/error_actions';
 import {
   resetMountsState,
   setAllowMount,
@@ -16,7 +17,6 @@ import {
   setMountState,
   setProviderState,
 } from '../../redux/actions/mount_actions';
-import { notifyError } from '../../redux/actions/error_actions';
 
 const Constants = require('../../constants');
 

src/containers/PinnedManager/PinnedManager.js

@@ -13,28 +13,7 @@ import { notifyError, notifyInfo } from '../../redux/actions/error_actions';
 
 const Constants = require('../../constants');
 
-const mapStateToProps = (state) => {
+class PinnedManager extends IPCContainer {
-  return {
-    DisplayConfiguration: state.mounts.DisplayConfiguration,
-    DisplayRemoteConfiguration: state.mounts.DisplayRemoteConfiguration,
-    DisplayS3Configuration: state.mounts.DisplayS3Configuration,
-  };
-};
-
-const mapDispatchToProps = (dispatch) => {
-  return {
-    displayPinnedManager: (display) => dispatch(displayPinnedManager(display)),
-    notifyApplicationBusy: (busy) => dispatch(notifyApplicationBusy(busy, true)),
-    notifyError: (msg, cb) => dispatch(notifyError(msg, false, cb)),
-    notifyInfo: (title, msg) => dispatch(notifyInfo(title, msg)),
-  };
-};
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(
-  class extends IPCContainer {
   state = {
     active_directory: '/',
     items: [],
@@ -42,10 +21,7 @@ export default connect(
   };
 
   componentDidMount() {
-      this.setRequestHandler(
+    this.setRequestHandler(Constants.IPC_Get_Directory_Items_Reply, this.onGetDirectoryItemsReply);
-        Constants.IPC_Get_Directory_Items_Reply,
-        this.onGetDirectoryItemsReply
-      );
     this.grabDirectoryItems();
   }
 
@@ -206,5 +182,23 @@ export default connect(
       </Box>
     );
   }
-  }
+}
-);
+
+const mapStateToProps = (state) => {
+  return {
+    DisplayConfiguration: state.mounts.DisplayConfiguration,
+    DisplayRemoteConfiguration: state.mounts.DisplayRemoteConfiguration,
+    DisplayS3Configuration: state.mounts.DisplayS3Configuration,
+  };
+};
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    displayPinnedManager: (display) => dispatch(displayPinnedManager(display)),
+    notifyApplicationBusy: (busy) => dispatch(notifyApplicationBusy(busy, true)),
+    notifyError: (msg, cb) => dispatch(notifyError(msg, false, cb)),
+    notifyInfo: (title, msg) => dispatch(notifyInfo(title, msg)),
+  };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(PinnedManager);