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,6 +13,177 @@ import { notifyError, notifyInfo } from '../../redux/actions/error_actions';
 
 const Constants = require('../../constants');
 
+class PinnedManager extends IPCContainer {
+  state = {
+    active_directory: '/',
+    items: [],
+    previous: [],
+  };
+
+  componentDidMount() {
+    this.setRequestHandler(Constants.IPC_Get_Directory_Items_Reply, this.onGetDirectoryItemsReply);
+    this.grabDirectoryItems();
+  }
+
+  componentWillUnmount() {
+    super.componentWillUnmount();
+  }
+
+  grabDirectoryItems = () => {
+    this.sendRequest(Constants.IPC_Get_Directory_Items, {
+      Provider: this.props.DisplayConfiguration,
+      Remote: this.props.DisplayRemoteConfiguration,
+      S3: this.props.DisplayS3Configuration,
+      Version: this.props.version,
+      Path: this.state.active_directory,
+    });
+  };
+
+  onGetDirectoryItemsReply = (_, { data }) => {
+    if (data.Success) {
+      const items = data.Items.filter(
+        (i) =>
+          i.path !== '.' && (this.state.active_directory !== '/' || i.path.substr(0, 1) !== '.')
+      ).map((i) => {
+        return {
+          ...i,
+          name: i.path === '..' ? i.path : i.path.substr(i.path.lastIndexOf('/') + 1),
+          meta: {
+            ...i.meta,
+            pinned: i.meta.pinned === '1',
+          },
+        };
+      });
+      this.setState({
+        items,
+      });
+    } else {
+      this.props.notifyError(data.Error, () => {
+        this.props.displayPinnedManager(false);
+      });
+    }
+  };
+
+  createDirectory = (name, path, idx, total, item_idx) => {
+    const style = {};
+    if (item_idx + 1 !== total) {
+      style.marginBottom = '4px';
+    }
+    return (
+      <div key={'dir_' + idx} style={{ ...style }}>
+        <Button
+          buttonStyles={{ textAlign: 'left' }}
+          clicked={() => {
+            const previous = [...this.state.previous];
+            if (path === '..') {
+              path = previous.pop();
+            } else {
+              previous.push(this.state.active_directory);
+            }
+            this.setState(
+              {
+                items: [],
+                active_directory: path,
+                previous,
+              },
+              () => {
+                this.grabDirectoryItems();
+              }
+            );
+          }}>
+          <FontAwesomeIcon
+            icon={faFolder}
+            fixedWidth
+            color={'var(--heading_text_color)'}
+            style={{ padding: 0, margin: 0 }}
+          />
+          &nbsp;{name}
+        </Button>
+      </div>
+    );
+  };
+
+  createFile = (name, path, pinned, idx, total, item_idx) => {
+    const style = { textAlign: 'left' };
+    if (item_idx + 1 !== total) {
+      style.marginBottom = '2px';
+    }
+    return (
+      <div key={'file_' + idx} style={{ ...style }}>
+        <CheckBox
+          checked={pinned}
+          changed={() => {
+            const items = JSON.parse(JSON.stringify(this.state.items));
+            const pinned = (items[item_idx].meta.pinned = !items[item_idx].meta.pinned);
+            this.setState(
+              {
+                items,
+              },
+              () => {
+                this.sendSyncRequest(Constants.IPC_Set_Pinned, {
+                  Provider: this.props.DisplayConfiguration,
+                  Remote: this.props.DisplayRemoteConfiguration,
+                  S3: this.props.DisplayS3Configuration,
+                  Version: this.props.version,
+                  Path: path,
+                  Pinned: pinned,
+                });
+              }
+            );
+          }}
+          label={name}
+        />
+      </div>
+    );
+  };
+
+  render() {
+    let idx = 0;
+    return (
+      <Box
+        dxDark
+        dxStyle={{
+          height: 'calc(100vh - (var(--default_spacing) * 4)',
+          padding: 'var(--default_spacing)',
+          width: 'calc(100vw - (var(--default_spacing) * 4)',
+        }}>
+        <div className={'PinnedManager'}>
+          <div className={'PinnedManagerHeading'}>
+            <div className={'PinnedManagerClose'}>
+              <a
+                href={'#'}
+                onClick={() => this.props.displayPinnedManager(false)}
+                style={{ cursor: 'pointer', flex: '0' }}>
+                X
+              </a>
+            </div>
+            <h1 style={{ width: '100%', textAlign: 'center' }}>{'Pinned File Manager'}</h1>
+            <div className={'PinnedManagerActiveDirectory'}>
+              <b>&nbsp;{this.state.active_directory}</b>
+            </div>
+          </div>
+          <div className={'PinnedManagerItemsOwner'}>
+            <div className={'PinnedManagerItems'}>
+              {this.state.items.map((i, k) => {
+                return i.directory
+                  ? this.createDirectory(i.name, i.path, idx++, this.state.items.length, k)
+                  : this.createFile(
+                      i.name,
+                      i.path,
+                      i.meta.pinned,
+                      idx++,
+                      this.state.items.length,
+                      k
+                    );
+              })}
+            </div>
+          </div>
+        </div>
+      </Box>
+    );
+  }
+}
+
 const mapStateToProps = (state) => {
   return {
     DisplayConfiguration: state.mounts.DisplayConfiguration,
@@ -30,181 +201,4 @@ const mapDispatchToProps = (dispatch) => {
   };
 };
 
-export default connect(
+export default connect(mapStateToProps, mapDispatchToProps)(PinnedManager);
-  mapStateToProps,
-  mapDispatchToProps
-)(
-  class extends IPCContainer {
-    state = {
-      active_directory: '/',
-      items: [],
-      previous: [],
-    };
-
-    componentDidMount() {
-      this.setRequestHandler(
-        Constants.IPC_Get_Directory_Items_Reply,
-        this.onGetDirectoryItemsReply
-      );
-      this.grabDirectoryItems();
-    }
-
-    componentWillUnmount() {
-      super.componentWillUnmount();
-    }
-
-    grabDirectoryItems = () => {
-      this.sendRequest(Constants.IPC_Get_Directory_Items, {
-        Provider: this.props.DisplayConfiguration,
-        Remote: this.props.DisplayRemoteConfiguration,
-        S3: this.props.DisplayS3Configuration,
-        Version: this.props.version,
-        Path: this.state.active_directory,
-      });
-    };
-
-    onGetDirectoryItemsReply = (_, { data }) => {
-      if (data.Success) {
-        const items = data.Items.filter(
-          (i) =>
-            i.path !== '.' && (this.state.active_directory !== '/' || i.path.substr(0, 1) !== '.')
-        ).map((i) => {
-          return {
-            ...i,
-            name: i.path === '..' ? i.path : i.path.substr(i.path.lastIndexOf('/') + 1),
-            meta: {
-              ...i.meta,
-              pinned: i.meta.pinned === '1',
-            },
-          };
-        });
-        this.setState({
-          items,
-        });
-      } else {
-        this.props.notifyError(data.Error, () => {
-          this.props.displayPinnedManager(false);
-        });
-      }
-    };
-
-    createDirectory = (name, path, idx, total, item_idx) => {
-      const style = {};
-      if (item_idx + 1 !== total) {
-        style.marginBottom = '4px';
-      }
-      return (
-        <div key={'dir_' + idx} style={{ ...style }}>
-          <Button
-            buttonStyles={{ textAlign: 'left' }}
-            clicked={() => {
-              const previous = [...this.state.previous];
-              if (path === '..') {
-                path = previous.pop();
-              } else {
-                previous.push(this.state.active_directory);
-              }
-              this.setState(
-                {
-                  items: [],
-                  active_directory: path,
-                  previous,
-                },
-                () => {
-                  this.grabDirectoryItems();
-                }
-              );
-            }}>
-            <FontAwesomeIcon
-              icon={faFolder}
-              fixedWidth
-              color={'var(--heading_text_color)'}
-              style={{ padding: 0, margin: 0 }}
-            />
-            &nbsp;{name}
-          </Button>
-        </div>
-      );
-    };
-
-    createFile = (name, path, pinned, idx, total, item_idx) => {
-      const style = { textAlign: 'left' };
-      if (item_idx + 1 !== total) {
-        style.marginBottom = '2px';
-      }
-      return (
-        <div key={'file_' + idx} style={{ ...style }}>
-          <CheckBox
-            checked={pinned}
-            changed={() => {
-              const items = JSON.parse(JSON.stringify(this.state.items));
-              const pinned = (items[item_idx].meta.pinned = !items[item_idx].meta.pinned);
-              this.setState(
-                {
-                  items,
-                },
-                () => {
-                  this.sendSyncRequest(Constants.IPC_Set_Pinned, {
-                    Provider: this.props.DisplayConfiguration,
-                    Remote: this.props.DisplayRemoteConfiguration,
-                    S3: this.props.DisplayS3Configuration,
-                    Version: this.props.version,
-                    Path: path,
-                    Pinned: pinned,
-                  });
-                }
-              );
-            }}
-            label={name}
-          />
-        </div>
-      );
-    };
-
-    render() {
-      let idx = 0;
-      return (
-        <Box
-          dxDark
-          dxStyle={{
-            height: 'calc(100vh - (var(--default_spacing) * 4)',
-            padding: 'var(--default_spacing)',
-            width: 'calc(100vw - (var(--default_spacing) * 4)',
-          }}>
-          <div className={'PinnedManager'}>
-            <div className={'PinnedManagerHeading'}>
-              <div className={'PinnedManagerClose'}>
-                <a
-                  href={'#'}
-                  onClick={() => this.props.displayPinnedManager(false)}
-                  style={{ cursor: 'pointer', flex: '0' }}>
-                  X
-                </a>
-              </div>
-              <h1 style={{ width: '100%', textAlign: 'center' }}>{'Pinned File Manager'}</h1>
-              <div className={'PinnedManagerActiveDirectory'}>
-                <b>&nbsp;{this.state.active_directory}</b>
-              </div>
-            </div>
-            <div className={'PinnedManagerItemsOwner'}>
-              <div className={'PinnedManagerItems'}>
-                {this.state.items.map((i, k) => {
-                  return i.directory
-                    ? this.createDirectory(i.name, i.path, idx++, this.state.items.length, k)
-                    : this.createFile(
-                        i.name,
-                        i.path,
-                        i.meta.pinned,
-                        idx++,
-                        this.state.items.length,
-                        k
-                      );
-                })}
-              </div>
-            </div>
-          </div>
-        </Box>
-      );
-    }
-  }
-);