fixup! feat(pwa): queue tracking actions offline and overlay pending state

Author: seferturan

projects/client/src/lib/sections/media-actions/favorite/useFavorites.ts

@@ -62,16 +62,17 @@ export function useFavorites({ type, id }: FavoritesStoreProps) {
 
     const payload = getFavoritesPayload({ type, id });
 
-    await executeOrEnqueue({
+    const result = await executeOrEnqueue({
       endpoint: action === 'add' ? 'favorites:add' : 'favorites:remove',
       keys: [toMediaKey(type, id)],
       body: payload,
       invalidations: [InvalidateAction.Favorited(type)],
     });
 
-    await invalidate(InvalidateAction.Favorited(type));
-
-    isUpdatingFavorite.next(false);
+    if (result === 'executed') {
+      await invalidate(InvalidateAction.Favorited(type));
+      isUpdatingFavorite.next(false);
+    }
   };
 
   return {

projects/client/src/lib/sections/media-actions/mark-as-watched/useMarkAsWatched.ts

@@ -44,16 +44,17 @@ export function useMarkAsWatched(
     isMarkingAsWatched.next(true);
     track({ action: 'add' });
 
-    await executeOrEnqueue({
+    const result = await executeOrEnqueue({
       endpoint: 'history:add',
       keys: mediaKeys,
       body: toMarkAsWatchedPayload(props, watchedAtDate),
       invalidations: [InvalidateAction.MarkAsWatched(type)],
     });
 
-    await invalidate(InvalidateAction.MarkAsWatched(type));
-
-    isMarkingAsWatched.next(false);
+    if (result === 'executed') {
+      await invalidate(InvalidateAction.MarkAsWatched(type));
+      isMarkingAsWatched.next(false);
+    }
   };
 
   // Ids whose rating this removal orphans. The main action removes *every*
@@ -100,26 +101,29 @@ export function useMarkAsWatched(
 
     const orphanedRatingIds = await getOrphanedRatingIds();
 
-    await executeOrEnqueue({
+    const removeResult = await executeOrEnqueue({
       endpoint: 'history:remove',
       keys: mediaKeys,
       body: toMarkAsWatchedPayload(props),
       invalidations: [InvalidateAction.MarkAsWatched(type)],
     });
 
     if (orphanedRatingIds.length > 0) {
-      await executeOrEnqueue({
+      const ratingResult = await executeOrEnqueue({
         endpoint: 'rating:remove',
         keys: orphanedRatingIds.map((id) => toMediaKey(type, id)),
         body: toRemoveRatingsPayload(type, orphanedRatingIds),
         invalidations: [InvalidateAction.Rated(type)],
       });
-      await invalidate(InvalidateAction.Rated(type));
+      if (ratingResult === 'executed') {
+        await invalidate(InvalidateAction.Rated(type));
+      }
     }
 
-    await invalidate(InvalidateAction.MarkAsWatched(type));
-
-    isMarkingAsWatched.next(false);
+    if (removeResult === 'executed') {
+      await invalidate(InvalidateAction.MarkAsWatched(type));
+      isMarkingAsWatched.next(false);
+    }
   };
 
   const isWatchable = media.every((item) => {

projects/client/src/lib/sections/media-actions/watchlist/useWatchlist.ts

@@ -29,16 +29,17 @@ export function useWatchlist(props: MediaStoreProps) {
     isWatchlistUpdating.next(true);
     track({ action: 'add' });
 
-    await executeOrEnqueue({
+    const addResult = await executeOrEnqueue({
       endpoint: 'watchlist:add',
       keys: ids.map((id) => toMediaKey(type, id)),
       body,
       invalidations: [InvalidateAction.Watchlisted(type)],
     });
 
-    await invalidate(InvalidateAction.Watchlisted(type));
-
-    isWatchlistUpdating.next(false);
+    if (addResult === 'executed') {
+      await invalidate(InvalidateAction.Watchlisted(type));
+      isWatchlistUpdating.next(false);
+    }
   };
 
   const removeFromWatchlist = async () => {
@@ -49,16 +50,17 @@ export function useWatchlist(props: MediaStoreProps) {
     isWatchlistUpdating.next(true);
     track({ action: 'remove' });
 
-    await executeOrEnqueue({
+    const removeResult = await executeOrEnqueue({
       endpoint: 'watchlist:remove',
       keys: ids.map((id) => toMediaKey(type, id)),
       body,
       invalidations: [InvalidateAction.Watchlisted(type)],
     });
 
-    await invalidate(InvalidateAction.Watchlisted(type));
-
-    isWatchlistUpdating.next(false);
+    if (removeResult === 'executed') {
+      await invalidate(InvalidateAction.Watchlisted(type));
+      isWatchlistUpdating.next(false);
+    }
   };
 
   return {

projects/client/src/lib/sections/summary/components/rating/useRatings.ts

@@ -175,18 +175,19 @@ export function useRatings({ type, id }: WatchlistStoreProps) {
 
     track({ action: hasRating ? 'changed' : 'added', rating: newRating });
 
-    await executeOrEnqueue({
+    const addResult = await executeOrEnqueue({
       endpoint: 'rating:add',
       keys: [toMediaKey(type, id)],
       body: toAddPayload(type, id, newRating),
       invalidations: [InvalidateAction.Rated(type)],
     });
-    await invalidate(InvalidateAction.Rated(type));
-
-    pendingRating.next(null);
-    isSubmitting.next(false);
-    if (type !== 'season') {
-      dismiss(id, type, 'rating');
+    if (addResult === 'executed') {
+      await invalidate(InvalidateAction.Rated(type));
+      pendingRating.next(null);
+      isSubmitting.next(false);
+      if (type !== 'season') {
+        dismiss(id, type, 'rating');
+      }
     }
   });
 
@@ -200,14 +201,16 @@ export function useRatings({ type, id }: WatchlistStoreProps) {
     pendingRating.next(0);
 
     track({ action: 'removed' });
-    await executeOrEnqueue({
+    const removeResult = await executeOrEnqueue({
       endpoint: 'rating:remove',
       keys: [toMediaKey(type, id)],
       body: toRemovePayload(type, id),
       invalidations: [InvalidateAction.Rated(type)],
     });
-    await invalidate(InvalidateAction.Rated(type));
-    pendingRating.next(null);
+    if (removeResult === 'executed') {
+      await invalidate(InvalidateAction.Rated(type));
+      pendingRating.next(null);
+    }
   };
 
   return {