Added react-hooks lint rules
This commit is contained in:
parent
b1962c7366
commit
381d642593
|
@ -39,6 +39,7 @@ module.exports = {
|
||||||
plugins: [
|
plugins: [
|
||||||
'filenames',
|
'filenames',
|
||||||
'react',
|
'react',
|
||||||
|
'react-hooks',
|
||||||
'simple-import-sort',
|
'simple-import-sort',
|
||||||
'import'
|
'import'
|
||||||
],
|
],
|
||||||
|
@ -308,7 +309,9 @@ module.exports = {
|
||||||
'react/react-in-jsx-scope': 2,
|
'react/react-in-jsx-scope': 2,
|
||||||
'react/self-closing-comp': 2,
|
'react/self-closing-comp': 2,
|
||||||
'react/sort-comp': 2,
|
'react/sort-comp': 2,
|
||||||
'react/jsx-wrap-multilines': 2
|
'react/jsx-wrap-multilines': 2,
|
||||||
|
'react-hooks/rules-of-hooks': 'error',
|
||||||
|
'react-hooks/exhaustive-deps': 'error'
|
||||||
},
|
},
|
||||||
overrides: [
|
overrides: [
|
||||||
{
|
{
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import React, { Fragment, useEffect } from 'react';
|
import React, { Fragment, useCallback, useEffect } from 'react';
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import { createSelector } from 'reselect';
|
import { createSelector } from 'reselect';
|
||||||
import themes from 'Styles/Themes';
|
import themes from 'Styles/Themes';
|
||||||
|
@ -19,7 +19,8 @@ function createMapStateToProps() {
|
||||||
|
|
||||||
function ApplyTheme({ theme, children }) {
|
function ApplyTheme({ theme, children }) {
|
||||||
// Update the CSS Variables
|
// Update the CSS Variables
|
||||||
function updateCSSVariables() {
|
|
||||||
|
const updateCSSVariables = useCallback(() => {
|
||||||
const arrayOfVariableKeys = Object.keys(themes[theme]);
|
const arrayOfVariableKeys = Object.keys(themes[theme]);
|
||||||
const arrayOfVariableValues = Object.values(themes[theme]);
|
const arrayOfVariableValues = Object.values(themes[theme]);
|
||||||
|
|
||||||
|
@ -31,12 +32,12 @@ function ApplyTheme({ theme, children }) {
|
||||||
arrayOfVariableValues[index]
|
arrayOfVariableValues[index]
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
}
|
}, [theme]);
|
||||||
|
|
||||||
// On Component Mount and Component Update
|
// On Component Mount and Component Update
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
updateCSSVariables(theme);
|
updateCSSVariables(theme);
|
||||||
}, [theme]);
|
}, [updateCSSVariables, theme]);
|
||||||
|
|
||||||
return <Fragment>{children}</Fragment>;
|
return <Fragment>{children}</Fragment>;
|
||||||
}
|
}
|
||||||
|
|
|
@ -33,7 +33,7 @@ function ConfirmModal(props) {
|
||||||
|
|
||||||
return () => unbindShortcut('enter', onConfirm);
|
return () => unbindShortcut('enter', onConfirm);
|
||||||
}
|
}
|
||||||
}, [isOpen, onConfirm]);
|
}, [bindShortcut, unbindShortcut, isOpen, onConfirm]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Modal
|
<Modal
|
||||||
|
|
|
@ -19,7 +19,7 @@ function PendingChangesModal(props) {
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
bindShortcut('enter', onConfirm);
|
bindShortcut('enter', onConfirm);
|
||||||
}, [onConfirm]);
|
}, [bindShortcut, onConfirm]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Modal
|
<Modal
|
||||||
|
|
Loading…
Reference in New Issue