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(