Merge pull request #1369 from guardian/pf/eslint-jsx

Run eslint for .jsx and .tsx files

Author: bryophyta

.eslintrc.js

@@ -1,14 +1,13 @@
 module.exports = {
   parser: '@typescript-eslint/parser',
-  extends: [
-    'plugin:react/recommended',
-  ],
+  extends: ['plugin:react/recommended'],
+
   parserOptions: {
     ecmaVersion: 2020,
     sourceType: 'module',
     ecmaFeatures: {
       jsx: true
-    },
+    }
   },
   plugins: ['react', 'prettier'],
   rules: {
@@ -22,5 +21,10 @@ module.exports = {
     react: {
       version: 'detect'
     }
-  }
+  },
+  overrides: [
+    {
+      files: ['**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx']
+    }
+  ]
 };

package.json

@@ -4,8 +4,10 @@
   "scripts": {
     "build": "tsc && vite build",
     "client-dev": "vite",
-    "lint": "eslint public/video-ui/src/**/** --ext .js,.ts --no-error-on-unmatched-pattern",
-    "test": "jest"
+    "lint": "eslint public/video-ui/src/**/** --no-error-on-unmatched-pattern",
+    "lint:fix": "eslint public/video-ui/src/**/** --fix --no-error-on-unmatched-pattern",
+    "test": "jest",
+    "typecheck": "tsc --noEmit"
   },
   "jest": {
     "roots": [

public/video-ui/src/components/FormFields/CheckBox.jsx

@@ -15,7 +15,7 @@ export default class CheckBox extends React.Component {
           onChange={e => {
             this.props.onUpdateField(e.target.checked);
           }}
-          className='form-checkbox'
+          className="form-checkbox"
         />
       </div>
     );

public/video-ui/src/components/FormFields/ExpireNow.tsx

@@ -38,5 +38,5 @@ export const ExpireNowComponent = (props:ExpireNowComponentProps ) => {
       </div>
     </div>
   );
-}
+};
 

public/video-ui/src/components/FormFields/PureTagPicker.jsx

@@ -16,16 +16,16 @@ class PureTagPicker extends React.Component {
     inputClearCount: PropTypes.number.isRequired,
     inputPlaceholder: PropTypes.string.isRequired,
     updateSideEffects: PropTypes.func
-  }
+  };
 
   state = {
-    inputString: '',
+    inputString: ''
   };
 
   componentDidUpdate(prevProps) {
     if (prevProps.inputClearCount !== this.props.inputClearCount) {
       this.setState({
-        inputString: '',
+        inputString: ''
       });
     }
   }
@@ -37,7 +37,7 @@ class PureTagPicker extends React.Component {
     this.setState({
       inputString: searchText
     });
-  }
+  };
 
   selectNewTag = (newFieldValue) => {
 
@@ -46,7 +46,7 @@ class PureTagPicker extends React.Component {
       });
 
       this.props.onUpdate(newFieldValue);
-  }
+  };
 
   render() {
 

public/video-ui/src/components/FormFields/RichTextField.tsx

@@ -24,7 +24,7 @@ type EditorProps = {
 
 export default class RichTextField extends React.Component<EditorProps, EditorState> {
   state: EditorState = {
-    wordCount: 0,
+    wordCount: 0
   };
 
   componentDidMount() {

public/video-ui/src/components/FormFields/SelectBox.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-const pleaseSelect = "Please select..."
+const pleaseSelect = "Please select...";
 
 export default class SelectBox extends React.Component {
   getClassName = () => {

public/video-ui/src/components/FormFields/TagPicker.jsx

@@ -84,7 +84,7 @@ class TagPicker extends React.Component {
       webTitle: tag.externalName,
       detailedTitle: tag.internalName
     };
-  }
+  };
 
   fetchTags = searchText => {
     const tagTypes = this._getTagTypes();
@@ -112,9 +112,9 @@ class TagPicker extends React.Component {
           });
         });
     }
-  }
+  };
 
-  debouncedFetchTags = debounce(this.fetchTags, 500)
+  debouncedFetchTags = debounce(this.fetchTags, 500);
 
   onUpdate = newValue => {
     this.setState({
@@ -169,13 +169,13 @@ class TagPicker extends React.Component {
     this.setState({
       inputClearCount: this.state.inputClearCount + 1
     });
-  }
+  };
 
   tagsToVisible = () => {
     this.setState({
       tagsVisible: true
     });
-  }
+  };
 
   onKeyDown = (e) => {
 
@@ -223,7 +223,7 @@ class TagPicker extends React.Component {
 
       this.onUpdate(newFieldValue);
     }
-  }
+  };
 
   renderSelectedTags = () => {
 
@@ -240,7 +240,7 @@ class TagPicker extends React.Component {
         removeFn={this.removeFn}
       />
     );
-  }
+  };
 
   renderTag = (tag, index) => {
     return (
@@ -257,7 +257,7 @@ class TagPicker extends React.Component {
         </span>
       </div>
     );
-  }
+  };
 
   renderTagPicker() {
 

public/video-ui/src/components/FormFields/TagPicker.test.jsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import { Provider } from 'react-redux'
+import { Provider } from 'react-redux';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { userEvent } from '@testing-library/user-event';
 import { setupStore } from '../../util/setupStore';
 import { setConfig } from '../../slices/config';
 
-let mockedGetTagsByType = jest.fn();
+const mockedGetTagsByType = jest.fn();
 jest.mock('../../services/tagmanager', () => ({
   __esModule: true,
   getTagsByType: mockedGetTagsByType
@@ -23,7 +23,7 @@ const defaultProps = {
 	hasWarning: () => false,
 	hasError: () => false,
 	notification: { message: '' },
-	inputPlaceholder: 'Search for tags...',
+	inputPlaceholder: 'Search for tags...'
 };
 
 const store = setupStore();
@@ -38,7 +38,7 @@ describe('TagPicker', () => {
       mockedGetTagsByType.mockResolvedValue({
         data: [
           { data: { path: 'keyword/first-tag', externalName: 'Tag first external', internalName: 'Tag first (internal)' } },
-          { data: { path: 'keyword/second-tag', externalName: 'Tag second external', internalName: 'Tag second (internal)' } },
+          { data: { path: 'keyword/second-tag', externalName: 'Tag second external', internalName: 'Tag second (internal)' } }
         ]
       });
 

public/video-ui/src/components/FormFields/TextInputTagPicker.jsx

@@ -1,10 +1,10 @@
-import React from 'react';
 import { PropTypes } from 'prop-types';
+import React from 'react';
 import { keyCodes } from '../../constants/keyCodes';
-import UserActions from '../../constants/UserActions';
 import TagTypes from '../../constants/TagTypes';
-import TagSearch from '../TagSearch/TagSearch';
+import UserActions from '../../constants/UserActions';
 import removeStringTagDuplicates from '../../util/removeStringTagDuplicates';
+import TagSearch from '../TagSearch/TagSearch';
 
 export default class TextInputTagPicker extends React.Component {
 
@@ -26,13 +26,13 @@ export default class TextInputTagPicker extends React.Component {
 
   state = {
     inputString: '',
-    lastAction: UserActions.other,
+    lastAction: UserActions.other
   };
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (this.props.inputClearCount !== nextProps.inputClearCount) {
       this.setState({
-        inputString: '',
+        inputString: ''
       });
     }
   }
@@ -109,7 +109,7 @@ export default class TextInputTagPicker extends React.Component {
           this.props.onUpdate(newFieldValue)
           .then(() => {
             this.setState({
-              inputString: '',
+              inputString: ''
             });
           });
         }