chore: CE-1274

frontend/src/app/common/validation-checkbox-group.tsx

@@ -34,7 +34,7 @@ export const ValidationCheckboxGroup: FC<ValidationCheckboxGroupProps> = ({
 
   useEffect(() => {
     setCheckedItems(checkedValues);
-  }, [checkedValues.length]);
+  }, [checkedValues, checkedValues.length]);
 
   return (
     <div id="checkbox-div">

frontend/src/app/common/validation-phone-input.tsx

@@ -21,7 +21,7 @@ export const ValidationPhoneInput: FC<ValidationPhoneInputProps> = ({
   international,
 }) => {
   const errClass = errMsg === "" ? "" : "error-message";
-  const calulatedClass = errMsg === "" ? "comp-form-control" : "comp-form-control" + " error-border";
+  const calulatedClass = errMsg === "" ? "comp-form-control" : "comp-form-control error-border";
   return (
     <div>
       <div className={className}>

frontend/src/app/components/common/attachments-carousel.tsx

@@ -64,7 +64,7 @@ export const AttachmentsCarousel: FC<Props> = ({
     if (complaintIdentifier) {
       dispatch(getAttachments(complaintIdentifier, attachmentType));
     }
-  }, [complaintIdentifier, dispatch]);
+  }, [attachmentType, complaintIdentifier, dispatch]);
 
   //-- when the component unmounts clear the attachments from redux
   useEffect(() => {
@@ -82,15 +82,15 @@ export const AttachmentsCarousel: FC<Props> = ({
     if (typeof onSlideCountChange === "function") {
       onSlideCountChange(slides.length);
     }
-  }, [slides.length]);
+  }, [onSlideCountChange, slides.length]);
 
   // Clear all pending upload attachments
   useEffect(() => {
     if (cancelPendingUpload) {
       setSlides([]);
       if (setCancelPendingUpload) setCancelPendingUpload(false); //reset cancelPendingUpload
     }
-  }, [cancelPendingUpload]);
+  }, [cancelPendingUpload, setCancelPendingUpload]);
 
   function sortAttachmentsByName(comsObjects: COMSObject[]): COMSObject[] {
     // Create a copy of the array using slice() or spread syntax

frontend/src/app/components/common/comp-coordinate-input.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect, useState } from "react";
+import { FC, useCallback, useEffect, useState } from "react";
 import Option from "@apptypes/app/option";
 import { CompRadioGroup } from "./comp-radiogroup";
 import { bcBoundaries, bcUtmBoundaries, formatLatLongCoordinate } from "@common/methods";
@@ -46,141 +46,158 @@ export const CompCoordinateInput: FC<Props> = ({
   const [zoneCoordinate, setZoneCoordinate] = useState<Option | undefined | null>();
   const [zoneErrorMsg, setZoneErrorMsg] = useState<string | undefined>("");
 
-  const handleGeoPointChange = (latitude: string, longitude: string) => {
-    setYCoordinateErrorMsg("");
-    setXCoordinateErrorMsg("");
-    setYCoordinate(latitude);
-    setXCoordinate(longitude);
+  const handleGeoPointChange = useCallback(
+    (latitude: string, longitude: string) => {
+      setYCoordinateErrorMsg("");
+      setXCoordinateErrorMsg("");
+      setYCoordinate(latitude);
+      setXCoordinate(longitude);
 
-    // handling removal of coordinates here
-    if ([latitude?.trim(), longitude?.trim()].every((item) => item === "")) {
-      throwError(false);
-      syncCoordinates("", "");
-      return;
-    }
-    const regex = /^-?(?:\d+(\.\d+)?|.\d+)$/;
-    let hasErrors = false;
-    if (!regex.exec(latitude)) {
-      setYCoordinateErrorMsg("Latitude value must be a number");
-      hasErrors = true;
-    }
-    if (!regex.exec(longitude)) {
-      setXCoordinateErrorMsg("Longitude value must be a number");
-      hasErrors = true;
-    }
-    if (latitude && !Number.isNaN(latitude)) {
-      const item = parseFloat(latitude);
-      if (item > bcBoundaries.maxLatitude || item < bcBoundaries.minLatitude) {
-        setYCoordinateErrorMsg(
-          `Latitude value must be between ${bcBoundaries.maxLatitude} and ${bcBoundaries.minLatitude} degrees`,
-        );
+      // handling removal of coordinates here
+      if ([latitude?.trim(), longitude?.trim()].every((item) => item === "")) {
+        throwError(false);
+        syncCoordinates("", "");
+        return;
+      }
+      const regex = /^-?(?:\d+(\.\d+)?|.\d+)$/;
+      let hasErrors = false;
+      if (!regex.exec(latitude)) {
+        setYCoordinateErrorMsg("Latitude value must be a number");
         hasErrors = true;
       }
-    }
-    if (longitude && !Number.isNaN(longitude) && longitude.trim() !== "-") {
-      const item = parseFloat(longitude);
-      if (item > bcBoundaries.maxLongitude || item < bcBoundaries.minLongitude) {
-        setXCoordinateErrorMsg(
-          `Longitude value must be between ${bcBoundaries.minLongitude} and ${bcBoundaries.maxLongitude} degrees`,
-        );
+      if (!regex.exec(longitude)) {
+        setXCoordinateErrorMsg("Longitude value must be a number");
         hasErrors = true;
-      } else {
-        syncCoordinates(latitude, longitude);
       }
-    }
-    throwError(hasErrors);
-  };
+      if (latitude && !Number.isNaN(latitude)) {
+        const item = parseFloat(latitude);
+        if (item > bcBoundaries.maxLatitude || item < bcBoundaries.minLatitude) {
+          setYCoordinateErrorMsg(
+            `Latitude value must be between ${bcBoundaries.maxLatitude} and ${bcBoundaries.minLatitude} degrees`,
+          );
+          hasErrors = true;
+        }
+      }
+      if (longitude && !Number.isNaN(longitude) && longitude.trim() !== "-") {
+        const item = parseFloat(longitude);
+        if (item > bcBoundaries.maxLongitude || item < bcBoundaries.minLongitude) {
+          setXCoordinateErrorMsg(
+            `Longitude value must be between ${bcBoundaries.minLongitude} and ${bcBoundaries.maxLongitude} degrees`,
+          );
+          hasErrors = true;
+        } else {
+          syncCoordinates(latitude, longitude);
+        }
+      }
+      throwError(hasErrors);
+    },
+    [syncCoordinates, throwError],
+  );
 
-  const handleUtmGeoPointChange = (easting: string, northing: string, zone: string) => {
-    setEastingCoordinateErrorMsg("");
-    setNorthingCoordinateErrorMsg("");
-    setZoneErrorMsg("");
-    setYCoordinateErrorMsg("");
-    setXCoordinateErrorMsg("");
+  const handleUtmGeoPointChange = useCallback(
+    (easting: string, northing: string, zone: string) => {
+      setEastingCoordinateErrorMsg("");
+      setNorthingCoordinateErrorMsg("");
+      setZoneErrorMsg("");
+      setYCoordinateErrorMsg("");
+      setXCoordinateErrorMsg("");
 
-    setEastingCoordinate(easting);
-    setNorthingCoordinate(northing);
-    setZoneCoordinate(zone ? ({ label: zone, value: zone } as Option) : undefined);
+      setEastingCoordinate(easting);
+      setNorthingCoordinate(northing);
+      setZoneCoordinate(zone ? ({ label: zone, value: zone } as Option) : undefined);
 
-    if (
-      [easting.toString().trim(), northing.toString().trim()].every((item) => item === "") &&
-      [undefined, ""].includes(zone)
-    ) {
-      throwError(false);
-      syncCoordinates("", "");
-      return;
-    }
+      const isEmpty = (value: string | undefined) => [undefined, ""].includes(value?.toString().trim());
+      if (isEmpty(easting) && isEmpty(northing) && isEmpty(zone)) {
+        throwError(false);
+        syncCoordinates("", "");
+        return;
+      }
 
-    const regex = /^-?(?:\d+(\.\d+)?|.\d+)$/;
-    let hasErrors = false;
-    let lat;
-    let lng;
+      const regex = /^-?(?:\d+(\.\d+)?|.\d+)$/;
+      let hasErrors = false;
+      let lat;
+      let lng;
+      const errorTextSuffixLat = `The corresponding latitude value must be between ${bcBoundaries.minLatitude} and ${bcBoundaries.maxLatitude} degrees`;
+      const errorTextSuffixLng = `The corresponding longitude value must be between ${bcBoundaries.minLongitude} and ${bcBoundaries.maxLongitude} degrees`;
+      const eastingErrorText =
+        `Invalid Easting. Easting value must be between 290220.6 and 720184.9 metres. ` + errorTextSuffixLng;
+      const northingErrorText =
+        `Invalid Northing. Northing value must be between 5346051.7 and 6655120.8 metres. ` + errorTextSuffixLat;
+      const zoneErrorText = `Invalid Zone. Must be in 7-11 range`;
 
-    const errorTextSuffixLat = `The corresponding latitude value must be between ${bcBoundaries.minLatitude} and ${bcBoundaries.maxLatitude} degrees`;
-    const errorTextSuffixLng = `The corresponding longitude value must be between ${bcBoundaries.minLongitude} and ${bcBoundaries.maxLongitude} degrees`;
-    const eastingErrorText =
-      `Invalid Easting. Easting value must be between 290220.6 and 720184.9 metres. ` + errorTextSuffixLng;
-    const northingErrorText =
-      `Invalid Northing. Northing value must be between 5346051.7 and 6655120.8 metres. ` + errorTextSuffixLat;
-    const zoneErrorText = `Invalid Zone. Must be in 7-11 range`;
+      let utm = new utmObj();
 
-    let utm = new utmObj();
-    if (!regex.exec(easting)) {
-      setEastingCoordinateErrorMsg("Easting value must be a number");
-      hasErrors = true;
-    }
-    if (!regex.exec(northing)) {
-      setNorthingCoordinateErrorMsg("Northing value must be a number");
-      hasErrors = true;
-    }
+      const validateCoordinate = (
+        value: string,
+        setErrorMsg: (msg: string) => void,
+        errorMsg: string,
+        min: number,
+        max: number,
+      ) => {
+        if (!regex.exec(value)) {
+          setErrorMsg("Value must be a number");
+          return true;
+        }
+        const numValue = parseInt(value);
+        if (numValue > max || numValue < min) {
+          setErrorMsg(errorMsg);
+          return true;
+        }
+        return false;
+      };
 
-    if (easting && !Number.isNaN(easting)) {
-      const item = parseInt(easting);
-      if (item > bcUtmBoundaries.maxEasting || item < bcUtmBoundaries.minEasting) {
-        setEastingCoordinateErrorMsg(eastingErrorText);
-        hasErrors = true;
-      }
-    }
+      hasErrors =
+        validateCoordinate(
+          easting,
+          setEastingCoordinateErrorMsg,
+          eastingErrorText,
+          bcUtmBoundaries.minEasting,
+          bcUtmBoundaries.maxEasting,
+        ) || hasErrors;
+      hasErrors =
+        validateCoordinate(
+          northing,
+          setNorthingCoordinateErrorMsg,
+          northingErrorText,
+          bcUtmBoundaries.minNorthing,
+          bcUtmBoundaries.maxNorthing,
+        ) || hasErrors;
+
+      const isValidZone = (zone: string | undefined): boolean => {
+        return (
+          (typeof zone === "string" &&
+            !Number.isNaN(Number(zone)) &&
+            utmZones?.map((item) => item.value).includes(zone)) ||
+          false
+        );
+      };
 
-    if (northing && !Number.isNaN(northing)) {
-      const item = parseInt(northing);
-      if (item > bcUtmBoundaries.maxNorthing || item < bcUtmBoundaries.minNorthing) {
-        setNorthingCoordinateErrorMsg(northingErrorText);
+      if (!isValidZone(zone)) {
+        setZoneErrorMsg(zoneErrorText);
         hasErrors = true;
       }
-    }
 
-    if (
-      zone &&
-      !Number.isNaN(zone) &&
-      utmZones
-        ?.map((item) => {
-          return item.value;
-        })
-        .includes(zone.toString())
-    ) {
-    } else {
-      setZoneErrorMsg(zoneErrorText);
-      hasErrors = true;
-    }
+      if (!hasErrors && easting && !Number.isNaN(easting) && northing && !Number.isNaN(northing)) {
+        const latLongCoordinates = utm.convertUtmToLatLng(easting, northing, zone, "N");
+        lat = latLongCoordinates.lat.toFixed(7);
+        lng = latLongCoordinates.lng.toFixed(7);
 
-    if (hasErrors === false && easting && !Number.isNaN(easting) && northing && !Number.isNaN(northing)) {
-      const latLongCoordinates = utm.convertUtmToLatLng(easting, northing, zone, "N");
-      lat = latLongCoordinates.lat.toFixed(7);
-      if (lat > bcBoundaries.maxLatitude || lat < bcBoundaries.minLatitude) {
-        setNorthingCoordinateErrorMsg(northingErrorText);
-        hasErrors = true;
-      }
-      lng = latLongCoordinates.lng.toFixed(7);
-      if (lng > bcBoundaries.maxLongitude || lng < bcBoundaries.minLongitude) {
-        setEastingCoordinateErrorMsg(eastingErrorText);
-        hasErrors = true;
-      } else {
-        syncCoordinates(lat, lng);
+        if (lat < bcBoundaries.minLatitude || lat > bcBoundaries.maxLatitude) {
+          setNorthingCoordinateErrorMsg(northingErrorText);
+          hasErrors = true;
+        }
+
+        if (lng < bcBoundaries.minLongitude || lng > bcBoundaries.maxLongitude) {
+          setEastingCoordinateErrorMsg(eastingErrorText);
+          hasErrors = true;
+        } else {
+          syncCoordinates(lat, lng);
+        }
       }
-    }
-    throwError(hasErrors);
-  };
+      throwError(hasErrors);
+    },
+    [syncCoordinates, throwError, utmZones],
+  );
 
   const handleChangeCoordinateType = (coordinateType: string) => {
     if (coordinateType === COORDINATE_TYPES.UTM) {
@@ -245,7 +262,8 @@ export const CompCoordinateInput: FC<Props> = ({
         }
       }
     }
-  }, [initXCoordinate, initYCoordinate]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [coordinateType, initXCoordinate, initYCoordinate]);
 
   const formatUtmCoordinate = (input: string | undefined): string => {
     const regex = /^-?(?:\d+(\.\d+)?|.\d+)$/;

frontend/src/app/components/common/complaint-pagination.tsx

@@ -38,7 +38,7 @@ const ComplaintPagination: React.FC<ComplaintPaginationProps> = ({
   useEffect(() => {
     // Update the local state whenever selectedValue changes so that the pagination starts at 1 again.
     onPageChange(1);
-  }, [totalItems]);
+  }, [onPageChange, totalItems]);
 
   const handleEnterKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {
     if (event.key === "Enter") {

frontend/src/app/components/containers/admin/feature-management.tsx

@@ -11,14 +11,6 @@ export const FeatureManagement: FC = () => {
 
   const [featureData, setFeatureData] = useState<any[]>([]);
 
-  const getAllFeatureFlags = async () => {
-    const parameters = generateApiParameters(`${config.API_BASE_URL}/v1/feature-flag/all`);
-    const response: any = await get(dispatch, parameters);
-    if (response) {
-      setFeatureData(response);
-    }
-  };
-
   const updateFeatureFlag = async (id: string, active_ind: boolean) => {
     try {
       const update = {
@@ -36,8 +28,15 @@ export const FeatureManagement: FC = () => {
   };
 
   useEffect(() => {
+    const getAllFeatureFlags = async () => {
+      const parameters = generateApiParameters(`${config.API_BASE_URL}/v1/feature-flag/all`);
+      const response: any = await get(dispatch, parameters);
+      if (response) {
+        setFeatureData(response);
+      }
+    };
     getAllFeatureFlags();
-  }, []);
+  }, [dispatch]);
 
   const handleChange = (item: any, i: number) => {
     const updateFeatureData = [...featureData];