mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Update favorite and played state to use Query Invalidation

Browse source
This commit is contained in:
grafixeyehero 2024-01-31 04:32:54 +03:00
parent 97472ac8bb
commit 31a77c25f3
5 changed files with 79 additions and 59 deletions
Download patch file Download diff file Expand all files Collapse all files

35
src/elements/emby-playstatebutton/PlayedButton.tsx
View file

@ -1,4 +1,5 @@
import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client';
import { useQueryClient } from '@tanstack/react-query';
import React, { FC, useCallback } from 'react';
import CheckIcon from '@mui/icons-material/Check';
import { IconButton } from '@mui/material';
@ -10,28 +11,30 @@ interface PlayedButtonProps {
className?: string;
isPlayed : boolean | undefined;
itemId: string | null | undefined;
itemType: string | null | undefined
itemType: string | null | undefined,
queryKey?: string[]
}
const PlayedButton: FC<PlayedButtonProps> = ({
className,
isPlayed = false,
itemId,
itemType
itemType,
queryKey
}) => {
const queryClient = useQueryClient();
const { mutateAsync: togglePlayedMutation } = useTogglePlayedMutation();
const [playedState, setPlayedState] = React.useState<boolean>(isPlayed);
const getTitle = useCallback(() => {
let buttonTitle;
if (itemType !== BaseItemKind.AudioBook) {
buttonTitle = playedState ? globalize.translate('Watched') : globalize.translate('MarkPlayed');
buttonTitle = isPlayed ? globalize.translate('Watched') : globalize.translate('MarkPlayed');
} else {
buttonTitle = playedState ? globalize.translate('Played') : globalize.translate('MarkPlayed');
buttonTitle = isPlayed ? globalize.translate('Played') : globalize.translate('MarkPlayed');
}
return buttonTitle;
}, [playedState, itemType]);
}, [itemType, isPlayed]);
const onClick = useCallback(async () => {
try {
@ -39,23 +42,29 @@ const PlayedButton: FC<PlayedButtonProps> = ({
throw new Error('Item has no Id');
}
const _isPlayed = await togglePlayedMutation({
await togglePlayedMutation({
itemId,
playedState
});
setPlayedState(!!_isPlayed);
isPlayed
},
{ onSuccess: async() => {
await queryClient.invalidateQueries({
queryKey: queryKey,
type: 'all',
refetchType: 'active'
});
} });
} catch (e) {
console.error(e);
}
}, [playedState, itemId, togglePlayedMutation]);
}, [itemId, togglePlayedMutation, isPlayed, queryClient, queryKey]);
const btnClass = classNames(
className,
{ 'playstatebutton-played': playedState }
{ 'playstatebutton-played': isPlayed }
);
const iconClass = classNames(
{ 'playstatebutton-icon-played': playedState }
{ 'playstatebutton-icon-played': isPlayed }
);
return (
<IconButton

31
src/elements/emby-ratingbutton/FavoriteButton.tsx
View file

@ -1,4 +1,5 @@
import React, { FC, useCallback } from 'react';
import { useQueryClient } from '@tanstack/react-query';
import FavoriteIcon from '@mui/icons-material/Favorite';
import { IconButton } from '@mui/material';
import classNames from 'classnames';
@ -8,16 +9,18 @@ import globalize from 'scripts/globalize';
interface FavoriteButtonProps {
className?: string;
isFavorite: boolean | undefined;
itemId: string | null | undefined
itemId: string | null | undefined;
queryKey?: string[]
}
const FavoriteButton: FC<FavoriteButtonProps> = ({
className,
isFavorite = false,
itemId
itemId,
queryKey
}) => {
const queryClient = useQueryClient();
const { mutateAsync: toggleFavoriteMutation } = useToggleFavoriteMutation();
const [favoriteState, setFavoriteState] = React.useState<boolean>(isFavorite);
const onClick = useCallback(async () => {
try {
@ -25,28 +28,34 @@ const FavoriteButton: FC<FavoriteButtonProps> = ({
throw new Error('Item has no Id');
}
const _isFavorite = await toggleFavoriteMutation({
await toggleFavoriteMutation({
itemId,
favoriteState
});
setFavoriteState(!!_isFavorite);
isFavorite
},
{ onSuccess: async() => {
await queryClient.invalidateQueries({
queryKey: queryKey,
type: 'all',
refetchType: 'active'
});
} });
} catch (e) {
console.error(e);
}
}, [favoriteState, itemId, toggleFavoriteMutation]);
}, [isFavorite, itemId, queryClient, queryKey, toggleFavoriteMutation]);
const btnClass = classNames(
className,
{ 'ratingbutton-withrating': favoriteState }
{ 'ratingbutton-withrating': isFavorite }
);
const iconClass = classNames(
{ 'ratingbutton-icon-withrating': favoriteState }
{ 'ratingbutton-icon-withrating': isFavorite }
);
return (
<IconButton
title={favoriteState ? globalize.translate('Favorite') : globalize.translate('AddToFavorites')}
title={isFavorite ? globalize.translate('Favorite') : globalize.translate('AddToFavorites')}
className={btnClass}
size='small'
onClick={onClick}