Merge branch 'develop' into chore/unused-imports

.eslintrc.js

@@ -7,7 +7,7 @@ module.exports = {
 		}
 	},
 	parser: '@babel/eslint-parser',
-	extends: ['@rocket.chat/eslint-config', 'prettier'],
+	extends: ['@rocket.chat/eslint-config', 'prettier', 'plugin:react/recommended'],
 	parserOptions: {
 		sourceType: 'module',
 		ecmaVersion: 2017,
@@ -100,7 +100,7 @@ module.exports = {
 		'no-undef': 2,
 		'no-unreachable': 2,
 		'no-unused-expressions': 0,
-		'no-unused-vars': 'off',
+		'no-unused-vars': 2,
 		'max-len': 0,
 		'react/jsx-uses-vars': 2,
 		'no-void': 2,
@@ -147,7 +147,10 @@ module.exports = {
 		'no-async-promise-executor': [0],
 		'max-classes-per-file': [0],
 		'no-multiple-empty-lines': [0],
-		'no-sequences': 'off'
+		'no-sequences': 'off',
+		'react/no-direct-mutation-state': 'off',
+		'react/prop-types': 'off',
+		'react/display-name': 'off'
 	},
 	globals: {
 		__DEV__: true

app/containers/Passcode/Base/Dots.tsx

@@ -16,7 +16,7 @@ interface IPasscodeDots {
 
 const Dots = React.memo(({ passcode, theme, length }: IPasscodeDots) => (
 	<View style={styles.dotsContainer}>
-		{range(length).map(val => {
+		{range(length).map((val, index) => {
 			const lengthSup = passcode.length >= val + 1;
 			const height = lengthSup ? SIZE_FULL : SIZE_EMPTY;
 			const width = lengthSup ? SIZE_FULL : SIZE_EMPTY;
@@ -30,7 +30,7 @@ const Dots = React.memo(({ passcode, theme, length }: IPasscodeDots) => (
 			const marginRight = lengthSup ? 10 - (SIZE_FULL - SIZE_EMPTY) / 2 : 10;
 			const marginLeft = lengthSup ? 10 - (SIZE_FULL - SIZE_EMPTY) / 2 : 10;
 			return (
-				<View style={styles.dotsView}>
+				<View style={styles.dotsView} key={index}>
 					<View
 						style={{
 							height,

app/containers/UIKit/Section.tsx

@@ -50,8 +50,10 @@ const Accessory = ({ blockId, appId, element, parser }: IAccessory) =>
 	parser.renderAccessories({ blockId, appId, ...element }, BLOCK_CONTEXT.SECTION, parser);
 
 const Fields = ({ fields, parser, theme }: IFields) =>
-	fields.map((field: any) => (
-		<Text style={[styles.text, styles.field, { color: themes[theme].bodyText }]}>{parser.text(field)}</Text>
+	fields.map((field: any, index: number) => (
+		<Text style={[styles.text, styles.field, { color: themes[theme].bodyText }]} key={index}>
+			{parser.text(field)}
+		</Text>
 	));
 
 const accessoriesRight = ['image', 'overflow'];

app/views/CannedResponseDetail.js

@@ -140,8 +140,8 @@ const CannedResponseDetail = ({ navigation, route }) => {
 						<Text style={[styles.itemLabel, { color: themes[theme].titleText }]}>{I18n.t('Tags')}</Text>
 						<View style={styles.cannedTagContainer}>
 							{cannedResponse?.tags?.length > 0 ? (
-								cannedResponse.tags.map(t => (
-									<View style={[styles.cannedTagWrap, { backgroundColor: themes[theme].searchboxBackground }]}>
+								cannedResponse.tags.map((t, index) => (
+									<View style={[styles.cannedTagWrap, { backgroundColor: themes[theme].searchboxBackground }]} key={index}>
 										<Text style={[styles.cannedTag, { color: themes[theme].auxiliaryTintColor }]}>{t}</Text>
 									</View>
 								))

app/views/CannedResponsesListView/CannedResponseItem.js

@@ -32,8 +32,8 @@ const CannedResponseItem = ({ theme, onPressDetail, shortcut, scope, onPressUse,
 			</Text>
 			<View style={styles.cannedTagContainer}>
 				{tags?.length > 0
-					? tags.map(t => (
-							<View style={[styles.cannedTagWrap, { backgroundColor: themes[theme].searchboxBackground }]}>
+					? tags.map((t, index) => (
+							<View style={[styles.cannedTagWrap, { backgroundColor: themes[theme].searchboxBackground }]} key={index}>
 								<Text style={[styles.cannedTag, { color: themes[theme].auxiliaryTintColor }]}>{t}</Text>
 							</View>
 					  ))

app/views/LivechatEditView.js

@@ -230,6 +230,7 @@ const LivechatEditView = ({ user, navigation, route, theme, editOmnichannelConta
 							}}
 							theme={theme}
 							editable={!!permissions[0]}
+							key={index}
 						/>
 					))}
 					<Title title={I18n.t('Conversation')} theme={theme} />
@@ -276,6 +277,7 @@ const LivechatEditView = ({ user, navigation, route, theme, editOmnichannelConta
 							}}
 							theme={theme}
 							editable={!!permissions[1]}
+							key={index}
 						/>
 					))}
 

app/views/RoomInfoEditView/index.js

@@ -666,8 +666,10 @@ class RoomInfoEditView extends React.Component {
 						) : null}
 						{room.broadcast
 							? [
-									<Text style={styles.broadcast}>{I18n.t('Broadcast_Channel')}</Text>,
-									<View style={[styles.divider, { borderColor: themes[theme].separatorColor }]} />
+									<Text style={styles.broadcast} key={0}>
+										{I18n.t('Broadcast_Channel')}
+									</Text>,
+									<View style={[styles.divider, { borderColor: themes[theme].separatorColor }]} key={1} />
 							  ]
 							: null}
 						{!compareServerVersion(serverVersion, '3.0.0', methods.lowerThan) ? (

app/views/RoomInfoView/CustomFields.js

@@ -5,11 +5,11 @@ import Item from './Item';
 
 const CustomFields = ({ customFields, theme }) => {
 	if (customFields) {
-		return Object.keys(customFields).map(title => {
+		return Object.keys(customFields).map((title, index) => {
 			if (!customFields[title]) {
 				return;
 			}
-			return <Item label={title} content={customFields[title]} theme={theme} />;
+			return <Item label={title} content={customFields[title]} theme={theme} key={index} />;
 		});
 	}