Refactor UNSAFE_componentWillReceiveProps to componentDidUpdate or ge…

…tDerivedStateFromProps

app/panel/components/Blocking.jsx

@@ -65,9 +65,10 @@ class Blocking extends React.Component {
 	/**
 	 * Lifecycle event
 	 */
-	UNSAFE_componentWillReceiveProps(nextProps) {
-		this.updateBlockingClasses(nextProps);
-		this.updateSiteNotScanned(nextProps);
+	static getDerivedStateFromProps(nextProps) {
+		const blockingClasses = Blocking.buildBlockingClasses(nextProps).join(' ');
+		const disableBlocking = Blocking.computeSiteNotScanned(nextProps);
+		return { blockingClasses, disableBlocking };
 	}
 
 	/**

app/panel/components/Blocking/BlockingHeader.jsx

@@ -51,7 +51,15 @@ class BlockingHeader extends React.Component {
 	 */
 	componentDidMount() {
 		if (this.props.categories) {
-			this.updateBlockAll(this.props.categories);
+			const updates = BlockingHeader.updateBlockAll(this.props.categories, this.state.fromHere);
+			if (updates) {
+				const {
+					allBlocked,
+					fromHere,
+					filtered
+				} = updates;
+				this.setState({ allBlocked, fromHere, filtered });
+			}
 		}
 
 		if (typeof this.props.actions.updateTrackerCounts === 'function') {
@@ -63,18 +71,19 @@ class BlockingHeader extends React.Component {
 
 	/**
 	 * Lifecycle event
+	 * Refactor Notes:
+	 *   Refactor UNSAFE_componentWillReceiveProps using getDerivedStateFromProps
+	 *   because we are only manipulating state.
 	 */
-	UNSAFE_componentWillReceiveProps(nextProps) {
-		if (nextProps.categories) {
-			this.updateBlockAll(nextProps.categories);
-		}
+	static getDerivedStateFromProps(prevProps, prevState) {
+		return BlockingHeader.updateBlockAll(prevProps.categories, prevState.fromHere);
 	}
 
 	/**
-	 * Set appropriate initial text ("Block All" or "Unblock All") in Blocking header
-	 * when Blocking or Global Blocking view opens. Save 'allBlocked' property in state.
+	 * Get appropriate initial text ("Block All" or "Unblock All") in Blocking header
+	 * when Blocking or Global Blocking view opens. Return object to set in state.
 	 */
-	updateBlockAll(categories) {
+	static updateBlockAll(categories, fromHere) {
 		if (categories) {
 			let totalShown = 0;
 			let totalBlocked = 0;
@@ -92,14 +101,15 @@ class BlockingHeader extends React.Component {
 					}
 				});
 			});
-			if (this.state.fromHere || totalShown === totalBlocked || totalBlocked === 0) {
-				this.setState({
+			if (fromHere || totalShown === totalBlocked || totalBlocked === 0) {
+				return {
 					allBlocked: (totalShown === totalBlocked),
 					fromHere: false,
 					filtered
-				});
+				};
 			}
 		}
+		return null;
 	}
 
 	/**

app/panel/components/Blocking/Category.jsx

@@ -47,17 +47,34 @@ class Category extends React.Component {
 	 */
 	componentDidMount() {
 		if (this.props.category) {
-			this.updateCategoryCheckbox(this.props.category);
+			const {
+				allShownBlocked,
+				totalShownBlocked,
+			} = Category.updateCategoryCheckbox(this.props.category);
+			this.setState({ allShownBlocked, totalShownBlocked });
 		}
 	}
 
 	/**
-	 * Lifecycle event. When props changed we save in state new values
-	 * to ensure correct rendering.
+	 * Lifecycle event
 	 */
-	UNSAFE_componentWillReceiveProps(nextProps) {
-		this.updateCategoryExpanded(nextProps.expandAll);
-		this.updateCategoryCheckbox(nextProps.category);
+	componentDidUpdate(prevProps) {
+		this.updateCategoryExpanded(prevProps);
+	}
+
+	/**
+	 * Lifecycle event.
+	 */
+	static getDerivedStateFromProps(prevProps) {
+		const {
+			allShownBlocked,
+			totalShownBlocked,
+		} = Category.updateCategoryCheckbox(prevProps.category);
+
+		return {
+			allShownBlocked,
+			totalShownBlocked
+		};
 	}
 
 	/**
@@ -85,7 +102,7 @@ class Category extends React.Component {
 	 * Called in lifecycle events.
 	 * @param {Object}		category object containg the list of tracker objects
 	 */
-	updateCategoryCheckbox(category) {
+	static updateCategoryCheckbox(category) {
 		let totalShownBlocked = 0;
 		let allShownBlocked = true;
 		let shownCount = 0;
@@ -99,10 +116,10 @@ class Category extends React.Component {
 		});
 
 		allShownBlocked = (shownCount === totalShownBlocked);
-		this.setState({
+		return {
 			allShownBlocked,
 			totalShownBlocked,
-		});
+		};
 	}
 
 	/**
@@ -151,9 +168,11 @@ class Category extends React.Component {
 	 *	Called in lifecycle events.
 	 *	@param {boolean}     global expanded state
 	 */
-	updateCategoryExpanded(expandAll) {
-		if (expandAll !== this.props.expandAll && expandAll !== this.state.isExpanded) {
-			this.setState({ isExpanded: expandAll });
+	updateCategoryExpanded(prevProps) {
+		if (this.props.expandAll !== prevProps.expandAll && this.props.expandAll !== this.state.isExpanded) {
+			this.setState({
+				isExpanded: this.props.expandAll
+			});
 		}
 	}
 

app/panel/components/Blocking/Tracker.jsx

@@ -71,8 +71,8 @@ class Tracker extends React.Component {
 	/**
 	 * Lifecycle event.
 	 */
-	UNSAFE_componentWillReceiveProps(nextProps) {
-		this.updateTrackerClasses(nextProps.tracker);
+	static getDerivedStateFromProps(nextProps) {
+		return Tracker.computeTrackerClasses(nextProps.tracker);
 	}
 
 	/**
@@ -122,10 +122,23 @@ class Tracker extends React.Component {
 	}
 
 	/**
-	 * Set dynamic classes on .blocking-trk and save it in state.
+	 * Set dynamic classes on .blocking-trk to state.
 	 * @param  {Object} tracker    tracker object
 	 */
 	updateTrackerClasses(tracker) {
+		const {
+			trackerClasses,
+			warningImageTitle
+		} = Tracker.computeTrackerClasses(tracker);
+
+		this.setState({ trackerClasses, warningImageTitle });
+	}
+
+	/**
+	 * Compute dynamic classes on .blocking-trk and return it as an object.
+	 * @param  {Object} tracker    tracker object
+	 */
+	static computeTrackerClasses(tracker) {
 		const classes = [];
 		let updated_title = '';
 
@@ -155,10 +168,10 @@ class Tracker extends React.Component {
 			updated_title = t('panel_tracker_warning_slow_tooltip');
 		}
 
-		this.setState({
+		return {
 			trackerClasses: classes.join(' '),
 			warningImageTitle: updated_title,
-		});
+		};
 	}
 
 	/**

app/panel/components/BuildingBlocks/DonutGraph.jsx

@@ -100,7 +100,7 @@ class DonutGraph extends React.Component {
 	/**
 	 * Lifecycle event
 	 */
-	UNSAFE_componentWillReceiveProps(nextProps) {
+	componentDidUpdate(prevProps) {
 		const {
 			categories,
 			adBlock,
@@ -109,33 +109,33 @@ class DonutGraph extends React.Component {
 			renderGreyscale,
 			ghosteryFeatureSelect,
 			isSmall
-		} = this.props;
+		} = prevProps;
 
-		if (isSmall !== nextProps.isSmall ||
-			renderRedscale !== nextProps.renderRedscale ||
-			renderGreyscale !== nextProps.renderGreyscale ||
-			ghosteryFeatureSelect !== nextProps.ghosteryFeatureSelect
+		if (isSmall !== this.props.isSmall ||
+			renderRedscale !== this.props.renderRedscale ||
+			renderGreyscale !== this.props.renderGreyscale ||
+			ghosteryFeatureSelect !== this.props.ghosteryFeatureSelect
 		) {
-			this.prepareDonutContainer(nextProps.isSmall);
-			this.nextPropsDonut(nextProps);
+			this.prepareDonutContainer(this.props.isSmall);
+			this.nextPropsDonut(this.props);
 			return;
 		}
 
 		// componentWillReceiveProps gets called many times during page load as new trackers or unsafe data points are found
 		// so only compare tracker totals if we don't already have to redraw anyway as a result of the cheaper checks above
-		const trackerTotal = categories.reduce((total, category) => total + category.num_total, 0);
-		const nextTrackerTotal = nextProps.categories.reduce((total, category) => total + category.num_total, 0);
-		if (trackerTotal !== nextTrackerTotal) {
-			this.nextPropsDonut(nextProps);
+		const prevTrackerTotal = categories.reduce((total, category) => total + category.num_total, 0);
+		const trackerTotal = this.props.categories.reduce((total, category) => total + category.num_total, 0);
+		if (prevTrackerTotal !== trackerTotal) {
+			this.nextPropsDonut(this.props);
 			return;
 		}
 
-		if (!antiTracking.unknownTrackerCount && !nextProps.antiTracking.unknownTrackerCount
-			&& !adBlock.unknownTrackerCount && !nextProps.adBlock.unknownTrackerCount) { return; }
-		const unknownDataPoints = antiTracking.unknownTrackerCount + adBlock.unknownTrackerCount;
-		const nextUnknownDataPoints = nextProps.antiTracking.unknownTrackerCount + nextProps.adBlock.unknownTrackerCount;
-		if (unknownDataPoints !== nextUnknownDataPoints) {
-			this.nextPropsDonut(nextProps);
+		if (!antiTracking.unknownTrackerCount && !this.props.antiTracking.unknownTrackerCount
+			&& !adBlock.unknownTrackerCount && !this.props.adBlock.unknownTrackerCount) { return; }
+		const prevUnknownDataPoints = antiTracking.unknownTrackerCount + adBlock.unknownTrackerCount;
+		const unknownDataPoints = this.props.antiTracking.unknownTrackerCount + this.props.adBlock.unknownTrackerCount;
+		if (prevUnknownDataPoints !== unknownDataPoints) {
+			this.nextPropsDonut(this.props);
 		}
 	}
 

app/panel/components/BuildingBlocks/RadioButtonGroup.jsx

@@ -31,7 +31,7 @@ const RadioButtonGroup = (props) => {
 	));
 
 	const buttons = props.labels.map((label, index) => (
-		<div className="RadioButtonGroup__button">
+		<div key={label} className="RadioButtonGroup__button">
 			<RadioButton
 				checked={index === indexClicked}
 				handleClick={() => handleItemClick(index)}

app/panel/components/BuildingBlocks/ToggleSlider.jsx

@@ -35,10 +35,11 @@ class ToggleSlider extends React.Component {
 	/**
 	 * Lifecycle event
 	 */
-	UNSAFE_componentWillReceiveProps(nextProps) {
-		this.setState({
-			checked: nextProps.isChecked,
-		});
+	static getDerivedStateFromProps(prevProps, prevState) {
+		if (prevState.checked !== prevProps.isChecked) {
+			return { checked: prevProps.isChecked };
+		}
+		return null;
 	}
 
 	/**

app/panel/components/Settings/GeneralSettings.jsx

@@ -50,14 +50,19 @@ class GeneralSettings extends React.Component {
 	 * Lifecycle event.
 	 */
 	componentDidMount() {
-		this.updateDbLastUpdated(this.props);
+		this.updateDbLastUpdated(this.props.settingsData);
 	}
 
 	/**
 	 * Lifecycle event.
 	 */
-	UNSAFE_componentWillReceiveProps(nextProps) {
-		this.updateDbLastUpdated(nextProps);
+	static getDerivedStateFromProps(prevProps, prevState) {
+		const dbLastUpdated = GeneralSettings.getDbLastUpdated(prevProps.settingsData);
+
+		if (dbLastUpdated && dbLastUpdated !== prevState.dbLastUpdated) {
+			return { dbLastUpdated };
+		}
+		return null;
 	}
 
 	/**
@@ -67,14 +72,25 @@ class GeneralSettings extends React.Component {
 		this.props.actions.updateDatabase();
 	}
 
+	/**
+	 * Get DB check timestamp and return it.
+	 * @param  {Object} settingsData
+	 */
+	static getDbLastUpdated(settingsData) {
+		const { language, bugs_last_updated } = settingsData;
+		moment.locale(language).toLowerCase().replace('_', '-');
+		const dbLastUpdated = moment(bugs_last_updated).format('LLL');
+		return dbLastUpdated;
+	}
+
 	/**
 	 * Update DB check timestamp and save it in state.
-	 * @param  {Object} props
+	 * @param  {Object} settingsData
 	 */
-	updateDbLastUpdated(props) {
-		moment.locale(props.language).toLowerCase().replace('_', '-');
-		const dbLastUpdated = moment(props.bugs_last_updated).format('LLL');
-		if (this.state.dbLastUpdated !== dbLastUpdated) {
+	updateDbLastUpdated(settingsData) {
+		const dbLastUpdated = GeneralSettings.getDbLastUpdated(settingsData);
+
+		if (dbLastUpdated && dbLastUpdated !== this.state.dbLastUpdated) {
 			this.setState({ dbLastUpdated });
 		}
 	}

app/panel/components/Stats.jsx

@@ -42,14 +42,14 @@ class Stats extends React.Component {
 	/**
 	 * Lifecycle event
 	 */
-	UNSAFE_componentWillReceiveProps(nextProps) {
-		const nextPlus = this._isPlus(nextProps);
+	componentDidUpdate(prevProps) {
 		const thisPlus = this._isPlus(this.props);
-		if (nextPlus !== thisPlus) {
-			if (nextPlus) {
+		const prevPlus = this._isPlus(prevProps);
+		if (thisPlus !== prevPlus) {
+			if (thisPlus) {
 				this._init();
 			} else {
-				this.setState(this._reset(true));
+				this._resetState();
 			}
 		}
 	}
@@ -290,6 +290,10 @@ class Stats extends React.Component {
 		this.props.history.push('/login');
 	}
 
+	_resetState = () => {
+		this.setState(this._reset(true));
+	}
+
 	_reset = (demo) => {
 		const demoData = [
 			{ date: '2018-12-28', amount: 300, index: 0 },

app/panel/components/Subscription.jsx

@@ -44,8 +44,8 @@ class Subscription extends React.Component {
 	/**
 	 * Lifecycle event.
 	 */
-	UNSAFE_componentWillReceiveProps = (nextProps) => {
-		if (!nextProps.loggedIn) {
+	componentDidUpdate = () => {
+		if (!this.props.loggedIn) {
 			this.props.history.push('/detail');
 		}
 	}