[REFACTOR] Prepare for Preact X - Unsafe lifecycle methods and ESLint…

… configuration (#456)

.eslintrc

@@ -17,16 +17,42 @@
 			"newlines-between": "always",
 			"groups": ["builtin", "external", "internal", ["parent", "sibling", "index"]]
 		}],
+		"react/display-name": ["warn", {
+			"ignoreTranspilerName": false
+		}],
+		"react/jsx-fragments": ["error", "syntax"],
+		"react/jsx-no-bind": ["warn", {
+			"ignoreRefs": true,
+			"allowFunctions": true,
+			"allowArrowFunctions": true
+		}],
+		"react/jsx-no-comment-textnodes": "error",
+		"react/jsx-no-duplicate-props": "error",
+		"react/jsx-no-target-blank": "error",
+		"react/jsx-no-undef": "error",
+		"react/jsx-tag-spacing": ["error", {
+			"beforeSelfClosing": "always"
+		}],
 		"react/jsx-uses-react": "error",
 		"react/jsx-uses-vars": "error",
-		"react/jsx-no-undef": "error",
-		"react/jsx-fragments": ["error", "syntax"],
-		"react/react-in-jsx-scope": "error"
+		"react/no-danger": "warn",
+		"react/no-deprecated": "error",
+		"react/no-did-mount-set-state": "error",
+		"react/no-did-update-set-state": "error",
+		"react/no-find-dom-node": "error",
+		"react/no-is-mounted": "error",
+		"react/no-string-refs": "error",
+		"react/prefer-es6-class": "error",
+		"react/prefer-stateless-function": "warn",
+		"react/react-in-jsx-scope": "error",
+		"react/require-render-return": "error",
+		"react/self-closing-comp": "error"
 	},
 	"settings": {
     "react": {
 			"pragma": "h",
-			"pragmaFrag": "Fragment"
+			"pragmaFrag": "Fragment",
+			"version": "detect"
     }
 	}
 }

package.json

@@ -38,11 +38,12 @@
 		"@storybook/react": "^5.1.9",
 		"@storybook/storybook-deployer": "^2.8.1",
 		"@storybook/theming": "^5.1.9",
+		"babel-eslint": "^10.1.0",
 		"create-react-ref": "^0.1.0",
 		"css-loader": "^2.1.0",
 		"desvg-loader": "^0.1.0",
-		"eslint": "^6.5.1",
-		"eslint-config-synacor": "^3.0.5",
+		"eslint": "^7.5.0",
+		"eslint-plugin-react": "^7.20.4",
 		"gh-release": "^3.5.0",
 		"husky": "^3.0.8",
 		"if-env": "^1.0.0",

src/components/Avatar/index.js

@@ -5,6 +5,14 @@ import styles from './styles.scss';
 
 
 export class Avatar extends Component {
+	static getDerivedStateFromProps(props) {
+		if (props.src) {
+			return { errored: false };
+		}
+
+		return null;
+	}
+
 	state = {
 		errored: false,
 	}
@@ -13,13 +21,6 @@ export class Avatar extends Component {
 		this.setState({ errored: true });
 	}
 
-	componentWillReceiveProps({ src: nextSrc }) {
-		const { src } = this.props;
-		if (nextSrc !== src) {
-			this.setState({ errored: false });
-		}
-	}
-
 	render = ({ small, large, src, description, status, className, style }, { errored }) => (
 		<div
 			aria-label="User picture"

src/components/Composer/index.js

@@ -148,6 +148,10 @@ export class Composer extends Component {
 		super(props);
 		this.value = this.props.value;
 		this.handleNotifyEmojiSelect = this.handleNotifyEmojiSelect.bind(this);
+
+		if (typeof this.props.notifyEmojiSelect === 'function') {
+			this.props.notifyEmojiSelect(this.handleNotifyEmojiSelect);
+		}
 	}
 
 	// we only update composer if value length changed from 0 to 1 or 1 to 0
@@ -178,12 +182,6 @@ export class Composer extends Component {
 		replaceCaret(el);
 	}
 
-	componentWillMount() {
-		if (this.props.notifyEmojiSelect) {
-			this.props.notifyEmojiSelect(this.handleNotifyEmojiSelect);
-		}
-	}
-
 	handleNotifyEmojiSelect(emoji) {
 		const { onChange } = this.props;
 		const caretPosition = this.getCaretPosition(this.el);

src/components/Form/SelectInput/index.js

@@ -6,6 +6,14 @@ import ArrowIcon from '../../../icons/arrowDown.svg';
 
 
 export class SelectInput extends Component {
+	static getDerivedStateFromProps(props, state) {
+		if (props.value !== state.value) {
+			return { value: props.value };
+		}
+
+		return null;
+	}
+
 	state = {
 		value: this.props.value,
 	}
@@ -21,13 +29,6 @@ export class SelectInput extends Component {
 		this.setState({ value: event.target.value });
 	}
 
-	componentWillReceiveProps({ value: nextValue }) {
-		const { value } = this.props;
-		if (nextValue !== value) {
-			this.setState({ value: nextValue });
-		}
-	}
-
 	render = ({
 		name,
 		placeholder,

src/components/Messages/MessageList/stories.js

@@ -36,7 +36,7 @@ for (let i = 0; i < messages.length; ++i) {
 		_id: i + 1,
 		u: users[Math.floor(Math.random() * users.length)],
 		msg: loremIpsum({ count: 1, units: 'sentences' }),
-		ts: new Date(Date.now() - (15 - i) * 60000).getTime(),
+		ts: new Date(Date.now() - (15 - i) * 60000).toISOString(),
 	};
 }
 

src/routes/Chat/container.js

@@ -288,23 +288,19 @@ export class ChatContainer extends Component {
 		loadMessages();
 	}
 
-	async componentWillReceiveProps({ messages: nextMessages, visible: nextVisible, minimized: nextMinimized }) {
-		const { messages, alerts, dispatch } = this.props;
-
-		if (nextMessages && messages && nextMessages.length !== messages.length && nextVisible && !nextMinimized) {
-			const nextLastMessage = nextMessages[nextMessages.length - 1];
-			const lastMessage = messages[messages.length - 1];
-			if (
-				(nextLastMessage && lastMessage && nextLastMessage._id !== lastMessage._id)
-				|| (nextMessages.length === 1 && messages.length === 0)
-			) {
-				const newAlerts = alerts.filter((item) => item.id !== constants.unreadMessagesAlertId);
-				await dispatch({ alerts: newAlerts, unread: null, lastReadMessageId: nextLastMessage._id });
+	async componentDidUpdate(prevProps) {
+		const { messages, visible, minimized, dispatch } = this.props;
+		const { messages: prevMessages, alerts: prevAlerts } = prevProps;
+
+		if (messages && prevMessages && messages.length !== prevMessages.length && visible && !minimized) {
+			const nextLastMessage = messages[messages.length - 1];
+			const lastMessage = prevMessages[prevMessages.length - 1];
+			if ((nextLastMessage && lastMessage && nextLastMessage._id !== lastMessage._id) || (messages.length === 1 && prevMessages.length === 0)) {
+				const newAlerts = prevAlerts.filter((item) => item.id !== constants.unreadMessagesAlertId);
+				dispatch({ alerts: newAlerts, unread: null, lastReadMessageId: nextLastMessage._id });
 			}
 		}
-	}
 
-	async componentDidUpdate() {
 		await this.checkConnectingAgent();
 		this.checkRoom();
 	}

src/routes/Chat/stories.js

@@ -27,7 +27,7 @@ const messages = [
 	{ _id: 9, u: { _id: 1, username: 'tasso.evangelista' }, msg: 'Veri soluta suscipit mel no' },
 ].map((message, i) => ({
 	...message,
-	ts: new Date(Date.now() - (15 - i) * 60000 - (i < 5 ? 24 * 60 * 60 * 1000 : 0)),
+	ts: new Date(Date.now() - (15 - i) * 60000 - (i < 5 ? 24 * 60 * 60 * 1000 : 0)).toISOString(),
 }));
 
 const soundSrc = 'https://open.rocket.chat/sounds/beep.mp3';

src/routes/Register/component.js

@@ -59,6 +59,52 @@ const renderCustomFields = (customFields, { loading, handleFieldChange = () => {
 });
 
 export default class Register extends Component {
+	static getDerivedStateFromProps(props, state) {
+		const {
+			hasNameField,
+			hasEmailField,
+			hasDepartmentField,
+			departmentDefault,
+			departments,
+			nameDefault,
+			emailDefault,
+		} = props;
+
+		let stateChange = null;
+		const mergeChange = (change) => {
+			if (stateChange) {
+				stateChange = { ...stateChange, ...change };
+				return;
+			}
+
+			stateChange = change;
+		};
+
+		const nameValue = nameDefault || '';
+		if (hasNameField && (!state.name || state.name !== nameValue)) {
+			mergeChange({ name: { ...state.name, value: nameValue } });
+		} else if (!hasNameField) {
+			mergeChange({ name: null });
+		}
+
+		const emailValue = emailDefault || '';
+		if (hasEmailField && (!state.email || state.name !== emailValue)) {
+			mergeChange({ email: { ...state.email, value: emailValue } });
+		} else if (!hasEmailField) {
+			mergeChange({ email: null });
+		}
+
+		const departmentValue = departmentDefault || getDefaultDepartment(departments);
+		const showDepartmentField = hasDepartmentField && departments && departments.length > 1;
+		if (showDepartmentField && (!state.department || state.department !== departmentValue)) {
+			mergeChange({ department: { ...state.department, value: departmentValue } });
+		} else if (!showDepartmentField) {
+			mergeChange({ department: null });
+		}
+
+		return stateChange;
+	}
+
 	state = {
 		name: null,
 		email: null,
@@ -155,29 +201,7 @@ export default class Register extends Component {
 		this.validateAll();
 	}
 
-	componentWillReceiveProps({ hasNameField, hasEmailField, hasDepartmentField, departmentDefault, departments, nameDefault, emailDefault }) {
-		const nameValue = nameDefault || '';
-		if (hasNameField && (!this.state.name || this.state.name !== nameValue)) {
-			this.setState({ name: { ...this.state.name, value: nameValue } });
-		} else if (!hasNameField) {
-			this.setState({ name: null });
-		}
-
-		const emailValue = emailDefault || '';
-		if (hasEmailField && (!this.state.email || this.state.name !== emailValue)) {
-			this.setState({ email: { ...this.state.email, value: emailValue } });
-		} else if (!hasEmailField) {
-			this.setState({ email: null });
-		}
-
-		const departmentValue = departmentDefault || getDefaultDepartment(departments);
-		const showDepartmentField = hasDepartmentField && departments && departments.length > 1;
-		if (showDepartmentField && (!this.state.department || this.state.department !== departmentValue)) {
-			this.setState({ department: { ...this.state.department, value: departmentValue } });
-		} else if (!showDepartmentField) {
-			this.setState({ department: null });
-		}
-
+	componentDidUpdate() {
 		this.validateAll();
 	}
 

src/routes/SwitchDepartment/component.js

@@ -13,6 +13,18 @@ const defaultTitle = I18n.t('Change Department');
 const defaultMessage = I18n.t('Choose a department');
 
 export default class SwitchDepartment extends Component {
+	static getDerivedStateFromProps(props, state) {
+		if (props.departments && props.departments.length > 0 && !state.department) {
+			return { department: { value: '' } };
+		}
+
+		if (!props.departments || props.departments.length === 0) {
+			return { department: null };
+		}
+
+		return null;
+	}
+
 	state = {
 		department: null,
 	}
@@ -71,10 +83,8 @@ export default class SwitchDepartment extends Component {
 		this.validateAll();
 	}
 
-	componentWillReceiveProps() {
-		if (!this.state.department) {
-			this.setState({ department: { ...this.state.department, value: '' } });
-		}
+	componentDidUpdate() {
+		this.validateAll();
 	}
 
 	render({ title, color, message, loading, departments, ...props }, { department }) {