PropTypes and refactoring

.eslintrc.json

@@ -25,9 +25,6 @@
     "jest"
   ],
   "rules": {
-    "prettier/prettier": "warn",
-    "react/prop-types": "warn",
-    "no-prototype-builtins": "warn",
-    "react/no-string-refs": "warn"
+    "prettier/prettier": "warn"
   }
 }

src/App.jsx

@@ -262,7 +262,7 @@ class App extends IPCContainer {
           col={0}
           colSpan={'remain'}
           row={10}
-          rowSpan={'17'}
+          rowSpan={17}
           key={'md_' + key++}
           dxStyle={{ padding: 'var(--default_spacing)' }}>
           <ReleaseVersionDisplay downloadDisabled={!downloadEnabled} version={selectedVersion} />

src/components/DependencyList/Dependency/Dependency.js

@@ -1,18 +1,10 @@
 import React from 'react';
 import './Dependency.css';
-import { connect } from 'react-redux';
 import * as Constants from '../../../constants';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
 
-const mapStateToProps = (state) => {
-  return {
-    AllowDownload:
-      state.download.DownloadType !== Constants.INSTALL_TYPES.Dependency &&
-      !state.download.DownloadActive &&
-      !state.install.InstallActive,
-  };
-};
-
-export default connect(mapStateToProps)((props) => {
+const Dependency = (props) => {
   return (
     <div className={'Dependency'}>
       <table width="100%">
@@ -41,4 +33,21 @@ export default connect(mapStateToProps)((props) => {
       </table>
     </div>
   );
-});
+};
+
+const mapStateToProps = (state) => {
+  return {
+    AllowDownload:
+      state.download.DownloadType !== Constants.INSTALL_TYPES.Dependency &&
+      !state.download.DownloadActive &&
+      !state.install.InstallActive,
+  };
+};
+
+Dependency.propTypes = {
+  AllowDownload: PropTypes.bool,
+  name: PropTypes.string.isRequired,
+  onDownload: PropTypes.func.isRequired,
+};
+
+export default connect(mapStateToProps)(Dependency);

src/components/DependencyList/DependencyList.js

@@ -1,32 +1,16 @@
 import React from 'react';
 import './DependencyList.css';
-import { connect } from 'react-redux';
 import * as Constants from '../../constants';
-import { createDismissDisplay } from '../../utils.jsx';
-import Dependency from './Dependency/Dependency';
 import Box from '../UI/Box/Box';
+import Dependency from './Dependency/Dependency';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { createDismissDisplay } from '../../utils.jsx';
 import { downloadItem } from '../../redux/actions/download_actions';
 import { extractFileNameFromURL } from '../../utils.jsx';
 import { setDismissDependencies } from '../../redux/actions/install_actions';
 
-const mapStateToProps = (state) => {
-  return {
-    AllowDismissDependencies: state.relver.AllowDismissDependencies,
-    MissingDependencies: state.install.MissingDependencies,
-  };
-};
-
-const mapDispatchToProps = (dispatch) => {
-  return {
-    downloadItem: (name, type, url, isWinFSP) => dispatch(downloadItem(name, type, url, isWinFSP)),
-    setDismissDependencies: (dismiss) => dispatch(setDismissDependencies(dismiss)),
-  };
-};
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)((props) => {
+const DependencyList = (props) => {
   const items = props.MissingDependencies.map((k, i) => {
     return (
       <Dependency
@@ -69,4 +53,27 @@ export default connect(
       {items}
     </Box>
   );
-});
+};
+
+const mapStateToProps = (state) => {
+  return {
+    AllowDismissDependencies: state.relver.AllowDismissDependencies,
+    MissingDependencies: state.install.MissingDependencies,
+  };
+};
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    downloadItem: (name, type, url, isWinFSP) => dispatch(downloadItem(name, type, url, isWinFSP)),
+    setDismissDependencies: (dismiss) => dispatch(setDismissDependencies(dismiss)),
+  };
+};
+
+DependencyList.propTypes = {
+  AllowDismissDependencies: PropTypes.bool,
+  MissingDependencies: PropTypes.array,
+  downloadItem: PropTypes.func.isRequired,
+  setDismissDependencies: PropTypes.func.isRequired,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(DependencyList);

src/components/DownloadProgress/DownloadProgress.js

@@ -1,17 +1,10 @@
 import Box from '../UI/Box/Box';
-import { connect } from 'react-redux';
-import React from 'react';
 import './DownloadProgress.css';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { connect } from 'react-redux';
 
-const mapStateToProps = (state) => {
-  return {
-    DownloadName: state.download.DownloadName,
-    DownloadProgress: state.download.DownloadProgress,
-    Platform: state.common.Platform,
-  };
-};
-
-export default connect(mapStateToProps)((props) => {
+const DownloadProgress = (props) => {
   const width = props.Platform === 'linux' ? '480px' : '380px';
   return (
     <Box dxStyle={{ width: width, height: 'auto', padding: '5px' }}>
@@ -28,4 +21,20 @@ export default connect(mapStateToProps)((props) => {
       />
     </Box>
   );
-});
+};
+
+const mapStateToProps = (state) => {
+  return {
+    DownloadName: state.download.DownloadName,
+    DownloadProgress: state.download.DownloadProgress,
+    Platform: state.common.Platform,
+  };
+};
+
+DownloadProgress.propTypes = {
+  DownloadName: PropTypes.string.isRequired,
+  DownloadProgress: PropTypes.number,
+  Platform: PropTypes.string.isRequired,
+};
+
+export default connect(mapStateToProps)(DownloadProgress);

src/components/ErrorDetails/ErrorDetails.js

@@ -1,9 +1,22 @@
 import React from 'react';
-import { dismissError } from '../../redux/actions/error_actions';
-import { connect } from 'react-redux';
+import './ErrorDetails.css';
 import Box from '../UI/Box/Box';
 import Button from '../UI/Button/Button';
-import './ErrorDetails.css';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { dismissError } from '../../redux/actions/error_actions';
+
+const ErrorDetails = (props) => {
+  return (
+    <Box dxDark dxStyle={{ padding: 'var(--default_spacing)' }}>
+      <h1 className={'ErrorDetailsHeading'}>Application Error</h1>
+      <div className={'ErrorDetailsContent'}>
+        <p>{props.ErrorMessage}</p>
+      </div>
+      <Button clicked={props.dismissError}>Dismiss</Button>
+    </Box>
+  );
+};
 
 const mapStateToProps = (state) => {
   return {
@@ -17,17 +30,9 @@ const mapDispatchToProps = (dispatch) => {
   };
 };
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)((props) => {
-  return (
-    <Box dxDark dxStyle={{ padding: 'var(--default_spacing)' }}>
-      <h1 className={'ErrorDetailsHeading'}>Application Error</h1>
-      <div className={'ErrorDetailsContent'}>
-        <p>{props.ErrorMessage}</p>
-      </div>
-      <Button clicked={props.dismissError}>Dismiss</Button>
-    </Box>
-  );
-});
+ErrorDetails.propTypes = {
+  ErrorMessage: PropTypes.string.isRequired,
+  dismissError: PropTypes.func.isRequired,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(ErrorDetails);

src/components/InfoDetails/InfoDetails.js

@@ -1,28 +1,13 @@
 import React from 'react';
-import { dismissInfo, notifyError } from '../../redux/actions/error_actions';
-import { connect } from 'react-redux';
+import './InfoDetails.css';
 import Box from '../UI/Box/Box';
 import Button from '../UI/Button/Button';
-import './InfoDetails.css';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { dismissInfo, notifyError } from '../../redux/actions/error_actions';
 import { promptLocationAndSaveFile } from '../../utils';
 
-const mapStateToProps = (state) => {
-  return {
-    InfoMessage: state.error.InfoStack.length > 0 ? state.error.InfoStack[0] : '',
-  };
-};
-
-const mapDispatchToProps = (dispatch) => {
-  return {
-    notifyError: (msg) => dispatch(notifyError(msg)),
-    dismissInfo: () => dispatch(dismissInfo()),
-  };
-};
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)((props) => {
+const InfoDetails = (props) => {
   let msg = props.InfoMessage.message;
   const classes = ['InfoDetailsContent'];
 
@@ -90,4 +75,25 @@ export default connect(
       )}
     </Box>
   );
-});
+};
+
+const mapStateToProps = (state) => {
+  return {
+    InfoMessage: state.error.InfoStack.length > 0 ? state.error.InfoStack[0] : '',
+  };
+};
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    notifyError: (msg) => dispatch(notifyError(msg)),
+    dismissInfo: () => dispatch(dismissInfo()),
+  };
+};
+
+InfoDetails.propTypes = {
+  InfoMessage: PropTypes.object.isRequired,
+  dismissInfo: PropTypes.func.isRequired,
+  notifyError: PropTypes.func.isRequired,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(InfoDetails);

src/components/NewReleases/NewRelease/NewRelease.jsx

@@ -1,12 +1,72 @@
 import React from 'react';
-import { connect } from 'react-redux';
 import * as Constants from '../../../constants';
 import Button from '../../UI/Button/Button';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
 import { formatLinesForDisplay, getChangesForRepertoryVersion } from '../../../utils.jsx';
 import { notifyError, notifyInfo } from '../../../redux/actions/error_actions';
 import { setActiveRelease } from '../../../redux/actions/release_version_actions';
 import { unmountAll } from '../../../redux/actions/mount_actions';
 
+const NewRelease = ({
+  ActiveRelease,
+  ActiveVersion,
+  dismiss,
+  release,
+  lastItem,
+  notifyError,
+  notifyInfo,
+  setActiveRelease,
+  unmountAll,
+}) => {
+  const title = '[' + Constants.RELEASE_TYPES[release.Release] + '] ' + release.Display;
+  const displayChanges = async () => {
+    try {
+      const lines = await getChangesForRepertoryVersion(release.VersionString);
+      notifyInfo(title, formatLinesForDisplay(lines));
+    } catch (e) {
+      notifyError(e);
+    }
+  };
+
+  const isActiveRelease = release.Release === ActiveRelease && release.Version === ActiveVersion;
+  const setReleaseAndVersion = () => {
+    dismiss();
+    unmountAll(() => {
+      setActiveRelease(release.Release, release.Version);
+    });
+  };
+
+  return (
+    <div>
+      <h2>{title}</h2>
+      <table cellSpacing={0} cellPadding={0} width="97%">
+        <tbody>
+          <tr style={{ height: '4px' }} />
+          <tr>
+            <td width="50%">
+              <Button buttonStyles={{ width: '100%' }} clicked={displayChanges}>
+                Changes
+              </Button>
+            </td>
+            <td>
+              <div style={{ width: 'var(--default_spacing)' }} />
+            </td>
+            <td width="50%">
+              {!isActiveRelease ? (
+                <Button buttonStyles={{ width: '100%' }} clicked={setReleaseAndVersion}>
+                  Activate
+                </Button>
+              ) : null}
+            </td>
+          </tr>
+          {lastItem ? null : <tr style={{ height: 'var(--default_spacing)' }} />}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
 const mapStateToProps = (state) => {
   return {
     ActiveRelease: state.relver.Release,
@@ -23,66 +83,16 @@ const mapDispatchToProps = (dispatch) => {
   };
 };
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(
-  ({
-    ActiveRelease,
-    ActiveVersion,
-    dismiss,
-    release,
-    lastItem,
-    notifyError,
-    notifyInfo,
-    setActiveRelease,
-    unmountAll,
-  }) => {
-    const title = '[' + Constants.RELEASE_TYPES[release.Release] + '] ' + release.Display;
-    const displayChanges = async () => {
-      try {
-        const lines = await getChangesForRepertoryVersion(release.VersionString);
-        notifyInfo(title, formatLinesForDisplay(lines));
-      } catch (e) {
-        notifyError(e);
-      }
-    };
+NewRelease.propTypes = {
+  ActiveRelease: PropTypes.number.isRequired,
+  ActiveVersion: PropTypes.number.isRequired,
+  dismiss: PropTypes.func.isRequired,
+  lastItem: PropTypes.bool.isRequired,
+  notifyError: PropTypes.func.isRequired,
+  notifyInfo: PropTypes.func.isRequired,
+  release: PropTypes.object.isRequired,
+  setActiveRelease: PropTypes.func.isRequired,
+  unmountAll: PropTypes.func.isRequired,
+};
 
-    const isActiveRelease = release.Release === ActiveRelease && release.Version === ActiveVersion;
-    const setReleaseAndVersion = () => {
-      dismiss();
-      unmountAll(() => {
-        setActiveRelease(release.Release, release.Version);
-      });
-    };
-
-    return (
-      <div>
-        <h2>{title}</h2>
-        <table cellSpacing={0} cellPadding={0} width="97%">
-          <tbody>
-            <tr style={{ height: '4px' }} />
-            <tr>
-              <td width="50%">
-                <Button buttonStyles={{ width: '100%' }} clicked={displayChanges}>
-                  Changes
-                </Button>
-              </td>
-              <td>
-                <div style={{ width: 'var(--default_spacing)' }} />
-              </td>
-              <td width="50%">
-                {!isActiveRelease ? (
-                  <Button buttonStyles={{ width: '100%' }} clicked={setReleaseAndVersion}>
-                    Activate
-                  </Button>
-                ) : null}
-              </td>
-            </tr>
-            {lastItem ? null : <tr style={{ height: 'var(--default_spacing)' }} />}
-          </tbody>
-        </table>
-      </div>
-    );
-  }
-);
+export default connect(mapStateToProps, mapDispatchToProps)(NewRelease);

src/components/NewReleases/NewReleases.jsx

@@ -1,27 +1,13 @@
 import React from 'react';
-import { connect } from 'react-redux';
+import './NewReleases.css';
 import Box from '../UI/Box/Box';
 import Button from '../UI/Button/Button';
 import NewRelease from './NewRelease/NewRelease.jsx';
-import './NewReleases.css';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
 import { setDismissNewReleasesAvailable } from '../../redux/actions/release_version_actions';
 
-const mapStateToProps = (state) => {
-  return {
-    NewReleasesAvailable: state.relver.NewReleasesAvailable,
-  };
-};
-
-const mapDispatchToProps = (dispatch) => {
-  return {
-    dismissNewReleasesAvailable: () => dispatch(setDismissNewReleasesAvailable(true)),
-  };
-};
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)((props) => {
+const NewReleases = (props) => {
   const newReleases = props.NewReleasesAvailable.map((i, idx) => {
     return (
       <NewRelease
@@ -40,4 +26,23 @@ export default connect(
       <Button clicked={props.dismissNewReleasesAvailable}>Dismiss</Button>
     </Box>
   );
-});
+};
+
+const mapStateToProps = (state) => {
+  return {
+    NewReleasesAvailable: state.relver.NewReleasesAvailable,
+  };
+};
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    dismissNewReleasesAvailable: () => dispatch(setDismissNewReleasesAvailable(true)),
+  };
+};
+
+NewReleases.propTypes = {
+  NewReleasesAvailable: PropTypes.array.isRequired,
+  dismissNewReleasesAvailable: PropTypes.func.isRequired,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(NewReleases);

src/components/Reboot/Reboot.js

@@ -1,20 +1,12 @@
 import React from 'react';
 import './Reboot.css';
-import { connect } from 'react-redux';
 import Box from '../UI/Box/Box';
 import Button from '../UI/Button/Button';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
 import { rebootSystem } from '../../redux/actions/common_actions';
 
-const mapDispatchToProps = (dispatch) => {
-  return {
-    rebootSystem: () => dispatch(rebootSystem()),
-  };
-};
-
-export default connect(
-  null,
-  mapDispatchToProps
-)((props) => {
+const Reboot = (props) => {
   return (
     <Box dxDark dxStyle={{ padding: 'var(--default_spacing)' }}>
       <h1 className={'RebootHeading'}>Reboot System</h1>
@@ -24,4 +16,16 @@ export default connect(
       <Button clicked={() => props.rebootSystem()}>Reboot Now</Button>
     </Box>
   );
-});
+};
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    rebootSystem: () => dispatch(rebootSystem()),
+  };
+};
+
+Reboot.propTypes = {
+  rebootSystem: PropTypes.func.isRequired,
+};
+
+export default connect(null, mapDispatchToProps)(Reboot);

src/components/ReleaseVersionDisplay/ReleaseVersionDisplay.js

@@ -1,44 +1,17 @@
 import React from 'react';
 import './ReleaseVersionDisplay.css';
 import * as Constants from '../../constants';
-import { connect } from 'react-redux';
+import Button from '../UI/Button/Button';
 import DropDown from '../UI/DropDown/DropDown';
 import Grid from '../UI/Grid/Grid';
+import PropTypes from 'prop-types';
 import Text from '../UI/Text/Text';
-import Button from '../UI/Button/Button';
 import UpgradeIcon from '../UpgradeIcon/UpgradeIcon';
-import { setActiveRelease } from '../../redux/actions/release_version_actions';
+import { connect } from 'react-redux';
 import { downloadItem } from '../../redux/actions/download_actions';
+import { setActiveRelease } from '../../redux/actions/release_version_actions';
 
-const mapStateToProps = (state) => {
-  return {
-    AllowMount: state.common.AllowMount,
-    AppPlatform: state.common.AppPlatform,
-    DismissDependencies: state.install.DismissDependencies,
-    DownloadActive: state.download.DownloadActive,
-    InstallActive: state.install.InstallActive,
-    InstallType: state.install.InstallType,
-    InstalledVersion: state.relver.InstalledVersion,
-    LocationsLookup: state.relver.LocationsLookup,
-    MountsBusy: state.mounts.MountsBusy,
-    Release: state.relver.Release,
-    ReleaseUpgradeAvailable: state.relver.ReleaseUpgradeAvailable,
-    ReleaseVersion: state.relver.Version,
-    VersionLookup: state.relver.VersionLookup,
-  };
-};
-
-const mapDispatchToProps = (dispatch) => {
-  return {
-    downloadItem: (name, type, urls) => dispatch(downloadItem(name, type, urls)),
-    setActiveRelease: (release, version) => dispatch(setActiveRelease(release, version)),
-  };
-};
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)((props) => {
+const ReleaseVersionDisplay = (props) => {
   const getSelectedVersion = () => {
     return props.ReleaseVersion === -1
       ? 'unavailable'
@@ -184,4 +157,51 @@ export default connect(
       {optionsDisplay}
     </Grid>
   );
-});
+};
+
+const mapStateToProps = (state) => {
+  return {
+    AllowMount: state.common.AllowMount,
+    AppPlatform: state.common.AppPlatform,
+    DismissDependencies: state.install.DismissDependencies,
+    DownloadActive: state.download.DownloadActive,
+    InstallActive: state.install.InstallActive,
+    InstallType: state.install.InstallType,
+    InstalledVersion: state.relver.InstalledVersion,
+    LocationsLookup: state.relver.LocationsLookup,
+    MountsBusy: state.mounts.MountsBusy,
+    Release: state.relver.Release,
+    ReleaseUpgradeAvailable: state.relver.ReleaseUpgradeAvailable,
+    ReleaseVersion: state.relver.Version,
+    VersionLookup: state.relver.VersionLookup,
+  };
+};
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    downloadItem: (name, type, urls) => dispatch(downloadItem(name, type, urls)),
+    setActiveRelease: (release, version) => dispatch(setActiveRelease(release, version)),
+  };
+};
+
+ReleaseVersionDisplay.propTypes = {
+  AllowMount: PropTypes.bool,
+  AppPlatform: PropTypes.string.isRequired,
+  DismissDependencies: PropTypes.bool.isRequired,
+  DownloadActive: PropTypes.bool,
+  InstallActive: PropTypes.bool,
+  InstallType: PropTypes.string,
+  InstalledVersion: PropTypes.string,
+  LocationsLookup: PropTypes.object.isRequired,
+  MountsBusy: PropTypes.bool,
+  Release: PropTypes.number.isRequired,
+  ReleaseUpgradeAvailable: PropTypes.bool,
+  ReleaseVersion: PropTypes.number.isRequired,
+  VersionLookup: PropTypes.object.isRequired,
+  downloadDisabled: PropTypes.bool,
+  downloadItem: PropTypes.func.isRequired,
+  setActiveRelease: PropTypes.func.isRequired,
+  version: PropTypes.string.isRequired,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(ReleaseVersionDisplay);

src/components/UI/Box/Box.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import './Box.css';
+import PropTypes from 'prop-types';
 
 const Box = (props) => {
   const styleList = [];
@@ -23,4 +24,14 @@ const Box = (props) => {
   );
 };
 
+Box.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+  clicked: PropTypes.func,
+  dxDark: PropTypes.bool,
+  dxFadeIn: PropTypes.bool,
+  dxSlideOut: PropTypes.bool,
+  dxSlideOutTop: PropTypes.bool,
+  dxStyle: PropTypes.object,
+};
+
 export default Box;

src/components/UI/Button/Button.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import './Button.css';
+import PropTypes from 'prop-types';
 
 const Button = (props) => {
   return (
@@ -14,4 +15,12 @@ const Button = (props) => {
   );
 };
 
+Button.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.object, PropTypes.array, PropTypes.string]),
+  autoFocus: PropTypes.bool,
+  buttonStyles: PropTypes.object,
+  clicked: PropTypes.func,
+  disabled: PropTypes.bool,
+};
+
 export default Button;

src/components/UI/CheckBox/CheckBox.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import './CheckBox.css';
+import PropTypes from 'prop-types';
 
 const CheckBox = (props) => {
   return (
@@ -19,4 +20,12 @@ const CheckBox = (props) => {
   );
 };
 
+CheckBox.propTypes = {
+  autoFocus: PropTypes.bool,
+  checked: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  disabled: PropTypes.bool,
+  label: PropTypes.string,
+  changed: PropTypes.func,
+};
+
 export default CheckBox;

src/components/UI/DropDown/DropDown.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import './DropDown.css';
+import PropTypes from 'prop-types';
 
 const DropDown = (props) => {
   const options = props.items.map((s, i) => {
@@ -24,4 +25,14 @@ const DropDown = (props) => {
   );
 };
 
+DropDown.propTypes = {
+  alt: PropTypes.bool,
+  auto: PropTypes.bool,
+  autoFocus: PropTypes.bool,
+  changed: PropTypes.func,
+  disabled: PropTypes.bool,
+  items: PropTypes.array,
+  selected: PropTypes.string,
+};
+
 export default DropDown;

src/components/UI/Grid/Grid.js

@@ -1,10 +1,16 @@
 import React, { Component } from 'react';
 import './Grid.css';
 import GridComponent from './GridComponent/GridComponent';
+import PropTypes from 'prop-types';
 
 const DEFAULT_GRID_SIZE = 4;
 
-export default class Grid extends Component {
+class Grid extends Component {
+  constructor(props) {
+    super(props);
+    this.sizeRef = React.createRef();
+  }
+
   resizeTimeout;
   state = {
     calculated: false,
@@ -40,7 +46,7 @@ export default class Grid extends Component {
   };
 
   getSize = () => {
-    const elem = this.refs.GridOwner;
+    const elem = this.sizeRef.current;
     return {
       height: elem ? elem.offsetHeight : 0,
       width: elem ? elem.offsetWidth : 0,
@@ -128,7 +134,7 @@ export default class Grid extends Component {
     }
 
     return (
-      <div ref="GridOwner" className={'GridOwner'}>
+      <div ref={this.sizeRef} className={'GridOwner'}>
         <div className={'Grid'} {...style}>
           {children}
         </div>
@@ -136,3 +142,11 @@ export default class Grid extends Component {
     );
   }
 }
+
+Grid.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.object, PropTypes.array, PropTypes.string]),
+  gridSize: PropTypes.number,
+  noScroll: PropTypes.bool,
+};
+
+export default Grid;

src/components/UI/Grid/GridComponent/GridComponent.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import './GridComponent.css';
+import PropTypes from 'prop-types';
 
 const GridComponent = (props) => {
   const style = {
@@ -18,4 +19,12 @@ const GridComponent = (props) => {
   );
 };
 
+GridComponent.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+  col: PropTypes.number.isRequired,
+  colSpan: PropTypes.number,
+  row: PropTypes.number.isRequired,
+  rowSpan: PropTypes.number,
+};
+
 export default GridComponent;

src/components/UI/Modal/Modal.js

@@ -1,7 +1,7 @@
 import React from 'react';
-
 import './Modal.css';
 import FocusTrap from 'focus-trap-react';
+import PropTypes from 'prop-types';
 
 const Modal = (props) => {
   let modalStyles = [];
@@ -26,4 +26,12 @@ const Modal = (props) => {
   );
 };
 
+Modal.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+  clicked: PropTypes.func,
+  critical: PropTypes.bool,
+  disableFocusTrap: PropTypes.bool,
+  transparent: PropTypes.bool,
+};
+
 export default Modal;

src/components/UI/RootElem/RootElem.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 const RootElem = (props) => {
   return (
@@ -8,4 +9,8 @@ const RootElem = (props) => {
   );
 };
 
+RootElem.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+};
+
 export default RootElem;

src/components/UI/Text/Text.js

@@ -1,5 +1,6 @@
-import React from 'react';
 import './Text.css';
+import PropTypes from 'prop-types';
+import React from 'react';
 
 const Text = (props) => {
   const styleList = [];
@@ -22,4 +23,12 @@ const Text = (props) => {
   return props.noOwner ? text : <div className={'TextOwner'}>{text}</div>;
 };
 
+Text.propTypes = {
+  noOwner: PropTypes.bool,
+  style: PropTypes.object,
+  text: PropTypes.string,
+  textAlign: PropTypes.string,
+  type: PropTypes.string,
+};
+
 export default Text;

src/components/UpgradeIcon/UpgradeIcon.js

@@ -1,9 +1,9 @@
 import './UpgradeIcon.css';
-
-import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import PropTypes from 'prop-types';
 import React from 'react';
 import ReactTooltip from 'react-tooltip';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
 
 const UpgradeIcon = (props) => {
   const styles = ['UpgradeIcon'];
@@ -32,4 +32,11 @@ const UpgradeIcon = (props) => {
   ) : null;
 };
 
+UpgradeIcon.propTypes = {
+  available: PropTypes.bool,
+  clicked: PropTypes.func,
+  newReleases: PropTypes.bool,
+  release: PropTypes.bool,
+};
+
 export default UpgradeIcon;

src/components/UpgradeUI/UpgradeUI.js

@@ -1,31 +1,14 @@
 import { connect } from 'react-redux';
-import Button from '../UI/Button/Button';
-import Box from '../UI/Box/Box';
-import * as Constants from '../../constants';
-import React from 'react';
 import './UpgradeUI.css';
-import { setDismissUIUpgrade } from '../../redux/actions/release_version_actions';
+import * as Constants from '../../constants';
+import Box from '../UI/Box/Box';
+import Button from '../UI/Button/Button';
+import PropTypes from 'prop-types';
+import React from 'react';
 import { downloadItem } from '../../redux/actions/download_actions';
+import { setDismissUIUpgrade } from '../../redux/actions/release_version_actions';
 
-const mapStateToProps = (state) => {
-  return {
-    Platform: state.common.Platform,
-    UpgradeData: state.relver.UpgradeData,
-    UpgradeVersion: state.relver.UpgradeVersion,
-  };
-};
-
-const mapDispatchToProps = (dispatch) => {
-  return {
-    downloadItem: (name, type, urls) => dispatch(downloadItem(name, type, urls)),
-    setDismissUIUpgrade: (dismiss) => dispatch(setDismissUIUpgrade(dismiss)),
-  };
-};
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)((props) => {
+const UpgradeUI = (props) => {
   const handleDownload = () => {
     const name =
       props.Platform === 'win32'
@@ -61,4 +44,29 @@ export default connect(
       </table>
     </Box>
   );
-});
+};
+
+const mapStateToProps = (state) => {
+  return {
+    Platform: state.common.Platform,
+    UpgradeData: state.relver.UpgradeData,
+    UpgradeVersion: state.relver.UpgradeVersion,
+  };
+};
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    downloadItem: (name, type, urls) => dispatch(downloadItem(name, type, urls)),
+    setDismissUIUpgrade: (dismiss) => dispatch(setDismissUIUpgrade(dismiss)),
+  };
+};
+
+UpgradeUI.propTypes = {
+  Platform: PropTypes.string.isRequired,
+  UpgradeData: PropTypes.object.isRequired,
+  UpgradeVersion: PropTypes.string.isRequired,
+  downloadItem: PropTypes.func.isRequired,
+  setDismissUIUpgrade: PropTypes.func.isRequired,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(UpgradeUI);

src/components/YesNo/YesNo.js

@@ -1,26 +1,12 @@
-import { connect } from 'react-redux';
-import Button from '../UI/Button/Button';
-import Box from '../UI/Box/Box';
 import React from 'react';
 import './YesNo.css';
+import Box from '../UI/Box/Box';
+import Button from '../UI/Button/Button';
+import PropTypes from 'prop-types';
 import { confirmYesNoAction } from '../../redux/actions/common_actions';
+import { connect } from 'react-redux';
 
-const mapStateToProps = (state) => {
-  return {
-    Title: state.common.ConfirmTitle,
-  };
-};
-
-const mapDispatchToProps = (dispatch) => {
-  return {
-    confirm: (confirmed) => dispatch(confirmYesNoAction.complete(confirmed)),
-  };
-};
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)((props) => {
+const YesNo = (props) => {
   return (
     <Box
       dxStyle={{
@@ -49,4 +35,23 @@ export default connect(
       </table>
     </Box>
   );
-});
+};
+
+const mapStateToProps = (state) => {
+  return {
+    Title: state.common.ConfirmTitle,
+  };
+};
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    confirm: (confirmed) => dispatch(confirmYesNoAction.complete(confirmed)),
+  };
+};
+
+YesNo.propTypes = {
+  Title: PropTypes.string.isRequired,
+  confirm: PropTypes.func.isRequired,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(YesNo);

src/containers/Configuration/Configuration.js

@@ -1,15 +1,16 @@
 import React from 'react';
 import './Configuration.css';
-import { connect } from 'react-redux';
-import { createDismissDisplay } from '../../utils.jsx';
 import Box from '../../components/UI/Box/Box';
 import Button from '../../components/UI/Button/Button';
 import ConfigurationItem from './ConfigurationItem/ConfigurationItem';
-import Modal from '../../components/UI/Modal/Modal';
 import IPCContainer from '../IPCContainer/IPCContainer';
+import Modal from '../../components/UI/Modal/Modal';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { createDismissDisplay } from '../../utils.jsx';
 import { displayConfiguration } from '../../redux/actions/mount_actions';
-import { notifyError } from '../../redux/actions/error_actions';
 import { displayPinnedManager } from '../../redux/actions/pinned_manager_actions';
+import { notifyError } from '../../redux/actions/error_actions';
 
 const Constants = require('../../constants');
 
@@ -455,4 +456,15 @@ const mapDispatchToProps = (dispatch) => {
   };
 };
 
+Configuration.propTypes = {
+  displayPinnedManager: PropTypes.func.isRequired,
+  DisplayConfiguration: PropTypes.string.isRequired,
+  hideConfiguration: PropTypes.func.isRequired,
+  remoteSupported: PropTypes.bool.isRequired,
+  notifyError: PropTypes.func.isRequired,
+  MState: PropTypes.object.isRequired,
+  Platform: PropTypes.string.isRequired,
+  version: PropTypes.string.isRequired,
+};
+
 export default connect(mapStateToProps, mapDispatchToProps)(Configuration);

src/containers/IPCContainer/IPCContainer.js

@@ -9,7 +9,7 @@ export default class IPCContainer extends Component {
   componentWillUnmount() {
     if (ipcRenderer) {
       for (let name in this.handlerList) {
-        if (this.handlerList.hasOwnProperty(name)) {
+        if (Object.prototype.hasOwnProperty.call(this.handlerList, name)) {
           ipcRenderer.removeListener(name, this.handlerList[name]);
         }
       }

src/containers/MountItems/MountItems.js

@@ -68,7 +68,7 @@ class MountItems extends IPCContainer {
 
   componentWillUnmount() {
     for (const provider in this.state.RetryItems) {
-      if (this.state.RetryItems.hasOwnProperty(provider)) {
+      if (Object.prototype.hasOwnProperty.call(this.state.RetryItems, provider)) {
         this.cancelRetryMount(provider);
       }
     }
@@ -387,7 +387,7 @@ class MountItems extends IPCContainer {
       let retryList = [];
       let retryCount = 0;
       for (const provider in this.state.RetryItems) {
-        if (this.state.RetryItems.hasOwnProperty(provider)) {
+        if (Object.prototype.hasOwnProperty.call(this.state.RetryItems, provider)) {
           if (this.state.RetryItems[provider].RetryMessage) {
             retryList.push(
               <p key={'rl_' + retryList.length}>{this.state.RetryItems[provider].RetryMessage}</p>

src/containers/SkynetImport/ImportList/Import/Import.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import './Import.css';
+import PropTypes from 'prop-types';
 
 const Import = ({ data }) => {
   return (
@@ -35,4 +36,8 @@ const Import = ({ data }) => {
   );
 };
 
+Import.propTypes = {
+  data: PropTypes.object,
+};
+
 export default Import;

src/containers/SkynetImport/ImportList/ImportList.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import './ImportList.css';
 import Import from './Import/Import';
+import PropTypes from 'prop-types';
 import Text from '../../../components/UI/Text/Text';
 
 const ImportList = ({ imports_array }) => {
@@ -34,4 +35,8 @@ const ImportList = ({ imports_array }) => {
   );
 };
 
+ImportList.propTypes = {
+  imports_array: PropTypes.array.isRequired,
+};
+
 export default ImportList;

src/containers/UI/Password/Password.js

@@ -1,9 +1,10 @@
 import React, { Component } from 'react';
 import './Password.css';
-import { faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
+import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
 
-export default class Password extends Component {
+class Password extends Component {
   state = {
     button_text: 'clear',
     password: '',
@@ -137,3 +138,15 @@ export default class Password extends Component {
     );
   }
 }
+
+Password.propTypes = {
+  autoFocus: PropTypes.bool,
+  changed: PropTypes.func,
+  disabled: PropTypes.bool,
+  mismatchHandler: PropTypes.func,
+  readOnly: PropTypes.bool,
+  style: PropTypes.object,
+  value: PropTypes.string,
+};
+
+export default Password;

src/utils.jsx

@@ -5,7 +5,7 @@ import Modal from './components/UI/Modal/Modal';
 import * as Constants from './constants';
 
 const ipcRenderer =
-  !process.versions.hasOwnProperty('electron') && window && window.require
+  !Object.prototype.hasOwnProperty.call(process.versions, 'electron') && window && window.require
     ? window.require('electron').ipcRenderer
     : null;