fix: card overlay not toggling between upvote and bookmark

packages/shared/src/hooks/feed/useCardCover.tsx

@@ -5,7 +5,6 @@ import { CardCoverShare } from '../../components/cards/common/CardCoverShare';
 import { CardCoverContainer } from '../../components/cards/common/CardCoverContainer';
 import { PostReminderOptions } from '../../components/post/common/PostReminderOptions';
 import { ButtonSize, ButtonVariant } from '../../components/buttons/common';
-import { useBookmarkReminderCover } from '../bookmark/useBookmarkReminderCover';
 
 interface UseCardCover {
   overlay: ReactNode;
@@ -26,11 +25,15 @@ export const useCardCover = ({
   onShare,
   className = {},
 }: UseCardCoverProps): UseCardCover => {
-  const { shouldShowOverlay, onInteract } = usePostShareLoop(post);
-  const shouldShowReminder = useBookmarkReminderCover(post);
+  const {
+    shouldShowOverlay,
+    onInteract,
+    currentInteraction,
+    shouldShowReminder,
+  } = usePostShareLoop(post);
 
   const overlay = useMemo(() => {
-    if (shouldShowOverlay && onShare) {
+    if (shouldShowOverlay && onShare && currentInteraction === 'upvote') {
       return (
         <CardCoverShare
           post={post}
@@ -43,7 +46,7 @@ export const useCardCover = ({
       );
     }
 
-    if (shouldShowReminder) {
+    if (shouldShowReminder && currentInteraction === 'bookmark') {
       return (
         <CardCoverContainer
           title="Don’t have time now? Set a reminder"
@@ -69,6 +72,7 @@ export const useCardCover = ({
     post,
     shouldShowOverlay,
     shouldShowReminder,
+    currentInteraction,
   ]);
 
   return { overlay };

packages/shared/src/hooks/post/usePostShareLoop.ts

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useActiveFeedNameContext } from '../../contexts';
 import { useMutationSubscription } from '../mutationSubscription';
 import {
@@ -7,17 +7,24 @@ import {
   createVoteMutationKey,
 } from '../vote';
 import { Post, UserVote } from '../../graphql/posts';
+import { useBookmarkReminderCover } from '../bookmark/useBookmarkReminderCover';
 
 interface UsePostShareLoop {
   shouldShowOverlay: boolean;
   onInteract: () => void;
+  currentInteraction: 'upvote' | 'bookmark' | null;
+  shouldShowReminder: boolean;
 }
 
 export const usePostShareLoop = (post: Post): UsePostShareLoop => {
   const { feedName } = useActiveFeedNameContext();
   const [justUpvoted, setJustUpvoted] = useState(false);
   const [hasInteracted, setHasInteracted] = useState(false);
   const shouldShowOverlay = justUpvoted && !hasInteracted;
+  const shouldShowReminder = useBookmarkReminderCover(post);
+  const [lastInteraction, setLastInteraction] = useState<
+    'upvote' | 'bookmark' | null
+  >(null);
   const key = useMemo(
     () =>
       createVoteMutationKey({
@@ -39,11 +46,35 @@ export const usePostShareLoop = (post: Post): UsePostShareLoop => {
       }
 
       setJustUpvoted(vars.vote === UserVote.Up);
+      if (vars.vote === UserVote.Up) {
+        setLastInteraction('upvote');
+      }
     },
   });
 
+  useEffect(() => {
+    if (shouldShowReminder) {
+      setLastInteraction('bookmark');
+    }
+  }, [shouldShowReminder]);
+
+  const currentInteraction = useMemo(() => {
+    if (justUpvoted && shouldShowReminder) {
+      return lastInteraction;
+    }
+    if (justUpvoted) {
+      return 'upvote';
+    }
+    if (shouldShowReminder) {
+      return 'bookmark';
+    }
+    return null;
+  }, [justUpvoted, shouldShowReminder, lastInteraction]);
+
   return {
     shouldShowOverlay,
     onInteract: useCallback(() => setHasInteracted(true), []),
+    currentInteraction,
+    shouldShowReminder,
   };
 };