Add the eslint rule to check react hooks and fix them

Commonjava · Nov 30, 2023 · 3387ebe · 3387ebe
1 parent 8059bea
commit 3387ebe
Show file tree

Hide file tree

Showing 9 changed files with 160 additions and 166 deletions.
diff --git a/src/main/webui/.eslintrc.json b/src/main/webui/.eslintrc.json
@@ -17,7 +17,8 @@
     },
     "plugins": [
         "react",
-        "jest"
+        "jest",
+        "react-hooks"
     ],
     "settings": {
       "react": {
@@ -295,6 +296,8 @@
       "yoda": [
           2,
           "never"
-      ]
+      ],
+      "react-hooks/rules-of-hooks": 1,
+      "react-hooks/exhaustive-deps": 1
     }
 }
diff --git a/src/main/webui/package-lock.json b/src/main/webui/package-lock.json
diff --git a/src/main/webui/package.json b/src/main/webui/package.json
@@ -45,6 +45,7 @@
     "eslint": "^8.51.0",
     "eslint-plugin-jest": "^27.6.0",
     "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-webpack-plugin": "^4.0.1",
     "express": "^4.18.2",
     "fetch-mock": "^9.11.0",

diff --git a/src/main/webui/src/app/components/content/common/PackageTypeSelect.jsx b/src/main/webui/src/app/components/content/common/PackageTypeSelect.jsx
@@ -24,21 +24,18 @@ export const PackageTypeSelect = ({packageType,vauleChangeHandler}) =>{
     pkgTypes: []
   });
 
-  (function() {
-    const typeUrl = '/api/stats/package-type/keys';
-    useEffect(()=>{
-      const fetchPkgTypes = async () =>{
-        const response = await jsonRest.get(typeUrl);
-        if (response.ok){
-          const pkgTypes = await response.json();
-          setState({pkgTypes});
-        }else{
-          Utils.logMessage(response);
-        }
-      };
-      fetchPkgTypes();
-    }, []);
-  }());
+  useEffect(()=>{
+    const fetchPkgTypes = async () =>{
+      const response = await jsonRest.get('/api/stats/package-type/keys');
+      if (response.ok){
+        const pkgTypes = await response.json();
+        setState({pkgTypes});
+      }else{
+        Utils.logMessage(response);
+      }
+    };
+    fetchPkgTypes();
+  }, []);
 
   const selectedValue = packageType || "maven";
   const onChangeHandler = vauleChangeHandler || (()=>{});

diff --git a/src/main/webui/src/app/components/content/remote/RemoteEdit.jsx b/src/main/webui/src/app/components/content/remote/RemoteEdit.jsx
@@ -26,49 +26,6 @@ import {TimeUtils} from '#utils/TimeUtils.js';
 import {jsonRest} from '#utils/RestClient.js';
 import {STORE_API_BASE_URL} from "../../ComponentConstants.js";
 
-const init = (pkgType, storeName, setState) => {
-  const getUrl = `${STORE_API_BASE_URL}/${pkgType}/remote/${storeName}`;
-  useEffect(()=>{
-    const fetchStore = async () =>{
-      // get Store data
-      const response = await jsonRest.get(getUrl);
-      if (response.ok){
-        const raw = await response.json();
-        const storeView = Utils.cloneObj(raw);
-        storeView.disabled = raw.disabled === undefined ? false : raw.disabled;
-        storeView.useX509 = raw.server_certificate_pem || raw.key_certificate_pem;
-        storeView.useProxy = raw.proxy_host && true;
-        // eslint-disable-next-line no-extra-parens
-        storeView.useAuth = (storeView.useProxy && storeView.proxy_user) || storeView.user;
-
-        // get Store disablement data
-        const timeoutUrl = `/api/admin/schedule/store/${storeView.packageType}/${storeView.type}/${storeView.name}/disable-timeout`;
-        const timeoutResponse = await jsonRest.get(timeoutUrl);
-        const cloned = Utils.cloneObj(storeView);
-        if (timeoutResponse.ok){
-          const timeout = await timeoutResponse.json();
-          cloned.disableExpiration = timeout.expiration;
-        }else{
-          response.text().then(error=>Utils.logMessage(`disable timeout getting failed! Error reason: ${error}`));
-        }
-
-        // Change state and re-rendering
-        setState({
-          storeView: cloned,
-          store: raw
-        });
-      }else{
-        // TODO: find another way to do error handling
-        response.text().then(error=>setState({
-          message: error
-        }));
-      }
-    };
-
-    fetchStore();
-  }, []);
-};
-
 const CertificateSection = ({store, handleValueChange}) => <div className="sub-fields">
   {
     store.useAuth &&
@@ -113,17 +70,54 @@ export default function RemoteEdit() {
     storeView: {}
   });
   const location = useLocation();
+  const {packageType, name} = useParams();
   const path = location.pathname;
   const mode = path.match(/.*\/new$/u)? 'new':'edit';
   let [pkgType, storeName] = ["",""];
   // Give a default packageType
   let store = {"packageType": "maven", "type": "remote"};
-  if(mode === 'edit'){
-    const {packageType, name} = useParams();
-    [pkgType, storeName] = [packageType, name];
-    init(pkgType, storeName, setState);
-    store = state.store;
-  }
+  [pkgType, storeName] = [packageType, name];
+  useEffect(()=>{
+    if(mode === 'edit'){
+      const fetchStore = async () =>{
+        // get Store data
+        const response = await jsonRest.get(`${STORE_API_BASE_URL}/${pkgType}/remote/${storeName}`);
+        if (response.ok){
+          const raw = await response.json();
+          const storeView = Utils.cloneObj(raw);
+          storeView.disabled = raw.disabled === undefined ? false : raw.disabled;
+          storeView.useX509 = raw.server_certificate_pem || raw.key_certificate_pem;
+          storeView.useProxy = raw.proxy_host && true;
+          // eslint-disable-next-line no-extra-parens
+          storeView.useAuth = (storeView.useProxy && storeView.proxy_user) || storeView.user;
+          // get Store disablement data
+          const timeoutUrl = `/api/admin/schedule/store/${storeView.packageType}/${storeView.type}/${storeView.name}/disable-timeout`;
+          const timeoutResponse = await jsonRest.get(timeoutUrl);
+          const cloned = Utils.cloneObj(storeView);
+          if (timeoutResponse.ok){
+            const timeout = await timeoutResponse.json();
+            cloned.disableExpiration = timeout.expiration;
+          }else{
+            response.text().then(error=>Utils.logMessage(`disable timeout getting failed! Error reason: ${error}`));
+          }
+          // Change state and re-rendering
+          setState({
+            storeView: cloned,
+            store: raw
+          });
+        }else{
+          // TODO: find another way to do error handling
+          response.text().then(error=>setState({
+            message: error
+          }));
+        }
+      };
+
+      fetchStore();
+    }
+  }, [pkgType, storeName, mode]);
+
+  store = state.store;
 
   const handleCheckChange = (event, field) => {
     if (event.target.checked) {

diff --git a/src/main/webui/src/app/components/content/remote/RemoteList.jsx b/src/main/webui/src/app/components/content/remote/RemoteList.jsx
@@ -23,8 +23,30 @@ import {StoreListingWidget} from '../common/StoreListingWidget.jsx';
 import {Utils} from '#utils/AppUtils.js';
 import {jsonRest} from '#utils/RestClient.js';
 
+const handlers = {
+  handleDebug: (event, setState) => {
+    setState({
+      enableDebug: event.target.checked
+    });
+  },
+  handleSearch: (event, rawList, setState) => {
+    setState({
+      rawList,
+      listing: Utils.searchByKeyForNewStores(event.target.value, rawList)
+    });
+  }
+};
+
+export default function RemoteList() {
+  const {packageType} = useParams();
+  const [state, setState] = useState({
+    rawList: [],
+    listing: [],
+    disabledMap: {},
+    enableDebug: false,
+    message: ''
+  });
 
-const init = (packageType, setState) => {
   useEffect(()=>{
     const fetchdData = async ()=>{
       const response = await jsonRest.get(`${STORE_API_BASE_URL}/${packageType}/remote`);
@@ -42,6 +64,7 @@ const init = (packageType, setState) => {
           data = JSON.parse(data);
         }
         setState({
+          rawList: data.items,
           listing: data.items,
           disabledMap
         });
@@ -55,44 +78,18 @@ const init = (packageType, setState) => {
     };
     fetchdData();
   }, [packageType]);
-};
-
-const handlers = {
-  handleDebug: (event, setState) => {
-    setState({
-      enableDebug: event.target.checked
-    });
-  },
-  handleSearch: (event, rawList, setState) => {
-    setState({
-      listing: Utils.searchByKeyForNewStores(event.target.value, rawList)
-    });
-  }
-};
-
-export default function RemoteList() {
-  const {packageType} = useParams();
-  const [state, setState] = useState({
-    listing: [],
-    disabledMap: {},
-    enableDebug: false,
-    message: ''
-  });
 
-  init(packageType,setState);
-  const listing = state.listing;
-  const disMap = state.disabledMap;
   return (
     <React.Fragment>
       <ListControl
         type="remote"
         legends={options}
-        handleSearch={event => handlers.handleSearch(event, state.listing, setState)}
+        handleSearch={event => handlers.handleSearch(event, state.rawList, setState)}
         handleDebug={event => handlers.handleDebug(event, setState)}
       />
       {
-      listing?
-      <StoreListingWidget storeList={listing} disableMap={disMap} storeType="remote" />:
+      state.listing?
+      <StoreListingWidget storeList={state.listing} disableMap={state.disabledMap} storeType="remote" />:
       <div className="container-fluid">
         No content fetched!
       </div>

diff --git a/src/main/webui/src/app/components/content/remote/RemoteView.jsx b/src/main/webui/src/app/components/content/remote/RemoteView.jsx
@@ -28,43 +28,6 @@ import {TimeUtils} from '#utils/TimeUtils.js';
 import {jsonRest} from '#utils/RestClient.js';
 import {STORE_API_BASE_URL} from '../../ComponentConstants.js';
 
-const init = (pkgType, storeName, setState) => {
-  const storeUrl = `${STORE_API_BASE_URL}/${pkgType}/remote/${storeName}`;
-  useEffect(()=>{
-    const fetchStore = async () => {
-      const response = await jsonRest.get(storeUrl);
-      if (response.ok){
-        const raw = await response.json();
-        const store = Utils.cloneObj(raw);
-        store.disabled = raw.disabled === undefined ? false : raw.disabled;
-        store.useX509 = raw.server_certificate_pem || raw.key_certificate_pem;
-        store.useProxy = raw.proxy_host && true;
-        store.useAuth = store.useProxy && store.proxy_user;
-        store.useAuth = store.useAuth || store.user;
-
-        // get Store disablement data
-        const timeoutUrl = `/api/admin/schedule/store/${store.packageType}/${store.type}/${store.name}/disable-timeout`;
-        const timeoutResponse = await jsonRest.get(timeoutUrl);
-        const newStore = Utils.cloneObj(store);
-        if(timeoutResponse.ok){
-          const timeoutData = await timeoutResponse.json();
-          newStore.disableExpiration = timeoutData.expiration;
-        }
-        // Change state and re-rendering
-        setState({
-          store: newStore
-        });
-      }else{
-        response.text().then(data => {
-          Utils.logMessage(`Failed to get store data. Error reason: ${response.status}->${data}`);
-        });
-      }
-    };
-
-    fetchStore();
-  }, []);
-};
-
 const RemoteAccessSection = ({store})=> <div className="fieldset">
   <div className="detail-field">
     <label>Request Timeout:</label>
@@ -193,7 +156,41 @@ export default function RemoteView() {
     message: ''
   });
   const {packageType, name} = useParams();
-  init(packageType, name, setState);
+
+  useEffect(()=>{
+    const fetchStore = async () => {
+      const response = await jsonRest.get(`${STORE_API_BASE_URL}/${packageType}/remote/${name}`);
+      if (response.ok){
+        const raw = await response.json();
+        const store = Utils.cloneObj(raw);
+        store.disabled = raw.disabled === undefined ? false : raw.disabled;
+        store.useX509 = raw.server_certificate_pem || raw.key_certificate_pem;
+        store.useProxy = raw.proxy_host && true;
+        store.useAuth = store.useProxy && store.proxy_user;
+        store.useAuth = store.useAuth || store.user;
+
+        // get Store disablement data
+        const timeoutUrl = `/api/admin/schedule/store/${store.packageType}/${store.type}/${store.name}/disable-timeout`;
+        const timeoutResponse = await jsonRest.get(timeoutUrl);
+        const newStore = Utils.cloneObj(store);
+        if(timeoutResponse.ok){
+          const timeoutData = await timeoutResponse.json();
+          newStore.disableExpiration = timeoutData.expiration;
+        }
+        // Change state and re-rendering
+        setState({
+          store: newStore
+        });
+      }else{
+        response.text().then(data => {
+          Utils.logMessage(`Failed to get store data. Error reason: ${response.status}->${data}`);
+        });
+      }
+    };
+
+    fetchStore();
+  }, [packageType, name]);
+
   const store = state.store;
   if(!Utils.isEmptyObj(store)) {
     return (