diff --git a/src/pages/collection/series/SeriesFileSummary.tsx b/src/pages/collection/series/SeriesFileSummary.tsx index 3d8db5853..5d2f00044 100644 --- a/src/pages/collection/series/SeriesFileSummary.tsx +++ b/src/pages/collection/series/SeriesFileSummary.tsx @@ -38,7 +38,7 @@ const Header = ({ fetchingState, ranges }: HeaderProps) => ( 2 ? 'Episodes' : 'Episode'} range={ranges?.Normal?.Range} /> 2 ? 'Specials' : 'Special'} range={ranges?.Special?.Range} /> {map(omit(ranges, ['Normal', 'Special']), (item, key) => )} - {fetchingState && } + {fetchingState && } ); @@ -249,7 +249,7 @@ const groupFilterMap = { VideoResolution: 'Resolution', }; type GroupFilterPanelProps = { - filter: string[]; + filter: Set; onFilterChange: (event: React.ChangeEvent) => void; }; const GroupFilterPanel = React.memo(({ filter, onFilterChange }: GroupFilterPanelProps) => ( @@ -265,7 +265,7 @@ const GroupFilterPanel = React.memo(({ filter, onFilterChange }: GroupFilterPane label={groupFilterMap[k]} id={k} key={k} - isChecked={filter.includes(k)} + isChecked={filter.has(k)} onChange={onFilterChange} /> ))} @@ -341,27 +341,22 @@ const SeriesFileSummary = () => { const { seriesId } = useParams(); const [mode, setMode] = useState('Series'); - const [filter, setFilter] = useState([...Object.keys(groupFilterMap), 'VideoBitDepth']); + const [filter, setFilter] = useState>(new Set(Object.keys(groupFilterMap))); - useEffect(() => setFilter([...Object.keys(groupFilterMap), 'VideoBitDepth']), [mode]); + useEffect(() => setFilter(new Set(Object.keys(groupFilterMap))), [mode]); const handleFilterChange = useEventCallback((event: React.ChangeEvent) => { - const { checked: active, id: option } = event.target; - const optionArr = [option]; - if (option === 'VideoResolution') optionArr.push('VideoBitDepth'); - if (active && !filter.includes(option)) setFilter([...filter, ...optionArr]); - if (!active && filter.includes(option)) { - setFilter( - filter.filter( - k => ((option === 'VideoResolution') ? !(k === 'VideoResolution' || k === 'VideoBitDepth') : (k !== option)), - ), - ); - } + setFilter((prevState) => { + const { id: filterOption } = event.target; + const newState = new Set(prevState); + if (!newState.delete(filterOption)) newState.add(filterOption); + return newState; + }); }); const { data: fileSummary, isFetching, isLoading } = useSeriesFileSummaryQuery( toNumber(seriesId!), - { groupBy: filter.join(',') }, + { groupBy: [...filter].join(',') }, !!seriesId, );