Add react hooks plugin

bipuladh · bipuladh · commit d5df27ee9973 · 2022-11-02T17:02:48.000+05:45
Fixes Issue #60

Signed-off-by: Bipul Adhikari &lt;badhikar@redhat.com&gt;
diff --git a/.eslintrc.yml b/.eslintrc.yml
@@ -2,12 +2,13 @@ env:
   browser: true
   es2021: true
 extends:
-  - 'eslint:recommended'
-  - 'plugin:@typescript-eslint/recommended'
-parser: '@typescript-eslint/parser'
+  - "eslint:recommended"
+  - "plugin:@typescript-eslint/recommended"
+  - "plugin:react-hooks/recommended"
+parser: "@typescript-eslint/parser"
 parserOptions:
   ecmaVersion: 12
   sourceType: module
 plugins:
-  - '@typescript-eslint'
-rules: {}
+  - "@typescript-eslint"
+rules: { "@typescript-eslint/no-explicit-any": "off" }
diff --git a/package.json b/package.json
@@ -9,7 +9,7 @@
     "build-upstream": "npm run clean && MODE=production ts-node -O '{\"module\": \"commonjs\"}' ./node_modules/webpack/bin/webpack",
     "betabuild-upstream": "npm run clean && MODE=production PUBLIC_PATH=/sizer.ocs.ninja/beta/ ts-node -O '{\"module\": \"commonjs\"}' ./node_modules/webpack/bin/webpack",
     "dev": "npm run clean && ts-node -O '{\"module\": \"commonjs\"}' ./node_modules/webpack/bin/webpack serve --port 9005",
-    "lint": "./node_modules/.bin/eslint --ext '.js,.ts' src/",
+    "lint": "./node_modules/.bin/eslint --ext '.js,.ts, .tsx' src/",
     "format": "./node_modules/.bin/prettier --write 'src/**/*.{ts,tsx}'"
   },
   "repository": {
@@ -44,6 +44,7 @@
     "copy-webpack-plugin": "^6.3.2",
     "css-loader": "^5.1.3",
     "eslint": "^7.15.0",
+    "eslint-plugin-react-hooks": "^4.5.0",
     "extract-loader": "^5.1.0",
     "extract-text-webpack-plugin": "^3.0.2",
     "file-loader": "^6.2.0",
diff --git a/src/analytics/analytics.ts b/src/analytics/analytics.ts
@@ -59,7 +59,7 @@ export const useGetAnalyticClientID = (useDebug?: boolean): string => {
         console.log("Id for client is: ", id);
       })
     );
-  }, [analyticsID]);
+  }, [analyticsID, analytics]);
   return clientID;
 };
 
@@ -74,7 +74,7 @@ const useAnalytics: UseAnalytics = (useDebug) => {
       GA4Initialized = initialized;
       return initialized;
     }
-  }, [GA4Initialized]);
+  }, [id]);
 
   return gaItem;
 };
diff --git a/src/components/Compute/ComputePage.tsx b/src/components/Compute/ComputePage.tsx
@@ -24,7 +24,7 @@ const Compute: React.FC = () => {
   const dispatch = useDispatch();
   const openCreateModal = React.useCallback(() => {
     dispatch(openModalAction(CM_MODAL_ID));
-  }, []);
+  }, [dispatch]);
 
   const machines = useSelector((store: Store) => store.machineSet);
 
diff --git a/src/components/Compute/InstanceFilter.tsx b/src/components/Compute/InstanceFilter.tsx
@@ -71,7 +71,7 @@ const InstanceFilter: React.FC<InstanceFilterProps> = ({
       (item) => item < maxMem,
       memoryDropdownPoints
     );
-  }, [minMem, maxMem, memoryDropdownPoints]);
+  }, [maxMem, memoryDropdownPoints]);
 
   const maxMemoryDropdownItems = React.useMemo(() => {
     return dropdownItemGenerator(
@@ -87,15 +87,15 @@ const InstanceFilter: React.FC<InstanceFilterProps> = ({
       (item) => item < maxCPU,
       cpuUnitPoints
     );
-  }, [minCPU, maxCPU, cpuUnitPoints]);
+  }, [maxCPU, cpuUnitPoints]);
 
   const maxCPUDropdownItems = React.useMemo(() => {
     return dropdownItemGenerator(
       minCPU > 0 || maxCPU === 0,
       (item) => item > minCPU,
       cpuUnitPoints
     );
-  }, [minCPU, maxCPU, memoryDropdownPoints]);
+  }, [minCPU, maxCPU, cpuUnitPoints]);
 
   const onSelect = (dropdownID: DropdownID) => (event: React.FormEvent) => {
     switch (dropdownID) {
diff --git a/src/components/Compute/MachineSetCreate.tsx b/src/components/Compute/MachineSetCreate.tsx
@@ -120,6 +120,7 @@ const MachineSetCreate: React.FC<MachineSetCreateProps> = ({
           />
         );
       }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [JSON.stringify(workloads)]
   );
 
diff --git a/src/components/Compute/MachineSetEdit.tsx b/src/components/Compute/MachineSetEdit.tsx
@@ -42,6 +42,7 @@ const MachineSetEditModal: React.FC<WorkloadEditModalProps> = ({
       workloads.map((workload) => {
         return <SelectOption value={workload.name} key={workload.name} />;
       }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [JSON.stringify(machines)]
   );
 
diff --git a/src/components/Compute/SelectList.tsx b/src/components/Compute/SelectList.tsx
@@ -32,8 +32,7 @@ const SelectionList: React.FC<SelectionListProps> = ({
 
   const onSelect = (
     _event: React.MouseEvent | React.ChangeEvent<Element>,
-    selection: string | SelectOptionObject,
-    _isPlaceholder?: boolean
+    selection: string | SelectOptionObject
   ) => {
     setInstance(selection);
     setOpen(false);
diff --git a/src/components/Modals/Modals.tsx b/src/components/Modals/Modals.tsx
@@ -3,6 +3,7 @@ import * as ReactDOM from "react-dom";
 import { Provider } from "react-redux";
 import { store } from "../../redux/store";
 
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export const launchModal = (ModalComponent, props) => {
   const domElement = document.getElementById("modal-container");
 
diff --git a/src/components/Modals/about.tsx b/src/components/Modals/about.tsx
@@ -1,5 +1,4 @@
 import * as React from "react";
-import { Link } from "react-router-dom";
 import {
   Modal,
   TextContent,
diff --git a/src/components/Results/ResultsPage.tsx b/src/components/Results/ResultsPage.tsx
@@ -97,7 +97,7 @@ const ResultsPage: React.FC = () => {
     });
     setUnschedulableWorkloads(unschedulables);
     // pruneNodes(dispatch)(store.getState().node.nodes, zones);
-  }, [JSON.stringify(workloads), JSON.stringify(machineSets)]);
+  }, [dispatch, machineSets, services, workloads]);
 
   const clientID = useGetAnalyticClientID();
   React.useEffect(() => {
@@ -113,7 +113,7 @@ const ResultsPage: React.FC = () => {
         console.error("Error sending data to analytics service", err)
       );
     }
-  }, [clientID]);
+  }, [allNodes.length, clientID, platform, totalStorage, usedStorage, workloads.length]);
 
   const [showAdvanced, setShowAdvanced] = React.useState(false);
   const [showExceptionModal, setShowExceptionModal] = React.useState(false);
@@ -155,7 +155,7 @@ const ResultsPage: React.FC = () => {
     } else {
       setShowExceptionModal(false);
     }
-  }, [JSON.stringify(exceptions)]);
+  }, [exceptions?.length]);
 
   const isDownloadButtonVisible = useVisibilityTracker("screenshot-download");
   const scroller = React.useCallback(() => {
diff --git a/src/components/Storage/StoragePage.tsx b/src/components/Storage/StoragePage.tsx
@@ -71,6 +71,7 @@ const StoragePage: React.FC = () => {
         (acc, curr) => (acc += (curr.storageCapacityRequired || 0) / 1000),
         0
       ),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [JSON.stringify(workloads)]
   );
 
@@ -87,7 +88,7 @@ const StoragePage: React.FC = () => {
         setDedicated(true);
       }
     }
-  }, [machineSet, setDedicatedMSName, setDedicated]);
+  }, [machineSet, setDedicatedMSName, setDedicated, dedicatedMSName]);
 
   const dedicatedMS = React.useMemo(
     () => machineSet.find((ms) => ms.name === ODF_DEDICATED_MS_NAME),
diff --git a/src/components/Workload/WorkloadCreate.tsx b/src/components/Workload/WorkloadCreate.tsx
@@ -33,7 +33,6 @@ import {
 import "./workload.css";
 import { getWorkloadFromDescriptors } from "../../utils/workload";
 import {
-  useGetAnalyticID,
   customEventPusher,
   useGetAnalyticClientID,
 } from "../../analytics";
@@ -177,7 +176,7 @@ const WorkloadCreate: React.FC = () => {
         .map((machine) => {
           return <SelectOption value={machine.name} key={machine.name} />;
         }),
-    [JSON.stringify(machines)]
+    [machines]
   );
 
   const onSelectMachines = (_event: any, machine: SelectOptionObject) => {
diff --git a/src/components/Workload/WorkloadEdit.tsx b/src/components/Workload/WorkloadEdit.tsx
@@ -63,7 +63,7 @@ const WorkloadEditFormModal: React.FC<WorkloadEditModalProps> = ({
         .map((machine) => {
           return <SelectOption value={machine.name} key={machine.name} />;
         }),
-    [JSON.stringify(machines)]
+    [machines]
   );
 
   const onSelectMachines = (_event: any, machine: SelectOptionObject) => {
diff --git a/src/components/sizer.tsx b/src/components/sizer.tsx
@@ -68,7 +68,7 @@ export const Sizer_: React.FC = () => {
     return () => {
       window.removeEventListener("beforeunload", refreshListener);
     };
-  }, []);
+  }, [dispatch]);
 
   React.useEffect(() => {
     const urlSearchParams = new URLSearchParams(window.location.search);
@@ -99,7 +99,7 @@ export const Sizer_: React.FC = () => {
         })
         .catch((err) => console.error(err));
     }
-  }, []);
+  }, [dispatch]);
 
   // Removes search query when the state get's changed.
   React.useEffect(() => {
@@ -110,7 +110,7 @@ export const Sizer_: React.FC = () => {
       window.history.replaceState(null, "", window.location.pathname);
     }
     prevState.current = coreState;
-  }, [JSON.stringify(coreState)]);
+  }, [coreState]);
 
   /*   React.useEffect(() => {
     const tour = getSizerTour(dispatch);
diff --git a/src/hooks/modal.tsx b/src/hooks/modal.tsx
@@ -15,5 +15,5 @@ export const useCloseModal = (onClose: () => void, isOpen: boolean): void => {
         document?.removeEventListener("click", cb as any);
       };
     }
-  }, [isOpen]);
+  }, [isOpen, onClose]);
 };
diff --git a/src/hooks/odf.ts b/src/hooks/odf.ts
@@ -53,7 +53,7 @@ export const useODFPresent: UseODFPresent = () => {
         })
       );
     }
-  }, [dispatch, workloads, machineSets, allServices, platform]);
+  }, [ocs.usableCapacity, ocs.flashSize, ocs.deploymentType, ocs.dedicatedMachines, dispatch, allServices, machineSets, platform]);
   return [isODFPresent, createODFWorkload];
 };
 
@@ -74,6 +74,6 @@ export const useStorageDetails: UseStorageDetails = () => {
       0
     );
     return [isODFPresent, totalStorageRequested];
-  }, [JSON.stringify(workloads)]);
+  }, [workloads]);
   return [isODFPresent, totalStorageRequested, clusterSize];
 };
diff --git a/src/hooks/view.ts b/src/hooks/view.ts
@@ -15,6 +15,6 @@ export const useVisibilityTracker = (elementID: string): boolean => {
     return () => {
       observer.unobserve(element as Element);
     };
-  }, []);
+  }, [elementID]);
   return isVisible;
 };
diff --git a/src/utils/node.ts b/src/utils/node.ts
@@ -1,4 +1,4 @@
-import { MachineSet, Service, Workload } from "../types";
+import { Service, Workload } from "../types";
 import { Node } from "../types";
 import * as _ from "lodash";
 import {
diff --git a/yarn.lock b/yarn.lock
@@ -3886,6 +3886,11 @@ escodegen@^2.0.0:
   optionalDependencies:
     source-map "~0.6.1"
 
+eslint-plugin-react-hooks@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.5.0.tgz#5f762dfedf8b2cf431c689f533c9d3fa5dcf25ad"
+  integrity sha512-8k1gRt7D7h03kd+SAAlzXkQwWK22BnK6GKZG+FJA6BAGy22CFvl8kCIXKpVux0cCxMWDQUPqSok0LKaZ0aOcCw==
+
 eslint-scope@^5.0.0, eslint-scope@^5.1.1:
   version "5.1.1"
   resolved "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz"

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,4 @@`
`1`	`1`	`import * as React from "react";`
`2`		`-import { Link } from "react-router-dom";`
`3`	`2`	`import {`
`4`	`3`	`Modal,`
`5`	`4`	`TextContent,`