diff --git a/src/elements/emby-playstatebutton/PlayedButton.tsx b/src/elements/emby-playstatebutton/PlayedButton.tsx index 7524e8355..89f4052b1 100644 --- a/src/elements/emby-playstatebutton/PlayedButton.tsx +++ b/src/elements/emby-playstatebutton/PlayedButton.tsx @@ -8,32 +8,30 @@ import { useTogglePlayedMutation } from 'hooks/useFetchItems'; interface PlayedButtonProps { className?: string; - playedState : boolean | undefined; + isPlayed : boolean | undefined; itemId: string | null | undefined; itemType: string | null | undefined } const PlayedButton: FC = ({ className, - playedState = false, + isPlayed = false, itemId, itemType }) => { const { mutateAsync: togglePlayedMutation } = useTogglePlayedMutation(); - const [isPlayed, setIsPlayed] = React.useState( - playedState ?? false - ); + const [playedState, setPlayedState] = React.useState(isPlayed); const getTitle = useCallback(() => { let buttonTitle; if (itemType !== BaseItemKind.AudioBook) { - buttonTitle = isPlayed ? globalize.translate('Watched') : globalize.translate('MarkPlayed'); + buttonTitle = playedState ? globalize.translate('Watched') : globalize.translate('MarkPlayed'); } else { - buttonTitle = isPlayed ? globalize.translate('Played') : globalize.translate('MarkPlayed'); + buttonTitle = playedState ? globalize.translate('Played') : globalize.translate('MarkPlayed'); } return buttonTitle; - }, [isPlayed, itemType]); + }, [playedState, itemType]); const onClick = useCallback(async () => { try { @@ -41,23 +39,23 @@ const PlayedButton: FC = ({ throw new Error('Item has no Id'); } - const response = await togglePlayedMutation({ + const _isPlayed = await togglePlayedMutation({ itemId, - isPlayed + playedState }); - setIsPlayed(response?.Played); + setPlayedState(!!_isPlayed); } catch (e) { console.error(e); } - }, [isPlayed, itemId, togglePlayedMutation]); + }, [playedState, itemId, togglePlayedMutation]); const btnClass = classNames( className, - { 'playstatebutton-played': isPlayed } + { 'playstatebutton-played': playedState } ); const iconClass = classNames( - { 'playstatebutton-icon-played': isPlayed } + { 'playstatebutton-icon-played': playedState } ); return ( = ({ className, - favoriteState, + isFavorite = false, itemId }) => { const { mutateAsync: toggleFavoriteMutation } = useToggleFavoriteMutation(); - const [isFavorite, setIsFavorite] = React.useState(favoriteState ?? false); + const [favoriteState, setFavoriteState] = React.useState(isFavorite); const onClick = useCallback(async () => { try { @@ -25,28 +25,28 @@ const FavoriteButton: FC = ({ throw new Error('Item has no Id'); } - const response = await toggleFavoriteMutation({ + const _isFavorite = await toggleFavoriteMutation({ itemId, - isFavorite + favoriteState }); - setIsFavorite(response?.IsFavorite); + setFavoriteState(!!_isFavorite); } catch (e) { console.error(e); } - }, [isFavorite, itemId, toggleFavoriteMutation]); + }, [favoriteState, itemId, toggleFavoriteMutation]); const btnClass = classNames( className, - { 'ratingbutton-withrating': isFavorite } + { 'ratingbutton-withrating': favoriteState } ); const iconClass = classNames( - { 'ratingbutton-icon-withrating': isFavorite } + { 'ratingbutton-icon-withrating': favoriteState } ); return ( { interface ToggleFavoriteMutationProp { itemId: string; - isFavorite: boolean | undefined + favoriteState: boolean } const fetchUpdateFavoriteStatus = async ( currentApi: JellyfinApiContext, itemId: string, - isFavorite: boolean | undefined + favoriteState: boolean ) => { const { api, user } = currentApi; if (api && user?.Id) { - if (isFavorite) { + if (favoriteState) { const response = await getUserLibraryApi(api).unmarkFavoriteItem({ - userId: user?.Id, + userId: user.Id, itemId: itemId }); - return response.data; + return response.data.IsFavorite; } else { const response = await getUserLibraryApi(api).markFavoriteItem({ - userId: user?.Id, + userId: user.Id, itemId: itemId }); - return response.data; + return response.data.IsFavorite; } } }; @@ -654,35 +654,35 @@ const fetchUpdateFavoriteStatus = async ( export const useToggleFavoriteMutation = () => { const currentApi = useApi(); return useMutation({ - mutationFn: ({ itemId, isFavorite }: ToggleFavoriteMutationProp) => - fetchUpdateFavoriteStatus(currentApi, itemId, isFavorite ) + mutationFn: ({ itemId, favoriteState }: ToggleFavoriteMutationProp) => + fetchUpdateFavoriteStatus(currentApi, itemId, favoriteState ) }); }; interface TogglePlayedMutationProp { itemId: string; - isPlayed: boolean | undefined + playedState: boolean } const fetchUpdatePlayedState = async ( currentApi: JellyfinApiContext, itemId: string, - isPlayed: boolean | undefined + playedState: boolean ) => { const { api, user } = currentApi; if (api && user?.Id) { - if (isPlayed) { + if (playedState) { const response = await getPlaystateApi(api).markUnplayedItem({ - userId: user?.Id, + userId: user.Id, itemId: itemId }); - return response.data; + return response.data.Played; } else { const response = await getPlaystateApi(api).markPlayedItem({ - userId: user?.Id, + userId: user.Id, itemId: itemId }); - return response.data; + return response.data.Played; } } }; @@ -690,7 +690,7 @@ const fetchUpdatePlayedState = async ( export const useTogglePlayedMutation = () => { const currentApi = useApi(); return useMutation({ - mutationFn: ({ itemId, isPlayed }: TogglePlayedMutationProp) => - fetchUpdatePlayedState(currentApi, itemId, isPlayed ) + mutationFn: ({ itemId, playedState }: TogglePlayedMutationProp) => + fetchUpdatePlayedState(currentApi, itemId, playedState ) }); };