administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-02 09:15:22 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Use memo to optimize rendering

Browse Source
This commit is contained in:
Nick Mowen 2022-03-12 09:27:06 -07:00
parent 2fe3b2bac4
commit 1482d13dd1
1 changed files with 51 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
web/src/Sidebar.jsx
View File

@ -3,6 +3,7 @@ import LinkedLogo from './components/LinkedLogo';
import { Match } from 'preact-router/match';
import { memo } from 'preact/compat';
import { ENV } from './env';
import { useMemo } from 'preact/hooks'
import useSWR from 'swr';
import NavigationDrawer, { Destination, Separator } from './components/NavigationDrawer';
@ -19,42 +20,14 @@ export default function Sidebar() {
<Match path="/cameras/:camera/:other?">
{({ matches }) =>
matches ? (
<Fragment>
<Separator />
{Object.entries(cameras)
.filter(([_, conf]) => conf.ui.show)
.sort(([_, aConf], [__, bConf]) => aConf.ui.order === bConf.ui.order ? 0 : (aConf.ui.order > bConf.ui.order ? 1 : -1))
.map(([camera]) => (
<Destination key={camera} href={`/cameras/${camera}`} text={camera} />
))}
<Separator />
</Fragment>
<SortedCameras unsortedCameras={cameras} />
) : null
}
</Match>
<Match path="/recording/:camera/:date?/:hour?/:seconds?">
{({ matches }) =>
matches ? (
<Fragment>
<Separator />
{Object.entries(cameras)
.filter(([_, conf]) => conf.gui.show)
.sort(([_, aConf], [__, bConf]) => aConf.ui.order === bConf.ui.order ? 0 : (aConf.ui.order > bConf.ui.order ? 1 : -1))
.map(([camera, conf]) => {
if (conf.record.enabled) {
return (
<Destination
key={camera}
path={`/recording/${camera}/:date?/:hour?/:seconds?`}
href={`/recording/${camera}`}
text={camera}
/>
);
}
return null;
})}
<Separator />
</Fragment>
<SortedRecordingCameras unsortedCameras={cameras} />
) : null
}
</Match>
@ -75,6 +48,54 @@ export default function Sidebar() {
);
}
function SortedCameras({ unsortedCameras }) {
const sortedCameras = useMemo(() => {
Object.entries(unsortedCameras)
.filter(([_, conf]) => conf.ui.show)
.sort(([_, aConf], [__, bConf]) => aConf.ui.order === bConf.ui.order ? 0 : (aConf.ui.order > bConf.ui.order ? 1 : -1))
}, [unsortedCameras]);
return (
<Fragment>
<Separator />
{sortedCameras.map(([camera]) => (
<Destination key={camera} href={`/cameras/${camera}`} text={camera} />
))}
<Separator />
</Fragment>
);
}
function SortedRecordingCameras({ unsortedCameras }) {
const sortedCameras = useMemo(() => {
Object.entries(unsortedCameras)
.filter(([_, conf]) => conf.ui.show)
.sort(([_, aConf], [__, bConf]) => aConf.ui.order === bConf.ui.order ? 0 : (aConf.ui.order > bConf.ui.order ? 1 : -1))
}, [unsortedCameras]);
return (
<Fragment>
<Separator />
{sortedCameras.map(([camera, conf]) => {
if (conf.record.enabled) {
return (
<Destination
key={camera}
path={`/recording/${camera}/:date?/:hour?/:seconds?`}
href={`/recording/${camera}`}
text={camera}
/>
);
}
return null;
})}
<Separator />
</Fragment>
);
}
const Header = memo(() => {
return (
<div className="text-gray-500">