apply suggestion
This commit is contained in:
parent
78b680f614
commit
3d15b85d10
3 changed files with 41 additions and 43 deletions
|
@ -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<PlayedButtonProps> = ({
|
||||
className,
|
||||
playedState = false,
|
||||
isPlayed = false,
|
||||
itemId,
|
||||
itemType
|
||||
}) => {
|
||||
const { mutateAsync: togglePlayedMutation } = useTogglePlayedMutation();
|
||||
const [isPlayed, setIsPlayed] = React.useState<boolean | undefined>(
|
||||
playedState ?? false
|
||||
);
|
||||
const [playedState, setPlayedState] = React.useState<boolean>(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<PlayedButtonProps> = ({
|
|||
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 (
|
||||
<IconButton
|
||||
|
|
|
@ -7,17 +7,17 @@ import globalize from 'scripts/globalize';
|
|||
|
||||
interface FavoriteButtonProps {
|
||||
className?: string;
|
||||
favoriteState: boolean | undefined;
|
||||
isFavorite: boolean | undefined;
|
||||
itemId: string | null | undefined
|
||||
}
|
||||
|
||||
const FavoriteButton: FC<FavoriteButtonProps> = ({
|
||||
className,
|
||||
favoriteState,
|
||||
isFavorite = false,
|
||||
itemId
|
||||
}) => {
|
||||
const { mutateAsync: toggleFavoriteMutation } = useToggleFavoriteMutation();
|
||||
const [isFavorite, setIsFavorite] = React.useState<boolean | undefined>(favoriteState ?? false);
|
||||
const [favoriteState, setFavoriteState] = React.useState<boolean>(isFavorite);
|
||||
|
||||
const onClick = useCallback(async () => {
|
||||
try {
|
||||
|
@ -25,28 +25,28 @@ const FavoriteButton: FC<FavoriteButtonProps> = ({
|
|||
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 (
|
||||
<IconButton
|
||||
title={isFavorite ? globalize.translate('Favorite') : globalize.translate('AddToFavorites')}
|
||||
title={favoriteState ? globalize.translate('Favorite') : globalize.translate('AddToFavorites')}
|
||||
className={btnClass}
|
||||
size='small'
|
||||
onClick={onClick}
|
||||
|
|
|
@ -169,7 +169,7 @@ const fetchGetItemsBySuggestionsType = async (
|
|||
response = (
|
||||
await getItemsApi(api).getResumeItems(
|
||||
{
|
||||
userId: user?.Id,
|
||||
userId: user.Id,
|
||||
parentId: parentId ?? undefined,
|
||||
fields: [
|
||||
ItemFields.PrimaryImageAspectRatio,
|
||||
|
@ -625,28 +625,28 @@ export const useGetGroupsUpcomingEpisodes = (parentId: ParentId) => {
|
|||
|
||||
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 )
|
||||
});
|
||||
};
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue