diff --git a/packages/shared/src/hooks/feed/useCardCover.tsx b/packages/shared/src/hooks/feed/useCardCover.tsx index 89d0730873..3111ad456a 100644 --- a/packages/shared/src/hooks/feed/useCardCover.tsx +++ b/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 ( void; + currentInteraction: 'upvote' | 'bookmark' | null; + shouldShowReminder: boolean; } export const usePostShareLoop = (post: Post): UsePostShareLoop => { @@ -18,6 +21,10 @@ export const usePostShareLoop = (post: Post): UsePostShareLoop => { 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, }; };