Fix all react warnings

Author: dvaldivia

portal-ui/bindata_assetfs.go

@@ -63,7 +63,7 @@ const ProtectedRoute = ({
         }
       })
       .catch(() => setSessionLoading(false));
-  }, [saveSessionResponse]);
+  }, [saveSessionResponse, consoleOperatorMode, userLoggedIn]);
 
   // if we still trying to retrieve user session render nothing
   if (sessionLoading) {

portal-ui/src/ProtectedRoutes.tsx

@@ -14,7 +14,7 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-import React, { useState, useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import Grid from "@material-ui/core/Grid";
 import TextField from "@material-ui/core/TextField";
@@ -33,7 +33,6 @@ import {
   searchField,
 } from "../../../../Common/FormComponents/common/styleLibrary";
 import PageHeader from "../../../../Common/PageHeader/PageHeader";
-import storage from "local-storage-fallback";
 import { isNullOrUndefined } from "util";
 import { Button, Input } from "@material-ui/core";
 import * as reactMoment from "react-moment";
@@ -166,6 +165,29 @@ const ListObjects = ({
     const bucketName = match.params["bucket"];
     const internalPaths = match.params[0];
 
+    const verifyIfIsFile = () => {
+      const bucketName = match.params["bucket"];
+      const internalPaths = match.params[0];
+
+      api
+        .invoke(
+          "GET",
+          `/api/v1/buckets/${bucketName}/objects?prefix=${internalPaths}`
+        )
+        .then((res: BucketObjectsList) => {
+          //It is a file since it has elements in the object, setting file flag and waiting for component mount
+          if (res.objects !== null) {
+            setLastAsFile();
+          } else {
+            // It is a folder, we remove loader
+            setLoading(false);
+          }
+        })
+        .catch((err: any) => {
+          setLoading(false);
+        });
+    };
+
     let extraPath = "";
     if (internalPaths) {
       extraPath = `?prefix=${internalPaths}/`;
@@ -186,7 +208,7 @@ const ListObjects = ({
       .catch((err: any) => {
         setLoading(false);
       });
-  }, [loading, match]);
+  }, [loading, match, setLastAsFile]);
 
   useEffect(() => {
     const url = get(match, "url", "/object-browser");
@@ -195,29 +217,6 @@ const ListObjects = ({
     }
   }, [match, routesList, setAllRoutes]);
 
-  const verifyIfIsFile = () => {
-    const bucketName = match.params["bucket"];
-    const internalPaths = match.params[0];
-
-    api
-      .invoke(
-        "GET",
-        `/api/v1/buckets/${bucketName}/objects?prefix=${internalPaths}`
-      )
-      .then((res: BucketObjectsList) => {
-        //It is a file since it has elements in the object, setting file flag and waiting for component mount
-        if (res.objects !== null) {
-          setLastAsFile();
-        } else {
-          // It is a folder, we remove loader
-          setLoading(false);
-        }
-      })
-      .catch((err: any) => {
-        setLoading(false);
-      });
-  };
-
   const closeDeleteModalAndRefresh = (refresh: boolean) => {
     setDeleteOpen(false);
 
@@ -245,7 +244,6 @@ const ListObjects = ({
     if (isNullOrUndefined(e) || isNullOrUndefined(e.target)) {
       return;
     }
-    const token: string = storage.getItem("token")!;
     e.preventDefault();
     let file = e.target.files[0];
     const fileName = file.name;

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx

@@ -194,7 +194,7 @@ const ObjectDetails = ({
           setLoadObjectData(false);
         });
     }
-  }, [loadObjectData]);
+  }, [loadObjectData, bucketName, pathInBucket]);
 
   let tagKeys: string[] = [];
 
@@ -341,6 +341,11 @@ const ObjectDetails = ({
       )}
       <Grid container>
         <Grid item xs={12} className={classes.container}>
+          {error !== "" && (
+            <Grid item xs={12}>
+              {error}
+            </Grid>
+          )}
           <Grid item xs={12} className={classes.obTitleSection}>
             <div>
               <BrowserBreadcrumbs />

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/ObjectDetails.tsx

@@ -50,7 +50,7 @@ const SetLegalHoldModal = ({
   useEffect(() => {
     const status = get(actualInfo, "legal_hold_status", "OFF");
     setLegalHoldEnabled(status === "ON");
-  }, []);
+  }, [actualInfo]);
 
   const onSubmit = (e: React.FormEvent) => {
     e.preventDefault();

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/SetLegalHoldModal.tsx

@@ -77,7 +77,7 @@ const SetRetention = ({
       setType(objectInfo.retention_mode.toLowerCase());
       setAlreadyConfigured(true);
     }
-  }, []);
+  }, [objectInfo]);
 
   const dateElement = useRef<IRefObject>(null);
 

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/SetRetention.tsx

@@ -42,13 +42,13 @@ const ShareFile = ({
   bucketName,
   dataObject,
 }: IShareFileProps) => {
-  const [shareURL, setShareURL] = useState("");
-  const [isLoadingFile, setIsLoadingFile] = useState(false);
-  const [error, setError] = useState("");
-  const [selectedDate, setSelectedDate] = useState("");
-  const [dateValid, setDateValid] = useState(true);
-  const [openSnack, setOpenSnack] = useState(false);
-  const [snackBarMessage, setSnackbarMessage] = useState("");
+  const [shareURL, setShareURL] = useState<string>("");
+  const [isLoadingFile, setIsLoadingFile] = useState<boolean>(false);
+  const [error, setError] = useState<string>("");
+  const [selectedDate, setSelectedDate] = useState<string>("");
+  const [dateValid, setDateValid] = useState<boolean>(true);
+  const [openSnack, setOpenSnack] = useState<boolean>(false);
+  const [snackBarMessage, setSnackbarMessage] = useState<string>("");
 
   const showSnackBarMessage = (text: string) => {
     setSnackbarMessage(text);
@@ -66,13 +66,13 @@ const ShareFile = ({
       setSelectedDate(newDate);
       return;
     }
-    setShareURL("");
     setSelectedDate("");
   };
 
   useEffect(() => {
     if (dateValid) {
       setIsLoadingFile(true);
+      setShareURL("");
 
       const slDate = new Date(`${selectedDate}T23:59:59`);
       const currDate = new Date();
@@ -116,9 +116,7 @@ const ShareFile = ({
         });
       return;
     }
-
-    setShareURL("");
-  }, [dataObject, selectedDate]);
+  }, [dataObject, selectedDate, bucketName, dateValid, setShareURL]);
 
   const snackBarAction = (
     <Button

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/ShareFile.tsx

@@ -72,7 +72,7 @@ const SetAccessPolicy = ({
 
   useEffect(() => {
     setAccessPolicy(actualPolicy);
-  }, []);
+  }, [setAccessPolicy, actualPolicy]);
 
   return (
     <ModalWrapper

portal-ui/src/screens/Console/Buckets/ViewBucket/SetAccessPolicy.tsx

@@ -229,7 +229,7 @@ const ViewBucket = ({ classes, match }: IViewBucketProps) => {
   const [isVersioned, setIsVersioned] = useState<boolean>(false);
   const [encryptionEnabled, setEncryptionEnabled] = useState<boolean>(false);
 
-  const fetchEvents = () => {
+  const fetchEvents = useCallback(() => {
     setLoadingBucket(true);
     const bucketName = match.params["bucketName"];
     api
@@ -263,7 +263,7 @@ const ViewBucket = ({ classes, match }: IViewBucketProps) => {
       .catch((err: any) => {
         setError(err);
       });
-  };
+  }, [match]);
 
   const fetchBucketsSize = useCallback(() => {
     const bucketName = match.params["bucketName"];
@@ -287,7 +287,7 @@ const ViewBucket = ({ classes, match }: IViewBucketProps) => {
         setLoadingSize(false);
         setErrorSize(err);
       });
-  }, []);
+  }, [match]);
 
   const loadInfo = useCallback(() => {
     const bucketName = match.params["bucketName"];
@@ -305,7 +305,7 @@ const ViewBucket = ({ classes, match }: IViewBucketProps) => {
       });
   }, [match]);
 
-  const fetchBucketEncryptionInfo = () => {
+  const fetchBucketEncryptionInfo = useCallback(() => {
     const bucketName = match.params["bucketName"];
     api
       .invoke("GET", `/api/v1/buckets/${bucketName}/encryption/info`)
@@ -317,7 +317,7 @@ const ViewBucket = ({ classes, match }: IViewBucketProps) => {
       .catch((err) => {
         console.log(err);
       });
-  };
+  }, [match]);
 
   const closeAddModalAndRefresh = () => {
     setAccessPolicyScreenOpen(false);
@@ -336,7 +336,7 @@ const ViewBucket = ({ classes, match }: IViewBucketProps) => {
     fetchEvents();
     fetchBucketsSize();
     fetchBucketEncryptionInfo();
-  }, [loadInfo]);
+  }, [loadInfo, fetchEvents, fetchBucketsSize, fetchBucketEncryptionInfo]);
 
   const bucketName = match.params["bucketName"];
 
@@ -439,6 +439,16 @@ const ViewBucket = ({ classes, match }: IViewBucketProps) => {
             {error}
           </Grid>
         )}
+        {errBucket !== "" && (
+          <Grid item xs={12}>
+            {errBucket}
+          </Grid>
+        )}
+        {errorSize !== "" && (
+          <Grid item xs={12}>
+            {errorSize}
+          </Grid>
+        )}
         <Grid item xs={12} className={classes.container}>
           <Grid item xs={12}>
             <div className={classes.headerContainer}>

portal-ui/src/screens/Console/Buckets/ViewBucket/ViewBucket.tsx

@@ -113,7 +113,7 @@ const DateSelector = forwardRef(
     useEffect(() => {
       const [isValid, dateString] = validDate(year, month, day);
       onDateChange(dateString, isValid);
-    }, [month, day, year]);
+    }, [month, day, year, onDateChange]);
 
     const resetDate = () => {
       setMonth("");