diff --git a/interface/src/app/main/Dashboard.tsx b/interface/src/app/main/Dashboard.tsx
index 450727310..8198a86fd 100644
--- a/interface/src/app/main/Dashboard.tsx
+++ b/interface/src/app/main/Dashboard.tsx
@@ -1,4 +1,4 @@
-import { useContext, useEffect, useState } from 'react';
+import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
import { IconContext } from 'react-icons/lib';
import { Link } from 'react-router';
import { toast } from 'react-toastify';
@@ -76,35 +76,40 @@ const Dashboard = () => {
}
);
- const deviceValueDialogSave = async (devicevalue: DeviceValue) => {
- if (!selectedDashboardItem) {
- return;
- }
- const id = selectedDashboardItem.parentNode.id; // this is the parent ID
- await sendDeviceValue({ id, c: devicevalue.c ?? '', v: devicevalue.v })
- .then(() => {
- toast.success(LL.WRITE_CMD_SENT());
- })
- .catch((error: Error) => {
- toast.error(error.message);
- })
- .finally(() => {
- setDeviceValueDialogOpen(false);
- setSelectedDashboardItem(undefined);
- });
- };
+ const deviceValueDialogSave = useCallback(
+ async (devicevalue: DeviceValue) => {
+ if (!selectedDashboardItem) {
+ return;
+ }
+ const id = selectedDashboardItem.id; // this is the parent ID
+ await sendDeviceValue({ id, c: devicevalue.c ?? '', v: devicevalue.v })
+ .then(() => {
+ toast.success(LL.WRITE_CMD_SENT());
+ })
+ .catch((error: Error) => {
+ toast.error(error.message);
+ })
+ .finally(() => {
+ setDeviceValueDialogOpen(false);
+ setSelectedDashboardItem(undefined);
+ });
+ },
+ [selectedDashboardItem, sendDeviceValue, LL]
+ );
- const dashboard_theme = useTheme({
- Table: `
+ const dashboard_theme = useMemo(
+ () =>
+ useTheme({
+ Table: `
--data-table-library_grid-template-columns: minmax(80px, auto) 120px 32px;
`,
- BaseRow: `
+ BaseRow: `
font-size: 14px;
.td {
height: 28px;
}
`,
- Row: `
+ Row: `
cursor: pointer;
background-color: #1e1e1e;
&:nth-of-type(odd) .td {
@@ -114,7 +119,7 @@ const Dashboard = () => {
background-color: #177ac9;
},
`,
- BaseCell: `
+ BaseCell: `
&:nth-of-type(2) {
text-align: right;
}
@@ -122,12 +127,14 @@ const Dashboard = () => {
text-align: right;
}
`
- });
+ }),
+ []
+ );
const tree = useTree(
{ nodes: data.nodes },
{
- onChange: undefined // not used but needed
+ onChange: () => {} // not used but needed
},
{
treeIcon: {
@@ -162,28 +169,31 @@ const Dashboard = () => {
: tree.fns.onRemoveAll(); // collapse tree
}, [parentNodes]);
- const showType = (n?: string, t?: number) => {
- // if we have a name show it
- if (n) {
- return n;
- }
- if (t) {
- // otherwise pick translation based on type
- switch (t) {
- case DeviceType.CUSTOM:
- return LL.CUSTOM_ENTITIES(0);
- case DeviceType.ANALOGSENSOR:
- return LL.ANALOG_SENSORS();
- case DeviceType.TEMPERATURESENSOR:
- return LL.TEMP_SENSORS();
- case DeviceType.SCHEDULER:
- return LL.SCHEDULER();
- default:
- break;
+ const showType = useCallback(
+ (n?: string, t?: number) => {
+ // if we have a name show it
+ if (n) {
+ return n;
}
- }
- return '';
- };
+ if (t) {
+ // otherwise pick translation based on type
+ switch (t) {
+ case DeviceType.CUSTOM:
+ return LL.CUSTOM_ENTITIES(0);
+ case DeviceType.ANALOGSENSOR:
+ return LL.ANALOG_SENSORS();
+ case DeviceType.TEMPERATURESENSOR:
+ return LL.TEMP_SENSORS();
+ case DeviceType.SCHEDULER:
+ return LL.SCHEDULER();
+ default:
+ break;
+ }
+ }
+ return '';
+ },
+ [LL]
+ );
const showName = (di: DashboardItem) => {
if (di.id < 100) {
@@ -201,20 +211,24 @@ const Dashboard = () => {
if (di.dv) {
return {di.dv.id.slice(2)};
}
+ return null;
};
const hasMask = (id: string, mask: number) =>
(parseInt(id.slice(0, 2), 16) & mask) === mask;
- const editDashboardValue = (di: DashboardItem) => {
- if (me.admin && di.dv?.c) {
- setSelectedDashboardItem(di);
- setDeviceValueDialogOpen(true);
- }
- };
+ const editDashboardValue = useCallback(
+ (di: DashboardItem) => {
+ if (me.admin && di.dv?.c) {
+ setSelectedDashboardItem(di);
+ setDeviceValueDialogOpen(true);
+ }
+ },
+ [me.admin]
+ );
const handleShowAll = (
- event: React.MouseEvent,
+ _event: React.MouseEvent,
toggle: boolean | null
) => {
if (toggle !== null) {
@@ -225,7 +239,9 @@ const Dashboard = () => {
const renderContent = () => {
if (!data) {
- return ;
+ return (
+
+ );
}
const hasFavEntities = data.nodes.filter(