chore: Add react hooks linter (#977)

.eslintrc.yml

@@ -10,6 +10,7 @@ extends:
   - 'eslint:recommended'
   - 'prettier'
   - 'plugin:react/recommended'
+  - 'plugin:react-hooks/recommended'
 parserOptions:
   ecmaVersion: 7
   sourceType: module

package.json

@@ -93,6 +93,7 @@
     "@babel/preset-flow": "^7.10.4",
     "@babel/preset-react": "^7.12.10",
     "@redhat-cloud-services/frontend-components-config": "^4.0.1",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.4.1",
     "babel-core": "^6.26.3",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.2",
@@ -102,12 +103,12 @@
     "codecov": "^3.7.2",
     "css-loader": "^3.5.3",
     "enzyme": "^3.11.0",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.4.1",
     "enzyme-to-json": "^3.6.1",
     "eslint": "^7.17.0",
     "eslint-config-prettier": "^6.15.0",
     "eslint-loader": "^4.0.2",
     "eslint-plugin-react": "^7.21.2",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "file-loader": "^6.2.0",
     "good-guy-http": "^1.13.0",
     "identity-obj-proxy": "^3.0.0",

src/App.js

@@ -4,6 +4,7 @@ import routerParams from '@redhat-cloud-services/frontend-components-utilities/R
 import { Routes } from './Routes';
 import NotificationsPortal from '@redhat-cloud-services/frontend-components-notifications/NotificationPortal';
 import './App.scss';
+import { useSetFlagsFromUrl } from 'Utilities/hooks/useFeature';
 
 const appNavClick = {
     reports(redirect) { insights.chrome.appNavClick({ id: 'reports', redirect }); },
@@ -12,7 +13,7 @@ const appNavClick = {
 };
 
 const App = (props) => {
-
+    useSetFlagsFromUrl();
     useEffect(() => {
         insights.chrome.init();
         insights.chrome?.hideGlobalFilter?.();

src/SmartComponents/CompliancePolicies/CompliancePolicies.js

@@ -59,7 +59,7 @@ export const CompliancePolicies = () => {
         <Button variant='primary'>Create new policy</Button>
     </BackgroundLink>;
     let { data, error, loading, refetch } = useQuery(QUERY);
-    useEffect(() => { refetch(); }, [location]);
+    useEffect(() => { refetch(); }, [location, refetch]);
     let policies;
 
     if (data) {

src/SmartComponents/CreatePolicy/EditPolicyRules.js

@@ -66,7 +66,7 @@ export const EditPolicyRules = ({ profileId, benchmarkId, selectedRuleRefIds, ch
                 change('selectedRuleRefIds', ruleIds);
             }
         }
-    }, [data]);
+    }, [data, change, selectedRuleRefIds]);
 
     return <StateViewWithError stateValues={ { error, data, loading } }>
         <StateViewPart stateKey="loading">

src/SmartComponents/CreatePolicy/EditPolicySystems.js

@@ -34,7 +34,7 @@ const EditPolicySystems = ({ change, selectedSystemIds }) => {
         if (selectedSystemIds) {
             change('systems', selectedSystemIds);
         }
-    }, [selectedSystemIds]);
+    }, [selectedSystemIds, change]);
 
     const InvCmp = newInventory ? InventoryTable : SystemsTable;
 

src/SmartComponents/EditPolicy/EditPolicy.js

@@ -56,7 +56,7 @@ export const EditPolicy = ({ route }) => {
             ...updatedPolicy,
             hosts: selectedEntities ? selectedEntities : []
         });
-    }, [selectedEntities]);
+    }, [selectedEntities, updatedPolicy]);
 
     useEffect(() => {
         const complianceThresholdValid =
@@ -69,7 +69,7 @@ export const EditPolicy = ({ route }) => {
             type: 'SELECT_ENTITIES',
             payload: { ids: policy?.hosts?.map(({ id }) => ({ id })) || [] }
         });
-    }, [policy]);
+    }, [policy, dispatch]);
 
     const InvCmp = newInventory ? InventoryTable : SystemsTable;
     useTitleEntity(route, policy?.name);

src/SmartComponents/PolicyDetails/PolicyDetails.js

@@ -131,7 +131,7 @@ export const PolicyDetails = ({ route }) => {
 
     useEffect(() => {
         refetch();
-    }, [location]);
+    }, [location, refetch]);
 
     useTitleEntity(route, policy?.name);
 

src/SmartComponents/Reports/Reports.js

@@ -100,7 +100,7 @@ export const Reports = () => {
 
     useEffect(() => {
         refetch();
-    }, [location]);
+    }, [location, refetch]);
 
     if (data) {
         profiles = profilesFromEdges(data);

src/Utilities/hooks/useDocumentTitle.js

@@ -14,7 +14,7 @@ export const useTitleEntity = (route, entityTitle) => {
         const title = entityTitle ?
             route.title.replace('$entityTitle', entityTitle) : route.defaultTitle;
         route.setTitle(title);
-    }, [entityTitle, location]);
+    }, [entityTitle, location, route]);
 };
 
 const useDocumentTitle = () => (

src/Utilities/hooks/useFeature.js

@@ -15,7 +15,7 @@ const setFeatureFlag = (featureValue, feature) => {
 };
 
 // Allows setting feature flag values via ?feature|(enable/disable)
-const setFlagsFromUrl = () => {
+export const useSetFlagsFromUrl = () => {
     const { search, pathName: path } = useLocation();
     const history = useHistory();
     if (!search) {
@@ -28,22 +28,20 @@ const setFlagsFromUrl = () => {
     history.push(path);
 };
 
-// Queries the local storage for feature flag values
-const getLocatStateFlag = (feature) => (
-    !!localStorage.getItem(`${LOCAL_STORE_FEATURE_PREFIX}:${feature}`)
-);
+const getFlagValue = (feature) => {
+    const defaultValue = features[feature];
+    const storedValue = !!localStorage.getItem(`${LOCAL_STORE_FEATURE_PREFIX}:${feature}`);
+
+    return storedValue || defaultValue;
+};
 
 // A hook to query feature values
 const useFeature = (feature) => {
-    const featureDefault = features[feature];
     if (!feature) {
         return;
     }
 
-    setFlagsFromUrl();
-
-    const localStoreValue = getLocatStateFlag(feature);
-    const featureEnabled = localStoreValue || featureDefault;
+    const featureEnabled = getFlagValue(feature);
 
     console.log(`Feature ${feature} is set to ${featureEnabled}`);
     return featureEnabled;