🔧 (eslint) add 'plugin:react/recommended' (#1492)

* 🔧 (eslint) add 'plugin:react/recommended'

* Release notes

.eslintignore

@@ -6,11 +6,13 @@ packages/crdt/dist
 
 packages/desktop-client/bundle.browser.js
 packages/desktop-client/build/
+packages/desktop-client/build-stats/
 packages/desktop-client/public/kcab/
 packages/desktop-client/public/data/
 packages/desktop-client/**/node_modules/*
 packages/desktop-client/node_modules/
 packages/desktop-client/src/icons/**/*
+packages/desktop-client/test-results/
 
 packages/desktop-electron/client-build/
 packages/desktop-electron/dist/

.eslintrc.js

@@ -35,7 +35,11 @@ const restrictedImportColors = [
 
 module.exports = {
   plugins: ['prettier', 'import', 'rulesdir', '@typescript-eslint'],
-  extends: ['react-app', 'plugin:@typescript-eslint/recommended'],
+  extends: [
+    'react-app',
+    'plugin:react/recommended',
+    'plugin:@typescript-eslint/recommended',
+  ],
   parser: '@typescript-eslint/parser',
   parserOptions: { project: [path.join(__dirname, './tsconfig.json')] },
   reportUnusedDisableDirectives: true,
@@ -67,8 +71,14 @@ module.exports = {
     // https://github.com/eslint/eslint/issues/16953
     'no-loop-func': 'off',
 
+    // Do don't need this as we're using TypeScript
+    'react/prop-types': 'off',
+
     // TODO: re-enable these rules
     'react-hooks/exhaustive-deps': 'off',
+    'react/no-children-prop': 'off',
+    'react/display-name': 'off',
+    'react/react-in-jsx-scope': 'off',
     // 'react-hooks/exhaustive-deps': [
     //   'error',
     //   {

packages/desktop-client/src/components/Notifications.tsx

@@ -44,6 +44,7 @@ function compileMessage(
                   let actionName = href.slice(1);
                   return (
                     <LinkButton
+                      key={idx}
                       onClick={async e => {
                         e.preventDefault();
                         if (actions[actionName]) {

packages/desktop-client/src/components/accounts/Account.js

@@ -415,7 +415,7 @@ class AccountInternal extends PureComponent {
     );
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (this.props.accountId !== nextProps.accountId) {
       this.setState(
         {

packages/desktop-client/src/components/budget/MobileBudgetTable.js

@@ -187,7 +187,12 @@ function BudgetGroupPreview({ group, pending, style }) {
       <TotalsRow group={group} blank={true} />
 
       {group.categories.map((cat, index) => (
-        <BudgetCategory category={cat} blank={true} index={index} />
+        <BudgetCategory
+          key={cat.id}
+          category={cat}
+          blank={true}
+          index={index}
+        />
       ))}
     </Card>
     // </Animated.View>

packages/desktop-client/src/components/filters/FiltersMenu.js

@@ -229,61 +229,62 @@ function ConfigureField({
           spacing={1}
           style={{ flexWrap: 'wrap' }}
         >
-          {type === 'boolean'
-            ? [
-                <OpButton
-                  key="true"
-                  op="true"
-                  selected={value === true}
-                  onClick={() => {
-                    dispatch({ type: 'set-op', op: 'is' });
-                    dispatch({ type: 'set-value', value: true });
-                  }}
-                />,
-                <OpButton
-                  key="false"
-                  op="false"
-                  selected={value === false}
-                  onClick={() => {
-                    dispatch({ type: 'set-op', op: 'is' });
-                    dispatch({ type: 'set-value', value: false });
-                  }}
-                />,
-              ]
-            : [
-                <Stack
-                  direction="row"
-                  align="flex-start"
-                  spacing={1}
-                  style={{ flexWrap: 'wrap' }}
-                >
-                  {ops.slice(0, 3).map(currOp => (
+          {type === 'boolean' ? (
+            <>
+              <OpButton
+                key="true"
+                op="true"
+                selected={value === true}
+                onClick={() => {
+                  dispatch({ type: 'set-op', op: 'is' });
+                  dispatch({ type: 'set-value', value: true });
+                }}
+              />
+              <OpButton
+                key="false"
+                op="false"
+                selected={value === false}
+                onClick={() => {
+                  dispatch({ type: 'set-op', op: 'is' });
+                  dispatch({ type: 'set-value', value: false });
+                }}
+              />
+            </>
+          ) : (
+            <>
+              <Stack
+                direction="row"
+                align="flex-start"
+                spacing={1}
+                style={{ flexWrap: 'wrap' }}
+              >
+                {ops.slice(0, 3).map(currOp => (
+                  <OpButton
+                    key={currOp}
+                    op={currOp}
+                    selected={currOp === op}
+                    onClick={() => dispatch({ type: 'set-op', op: currOp })}
+                  />
+                ))}
+              </Stack>
+              <Stack
+                direction="row"
+                align="flex-start"
+                spacing={1}
+                style={{ flexWrap: 'wrap' }}
+              >
+                {ops.slice(3, ops.length).map(currOp => (
+                  <View key={currOp}>
                     <OpButton
-                      key={currOp}
                       op={currOp}
                       selected={currOp === op}
                       onClick={() => dispatch({ type: 'set-op', op: currOp })}
                     />
-                  ))}
-                </Stack>,
-                <Stack
-                  direction="row"
-                  align="flex-start"
-                  spacing={1}
-                  style={{ flexWrap: 'wrap' }}
-                >
-                  {ops.slice(3, ops.length).map(currOp => (
-                    <View>
-                      <OpButton
-                        key={currOp}
-                        op={currOp}
-                        selected={currOp === op}
-                        onClick={() => dispatch({ type: 'set-op', op: currOp })}
-                      />
-                    </View>
-                  ))}
-                </Stack>,
-              ]}
+                  </View>
+                ))}
+              </Stack>
+            </>
+          )}
         </Stack>
 
         <form action="#">

packages/desktop-client/src/components/schedules/PostsOfflineNotification.js

@@ -29,9 +29,9 @@ export default function PostsOfflineNotification({ modalProps, actions }) {
           <Text>
             The {plural ? 'payees ' : 'payee '}
             {payees.map((id, idx) => (
-              <Text>
+              <Text key={id}>
                 <Text style={{ color: colors.p4 }}>
-                  <DisplayId key={id} id={id} type="payees" />
+                  <DisplayId id={id} type="payees" />
                 </Text>
                 {idx === payees.length - 1
                   ? ' '

packages/desktop-client/src/components/select/RecurringSchedulePicker.js

@@ -155,8 +155,8 @@ function SchedulePreview({ previewDates }) {
       <View>
         <Text style={{ fontWeight: 600 }}>Upcoming dates</Text>
         <Stack direction="row" spacing={4} style={{ marginTop: 10 }}>
-          {previewDates.map(d => (
-            <View>
+          {previewDates.map((d, idx) => (
+            <View key={idx}>
               <Text>{monthUtils.format(d, dateFormat)}</Text>
               <Text>{monthUtils.format(d, 'EEEE')}</Text>
             </View>

upcoming-release-notes/1492.md

@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [MatissJanis]
+---
+
+Add `plugin:react/recommended` eslint config and fix some issues