From b445d0717d8f74641b5403ccbad114ace4f6f539 Mon Sep 17 00:00:00 2001
From: Mark McDowall <mark@mcdowall.ca>
Date: Fri, 4 Nov 2022 14:16:11 -0700
Subject: [PATCH] Added react-hooks lint rules

(cherry picked from commit 381d64259396582de8d63ada99333e42cf5e3189)
---
 frontend/.eslintrc.js                         | 5 ++++-
 frontend/src/App/ApplyTheme.js                | 9 +++++----
 frontend/src/Components/Modal/ConfirmModal.js | 2 +-
 frontend/src/Settings/PendingChangesModal.js  | 2 +-
 4 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js
index b087037f4..06695aac2 100644
--- a/frontend/.eslintrc.js
+++ b/frontend/.eslintrc.js
@@ -39,6 +39,7 @@ module.exports = {
   plugins: [
     'filenames',
     'react',
+    'react-hooks',
     'simple-import-sort',
     'import'
   ],
@@ -308,7 +309,9 @@ module.exports = {
     'react/react-in-jsx-scope': 2,
     'react/self-closing-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: [
     {
diff --git a/frontend/src/App/ApplyTheme.js b/frontend/src/App/ApplyTheme.js
index 170b51596..7e937e586 100644
--- a/frontend/src/App/ApplyTheme.js
+++ b/frontend/src/App/ApplyTheme.js
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, { Fragment, useEffect } from 'react';
+import React, { Fragment, useCallback, useEffect } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import themes from 'Styles/Themes';
@@ -19,7 +19,8 @@ function createMapStateToProps() {
 
 function ApplyTheme({ theme, children }) {
   // Update the CSS Variables
-  function updateCSSVariables() {
+
+  const updateCSSVariables = useCallback(() => {
     const arrayOfVariableKeys = Object.keys(themes[theme]);
     const arrayOfVariableValues = Object.values(themes[theme]);
 
@@ -31,12 +32,12 @@ function ApplyTheme({ theme, children }) {
         arrayOfVariableValues[index]
       );
     });
-  }
+  }, [theme]);
 
   // On Component Mount and Component Update
   useEffect(() => {
     updateCSSVariables(theme);
-  }, [theme]);
+  }, [updateCSSVariables, theme]);
 
   return <Fragment>{children}</Fragment>;
 }
diff --git a/frontend/src/Components/Modal/ConfirmModal.js b/frontend/src/Components/Modal/ConfirmModal.js
index a6eaf6bd7..c129f29b3 100644
--- a/frontend/src/Components/Modal/ConfirmModal.js
+++ b/frontend/src/Components/Modal/ConfirmModal.js
@@ -33,7 +33,7 @@ function ConfirmModal(props) {
 
       return () => unbindShortcut('enter', onConfirm);
     }
-  }, [isOpen, onConfirm]);
+  }, [bindShortcut, unbindShortcut, isOpen, onConfirm]);
 
   return (
     <Modal
diff --git a/frontend/src/Settings/PendingChangesModal.js b/frontend/src/Settings/PendingChangesModal.js
index 93b5e0870..478c7cafa 100644
--- a/frontend/src/Settings/PendingChangesModal.js
+++ b/frontend/src/Settings/PendingChangesModal.js
@@ -19,7 +19,7 @@ function PendingChangesModal(props) {
 
   useEffect(() => {
     bindShortcut('enter', onConfirm);
-  }, [onConfirm]);
+  }, [bindShortcut, onConfirm]);
 
   return (
     <Modal