Merge pull request #2306 from 10up/fix/react-warnings-and-errors

Enable @10up/eslint-config/react and fix warnings and erros
10up · Aug 19, 2021 · 35bffb8 · 35bffb8
2 parents a8789c4 + 04a8b9d
commit 35bffb8
Show file tree

Hide file tree

Showing 39 changed files with 1,842 additions and 5,805 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,8 +1,5 @@
 {
   "presets": [
     "@10up/babel-preset-default"
-  ],
-  "plugins": [
-    "@babel/plugin-proposal-class-properties"
   ]
 }
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -2,27 +2,7 @@ const defaultEslintrc = require('10up-toolkit/config/.eslintrc');
 
 module.exports = {
 	...defaultEslintrc,
-	extends: '@10up/eslint-config',
-	plugins: ['react'],
 	globals: {
-		wp: true,
 		jQuery: true,
-	},
-	rules: {
-		'react/jsx-uses-react': 'error',
-		'react/jsx-uses-vars': 'error',
-		'no-console': [1],
-		'no-alert': [1],
-		camelcase: [1],
-		'no-debugger': [1],
-		'no-unused-vars': [1],
-		'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
-		'no-plusplus': [0],
-		'import/prefer-default-export': [0],
-		'no-lonely-if': [0],
-		'func-names': [0],
-	},
-	env: {
-		browser: true,
-	},
+	}
 };
diff --git a/assets/js/autosuggest.js b/assets/js/autosuggest.js
@@ -68,7 +68,7 @@ function selectAutosuggestItem(input, text) {
  * Fires events when autosuggest results are clicked,
  * and if GA tracking is activated
  *
- * @param {object} detail - value to pass on to the Custom Event
+ * @param {Object} detail - value to pass on to the Custom Event
  */
 function triggerAutosuggestEvent(detail) {
 	const event = new CustomEvent('ep-autosuggest-click', { detail });
@@ -113,7 +113,7 @@ function goToAutosuggestItem(searchTerm, url) {
  *
  * @param {Node} input - search input
  * @param {Node} element - search term result item
- * @returns {Function} calls the submitSearchForm function
+ * @return {Function} calls the submitSearchForm function
  */
 function selectItem(input, element) {
 	if (epas.action === 'navigate') {
@@ -128,7 +128,7 @@ function selectItem(input, element) {
  * Build the search query from the search text - the query is generated in PHP
  * and passed into the front end as window.epas = { "query...
  *
- * @returns {string} json string
+ * @return {string} json string
  */
 function getJsonQuery() {
 	if (typeof window.epas === 'undefined') {
@@ -147,9 +147,9 @@ function getJsonQuery() {
  *
  * @param {string} searchText - user search string
  * @param {string} placeholder - placeholder text to replace
- * @param {object} options - Autosuggest settings
+ * @param {Object} options - Autosuggest settings
  * @param {string} options.query - JSON query string to pass to ElasticSearch
- * @returns {string} json representation of search query
+ * @return {string} json representation of search query
  */
 function buildSearchQuery(searchText, placeholder, { query }) {
 	const newQuery = replaceGlobally(query, placeholder, searchText);
@@ -161,7 +161,7 @@ function buildSearchQuery(searchText, placeholder, { query }) {
  *
  * @param {string} query - json string
  * @param {string} searchTerm - user search term
- * @returns {object} AJAX object request
+ * @return {Object} AJAX object request
  */
 async function esSearch(query, searchTerm) {
 	const fetchConfig = {
@@ -211,7 +211,7 @@ async function esSearch(query, searchTerm) {
  *
  * @param {Array} options - search results
  * @param {string} input - search string
- * @returns {boolean} return true
+ * @return {boolean} return true
  */
 function updateAutosuggestBox(options, input) {
 	let i;
@@ -295,7 +295,7 @@ function updateAutosuggestBox(options, input) {
 /**
  * Hide the auto suggest box
  *
- * @returns {boolean} returns true
+ * @return {boolean} returns true
  */
 function hideAutosuggestBox() {
 	const lists = document.querySelectorAll('.autosuggest-list');
@@ -322,7 +322,7 @@ function hideAutosuggestBox() {
  *
  * @param {Array} hits - ES results
  * @param {string} searchTerm - user search term
- * @returns {object} formatted hits
+ * @return {Object} formatted hits
  */
 function checkForOrderedPosts(hits, searchTerm) {
 	const toInsert = {};
@@ -498,7 +498,7 @@ function init() {
 		/**
 		 * helper function to get the currently selected result
 		 *
-		 * @returns {number} index of the selected search result
+		 * @return {number} index of the selected search result
 		 */
 		const getSelectedResultIndex = () => {
 			const resultsArr = Array.from(results);
@@ -579,7 +579,7 @@ function init() {
 	 * Get the searched post types from the search form.
 	 *
 	 * @param {HTMLFormElement} form - form containing the search input field
-	 * @returns {Array} - post types
+	 * @return {Array} - post types
 	 * @since 3.6.0
 	 */
 	function getPostTypesFromForm(form) {
@@ -603,17 +603,17 @@ function init() {
 	 * @param {Node} input - search input field
 	 */
 	const fetchResults = async (input) => {
-		const searchText = input.value;
-		const placeholder = 'ep_autosuggest_placeholder';
-		const postTypes = getPostTypesFromForm(input.form);
-
 		// retrieves the PHP-genereated query to pass to ElasticSearch
 		const queryJSON = getJsonQuery();
 
 		if (queryJSON.error) {
 			return;
 		}
 
+		const searchText = input.value;
+		const placeholder = 'ep_autosuggest_placeholder';
+		const postTypes = getPostTypesFromForm(input.form);
+
 		if (searchText.length >= 2) {
 			setFormIsLoading(true, input);
 

diff --git a/assets/js/blocks/related-posts/Edit.js b/assets/js/blocks/related-posts/Edit.js
@@ -15,18 +15,13 @@ class Edit extends Component {
 	/**
 	 * Setup class
 	 *
-	 * @param {object} props Component properties
+	 * @param {Object} props Component properties
 	 */
 	constructor(props) {
 		super(props);
 
-		const {
-			attributes: { number },
-		} = props;
-
 		this.state = {
 			posts: false,
-			number,
 		};
 	}
 
@@ -87,10 +82,10 @@ class Edit extends Component {
 						</Placeholder>
 					) : (
 						<ul style={{ textAlign: alignment }}>
-							{displayPosts.map((post, i) => {
+							{displayPosts.map((post) => {
 								const titleTrimmed = post.title.rendered.trim();
 								return (
-									<li key={i}>
+									<li key={post.id}>
 										<a href={post.link}>
 											{titleTrimmed ? (
 												<RawHTML>{titleTrimmed}</RawHTML>

diff --git a/assets/js/blocks/related-posts/block.js b/assets/js/blocks/related-posts/block.js
@@ -22,8 +22,8 @@ registerBlockType('elasticpress/related-posts', {
 	/**
 	 * Handle edit
 	 *
-	 * @param {object} props Component properties
-	 * @returns {*}
+	 * @param {Object} props Component properties
+	 * @return {Object} <Edit {...props} />
 	 */
 	edit(props) {
 		return <Edit {...props} />;
@@ -32,7 +32,7 @@ registerBlockType('elasticpress/related-posts', {
 	/**
 	 * Handle save
 	 *
-	 * @returns {void}
+	 * @return {void}
 	 */
 	save() {
 		return null;

diff --git a/assets/js/comments.js b/assets/js/comments.js
@@ -44,7 +44,7 @@ function hideResultsBox(inputElement) {
 /**
  * Update the result list
  *
- * @param {object} comments Comments to be showed
+ * @param {Object} comments Comments to be showed
  * @param {HTMLInputElement} inputElement The input element used in the widget
  */
 const updateResultsBox = (comments, inputElement) => {
@@ -131,7 +131,7 @@ function setIsLoading(isLoading, inputElement) {
  *	Fetch comments
  *
  * @param {HTMLInputElement} inputElement The input element used in the widget
- * @returns {(false|Promise)}
+ * @return {(false|Promise)} Try to fetch comments
  */
 function fetchResults(inputElement) {
 	if (hasMinimumLength(inputElement)) {

diff --git a/assets/js/dashboard.js b/assets/js/dashboard.js
@@ -158,42 +158,38 @@ if (epDash.index_meta) {
 			// Sync finished
 			syncStatus = 'finished';
 			updateSyncDash();
-		} else {
+		} else if (epDash.auto_start_index) {
 			// We are mid sync
-			if (epDash.auto_start_index) {
-				syncStatus = 'sync';
+			syncStatus = 'sync';
 
-				history.pushState(
-					{},
-					document.title,
-					document.location.pathname + document.location.search.replace(/&do_sync/, ''),
-				);
+			history.pushState(
+				{},
+				document.title,
+				document.location.pathname + document.location.search.replace(/&do_sync/, ''),
+			);
 
-				updateSyncDash();
-				sync();
-			} else {
-				syncStatus = 'pause';
-				updateSyncDash();
-			}
+			updateSyncDash();
+			sync();
+		} else {
+			syncStatus = 'pause';
+			updateSyncDash();
 		}
 	}
-} else {
+} else if (epDash.auto_start_index) {
 	// Start a new sync automatically
-	if (epDash.auto_start_index) {
-		syncStatus = 'initialsync';
+	syncStatus = 'initialsync';
 
-		updateSyncDash();
+	updateSyncDash();
 
-		syncStatus = 'sync';
+	syncStatus = 'sync';
 
-		history.pushState(
-			{},
-			document.title,
-			document.location.pathname + document.location.search.replace(/&do_sync/, ''),
-		);
+	history.pushState(
+		{},
+		document.title,
+		document.location.pathname + document.location.search.replace(/&do_sync/, ''),
+	);
 
-		sync();
-	}
+	sync();
 }
 
 /**

diff --git a/assets/js/facets.js b/assets/js/facets.js
@@ -32,12 +32,13 @@ const facets = document.querySelectorAll('.widget_ep-facet');
 
 facets.forEach((facet) => {
 	const facetSearchInput = facet.querySelector('.facet-search');
-	const facetTerms = facet.querySelector('.terms');
 
 	if (!facetSearchInput) {
 		return;
 	}
 
+	const facetTerms = facet.querySelector('.terms');
+
 	facet.querySelector('.facet-search').addEventListener(
 		'keyup',
 		debounce((event) => {

diff --git a/assets/js/ordering/index.js b/assets/js/ordering/index.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import ReactDOM from 'react-dom';
 
 import { Pointers } from './pointers';