Fix row refresh on status change for current song
This commit is contained in:
parent
8e2a107d4a
commit
768a88de8f
1 changed files with 10 additions and 12 deletions
|
@ -1,9 +1,10 @@
|
||||||
|
import { MutableRefObject, useEffect, useMemo, useRef } from 'react';
|
||||||
import { RowClassRules, RowNode } from '@ag-grid-community/core';
|
import { RowClassRules, RowNode } from '@ag-grid-community/core';
|
||||||
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
|
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
|
||||||
import { MutableRefObject, useEffect, useMemo, useRef } from 'react';
|
|
||||||
import { Song } from '/@/renderer/api/types';
|
import { Song } from '/@/renderer/api/types';
|
||||||
import { useAppFocus } from '/@/renderer/hooks';
|
import { useAppFocus } from '/@/renderer/hooks';
|
||||||
import { useCurrentSong, usePlayerStore } from '/@/renderer/store';
|
import { useCurrentSong, usePlayerStore } from '/@/renderer/store';
|
||||||
|
import { PlayerStatus } from '/@/renderer/types';
|
||||||
|
|
||||||
interface UseCurrentSongRowStylesProps {
|
interface UseCurrentSongRowStylesProps {
|
||||||
tableRef: MutableRefObject<AgGridReactType | null>;
|
tableRef: MutableRefObject<AgGridReactType | null>;
|
||||||
|
@ -75,8 +76,10 @@ export const useCurrentSongRowStyles = ({ tableRef }: UseCurrentSongRowStylesPro
|
||||||
|
|
||||||
// Redraw song rows when the status changes
|
// Redraw song rows when the status changes
|
||||||
const unsubStatusChange = usePlayerStore.subscribe(
|
const unsubStatusChange = usePlayerStore.subscribe(
|
||||||
(state) => state.current.song,
|
(state) => [state.current.status, state.current.song],
|
||||||
(song, previousSong) => {
|
(current: (PlayerStatus | Song | undefined)[]) => {
|
||||||
|
const song = current[1] as Song;
|
||||||
|
|
||||||
if (tableRef?.current) {
|
if (tableRef?.current) {
|
||||||
const { api, columnApi } = tableRef?.current || {};
|
const { api, columnApi } = tableRef?.current || {};
|
||||||
if (api == null || columnApi == null) {
|
if (api == null || columnApi == null) {
|
||||||
|
@ -84,19 +87,14 @@ export const useCurrentSongRowStyles = ({ tableRef }: UseCurrentSongRowStylesPro
|
||||||
}
|
}
|
||||||
|
|
||||||
const currentNode = song?.id ? api.getRowNode(song.id) : undefined;
|
const currentNode = song?.id ? api.getRowNode(song.id) : undefined;
|
||||||
|
const rowNodes = [currentNode].filter((e) => e !== undefined) as RowNode<any>[];
|
||||||
const previousNode = previousSong?.id
|
|
||||||
? api.getRowNode(previousSong?.id)
|
|
||||||
: undefined;
|
|
||||||
|
|
||||||
const rowNodes = [currentNode, previousNode].filter(
|
|
||||||
(e) => e !== undefined,
|
|
||||||
) as RowNode<any>[];
|
|
||||||
|
|
||||||
api.redrawRows({ rowNodes });
|
api.redrawRows({ rowNodes });
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{ equalityFn: (a, b) => a?.id === b?.id },
|
{
|
||||||
|
equalityFn: (a, b) => (a[0] as PlayerStatus) === (b[0] as PlayerStatus),
|
||||||
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
|
|
Reference in a new issue