mirrors
/
webminidisc
mirror of https://github.com/cybercase/webminidisc.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Use useMemo to avoid sorting at every render

This commit is contained in:
Stefano Brilli 2021-07-19 11:16:11 +02:00
parent e273b8284b
commit a6bae61d79
1 changed files with 12 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/main.tsx
View File

@ -68,6 +68,7 @@ import Checkbox from '@material-ui/core/Checkbox';
import * as BadgeImpl from '@material-ui/core/Badge/Badge';
import Button from '@material-ui/core/Button';
import { W95Main } from './win95/main';
import { useMemo } from 'react';
const useStyles = makeStyles(theme => ({
add: {
@ -296,8 +297,8 @@ export const Main = (props: {}) => {
});
const classes = useStyles();
const tracks = getSortedTracks(disc);
const groupedTracks = getGroupedTracks(disc);
const tracks = useMemo(() => getSortedTracks(disc), [disc]);
const groupedTracks = useMemo(() => getGroupedTracks(disc), [disc]);
// Action Handlers
const handleSelectClick = (event: React.MouseEvent, item: number) => {
@ -383,6 +384,13 @@ export const Main = (props: {}) => {
} else dispatch(control('play'));
};
const canGroup = useMemo(() => {
return (
tracks.filter(n => n.group === null && selected.includes(n.index)).length === selected.length &&
isSequential(selected.sort((a, b) => a - b))
);
}, [tracks, selected]);
if (vintageMode) {
const p = {
disc,
@ -547,15 +555,8 @@ export const Main = (props: {}) => {
) : null}
{selectedCount > 0 ? (
<Tooltip title="Group">
<IconButton
aria-label="group"
disabled={
!isSequential(selected.sort((a, b) => a - b)) ||
tracks.filter(n => n.group === null && selected.includes(n.index)).length !== selected.length
}
onClick={handleGroupTracks}
>
<Tooltip title={canGroup ? 'Group' : ''}>
<IconButton aria-label="group" disabled={!canGroup} onClick={handleGroupTracks}>
<CreateNewFolderIcon />
</IconButton>
</Tooltip>