Convert playstatebutton and ratingbuttons to react

src/hooks/useFetchItems.ts

@@ -15,6 +15,7 @@ import { getStudiosApi } from '@jellyfin/sdk/lib/utils/api/studios-api';
 import { getTvShowsApi } from '@jellyfin/sdk/lib/utils/api/tv-shows-api';
 import { getUserLibraryApi } from '@jellyfin/sdk/lib/utils/api/user-library-api';
 import { getPlaylistsApi } from '@jellyfin/sdk/lib/utils/api/playlists-api';
+import { getPlaystateApi } from '@jellyfin/sdk/lib/utils/api/playstate-api';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import datetime from 'scripts/datetime';
 import globalize from 'scripts/globalize';
@@ -621,3 +622,75 @@ export const useGetGroupsUpcomingEpisodes = (parentId: ParentId) => {
         enabled: !!parentId
     });
 };
+
+interface ToggleFavoriteMutationProp {
+    itemId: string;
+    isFavorite: boolean | undefined
+}
+
+const fetchUpdateFavoriteStatus = async (
+    currentApi: JellyfinApiContext,
+    itemId: string,
+    isFavorite: boolean | undefined
+) => {
+    const { api, user } = currentApi;
+    if (api && user?.Id) {
+        if (isFavorite) {
+            const response = await getUserLibraryApi(api).unmarkFavoriteItem({
+                userId: user?.Id,
+                itemId: itemId
+            });
+            return response.data;
+        } else {
+            const response = await getUserLibraryApi(api).markFavoriteItem({
+                userId: user?.Id,
+                itemId: itemId
+            });
+            return response.data;
+        }
+    }
+};
+
+export const useToggleFavoriteMutation = () => {
+    const currentApi = useApi();
+    return useMutation({
+        mutationFn: ({ itemId, isFavorite }: ToggleFavoriteMutationProp) =>
+            fetchUpdateFavoriteStatus(currentApi, itemId, isFavorite )
+    });
+};
+
+interface TogglePlayedMutationProp {
+    itemId: string;
+    isPlayed: boolean | undefined
+}
+
+const fetchUpdatePlayedState = async (
+    currentApi: JellyfinApiContext,
+    itemId: string,
+    isPlayed: boolean | undefined
+) => {
+    const { api, user } = currentApi;
+    if (api && user?.Id) {
+        if (isPlayed) {
+            const response = await getPlaystateApi(api).markUnplayedItem({
+                userId: user?.Id,
+                itemId: itemId
+            });
+            return response.data;
+        } else {
+            const response = await getPlaystateApi(api).markPlayedItem({
+                userId: user?.Id,
+                itemId: itemId
+            });
+            return response.data;
+        }
+    }
+};
+
+export const useTogglePlayedMutation = () => {
+    const currentApi = useApi();
+    return useMutation({
+        mutationFn: ({ itemId, isPlayed }: TogglePlayedMutationProp) =>
+            fetchUpdatePlayedState(currentApi, itemId, isPlayed )
+    });
+};