From dcf3c71ec3402bcb692bd5df0af2de2e18783ca3 Mon Sep 17 00:00:00 2001 From: Renovate Bot Date: Fri, 7 Dec 2018 11:49:08 +0000 Subject: [PATCH 1/7] Update dependency eslint-plugin-react to v7 --- package.json | 2 +- yarn.lock | 47 +++++++++++++++++++++++------------------------ 2 files changed, 24 insertions(+), 25 deletions(-) diff --git a/package.json b/package.json index 5ba836ce38fe1..7318cb4bbe1d3 100644 --- a/package.json +++ b/package.json @@ -78,7 +78,7 @@ "eslint-loader": "2.1.1", "eslint-plugin-jsx-a11y": "4.0.0", "eslint-plugin-lodash": "5.1.0", - "eslint-plugin-react": "6.10.3", + "eslint-plugin-react": "7.11.1", "eslint-plugin-wpcalypso": "4.0.2", "extract-text-webpack-plugin": "3.0.2", "fancy-log": "1.3.3", diff --git a/yarn.lock b/yarn.lock index bf8168df30bc4..0cca092b57232 100644 --- a/yarn.lock +++ b/yarn.lock @@ -358,6 +358,13 @@ array-find-index@^1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/array-find-index/-/array-find-index-1.0.2.tgz#df010aa1287e164bbda6f9723b0a96a1ec4187a1" +array-includes@^3.0.3: + version "3.0.3" + resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.0.3.tgz#184b48f62d92d7452bb31b323165c7f8bd02266d" + dependencies: + define-properties "^1.1.2" + es-abstract "^1.7.0" + array-initial@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/array-initial/-/array-initial-1.1.0.tgz#2fa74b26739371c3947bd7a7adc73be334b3d795" @@ -401,13 +408,6 @@ array-unique@^0.3.2: version "0.3.2" resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428" -array.prototype.find@^2.0.1: - version "2.0.4" - resolved "https://registry.yarnpkg.com/array.prototype.find/-/array.prototype.find-2.0.4.tgz#556a5c5362c08648323ddaeb9de9d14bc1864c90" - dependencies: - define-properties "^1.1.2" - es-abstract "^1.7.0" - array.prototype.flat@^1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.2.1.tgz#812db8f02cad24d3fab65dd67eabe3b8903494a4" @@ -2356,14 +2356,7 @@ discontinuous-range@1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/discontinuous-range/-/discontinuous-range-1.0.0.tgz#e38331f0844bba49b9a9cb71c771585aab1bc65a" -doctrine@^1.2.2: - version "1.5.0" - resolved "http://registry.npmjs.org/doctrine/-/doctrine-1.5.0.tgz#379dce730f6166f76cefa4e6707a159b02c5a6fa" - dependencies: - esutils "^2.0.2" - isarray "^1.0.0" - -doctrine@^2.0.0: +doctrine@^2.0.0, doctrine@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.1.0.tgz#5cd01fc101621b42c4cd7f5d1a66243716d3f39d" dependencies: @@ -2720,15 +2713,15 @@ eslint-plugin-lodash@5.1.0: dependencies: lodash "4.17.11" -eslint-plugin-react@6.10.3: - version "6.10.3" - resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-6.10.3.tgz#c5435beb06774e12c7db2f6abaddcbf900cd3f78" +eslint-plugin-react@7.11.1: + version "7.11.1" + resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.11.1.tgz#c01a7af6f17519457d6116aa94fc6d2ccad5443c" dependencies: - array.prototype.find "^2.0.1" - doctrine "^1.2.2" - has "^1.0.1" - jsx-ast-utils "^1.3.4" - object.assign "^4.0.4" + array-includes "^3.0.3" + doctrine "^2.1.0" + has "^1.0.3" + jsx-ast-utils "^2.0.1" + prop-types "^15.6.2" eslint-plugin-wpcalypso@4.0.2: version "4.0.2" @@ -4577,10 +4570,16 @@ jstimezonedetect@1.0.5: version "1.0.5" resolved "https://registry.yarnpkg.com/jstimezonedetect/-/jstimezonedetect-1.0.5.tgz#93d035cd20e8c7d64eb1375cf5aa7a10a024466a" -jsx-ast-utils@^1.0.0, jsx-ast-utils@^1.3.4: +jsx-ast-utils@^1.0.0: version "1.4.1" resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-1.4.1.tgz#3867213e8dd79bf1e8f2300c0cfc1efb182c0df1" +jsx-ast-utils@^2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-2.0.1.tgz#e801b1b39985e20fffc87b40e3748080e2dcac7f" + dependencies: + array-includes "^3.0.3" + just-debounce@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/just-debounce/-/just-debounce-1.0.0.tgz#87fccfaeffc0b68cd19d55f6722943f929ea35ea" From 0d3cd5e5d160c8e253b72439420de711d16a39ac Mon Sep 17 00:00:00 2001 From: Yaroslav Kukharuk Date: Mon, 10 Dec 2018 13:10:12 +0700 Subject: [PATCH 2/7] Fix all react/jsx-no-bind errors --- _inc/client/at-a-glance/index.jsx | 7 ++- _inc/client/at-a-glance/monitor.jsx | 26 +++++----- _inc/client/at-a-glance/photon.jsx | 10 ++-- _inc/client/at-a-glance/protect.jsx | 7 ++- _inc/client/at-a-glance/search.jsx | 9 ++-- .../at-a-glance/stats/dash-stats-bottom.jsx | 14 ++++-- _inc/client/at-a-glance/stats/index.jsx | 49 ++++++++----------- _inc/client/components/chart/legend.jsx | 2 +- _inc/client/components/dash-item/index.jsx | 25 +++++----- .../form/form-toggle/test/index.jsx | 7 +-- _inc/client/plans/plan-grid.jsx | 43 ++++++++-------- 11 files changed, 105 insertions(+), 94 deletions(-) diff --git a/_inc/client/at-a-glance/index.jsx b/_inc/client/at-a-glance/index.jsx index c86fe89c74f78..dd79dd253c2da 100644 --- a/_inc/client/at-a-glance/index.jsx +++ b/_inc/client/at-a-glance/index.jsx @@ -47,6 +47,10 @@ const renderPairs = layout => layout.map( item => ( ) ); class AtAGlance extends Component { + trackSecurityClick() { + analytics.tracks.recordJetpackClick( 'aag_manage_security_wpcom' ); + } + render() { const settingsProps = { updateOptions: this.props.updateOptions, @@ -57,7 +61,6 @@ class AtAGlance extends Component { siteAdminUrl: this.props.siteAdminUrl, siteRawUrl: this.props.siteRawUrl }; - const trackSecurityClick = () => analytics.tracks.recordJetpackClick( 'aag_manage_security_wpcom' ); const securityHeader = ; const connections = (
diff --git a/_inc/client/at-a-glance/monitor.jsx b/_inc/client/at-a-glance/monitor.jsx index 710827f9c072e..c798a4ffaa63e 100644 --- a/_inc/client/at-a-glance/monitor.jsx +++ b/_inc/client/at-a-glance/monitor.jsx @@ -20,6 +20,18 @@ class DashMonitor extends Component { isModuleAvailable: PropTypes.bool.isRequired, }; + activateAndTrack() { + analytics.tracks.recordEvent( + 'jetpack_wpa_module_toggle', + { + module: 'monitor', + toggled: 'on' + } + ); + + this.props.updateOptions( { monitor: true } ); + } + getContent() { const labelName = __( 'Downtime monitoring' ); @@ -28,18 +40,6 @@ class DashMonitor extends Component { link: 'https://jetpack.com/support/monitor/', }; - const activateAndTrack = () => { - analytics.tracks.recordEvent( - 'jetpack_wpa_module_toggle', - { - module: 'monitor', - toggled: 'on' - } - ); - - this.props.updateOptions( { monitor: true } ); - }; - if ( this.props.getOptionValue( 'monitor' ) ) { return ( + a: } } ) diff --git a/_inc/client/at-a-glance/photon.jsx b/_inc/client/at-a-glance/photon.jsx index eab5a55a4cdd8..bbe318837817e 100644 --- a/_inc/client/at-a-glance/photon.jsx +++ b/_inc/client/at-a-glance/photon.jsx @@ -19,10 +19,12 @@ class DashPhoton extends Component { isModuleAvailable: PropTypes.bool.isRequired, }; - getContent() { - const labelName = __( 'Image Performance' ), - activatePhoton = () => this.props.updateOptions( { photon: true } ); + activatePhoton() { + this.props.updateOptions( { photon: true } ); + } + getContent() { + const labelName = __( 'Image Performance' ); const support = { text: __( 'Jetpack will optimize your images and serve them from the server location nearest to your visitors. Using our global content delivery network will boost the loading speed of your site.' ), link: 'https://jetpack.com/support/photon/', @@ -51,7 +53,7 @@ class DashPhoton extends Component { this.props.isDevMode ? __( 'Unavailable in Dev Mode' ) : __( '{{a}}Activate{{/a}} to enhance the performance and speed of your images.', { components: { - a: + a: } } ) diff --git a/_inc/client/at-a-glance/protect.jsx b/_inc/client/at-a-glance/protect.jsx index 6102c0347b5fa..3c352178c1cdb 100644 --- a/_inc/client/at-a-glance/protect.jsx +++ b/_inc/client/at-a-glance/protect.jsx @@ -22,12 +22,15 @@ class DashProtect extends Component { isModuleAvailable: PropTypes.bool.isRequired, }; + activateProtect() { + this.props.updateOptions( { protect: true } ); + } + getContent() { const support = { text: __( 'Protects your site from traditional and distributed brute force login attacks.' ), link: 'https://jetpack.com/support/protect/', }; - const activateProtect = () => this.props.updateOptions( { protect: true } ); if ( this.props.getOptionValue( 'protect' ) ) { const protectCount = this.props.protectCount; @@ -72,7 +75,7 @@ class DashProtect extends Component { this.props.isDevMode ? __( 'Unavailable in Dev Mode' ) : __( '{{a}}Activate Protect{{/a}} to keep your site protected from malicious sign in attempts.', { components: { - a: + a: } } ) diff --git a/_inc/client/at-a-glance/search.jsx b/_inc/client/at-a-glance/search.jsx index 7c679d4c23c85..2c57e9235be18 100644 --- a/_inc/client/at-a-glance/search.jsx +++ b/_inc/client/at-a-glance/search.jsx @@ -55,9 +55,12 @@ class DashSearch extends Component { isDevMode: false, }; + activateSearch() { + this.props.updateOptions( { search: true } ); + } + render() { - const hasPro = ( 'is-business-plan' === this.props.planClass ), - activateSearch = () => this.props.updateOptions( { search: true } ); + const hasPro = ( 'is-business-plan' === this.props.planClass ); if ( this.props.isDevMode ) { return renderCard( { @@ -111,7 +114,7 @@ class DashSearch extends Component { pro_inactive: false, content: __( '{{a}}Activate{{/a}} to replace the WordPress built-in search with Jetpack Search, an advanced search experience.', { components: { - a: + a: } } ) } ); diff --git a/_inc/client/at-a-glance/stats/dash-stats-bottom.jsx b/_inc/client/at-a-glance/stats/dash-stats-bottom.jsx index 06a103c72f499..b285bc28cbb37 100644 --- a/_inc/client/at-a-glance/stats/dash-stats-bottom.jsx +++ b/_inc/client/at-a-glance/stats/dash-stats-bottom.jsx @@ -41,10 +41,16 @@ class DashStatsBottom extends Component { ]; } + trackViewDetailedStats() { + analytics.tracks.recordJetpackClick( 'view_detailed_stats' ); + } + + trackViewWpcomStats() { + analytics.tracks.recordJetpackClick( 'view_wpcom_stats' ); + } + render() { const s = this.statsBottom()[ 0 ]; - const trackViewDetailedStats = () => analytics.tracks.recordJetpackClick( 'view_detailed_stats' ), - trackViewWpcomStats = () => analytics.tracks.recordJetpackClick( 'view_wpcom_stats' ); return (
@@ -102,7 +108,7 @@ class DashStatsBottom extends Component { components: { button: @@ -356,17 +357,17 @@ class PlanGrid extends React.Component { ); } + featureLinkclickHandler( featureID ) { + analytics.tracks.recordJetpackClick( { + target: featureID, + type: 'feature-discovery', + plan: this.props.sitePlan.product_slug, + page: 'Plans' + } ); + } renderFeatureLink( feature ) { - const clickHandler = () => { - analytics.tracks.recordJetpackClick( { - target: feature.id, - type: 'feature-discovery', - plan: this.props.sitePlan.product_slug, - page: 'Plans' - } ); - }; return ( - { feature.name } + { feature.name } ); } From f2c32d5cef1608e8bd0a9c691c9f6e2d9952c16a Mon Sep 17 00:00:00 2001 From: Yaroslav Kukharuk Date: Mon, 10 Dec 2018 13:12:42 +0700 Subject: [PATCH 3/7] update deprecarted componentWillMount to UNSAFE_componentWillMount --- _inc/client/components/data/query-akismet-data/index.jsx | 2 +- _inc/client/components/data/query-akismet-key-check/index.jsx | 2 +- _inc/client/components/data/query-connect-url/index.jsx | 2 +- _inc/client/components/data/query-connection-status/index.jsx | 2 +- _inc/client/components/data/query-dash-protect/index.jsx | 2 +- _inc/client/components/data/query-modules/index.jsx | 2 +- _inc/client/components/data/query-plugin-updates/index.jsx | 2 +- _inc/client/components/data/query-rewind-status/index.js | 2 +- _inc/client/components/data/query-site-plugins/index.jsx | 2 +- _inc/client/components/data/query-site/index.jsx | 2 +- _inc/client/components/data/query-stats-data/index.jsx | 2 +- _inc/client/components/data/query-user-connection/index.jsx | 2 +- _inc/client/components/data/query-vaultpress-data/index.jsx | 2 +- _inc/client/components/form/form-toggle/index.jsx | 2 +- _inc/client/components/form/input-radio.jsx | 2 +- _inc/client/components/global-notices/index.jsx | 2 +- _inc/client/components/navigation-settings/index.jsx | 2 +- _inc/client/components/search/index.jsx | 2 +- _inc/client/components/section-nav/index.jsx | 2 +- _inc/client/components/section-nav/segmented.jsx | 2 +- _inc/client/components/select-dropdown/index.jsx | 2 +- _inc/client/components/spinner/index.jsx | 2 +- _inc/client/main.jsx | 2 +- _inc/client/privacy/index.jsx | 2 +- _inc/client/security/antispam.jsx | 2 +- _inc/client/static-main.jsx | 2 +- 26 files changed, 26 insertions(+), 26 deletions(-) diff --git a/_inc/client/components/data/query-akismet-data/index.jsx b/_inc/client/components/data/query-akismet-data/index.jsx index 4f6b746639b56..98351fdf70b27 100644 --- a/_inc/client/components/data/query-akismet-data/index.jsx +++ b/_inc/client/components/data/query-akismet-data/index.jsx @@ -11,7 +11,7 @@ import { bindActionCreators } from 'redux'; import { isFetchingAkismetData, fetchAkismetData } from 'state/at-a-glance'; class QueryAkismetData extends Component { - componentWillMount() { + UNSAFE_componentWillMount() { if ( ! this.props.fetchingAkismetData ) { this.props.fetchAkismetData(); } diff --git a/_inc/client/components/data/query-akismet-key-check/index.jsx b/_inc/client/components/data/query-akismet-key-check/index.jsx index 5d305c62f20bb..b684a7d4817e6 100644 --- a/_inc/client/components/data/query-akismet-key-check/index.jsx +++ b/_inc/client/components/data/query-akismet-key-check/index.jsx @@ -11,7 +11,7 @@ import { bindActionCreators } from 'redux'; import { isCheckingAkismetKey, checkAkismetKey } from 'state/at-a-glance'; class QueryAkismetKeyCheck extends Component { - componentWillMount() { + UNSAFE_componentWillMount() { if ( ! this.props.isCheckingAkismetKey ) { this.props.checkAkismetKey(); } diff --git a/_inc/client/components/data/query-connect-url/index.jsx b/_inc/client/components/data/query-connect-url/index.jsx index 59feed3a810d1..13f9a43a96abe 100644 --- a/_inc/client/components/data/query-connect-url/index.jsx +++ b/_inc/client/components/data/query-connect-url/index.jsx @@ -14,7 +14,7 @@ import { import { isDevMode } from 'state/connection'; export class QueryConnectUrl extends React.Component { - componentWillMount() { + UNSAFE_componentWillMount() { if ( ! ( this.props.isFetchingConnectUrl || this.props.isDevMode ) ) { this.props.fetchConnectUrl(); } diff --git a/_inc/client/components/data/query-connection-status/index.jsx b/_inc/client/components/data/query-connection-status/index.jsx index d4b79a970ffcb..fa8704e073122 100644 --- a/_inc/client/components/data/query-connection-status/index.jsx +++ b/_inc/client/components/data/query-connection-status/index.jsx @@ -11,7 +11,7 @@ import { bindActionCreators } from 'redux'; import { fetchSiteConnectionStatus } from 'state/connection'; class QueryConnectionStatus extends Component { - componentWillMount() { + UNSAFE_componentWillMount() { this.props.fetchSiteConnectionStatus(); } diff --git a/_inc/client/components/data/query-dash-protect/index.jsx b/_inc/client/components/data/query-dash-protect/index.jsx index 5ba483866a13e..1b827e746b04a 100644 --- a/_inc/client/components/data/query-dash-protect/index.jsx +++ b/_inc/client/components/data/query-dash-protect/index.jsx @@ -12,7 +12,7 @@ import { isFetchingProtectData, fetchProtectCount } from 'state/at-a-glance'; import { isModuleActivated as _isModuleActivated } from 'state/modules'; class QueryProtectCount extends Component { - componentWillMount() { + UNSAFE_componentWillMount() { if ( ! this.props.fetchingProtectData && this.props.isModuleActivated( 'protect' ) ) { this.props.fetchProtectCount(); } diff --git a/_inc/client/components/data/query-modules/index.jsx b/_inc/client/components/data/query-modules/index.jsx index 6f21a04c984aa..5ddd9dc4621c9 100644 --- a/_inc/client/components/data/query-modules/index.jsx +++ b/_inc/client/components/data/query-modules/index.jsx @@ -12,7 +12,7 @@ import { fetchModules } from 'state/modules'; import { isFetchingModulesList } from 'state/modules'; class QueryModules extends Component { - componentWillMount() { + UNSAFE_componentWillMount() { if ( ! this.props.fetchingModulesList ) { this.props.fetchModules(); } diff --git a/_inc/client/components/data/query-plugin-updates/index.jsx b/_inc/client/components/data/query-plugin-updates/index.jsx index deb151f5e1a28..e2533be97248a 100644 --- a/_inc/client/components/data/query-plugin-updates/index.jsx +++ b/_inc/client/components/data/query-plugin-updates/index.jsx @@ -11,7 +11,7 @@ import { bindActionCreators } from 'redux'; import { isFetchingPluginUpdates, fetchPluginUpdates } from 'state/at-a-glance'; class QueryPluginUpdates extends Component { - componentWillMount() { + UNSAFE_componentWillMount() { if ( ! this.props.fetchingPluginUpdates ) { this.props.fetchPluginUpdates(); } diff --git a/_inc/client/components/data/query-rewind-status/index.js b/_inc/client/components/data/query-rewind-status/index.js index 95c3701ea0817..70743a38281b2 100644 --- a/_inc/client/components/data/query-rewind-status/index.js +++ b/_inc/client/components/data/query-rewind-status/index.js @@ -30,7 +30,7 @@ class QueryRewindStatus extends Component { sitePlan: {} }; - componentWillMount() { + UNSAFE_componentWillMount() { if ( ! this.props.isFetchingRewindStatus && ! this.props.isDevMode ) { this.props.fetchRewind(); } diff --git a/_inc/client/components/data/query-site-plugins/index.jsx b/_inc/client/components/data/query-site-plugins/index.jsx index 10cd130c747dd..480522fc46aa5 100644 --- a/_inc/client/components/data/query-site-plugins/index.jsx +++ b/_inc/client/components/data/query-site-plugins/index.jsx @@ -14,7 +14,7 @@ import { } from 'state/site/plugins'; export class QuerySitePlugins extends React.Component { - componentWillMount() { + UNSAFE_componentWillMount() { if ( ! this.props.isFetchingPluginsData ) { this.props.fetchPluginsData(); } diff --git a/_inc/client/components/data/query-site/index.jsx b/_inc/client/components/data/query-site/index.jsx index 4e40fadd35032..072e8b55753fc 100644 --- a/_inc/client/components/data/query-site/index.jsx +++ b/_inc/client/components/data/query-site/index.jsx @@ -31,7 +31,7 @@ class QuerySite extends Component { sitePlan: {} }; - componentWillMount() { + UNSAFE_componentWillMount() { if ( ! this.props.isFetchingSiteData && ! this.props.isDevMode && isEmpty( this.props.sitePlan ) ) { this.props.fetchSiteData(); this.props.fetchSiteFeatures(); diff --git a/_inc/client/components/data/query-stats-data/index.jsx b/_inc/client/components/data/query-stats-data/index.jsx index 8f6e353945916..8f9fb39e0c4d5 100644 --- a/_inc/client/components/data/query-stats-data/index.jsx +++ b/_inc/client/components/data/query-stats-data/index.jsx @@ -10,7 +10,7 @@ import { connect } from 'react-redux'; import { isFetchingStatsData, fetchStatsData } from 'state/at-a-glance'; class QueryStatsData extends Component { - componentWillMount() { + UNSAFE_componentWillMount() { if ( ! this.props.fetchingStatsData ) { this.props.fetchStatsData( this.props.range ); } diff --git a/_inc/client/components/data/query-user-connection/index.jsx b/_inc/client/components/data/query-user-connection/index.jsx index 46ba589cf9086..827c67fb2779e 100644 --- a/_inc/client/components/data/query-user-connection/index.jsx +++ b/_inc/client/components/data/query-user-connection/index.jsx @@ -14,7 +14,7 @@ import { import { isDevMode } from 'state/connection'; export class QueryUserConnectionData extends React.Component { - componentWillMount() { + UNSAFE_componentWillMount() { if ( ! ( this.props.isFetchingUserData || this.props.isDevMode ) ) { this.props.fetchUserConnectionData(); } diff --git a/_inc/client/components/data/query-vaultpress-data/index.jsx b/_inc/client/components/data/query-vaultpress-data/index.jsx index 8a63a11b7e116..1aef60da815df 100644 --- a/_inc/client/components/data/query-vaultpress-data/index.jsx +++ b/_inc/client/components/data/query-vaultpress-data/index.jsx @@ -12,7 +12,7 @@ import { isFetchingVaultPressData, fetchVaultPressData } from 'state/at-a-glance import { isModuleActivated as _isModuleActivated } from 'state/modules'; class QueryVaultPressData extends Component { - componentWillMount() { + UNSAFE_componentWillMount() { if ( ! this.props.fetchingVaultPressData && this.props.isModuleActivated( 'vaultpress' ) ) { this.props.fetchVaultPressData(); } diff --git a/_inc/client/components/form/form-toggle/index.jsx b/_inc/client/components/form/form-toggle/index.jsx index aa6816983f50f..960db064555eb 100644 --- a/_inc/client/components/form/form-toggle/index.jsx +++ b/_inc/client/components/form/form-toggle/index.jsx @@ -61,7 +61,7 @@ export default class FormToggle extends Component { this.setState( { showPopover: false } ); }; - componentWillMount() { + UNSAFE_componentWillMount() { this.id = this.constructor.idNum++; } diff --git a/_inc/client/components/form/input-radio.jsx b/_inc/client/components/form/input-radio.jsx index acb9729d6d5c1..2752ca363b3fd 100644 --- a/_inc/client/components/form/input-radio.jsx +++ b/_inc/client/components/form/input-radio.jsx @@ -76,7 +76,7 @@ module.exports = createReactClass( { }; }, - componentWillMount: function() { + UNSAFE_componentWillMount: function() { this.setValue( this.props.selected ); }, diff --git a/_inc/client/components/global-notices/index.jsx b/_inc/client/components/global-notices/index.jsx index eae607c6d27d3..a1b9be4a823e3 100644 --- a/_inc/client/components/global-notices/index.jsx +++ b/_inc/client/components/global-notices/index.jsx @@ -35,7 +35,7 @@ class NoticesList extends React.Component { notices: Object.freeze( [] ) }; - componentWillMount() { + UNSAFE_componentWillMount() { debug( 'Mounting Global Notices React component.' ); } diff --git a/_inc/client/components/navigation-settings/index.jsx b/_inc/client/components/navigation-settings/index.jsx index fe0a6fc09ded3..0e915a6432280 100644 --- a/_inc/client/components/navigation-settings/index.jsx +++ b/_inc/client/components/navigation-settings/index.jsx @@ -37,7 +37,7 @@ export const NavigationSettings = createReactClass( { mixins: [ UrlSearch ], moduleList: [], - componentWillMount() { + UNSAFE_componentWillMount() { // We need to handle the search term not only on route update but also on page load in case of some external redirects this.onRouteChange( this.context.router.getCurrentLocation() ); this.context.router.listen( this.onRouteChange ); diff --git a/_inc/client/components/search/index.jsx b/_inc/client/components/search/index.jsx index 6e52983f40aa2..564ee1351b4a5 100644 --- a/_inc/client/components/search/index.jsx +++ b/_inc/client/components/search/index.jsx @@ -92,7 +92,7 @@ class Search extends React.Component { hasFocus: false }; - componentWillMount() { + UNSAFE_componentWillMount() { this.setState( { instanceId: ++Search.instances } ); diff --git a/_inc/client/components/section-nav/index.jsx b/_inc/client/components/section-nav/index.jsx index f48cad38c8ca4..0a9179281ce18 100644 --- a/_inc/client/components/section-nav/index.jsx +++ b/_inc/client/components/section-nav/index.jsx @@ -45,7 +45,7 @@ const SectionNav = createReactClass( { }; }, - componentWillMount: function() { + UNSAFE_componentWillMount: function() { this.checkForSiblingControls( this.props.children ); }, diff --git a/_inc/client/components/section-nav/segmented.jsx b/_inc/client/components/section-nav/segmented.jsx index 37770b547e933..ed3395c10ff67 100644 --- a/_inc/client/components/section-nav/segmented.jsx +++ b/_inc/client/components/section-nav/segmented.jsx @@ -26,7 +26,7 @@ class NavSegmented extends React.Component { hasSiblingControls: false }; - componentWillMount() { + UNSAFE_componentWillMount() { this.id = _instance; _instance++; } diff --git a/_inc/client/components/select-dropdown/index.jsx b/_inc/client/components/select-dropdown/index.jsx index d29009d7af268..2419b9e254828 100644 --- a/_inc/client/components/select-dropdown/index.jsx +++ b/_inc/client/components/select-dropdown/index.jsx @@ -55,7 +55,7 @@ class SelectDropdown extends Component { this.state = initialState; } - componentWillMount() { + UNSAFE_componentWillMount() { this.setState( { instanceId: ++SelectDropdown.instances } ); diff --git a/_inc/client/components/spinner/index.jsx b/_inc/client/components/spinner/index.jsx index 2132290769aaf..65368ec97867a 100644 --- a/_inc/client/components/spinner/index.jsx +++ b/_inc/client/components/spinner/index.jsx @@ -23,7 +23,7 @@ class Spinner extends React.Component { duration: 3000 }; - componentWillMount() { + UNSAFE_componentWillMount() { this.setState( { instanceId: ++Spinner.instances } ); diff --git a/_inc/client/main.jsx b/_inc/client/main.jsx index bdeaee7189cc1..f77287950e706 100644 --- a/_inc/client/main.jsx +++ b/_inc/client/main.jsx @@ -48,7 +48,7 @@ import QueryRewindStatus from 'components/data/query-rewind-status'; import { getRewindStatus } from 'state/rewind'; class Main extends React.Component { - componentWillMount() { + UNSAFE_componentWillMount() { this.props.setInitialState(); restApi.setApiRoot( this.props.apiRoot ); restApi.setApiNonce( this.props.apiNonce ); diff --git a/_inc/client/privacy/index.jsx b/_inc/client/privacy/index.jsx index 03f9cc2ab4948..0721940aee85f 100644 --- a/_inc/client/privacy/index.jsx +++ b/_inc/client/privacy/index.jsx @@ -79,7 +79,7 @@ class Privacy extends React.Component { this.props.setTrackingSettings( ! current ); }; - componentWillMount() { + UNSAFE_componentWillMount() { this.props.fetchTrackingSettings(); } diff --git a/_inc/client/security/antispam.jsx b/_inc/client/security/antispam.jsx index d15094c31f188..04c21b1a5cabd 100644 --- a/_inc/client/security/antispam.jsx +++ b/_inc/client/security/antispam.jsx @@ -36,7 +36,7 @@ export const Antispam = moduleSettingsForm( keyChanged = false; - componentWillMount() { + UNSAFE_componentWillMount() { this.debouncedCheckApiKeyTyped = debounce( this.checkApiKeyTyped, 500 ); } diff --git a/_inc/client/static-main.jsx b/_inc/client/static-main.jsx index dc57211d2dff9..e3f28a729b969 100644 --- a/_inc/client/static-main.jsx +++ b/_inc/client/static-main.jsx @@ -14,7 +14,7 @@ import { setInitialState } from 'state/initial-state'; import Footer from 'components/footer'; class StaticMain extends React.Component { - componentWillMount() { + UNSAFE_componentWillMount() { this.props.setInitialState(); } From ea2d8602177ff782c15acf7117985b32da872b61 Mon Sep 17 00:00:00 2001 From: Yaroslav Kukharuk Date: Mon, 10 Dec 2018 13:13:38 +0700 Subject: [PATCH 4/7] update deprecated componentWillReceiveProps to UNSAFE_componentWillReceiveProps --- _inc/client/components/chart/index.jsx | 2 +- _inc/client/components/chart/x-axis.jsx | 2 +- _inc/client/components/popover/index.jsx | 2 +- _inc/client/components/search/index.jsx | 2 +- _inc/client/components/section-nav/index.jsx | 2 +- _inc/client/components/section-nav/tabs.jsx | 2 +- _inc/client/components/select-dropdown/index.jsx | 2 +- _inc/client/components/tracker/index.jsx | 2 +- _inc/client/main.jsx | 4 ++-- _inc/client/mixins/url-search/index.js | 2 +- 10 files changed, 11 insertions(+), 11 deletions(-) diff --git a/_inc/client/components/chart/index.jsx b/_inc/client/components/chart/index.jsx index 5c61df47937ff..ebfd8fe7e7709 100644 --- a/_inc/client/components/chart/index.jsx +++ b/_inc/client/components/chart/index.jsx @@ -48,7 +48,7 @@ export default class ModuleChart extends React.Component { window.removeEventListener( 'resize', this.resize ); } - componentWillReceiveProps( nextProps ) { + UNSAFE_componentWillReceiveProps( nextProps ) { if ( this.props.loading && ! nextProps.loading ) { this.resize(); } diff --git a/_inc/client/components/chart/x-axis.jsx b/_inc/client/components/chart/x-axis.jsx index d31763c3fe177..80513a5f7dfa8 100644 --- a/_inc/client/components/chart/x-axis.jsx +++ b/_inc/client/components/chart/x-axis.jsx @@ -38,7 +38,7 @@ export default class ModuleChartXAxis extends React.Component { window.removeEventListener( 'resize', this.resizeThrottled ); } - componentWillReceiveProps( nextProps ) { + UNSAFE_componentWillReceiveProps( nextProps ) { this.resize( nextProps ); } diff --git a/_inc/client/components/popover/index.jsx b/_inc/client/components/popover/index.jsx index 827116a283eee..a15fc6c5ebba2 100644 --- a/_inc/client/components/popover/index.jsx +++ b/_inc/client/components/popover/index.jsx @@ -84,7 +84,7 @@ class Popover extends Component { bindWindowListeners(); } - componentWillReceiveProps( nextProps ) { + UNSAFE_componentWillReceiveProps( nextProps ) { // update context (target) reference into a property if ( ! isDOMElement( nextProps.context ) ) { this.domContext = ReactDom.findDOMNode( nextProps.context ); diff --git a/_inc/client/components/search/index.jsx b/_inc/client/components/search/index.jsx index 564ee1351b4a5..6503f169cb676 100644 --- a/_inc/client/components/search/index.jsx +++ b/_inc/client/components/search/index.jsx @@ -101,7 +101,7 @@ class Search extends React.Component { this.openListener = keyListener.bind( this, 'openSearch' ); } - componentWillReceiveProps( nextProps ) { + UNSAFE_componentWillReceiveProps( nextProps ) { if ( nextProps.onSearch !== this.props.onSearch || nextProps.delaySearch !== this.props.delaySearch diff --git a/_inc/client/components/section-nav/index.jsx b/_inc/client/components/section-nav/index.jsx index 0a9179281ce18..c671037edeedf 100644 --- a/_inc/client/components/section-nav/index.jsx +++ b/_inc/client/components/section-nav/index.jsx @@ -49,7 +49,7 @@ const SectionNav = createReactClass( { this.checkForSiblingControls( this.props.children ); }, - componentWillReceiveProps: function( nextProps ) { + UNSAFE_componentWillReceiveProps: function( nextProps ) { if ( isEqual( this.props, nextProps ) ) { return; } diff --git a/_inc/client/components/section-nav/tabs.jsx b/_inc/client/components/section-nav/tabs.jsx index 8a966fe146333..5acd27d4154c0 100644 --- a/_inc/client/components/section-nav/tabs.jsx +++ b/_inc/client/components/section-nav/tabs.jsx @@ -44,7 +44,7 @@ class NavTabs extends React.Component { window.addEventListener( 'resize', this.debouncedAfterResize ); } - componentWillReceiveProps() { + UNSAFE_componentWillReceiveProps() { this.setDropdown(); } diff --git a/_inc/client/components/select-dropdown/index.jsx b/_inc/client/components/select-dropdown/index.jsx index 2419b9e254828..47ca6246aee55 100644 --- a/_inc/client/components/select-dropdown/index.jsx +++ b/_inc/client/components/select-dropdown/index.jsx @@ -61,7 +61,7 @@ class SelectDropdown extends Component { } ); } - componentWillReceiveProps( nextProps ) { + UNSAFE_componentWillReceiveProps( nextProps ) { if ( this.state.isOpen ) { this.closeDropdown(); } diff --git a/_inc/client/components/tracker/index.jsx b/_inc/client/components/tracker/index.jsx index bfe1498033eab..5d18d407e25a0 100644 --- a/_inc/client/components/tracker/index.jsx +++ b/_inc/client/components/tracker/index.jsx @@ -11,7 +11,7 @@ import { connect } from 'react-redux'; import { getSearchTerm } from 'state/search'; export class Tracker extends Component { - componentWillReceiveProps( nextProps ) { + UNSAFE_componentWillReceiveProps( nextProps ) { const record = this.props.analytics.tracks.recordEvent; if ( nextProps.searchTerm !== this.props.searchTerm ) { diff --git a/_inc/client/main.jsx b/_inc/client/main.jsx index f77287950e706..46503bd6af9b0 100644 --- a/_inc/client/main.jsx +++ b/_inc/client/main.jsx @@ -125,7 +125,7 @@ class Main extends React.Component { } } - componentWillReceiveProps( nextProps ) { + UNSAFE_componentWillReceiveProps( nextProps ) { if ( nextProps.jumpStartStatus !== this.props.jumpStartStatus || nextProps.isJumpstarting !== this.props.isJumpstarting ) { this.handleJumpstart( nextProps ); @@ -137,7 +137,7 @@ class Main extends React.Component { * Takes care of redirection when * - jumpstarting ( resseting options ) * - the jumpstart is complete - * @param {Object} nextProps The next props as received by componentWillReceiveProps + * @param {Object} nextProps The next props as received by UNSAFE_componentWillReceiveProps */ handleJumpstart = nextProps => { const history = createHistory(); diff --git a/_inc/client/mixins/url-search/index.js b/_inc/client/mixins/url-search/index.js index d33a7536655f8..40ea647eee937 100644 --- a/_inc/client/mixins/url-search/index.js +++ b/_inc/client/mixins/url-search/index.js @@ -17,7 +17,7 @@ module.exports = { }; }, - componentWillReceiveProps: function( nextProps ) { + UNSAFE_componentWillReceiveProps: function( nextProps ) { if ( ! nextProps.search ) { this.setState( { searchOpen: false From afc35fdfc80fd1874aa412656e4f046c7b0c178f Mon Sep 17 00:00:00 2001 From: Yaroslav Kukharuk Date: Mon, 10 Dec 2018 13:15:18 +0700 Subject: [PATCH 5/7] a bit more deprecation updates --- _inc/client/components/form/form-toggle/test/index.jsx | 2 +- _inc/client/plans/plan-grid.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/_inc/client/components/form/form-toggle/test/index.jsx b/_inc/client/components/form/form-toggle/test/index.jsx index 67d4fdca9438f..86eaaeea2ca87 100644 --- a/_inc/client/components/form/form-toggle/test/index.jsx +++ b/_inc/client/components/form/form-toggle/test/index.jsx @@ -4,7 +4,7 @@ const assert = require( 'assert' ), React = require( 'react' ), ReactDOM = require( 'react-dom' ), - TestUtils = React.addons.TestUtils, + TestUtils = ReactDOM.TestUtils, unique = require( 'lodash/uniq' ); /** diff --git a/_inc/client/plans/plan-grid.jsx b/_inc/client/plans/plan-grid.jsx index 3ae414e8d7d5d..e11eb44e9b47e 100644 --- a/_inc/client/plans/plan-grid.jsx +++ b/_inc/client/plans/plan-grid.jsx @@ -26,7 +26,7 @@ class PlanGrid extends React.Component { */ featuredPlans = false; - componentWillUpdate() { + UNSAFE_componentWillUpdate() { this.featuredPlans = false; } From 2c32bd679dad76c3ec0684789ecf8b0d66ed5f4a Mon Sep 17 00:00:00 2001 From: Yaroslav Kukharuk Date: Mon, 10 Dec 2018 16:49:27 +0700 Subject: [PATCH 6/7] Add eslint config similar to calypso --- .eslintrc-calypso.js | 57 ++++++++++++++++++++++++++++++++++++++++++++ .eslintrc.js | 2 +- 2 files changed, 58 insertions(+), 1 deletion(-) create mode 100644 .eslintrc-calypso.js diff --git a/.eslintrc-calypso.js b/.eslintrc-calypso.js new file mode 100644 index 0000000000000..5549c5e45041d --- /dev/null +++ b/.eslintrc-calypso.js @@ -0,0 +1,57 @@ +/** @format */ + +const reactVersion = require( './package.json' ).dependencies.react; + +module.exports = { + root: true, + extends: [ + 'wpcalypso/react', + 'plugin:jsx-a11y/recommended', + // 'prettier', + // 'prettier/react', + ], + parser: 'babel-eslint', + env: { + browser: true, + mocha: true, + node: true, + jquery: true + }, + plugins: [ 'jsx-a11y', 'lodash' ], + settings: { + react: { + version: reactVersion, + }, + }, + rules: { + // REST API objects include underscores + camelcase: 0, + + // TODO: shorten all long lines + 'max-len': 0, + + // i18n-calypso translate triggers false failures + 'jsx-a11y/anchor-has-content': 0, + + 'wpcalypso/jsx-classname-namespace': 0, + // enforce our classname namespacing rules + // 'wpcalypso/jsx-classname-namespace': [ + // 2, + // { + // rootFiles: [ 'index.js', 'index.jsx', 'main.js', 'main.jsx' ], + // }, + // ], + + // Force folks to use our custom combineReducers function instead of the plain redux one + // This allows us to control serialization for every reducer. + 'wpcalypso/import-no-redux-combine-reducers': 2, + + // No applicable in Jetpack + 'wpcalypso/import-no-redux-combine-reducers': 0, + + // TODO: migrate to ES6 Classes + 'react/prefer-es6-class': 0, + + 'jsx-a11y/no-static-element-interactions': 0, + }, +}; diff --git a/.eslintrc.js b/.eslintrc.js index 4d7c9282a0a47..23e2d87484f83 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -61,7 +61,7 @@ module.exports = { "react/no-did-mount-set-state": 2, "react/no-did-update-set-state": 2, "react/no-is-mounted": 2, - "react/prefer-es6-class": 1, + "react/prefer-es6-class": 0, "semi": 2, "semi-spacing": 2, "space-before-blocks": [ 2, "always" ], From ba1ba8aae88c63aae4aef4efc5d9cf584aa482e2 Mon Sep 17 00:00:00 2001 From: Yaroslav Kukharuk Date: Mon, 10 Dec 2018 17:40:42 +0700 Subject: [PATCH 7/7] Fix failing test --- _inc/client/at-a-glance/stats/index.jsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/_inc/client/at-a-glance/stats/index.jsx b/_inc/client/at-a-glance/stats/index.jsx index 5658fd003ea88..ac24787b8da5b 100644 --- a/_inc/client/at-a-glance/stats/index.jsx +++ b/_inc/client/at-a-glance/stats/index.jsx @@ -249,17 +249,23 @@ export class DashStats extends Component { return (