diff --git a/src/components/main.tsx b/src/components/main.tsx index 402ad29..6050799 100644 --- a/src/components/main.tsx +++ b/src/components/main.tsx @@ -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 ? ( - - a - b)) || - tracks.filter(n => n.group === null && selected.includes(n.index)).length !== selected.length - } - onClick={handleGroupTracks} - > + +