re-add linting rule react/sort-comp and fix resulting errors

.eslintrc.js

@@ -99,7 +99,7 @@ module.exports = {
 		'react/no-danger': [0],
 		'react/prop-types': [0],
 		'react/jsx-fragments': [1, 'element'],
-		'react/sort-comp': [0, { //TODO: enable this check
+		'react/sort-comp': [1, {
 			order: [
 				"static-variables",
 				"instance-variables",

app/hub/Views/SetupViews/SetupBlockingDropdown/SetupBlockingDropdown.jsx

@@ -23,6 +23,11 @@ import { ToastMessage } from '../../../../shared-components';
  * @memberof HubComponents
  */
 class SetupBlockingDropdown extends Component {
+	/**
+	 * Debounce the hide alert function after 3 seconds
+	 */
+	_hideToastDebounce = debounce(this._hideToast, 3000)
+
 	constructor(props) {
 		super(props);
 		this.state = {
@@ -59,11 +64,6 @@ class SetupBlockingDropdown extends Component {
 		});
 	}
 
-	/**
-	 * Debounce the hide alert function after 3 seconds
-	 */
-	_hideToastDebounce = debounce(this._hideToast, 3000)
-
 	/**
 	 * React's required render function. Returns JSX
 	 * @return {JSX} JSX for rendering the Blocking Dropdown Component

app/panel-android/components/content/Path.jsx

@@ -23,27 +23,6 @@ export default class Path extends React.Component {
 		this.timer = null;
 	}
 
-	componentDidMount() {
-		const node = this.myRef.current;
-		node.style.setProperty('--stroke-length', `${node.getTotalLength()}`);
-		// Check and call props.handler() if the animationEnd event doesn't get fired somehow
-		this.timer = setInterval(() => {
-			clearInterval(this.timer); // Run this only once
-			const { handler } = this.props;
-			handler();
-		}, INTERVAL);
-	}
-
-	componentWillUnmount() {
-		clearInterval(this.timer);
-	}
-
-	onAnimationEndHandler = () => {
-		clearInterval(this.timer);
-		const { handler } = this.props;
-		handler();
-	}
-
 	static polarToCartesian(centerX, centerY, radius, angleInDegrees) {
 		const angleInRadians = (angleInDegrees - 90) * (Math.PI / 180.0);
 
@@ -67,6 +46,27 @@ export default class Path extends React.Component {
 		return d;
 	}
 
+	componentDidMount() {
+		const node = this.myRef.current;
+		node.style.setProperty('--stroke-length', `${node.getTotalLength()}`);
+		// Check and call props.handler() if the animationEnd event doesn't get fired somehow
+		this.timer = setInterval(() => {
+			clearInterval(this.timer); // Run this only once
+			const { handler } = this.props;
+			handler();
+		}, INTERVAL);
+	}
+
+	componentWillUnmount() {
+		clearInterval(this.timer);
+	}
+
+	onAnimationEndHandler = () => {
+		clearInterval(this.timer);
+		const { handler } = this.props;
+		handler();
+	}
+
 	render() {
 		const { radius, path } = this.props;
 		const { start, category } = path;

app/panel/components/Blocking.jsx

@@ -56,19 +56,47 @@ class Blocking extends React.Component {
 	/**
 	 * Lifecycle event
 	 */
-	componentDidMount() {
-		this._dynamicUIPort = this.context;
-		this._dynamicUIPort.onMessage.addListener(this.handlePortMessage);
-		this._dynamicUIPort.postMessage({ name: 'BlockingComponentDidMount' });
+	static getDerivedStateFromProps(nextProps) {
+		const blockingClasses = Blocking.buildBlockingClasses(nextProps).join(' ');
+		const disableBlocking = Blocking.computeSiteNotScanned(nextProps);
+		return { blockingClasses, disableBlocking };
+	}
+
+	/**
+	* Build dynamic classes on .blocking-trackers. Return classes
+	* @param  {Object} props
+	*/
+	static buildBlockingClasses(props) {
+		const classes = [];
+
+		classes.push((props.toggle_individual_trackers) ? 'show-individual' : '');
+		classes.push((props.paused_blocking) ? 'paused' : '');
+		classes.push((props.sitePolicy) ? (props.sitePolicy === 2) ? 'trusted' : 'restricted' : '');
+
+		return classes;
+	}
+
+	/**
+	* Compute whether a site cannot be scanned by Ghostery.
+	* @param {Object}	props	nextProps
+	*/
+	static computeSiteNotScanned(props) {
+		const { siteNotScanned, categories } = props;
+		const pageUrl = props.pageUrl || '';
+
+		if (siteNotScanned || !categories || pageUrl.search('http') === -1) {
+			return true;
+		}
+		return false;
 	}
 
 	/**
 	 * Lifecycle event
 	 */
-	static getDerivedStateFromProps(nextProps) {
-		const blockingClasses = Blocking.buildBlockingClasses(nextProps).join(' ');
-		const disableBlocking = Blocking.computeSiteNotScanned(nextProps);
-		return { blockingClasses, disableBlocking };
+	componentDidMount() {
+		this._dynamicUIPort = this.context;
+		this._dynamicUIPort.onMessage.addListener(this.handlePortMessage);
+		this._dynamicUIPort.postMessage({ name: 'BlockingComponentDidMount' });
 	}
 
 	/**
@@ -240,20 +268,6 @@ class Blocking extends React.Component {
 		actions.updateBlockingData(msg.body);
 	}
 
-	/**
-	* Build dynamic classes on .blocking-trackers. Return classes
-	* @param  {Object} props
-	*/
-	static buildBlockingClasses(props) {
-		const classes = [];
-
-		classes.push((props.toggle_individual_trackers) ? 'show-individual' : '');
-		classes.push((props.paused_blocking) ? 'paused' : '');
-		classes.push((props.sitePolicy) ? (props.sitePolicy === 2) ? 'trusted' : 'restricted' : '');
-
-		return classes;
-	}
-
 	/**
 	* Set dynamic classes on .blocking-trackers. Set state.
 	* @param  {Object} props
@@ -268,20 +282,6 @@ class Blocking extends React.Component {
 		}
 	}
 
-	/**
-	* Compute whether a site cannot be scanned by Ghostery.
-	* @param {Object}	props	nextProps
-	*/
-	static computeSiteNotScanned(props) {
-		const { siteNotScanned, categories } = props;
-		const pageUrl = props.pageUrl || '';
-
-		if (siteNotScanned || !categories || pageUrl.search('http') === -1) {
-			return true;
-		}
-		return false;
-	}
-
 	/**
 	* Disable controls for a site that cannot be scanned by Ghostery. Set state.
 	* @param {Object}	props	nextProps

app/panel/components/Blocking/BlockingHeader.jsx

@@ -46,32 +46,6 @@ class BlockingHeader extends React.Component {
 		this.filterNew = this.filterNew.bind(this);
 	}
 
-	/**
-	 * Lifecycle event
-	 */
-	componentDidMount() {
-		const {
-			actions, categories, smartBlock, smartBlockActive
-		} = this.props;
-		const { fromHere } = this.state;
-		if (categories) {
-			const updates = BlockingHeader.updateBlockAll(categories, fromHere);
-			if (updates) {
-				this.setState({
-					allBlocked: updates.allBlocked,
-					fromHere: updates.fromHere,
-					filtered: updates.filtered
-				});
-			}
-		}
-
-		if (typeof actions.updateTrackerCounts === 'function') {
-			// if we're on GlobalSettings, we don't need to run this function
-			const calcSmartBlock = (smartBlockActive && smartBlock) || { blocked: {}, unblocked: {} };
-			updateSummaryBlockingCount(categories, calcSmartBlock, actions.updateTrackerCounts);
-		}
-	}
-
 	/**
 	 * Lifecycle event
 	 * Refactor Notes:
@@ -115,6 +89,32 @@ class BlockingHeader extends React.Component {
 		return null;
 	}
 
+	/**
+	 * Lifecycle event
+	 */
+	componentDidMount() {
+		const {
+			actions, categories, smartBlock, smartBlockActive
+		} = this.props;
+		const { fromHere } = this.state;
+		if (categories) {
+			const updates = BlockingHeader.updateBlockAll(categories, fromHere);
+			if (updates) {
+				this.setState({
+					allBlocked: updates.allBlocked,
+					fromHere: updates.fromHere,
+					filtered: updates.filtered
+				});
+			}
+		}
+
+		if (typeof actions.updateTrackerCounts === 'function') {
+			// if we're on GlobalSettings, we don't need to run this function
+			const calcSmartBlock = (smartBlockActive && smartBlock) || { blocked: {}, unblocked: {} };
+			updateSummaryBlockingCount(categories, calcSmartBlock, actions.updateTrackerCounts);
+		}
+	}
+
 	/**
 	 * Implement handler for "Expand All/Collapse All" in the Blocking header.
 	 * Trigger action which expands/contracts all categories.

app/panel/components/Blocking/Category.jsx

@@ -43,28 +43,6 @@ class Category extends React.Component {
 		this.hideTooltip = this.hideTooltip.bind(this);
 	}
 
-	/**
-	 * Lifecycle event. When view is opening we save in state
-	 * new values related to tracker blocking to ensure correct rendering.
-	 */
-	componentDidMount() {
-		const { category } = this.props;
-		if (category) {
-			const {
-				allShownBlocked,
-				totalShownBlocked,
-			} = Category.updateCategoryCheckbox(category);
-			this.setState({ allShownBlocked, totalShownBlocked });
-		}
-	}
-
-	/**
-	 * Lifecycle event
-	 */
-	componentDidUpdate(prevProps) {
-		this.updateCategoryExpanded(prevProps);
-	}
-
 	/**
 	 * Lifecycle event.
 	 */
@@ -80,24 +58,6 @@ class Category extends React.Component {
 		};
 	}
 
-	/**
-	 * Set tooltip showing state to true in state which results in actual showing
-	 * of the tooltip.
-	 * @param  {Object} event mouseover event
-	 */
-	showTooltip() {
-		this.setState({ showTooltip: true });
-	}
-
-	/**
-	 * Set tooltip showing state to false in state which results in eventual hiding
-	 * of the tooltip.
-	 * @param  {Object} event mouseover event
-	 */
-	hideTooltip() {
-		this.setState({ showTooltip: false });
-	}
-
 	/**
 	 * Calculate and save in state the number of blocked trackers
 	 * and if this number covers all trackers in the category.
@@ -125,6 +85,46 @@ class Category extends React.Component {
 		};
 	}
 
+	/**
+	 * Lifecycle event. When view is opening we save in state
+	 * new values related to tracker blocking to ensure correct rendering.
+	 */
+	componentDidMount() {
+		const { category } = this.props;
+		if (category) {
+			const {
+				allShownBlocked,
+				totalShownBlocked,
+			} = Category.updateCategoryCheckbox(category);
+			this.setState({ allShownBlocked, totalShownBlocked });
+		}
+	}
+
+	/**
+	 * Lifecycle event
+	 */
+	componentDidUpdate(prevProps) {
+		this.updateCategoryExpanded(prevProps);
+	}
+
+	/**
+	 * Set tooltip showing state to true in state which results in actual showing
+	 * of the tooltip.
+	 * @param  {Object} event mouseover event
+	 */
+	showTooltip() {
+		this.setState({ showTooltip: true });
+	}
+
+	/**
+	 * Set tooltip showing state to false in state which results in eventual hiding
+	 * of the tooltip.
+	 * @param  {Object} event mouseover event
+	 */
+	hideTooltip() {
+		this.setState({ showTooltip: false });
+	}
+
 	/**
 	 * Implement handler for clicking on the category name or on the chevron.
 	 */