andry/EMS-ESP32
1
0
Fork 0
mirror of https://github.com/emsesp/EMS-ESP32.git synced 2025-12-06 07:49:52 +03:00
Code Issues Packages Projects Releases Wiki Activity

optimizations using caching

Browse Source
This commit is contained in:
proddy
2025-10-24 16:24:55 +02:00
parent 28e1e46586
commit 43bb77b095
1 changed files with 38 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
interface/src/app/main/Dashboard.tsx
View File

@@ -1,4 +1,4 @@
import { useCallback, useContext, useEffect, useMemo, useState } from 'react'; import { memo, useCallback, useContext, useEffect, useMemo, useState } from 'react';
import { IconContext } from 'react-icons/lib'; import { IconContext } from 'react-icons/lib';
import { Link } from 'react-router'; import { Link } from 'react-router';
import { toast } from 'react-toastify'; import { toast } from 'react-toastify';
@@ -44,7 +44,7 @@ import {
} from './types'; } from './types';
import { deviceValueItemValidation } from './validators'; import { deviceValueItemValidation } from './validators';
const Dashboard = () => { const Dashboard = memo(() => {
const { LL } = useI18nContext(); const { LL } = useI18nContext();
const { me } = useContext(AuthenticatedContext); const { me } = useContext(AuthenticatedContext);
@@ -163,9 +163,14 @@ const Dashboard = () => {
} }
}); });
const nodeIds = useMemo(
() => data.nodes.map((item: DashboardItem) => item.id),
[data.nodes]
);
useEffect(() => { useEffect(() => {
showAll showAll
? tree.fns.onAddAll(data.nodes.map((item: DashboardItem) => item.id)) // expand tree ? tree.fns.onAddAll(nodeIds) // expand tree
: tree.fns.onRemoveAll(); // collapse tree : tree.fns.onRemoveAll(); // collapse tree
}, [parentNodes]); }, [parentNodes]);
@@ -195,27 +200,32 @@ const Dashboard = () => {
[LL] [LL]
); );
const showName = (di: DashboardItem) => { const showName = useCallback(
if (di.id < 100) { (di: DashboardItem) => {
// if its a device (parent node) and has entities if (di.id < 100) {
if (di.nodes?.length) { // if its a device (parent node) and has entities
return ( if (di.nodes?.length) {
<span style={{ fontWeight: 'bold', fontSize: '14px' }}> return (
<DeviceIcon type_id={di.t ?? 0} /> <span style={{ fontWeight: 'bold', fontSize: '14px' }}>
&nbsp;&nbsp;{showType(di.n, di.t)} <DeviceIcon type_id={di.t ?? 0} />
<span style={{ color: 'lightblue' }}>&nbsp;({di.nodes?.length})</span> &nbsp;&nbsp;{showType(di.n, di.t)}
</span> <span style={{ color: 'lightblue' }}>&nbsp;({di.nodes?.length})</span>
); </span>
);
}
} }
} if (di.dv) {
if (di.dv) { return <span>{di.dv.id.slice(2)}</span>;
return <span>{di.dv.id.slice(2)}</span>; }
} return null;
return null; },
}; [showType]
);
const hasMask = (id: string, mask: number) => const hasMask = useCallback(
(parseInt(id.slice(0, 2), 16) & mask) === mask; (id: string, mask: number) => (parseInt(id.slice(0, 2), 16) & mask) === mask,
[]
);
const editDashboardValue = useCallback( const editDashboardValue = useCallback(
(di: DashboardItem) => { (di: DashboardItem) => {
@@ -237,6 +247,11 @@ const Dashboard = () => {
} }
}; };
const hasFavEntities = useMemo(
() => data.nodes.filter((item: DashboardItem) => item.id <= 90).length,
[data.nodes]
);
const renderContent = () => { const renderContent = () => {
if (!data) { if (!data) {
return ( return (
@@ -244,10 +259,6 @@ const Dashboard = () => {
); );
} }
const hasFavEntities = data.nodes.filter(
(item: DashboardItem) => item.id <= 90
).length;
return ( return (
<> <>
{!data.connected && ( {!data.connected && (
@@ -391,6 +402,6 @@ const Dashboard = () => {
)} )}
</SectionContent> </SectionContent>
); );
}; });
export default Dashboard; export default Dashboard;