administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-02 17:25: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 { Match } from 'preact-router/match';
import { memo } from 'preact/compat'; import { memo } from 'preact/compat';
import { ENV } from './env'; import { ENV } from './env';
import { useMemo } from 'preact/hooks'
import useSWR from 'swr'; import useSWR from 'swr';
import NavigationDrawer, { Destination, Separator } from './components/NavigationDrawer'; import NavigationDrawer, { Destination, Separator } from './components/NavigationDrawer';
@ -19,42 +20,14 @@ export default function Sidebar() {
<Match path="/cameras/:camera/:other?"> <Match path="/cameras/:camera/:other?">
{({ matches }) => {({ matches }) =>
matches ? ( matches ? (
<Fragment> <SortedCameras unsortedCameras={cameras} />
<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>
) : null ) : null
} }
</Match> </Match>
<Match path="/recording/:camera/:date?/:hour?/:seconds?"> <Match path="/recording/:camera/:date?/:hour?/:seconds?">
{({ matches }) => {({ matches }) =>
matches ? ( matches ? (
<Fragment> <SortedRecordingCameras unsortedCameras={cameras} />
<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>
) : null ) : null
} }
</Match> </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(() => { const Header = memo(() => {
return ( return (
<div className="text-gray-500"> <div className="text-gray-500">