ui: Fix useEffect dependency warnings.

ui/src/components/Admin.tsx

@@ -12,6 +12,7 @@ interface IProps {
 function Admin(props: PropsWithChildren<IProps>) {
   const [admin, setAdmin] = useState<boolean>(false);
 
+  useEffect(() => {
     const setIsAdmin = () => {
       if (!props.isDeviceAdmin && !props.isGatewayAdmin && !props.isTenantAdmin) {
         setAdmin(SessionStore.isAdmin());
@@ -34,7 +35,6 @@ function Admin(props: PropsWithChildren<IProps>) {
       }
     };
 
-  useEffect(() => {
     SessionStore.on("change", setIsAdmin);
     setIsAdmin();
 

ui/src/components/DataTable.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 
 import { Table } from "antd";
 import { ColumnsType } from "antd/es/table";
@@ -23,7 +23,8 @@ function DataTable(props: IProps) {
   const [rows, setRows] = useState<object[]>([]);
   const [loading, setLoading] = useState<boolean>(true);
 
-  const onChangePage = (page: number, pz?: number | void) => {
+  const onChangePage = useCallback(
+    (page: number, pz?: number | void) => {
       setLoading(true);
 
       if (!pz) {
@@ -37,7 +38,9 @@ function DataTable(props: IProps) {
         setPageSize(pz || 0);
         setLoading(false);
       });
-  };
+    },
+    [props, pageSize],
+  );
 
   const onShowSizeChange = (page: number, pageSize: number) => {
     onChangePage(page, pageSize);
@@ -53,7 +56,7 @@ function DataTable(props: IProps) {
 
   useEffect(() => {
     onChangePage(currentPage, pageSize);
-  }, [props, currentPage, pageSize]);
+  }, [props, currentPage, pageSize, onChangePage]);
 
   const { getPage, refreshKey, ...otherProps } = props;
   let loadingProps = undefined;

ui/src/components/Menu.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 
 import { Menu, MenuProps, Typography } from "antd";
@@ -67,7 +67,7 @@ function SideMenu() {
     navigate(`/tenants/${value}`);
   };
 
-  const parseLocation = () => {
+  const parseLocation = useCallback(() => {
     const path = location.pathname;
     const tenantRe = /\/tenants\/([\w-]{36})/g;
     const match = tenantRe.exec(path);
@@ -134,7 +134,7 @@ function SideMenu() {
     if (/\/tenants\/[\w-]{36}\/applications.*/g.exec(path)) {
       setSelectedKey("tenant-applications");
     }
-  };
+  }, [location.pathname, tenantId]);
 
   useEffect(() => {
     SessionStore.on("tenant.change", setTenant);
@@ -150,11 +150,11 @@ function SideMenu() {
     return () => {
       SessionStore.removeListener("tenant.change", setTenant);
     };
-  }, []);
+  }, [parseLocation]);
 
   useEffect(() => {
     parseLocation();
-  }, [location]);
+  }, [location, parseLocation]);
 
   let items: MenuProps["items"] = [];
 

ui/src/views/applications/ApplicationLoader.tsx

@@ -26,14 +26,6 @@ function ApplicationLoader(props: IProps) {
   const [measurementKeys, setMeasurementKeys] = useState<string[]>([]);
 
   useEffect(() => {
-    ApplicationStore.on("change", loadApplication);
-    loadApplication();
-
-    return () => {
-      ApplicationStore.removeAllListeners("change");
-    };
-  }, [applicationId]);
-
     const loadApplication = () => {
       let req = new GetApplicationRequest();
       req.setId(applicationId!);
@@ -44,6 +36,14 @@ function ApplicationLoader(props: IProps) {
       });
     };
 
+    ApplicationStore.on("change", loadApplication);
+    loadApplication();
+
+    return () => {
+      ApplicationStore.removeAllListeners("change");
+    };
+  }, [applicationId]);
+
   const app = application;
   if (!app) {
     return null;

ui/src/views/applications/ListIntegrations.tsx

@@ -32,14 +32,6 @@ function ListIntegrations(props: IProps) {
   const [available, setAvailable] = useState<any[]>([]);
 
   useEffect(() => {
-    ApplicationStore.on("integration.delete", loadIntegrations);
-    loadIntegrations();
-
-    return () => {
-      ApplicationStore.removeAllListeners("integration.delete");
-    };
-  }, []);
-
     const loadIntegrations = () => {
       let req = new ListIntegrationsRequest();
       req.setApplicationId(props.application.getId());
@@ -138,6 +130,14 @@ function ListIntegrations(props: IProps) {
       });
     };
 
+    ApplicationStore.on("integration.delete", loadIntegrations);
+    loadIntegrations();
+
+    return () => {
+      ApplicationStore.removeAllListeners("integration.delete");
+    };
+  }, [props.application]);
+
   return (
     <Row gutter={24}>
       {configured}

ui/src/views/devices/DeviceDashboard.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import { Link } from "react-router-dom";
 
 import moment from "moment";
@@ -33,29 +33,8 @@ function DeviceDashboard(props: IProps) {
   const [deviceLinkMetrics, setDeviceLinkMetrics] = useState<GetDeviceLinkMetricsResponse | undefined>(undefined);
   const [deviceLinkMetricsLoaded, setDeviceLinkMetricsLoaded] = useState<boolean>(false);
 
-  useEffect(() => {
+  const loadDeviceMetrics = useCallback(
-    loadMetrics();
+    (start: Date, end: Date, agg: Aggregation) => {
-  }, [props, metricsAggregation]);
-
-  const loadMetrics = () => {
-    const agg = metricsAggregation;
-    const end = moment();
-    let start = moment();
-
-    if (agg === Aggregation.DAY) {
-      start = start.subtract(30, "days");
-    } else if (agg === Aggregation.HOUR) {
-      start = start.subtract(24, "hours");
-    } else if (agg === Aggregation.MONTH) {
-      start = start.subtract(12, "months");
-    }
-
-    setDeviceLinkMetricsLoaded(false);
-    loadLinkMetrics(start.toDate(), end.toDate(), agg);
-    loadDeviceMetrics(start.toDate(), end.toDate(), agg);
-  };
-
-  const loadDeviceMetrics = (start: Date, end: Date, agg: Aggregation) => {
       let startPb = new Timestamp();
       let endPb = new Timestamp();
 
@@ -71,9 +50,12 @@ function DeviceDashboard(props: IProps) {
       DeviceStore.getMetrics(req, (resp: GetDeviceMetricsResponse) => {
         setDeviceMetrics(resp);
       });
-  };
+    },
+    [props.device],
+  );
 
-  const loadLinkMetrics = (start: Date, end: Date, agg: Aggregation) => {
+  const loadLinkMetrics = useCallback(
+    (start: Date, end: Date, agg: Aggregation) => {
       let startPb = new Timestamp();
       let endPb = new Timestamp();
 
@@ -90,7 +72,31 @@ function DeviceDashboard(props: IProps) {
         setDeviceLinkMetrics(resp);
         setDeviceLinkMetricsLoaded(true);
       });
-  };
+    },
+    [props.device],
+  );
+
+  const loadMetrics = useCallback(() => {
+    const agg = metricsAggregation;
+    const end = moment();
+    let start = moment();
+
+    if (agg === Aggregation.DAY) {
+      start = start.subtract(30, "days");
+    } else if (agg === Aggregation.HOUR) {
+      start = start.subtract(24, "hours");
+    } else if (agg === Aggregation.MONTH) {
+      start = start.subtract(12, "months");
+    }
+
+    setDeviceLinkMetricsLoaded(false);
+    loadLinkMetrics(start.toDate(), end.toDate(), agg);
+    loadDeviceMetrics(start.toDate(), end.toDate(), agg);
+  }, [loadLinkMetrics, loadDeviceMetrics, metricsAggregation]);
+
+  useEffect(() => {
+    loadMetrics();
+  }, [props, metricsAggregation, loadMetrics]);
 
   const onMetricsAggregationChange = (e: RadioChangeEvent) => {
     setMetricsAggregation(e.target.value);

ui/src/views/devices/DeviceLayout.tsx

@@ -46,14 +46,6 @@ function DeviceLayout(props: IProps) {
   const [lastSeenAt, setLastSeenAt] = useState<Date | undefined>(undefined);
 
   useEffect(() => {
-    DeviceStore.on("change", loadDevice);
-    loadDevice();
-
-    return () => {
-      DeviceStore.removeAllListeners("change");
-    };
-  }, [devEui]);
-
     const loadDevice = () => {
       let req = new GetDeviceRequest();
       req.setDevEui(devEui!);
@@ -73,6 +65,14 @@ function DeviceLayout(props: IProps) {
       });
     };
 
+    DeviceStore.on("change", loadDevice);
+    loadDevice();
+
+    return () => {
+      DeviceStore.removeAllListeners("change");
+    };
+  }, [devEui]);
+
   const deleteDevice = () => {
     let req = new DeleteDeviceRequest();
     req.setDevEui(devEui!);

ui/src/views/devices/DeviceQueue.tsx

@@ -3,7 +3,7 @@ import React, { useState } from "react";
 import { Struct } from "google-protobuf/google/protobuf/struct_pb";
 
 import { Switch, notification } from "antd";
-import { Button, Tabs, Space, Card, Row, Form, Input, InputNumber, Checkbox, Popconfirm } from "antd";
+import { Button, Tabs, Space, Card, Row, Form, Input, InputNumber, Popconfirm } from "antd";
 import { ColumnsType } from "antd/es/table";
 import { RedoOutlined, DeleteOutlined } from "@ant-design/icons";
 import { Buffer } from "buffer";

ui/src/views/gateways/GatewayDashboard.tsx

@@ -23,7 +23,7 @@ interface IProps {
 }
 
 function GatewayDashboard(props: IProps) {
-  const [metricsAggregation, setMetricsAggregation] = useState<Aggregation>(Aggregation.DAY);
+  const [metricsAggregation] = useState<Aggregation>(Aggregation.DAY);
   const [gatewayMetrics, setGatewayMetrics] = useState<GetGatewayMetricsResponse | undefined>(undefined);
 
   useEffect(() => {

ui/src/views/gateways/GatewayForm.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 
 import { Form, Input, InputNumber, Row, Col, Button, Tabs, Space, Card } from "antd";
 import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
@@ -24,6 +24,29 @@ function GatewayForm(props: IProps) {
   const [lonValue, setLonValue] = useState<number>(0);
   const [locationPending, setLocationPending] = useState<boolean>(false);
 
+  const setLocationFields = useCallback(
+    (lat: number, lon: number) => {
+      form.setFieldsValue({
+        location: {
+          latitude: lat,
+          longitude: lon,
+        },
+      });
+    },
+    [form],
+  );
+
+  const getCurrentLocation = useCallback(() => {
+    setLocationPending(true);
+
+    LocationStore.getLocation((loc: [number, number]) => {
+      setLatValue(loc[0]);
+      setLonValue(loc[1]);
+      setLocationPending(false);
+      setLocationFields(loc[0], loc[1]);
+    });
+  }, [setLocationFields]);
+
   useEffect(() => {
     if (!props.update) {
       getCurrentLocation();
@@ -34,18 +57,7 @@ function GatewayForm(props: IProps) {
         setLonValue(loc.getLongitude());
       }
     }
-  }, [props]);
+  }, [props, getCurrentLocation]);
-
-  const getCurrentLocation = () => {
-    setLocationPending(true);
-
-    LocationStore.getLocation((loc: [number, number]) => {
-      setLatValue(loc[0]);
-      setLonValue(loc[1]);
-      setLocationPending(false);
-      setLocationFields(loc[0], loc[1]);
-    });
-  };
 
   const onFinish = (values: Gateway.AsObject) => {
     const v = Object.assign(props.initialValues.toObject(), values);
@@ -79,15 +91,6 @@ function GatewayForm(props: IProps) {
     setLocationFields(loc.lat, loc.lng);
   };
 
-  const setLocationFields = (lat: number, lon: number) => {
-    form.setFieldsValue({
-      location: {
-        latitude: lat,
-        longitude: lon,
-      },
-    });
-  };
-
   const location: [number, number] = [latValue, lonValue];
 
   return (