From ace51f61d1ea48b4dfc92d77ed9362ad8dd8e412 Mon Sep 17 00:00:00 2001 From: "Scott E. Graves" Date: Tue, 4 May 2021 19:22:45 -0500 Subject: [PATCH] PropTypes and refactoring --- .eslintrc.json | 5 +- src/App.jsx | 2 +- .../DependencyList/Dependency/Dependency.js | 33 +++-- .../DependencyList/DependencyList.js | 51 ++++--- .../DownloadProgress/DownloadProgress.js | 33 +++-- src/components/ErrorDetails/ErrorDetails.js | 39 ++--- src/components/InfoDetails/InfoDetails.js | 48 ++++--- .../NewReleases/NewRelease/NewRelease.jsx | 136 ++++++++++-------- src/components/NewReleases/NewReleases.jsx | 43 +++--- src/components/Reboot/Reboot.js | 28 ++-- .../ReleaseVersionDisplay.js | 86 ++++++----- src/components/UI/Box/Box.js | 11 ++ src/components/UI/Button/Button.js | 9 ++ src/components/UI/CheckBox/CheckBox.js | 9 ++ src/components/UI/DropDown/DropDown.js | 11 ++ src/components/UI/Grid/Grid.js | 20 ++- .../UI/Grid/GridComponent/GridComponent.js | 9 ++ src/components/UI/Modal/Modal.js | 10 +- src/components/UI/RootElem/RootElem.js | 5 + src/components/UI/Text/Text.js | 11 +- src/components/UpgradeIcon/UpgradeIcon.js | 13 +- src/components/UpgradeUI/UpgradeUI.js | 58 ++++---- src/components/YesNo/YesNo.js | 45 +++--- src/containers/Configuration/Configuration.js | 20 ++- src/containers/IPCContainer/IPCContainer.js | 2 +- src/containers/MountItems/MountItems.js | 4 +- .../SkynetImport/ImportList/Import/Import.js | 5 + .../SkynetImport/ImportList/ImportList.js | 5 + src/containers/UI/Password/Password.js | 17 ++- src/utils.jsx | 2 +- 30 files changed, 491 insertions(+), 279 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index 16afd70..9053717 100644 --- a/.eslintrc.json +++ b/.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" } } diff --git a/src/App.jsx b/src/App.jsx index e5b95b8..46a306c 100644 --- a/src/App.jsx +++ b/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)' }}> diff --git a/src/components/DependencyList/Dependency/Dependency.js b/src/components/DependencyList/Dependency/Dependency.js index 2e3590d..2a5113a 100644 --- a/src/components/DependencyList/Dependency/Dependency.js +++ b/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 (
@@ -41,4 +33,21 @@ export default connect(mapStateToProps)((props) => {
); -}); +}; + +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); diff --git a/src/components/DependencyList/DependencyList.js b/src/components/DependencyList/DependencyList.js index aaac2eb..d2d620a 100644 --- a/src/components/DependencyList/DependencyList.js +++ b/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 ( ); -}); +}; + +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); diff --git a/src/components/DownloadProgress/DownloadProgress.js b/src/components/DownloadProgress/DownloadProgress.js index 11db356..2b5cece 100644 --- a/src/components/DownloadProgress/DownloadProgress.js +++ b/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 ( @@ -28,4 +21,20 @@ export default connect(mapStateToProps)((props) => { /> ); -}); +}; + +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); diff --git a/src/components/ErrorDetails/ErrorDetails.js b/src/components/ErrorDetails/ErrorDetails.js index 19e8394..dbd9593 100644 --- a/src/components/ErrorDetails/ErrorDetails.js +++ b/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 ( + +

Application Error

+
+

{props.ErrorMessage}

+
+ + + ); +}; const mapStateToProps = (state) => { return { @@ -17,17 +30,9 @@ const mapDispatchToProps = (dispatch) => { }; }; -export default connect( - mapStateToProps, - mapDispatchToProps -)((props) => { - return ( - -

Application Error

-
-

{props.ErrorMessage}

-
- - - ); -}); +ErrorDetails.propTypes = { + ErrorMessage: PropTypes.string.isRequired, + dismissError: PropTypes.func.isRequired, +}; + +export default connect(mapStateToProps, mapDispatchToProps)(ErrorDetails); diff --git a/src/components/InfoDetails/InfoDetails.js b/src/components/InfoDetails/InfoDetails.js index 168d9e3..e1b99fe 100644 --- a/src/components/InfoDetails/InfoDetails.js +++ b/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( )} ); -}); +}; + +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); diff --git a/src/components/NewReleases/NewRelease/NewRelease.jsx b/src/components/NewReleases/NewRelease/NewRelease.jsx index 6822e9a..bb77837 100644 --- a/src/components/NewReleases/NewRelease/NewRelease.jsx +++ b/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 ( +
+

{title}

+ + + + + + + + + {lastItem ? null : } + +
+ + +
+
+ {!isActiveRelease ? ( + + ) : null} +
+
+ ); +}; + 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 ( -
-

{title}

- - - - - - - - - {lastItem ? null : } - -
- - -
-
- {!isActiveRelease ? ( - - ) : null} -
-
- ); - } -); +export default connect(mapStateToProps, mapDispatchToProps)(NewRelease); diff --git a/src/components/NewReleases/NewReleases.jsx b/src/components/NewReleases/NewReleases.jsx index e11b900..7f96331 100644 --- a/src/components/NewReleases/NewReleases.jsx +++ b/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 ( Dismiss ); -}); +}; + +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); diff --git a/src/components/Reboot/Reboot.js b/src/components/Reboot/Reboot.js index dffd4d9..58d33c8 100644 --- a/src/components/Reboot/Reboot.js +++ b/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 (

Reboot System

@@ -24,4 +16,16 @@ export default connect( ); -}); +}; + +const mapDispatchToProps = (dispatch) => { + return { + rebootSystem: () => dispatch(rebootSystem()), + }; +}; + +Reboot.propTypes = { + rebootSystem: PropTypes.func.isRequired, +}; + +export default connect(null, mapDispatchToProps)(Reboot); diff --git a/src/components/ReleaseVersionDisplay/ReleaseVersionDisplay.js b/src/components/ReleaseVersionDisplay/ReleaseVersionDisplay.js index c9c4401..1900545 100644 --- a/src/components/ReleaseVersionDisplay/ReleaseVersionDisplay.js +++ b/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} ); -}); +}; + +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); diff --git a/src/components/UI/Box/Box.js b/src/components/UI/Box/Box.js index 95afff1..42fbc42 100644 --- a/src/components/UI/Box/Box.js +++ b/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; diff --git a/src/components/UI/Button/Button.js b/src/components/UI/Button/Button.js index 9b91667..0492f0f 100644 --- a/src/components/UI/Button/Button.js +++ b/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; diff --git a/src/components/UI/CheckBox/CheckBox.js b/src/components/UI/CheckBox/CheckBox.js index bd075b2..b110112 100644 --- a/src/components/UI/CheckBox/CheckBox.js +++ b/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; diff --git a/src/components/UI/DropDown/DropDown.js b/src/components/UI/DropDown/DropDown.js index 901d255..2756cc8 100644 --- a/src/components/UI/DropDown/DropDown.js +++ b/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; diff --git a/src/components/UI/Grid/Grid.js b/src/components/UI/Grid/Grid.js index f08577f..280e163 100644 --- a/src/components/UI/Grid/Grid.js +++ b/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 ( -
+
{children}
@@ -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; diff --git a/src/components/UI/Grid/GridComponent/GridComponent.js b/src/components/UI/Grid/GridComponent/GridComponent.js index 8b5f24a..19a66fb 100644 --- a/src/components/UI/Grid/GridComponent/GridComponent.js +++ b/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; diff --git a/src/components/UI/Modal/Modal.js b/src/components/UI/Modal/Modal.js index b5d6e7f..0bd355a 100644 --- a/src/components/UI/Modal/Modal.js +++ b/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; diff --git a/src/components/UI/RootElem/RootElem.js b/src/components/UI/RootElem/RootElem.js index ee7cd1a..2c8950b 100644 --- a/src/components/UI/RootElem/RootElem.js +++ b/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; diff --git a/src/components/UI/Text/Text.js b/src/components/UI/Text/Text.js index f3d33e9..ed56cdd 100644 --- a/src/components/UI/Text/Text.js +++ b/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 :
{text}
; }; +Text.propTypes = { + noOwner: PropTypes.bool, + style: PropTypes.object, + text: PropTypes.string, + textAlign: PropTypes.string, + type: PropTypes.string, +}; + export default Text; diff --git a/src/components/UpgradeIcon/UpgradeIcon.js b/src/components/UpgradeIcon/UpgradeIcon.js index b6c4d8f..b56531c 100644 --- a/src/components/UpgradeIcon/UpgradeIcon.js +++ b/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; diff --git a/src/components/UpgradeUI/UpgradeUI.js b/src/components/UpgradeUI/UpgradeUI.js index dc6c626..570363c 100644 --- a/src/components/UpgradeUI/UpgradeUI.js +++ b/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( ); -}); +}; + +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); diff --git a/src/components/YesNo/YesNo.js b/src/components/YesNo/YesNo.js index 221ff68..05da468 100644 --- a/src/components/YesNo/YesNo.js +++ b/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 ( ); -}); +}; + +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); diff --git a/src/containers/Configuration/Configuration.js b/src/containers/Configuration/Configuration.js index 3a81b09..34065c8 100644 --- a/src/containers/Configuration/Configuration.js +++ b/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); diff --git a/src/containers/IPCContainer/IPCContainer.js b/src/containers/IPCContainer/IPCContainer.js index 5bb9076..fbbbdba 100644 --- a/src/containers/IPCContainer/IPCContainer.js +++ b/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]); } } diff --git a/src/containers/MountItems/MountItems.js b/src/containers/MountItems/MountItems.js index aac8e95..8fc9f1b 100644 --- a/src/containers/MountItems/MountItems.js +++ b/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(

{this.state.RetryItems[provider].RetryMessage}

diff --git a/src/containers/SkynetImport/ImportList/Import/Import.js b/src/containers/SkynetImport/ImportList/Import/Import.js index 88a9fe4..d639b88 100644 --- a/src/containers/SkynetImport/ImportList/Import/Import.js +++ b/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; diff --git a/src/containers/SkynetImport/ImportList/ImportList.js b/src/containers/SkynetImport/ImportList/ImportList.js index 97900cd..1aea753 100644 --- a/src/containers/SkynetImport/ImportList/ImportList.js +++ b/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; diff --git a/src/containers/UI/Password/Password.js b/src/containers/UI/Password/Password.js index bef623a..3d2fd19 100644 --- a/src/containers/UI/Password/Password.js +++ b/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; diff --git a/src/utils.jsx b/src/utils.jsx index 4811d4c..ae3bab9 100644 --- a/src/utils.jsx +++ b/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;