feat: optimistic update

components/PlayedStatus.tsx

@@ -1,13 +1,12 @@
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { markAsNotPlayed } from "@/utils/jellyfin/playstate/markAsNotPlayed";
 import { markAsPlayed } from "@/utils/jellyfin/playstate/markAsPlayed";
-import { Ionicons } from "@expo/vector-icons";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { useQueryClient } from "@tanstack/react-query";
 import * as Haptics from "expo-haptics";
 import { useAtom } from "jotai";
 import React from "react";
-import { TouchableOpacity, View, ViewProps } from "react-native";
+import { View, ViewProps } from "react-native";
 import { RoundButton } from "./RoundButton";
 
 interface Props extends ViewProps {
@@ -49,30 +48,65 @@ export const PlayedStatus: React.FC<Props> = ({ item, ...props }) => {
 
   const handlePress = async (played: boolean) => {
     Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
-    if (played) {
+
-      await markAsNotPlayed({
+    // Optimistic update
-        api: api,
+    queryClient.setQueryData(
-        itemId: item?.Id,
+      ["item", item.Id],
-        userId: user?.Id,
+      (oldData: BaseItemDto | undefined) => {
-      });
+        if (oldData) {
-    } else {
+          return {
-      await markAsPlayed({
+            ...oldData,
-        api: api,
+            UserData: {
-        item: item,
+              ...oldData.UserData,
-        userId: user?.Id,
+              Played: !played,
-      });
+            },
+          };
+        }
+        return oldData;
+      }
+    );
+
+    try {
+      if (played) {
+        await markAsNotPlayed({
+          api: api,
+          itemId: item?.Id,
+          userId: user?.Id,
+        });
+      } else {
+        await markAsPlayed({
+          api: api,
+          item: item,
+          userId: user?.Id,
+        });
+      }
+      invalidateQueries();
+    } catch (error) {
+      // Revert optimistic update on error
+      queryClient.setQueryData(
+        ["item", item.Id],
+        (oldData: BaseItemDto | undefined) => {
+          if (oldData) {
+            return {
+              ...oldData,
+              UserData: {
+                ...oldData.UserData,
+                Played: played,
+              },
+            };
+          }
+          return oldData;
+        }
+      );
+      console.error("Error updating played status:", error);
     }
-    invalidateQueries();
   };
 
   return (
     <View {...props}>
       <RoundButton
-        icon={
+        fillColor={item.UserData?.Played ? "primary" : undefined}
-          item.UserData?.Played
+        icon={item.UserData?.Played ? "checkmark" : "checkmark"}
-            ? "checkmark-circle"
-            : "checkmark-circle-outline"
-        }
         onPress={() => handlePress(item.UserData?.Played || false)}
         size="large"
       />