{hotTake.emoji}
@@ -595,7 +840,7 @@ const HotAndColdModal = ({
}: ModalProps): ReactElement => {
const { currentTake, nextTake, isEmpty, isLoading, dismissCurrent } =
useDiscoverHotTakes();
- const { toggleUpvote, toggleDownvote } = useVoteHotTake();
+ const { toggleUpvote, toggleDownvote, cancelHotTakeVote } = useVoteHotTake();
const { logEvent } = useLogContext();
const { user } = useAuthContext();
const [swipeDelta, setSwipeDelta] = useState(0);
@@ -608,6 +853,8 @@ const HotAndColdModal = ({
const animatingTakeIdRef = useRef(null);
const flyTimerRef = useRef | null>(null);
const dismissTimerRef = useRef | null>(null);
+ const [skipDelta, setSkipDelta] = useState(0);
+ const swipeDeltaYRef = useRef(0);
useEffect(() => {
animatingTakeIdRef.current = animatingTakeId;
@@ -617,6 +864,8 @@ const HotAndColdModal = ({
if (!isAnimating) {
setSwipeDelta(0);
swipeDeltaRef.current = 0;
+ setSkipDelta(0);
+ swipeDeltaYRef.current = 0;
setIsDragging(false);
}
}, [currentTake?.id, isAnimating]);
@@ -632,12 +881,18 @@ const HotAndColdModal = ({
};
}, []);
- const handleDismiss = useCallback(
- (direction: 'left' | 'right', source: 'swipe' | 'button' = 'swipe') => {
- if (!currentTake || isAnimating) {
- return;
- }
-
+ const startDismissAnimation = useCallback(
+ ({
+ takeId,
+ durationMs,
+ flyDelayMs,
+ onFly,
+ }: {
+ takeId: string;
+ durationMs: number;
+ flyDelayMs: number;
+ onFly: () => void;
+ }) => {
if (flyTimerRef.current) {
clearTimeout(flyTimerRef.current);
}
@@ -645,18 +900,50 @@ const HotAndColdModal = ({
clearTimeout(dismissTimerRef.current);
}
- const isButtonDismiss = source === 'button';
- const currentDismissDurationMs =
- source === 'button'
- ? BUTTON_DISMISS_ANIMATION_MS
- : DISMISS_ANIMATION_MS;
- const flyKickDelayMs = isButtonDismiss ? BUTTON_FLY_KICK_DELAY_MS : 0;
-
- animatingTakeIdRef.current = currentTake.id;
- setAnimatingTakeId(currentTake.id);
- setDismissDurationMs(currentDismissDurationMs);
+ animatingTakeIdRef.current = takeId;
+ setAnimatingTakeId(takeId);
+ setDismissDurationMs(durationMs);
setIsAnimating(true);
setIsDragging(false);
+
+ flyTimerRef.current = setTimeout(() => {
+ if (animatingTakeIdRef.current !== takeId) {
+ flyTimerRef.current = null;
+ return;
+ }
+ onFly();
+ flyTimerRef.current = null;
+ }, flyDelayMs);
+
+ dismissTimerRef.current = setTimeout(() => {
+ if (animatingTakeIdRef.current !== takeId) {
+ dismissTimerRef.current = null;
+ return;
+ }
+ setSwipeDelta(0);
+ swipeDeltaRef.current = 0;
+ setSkipDelta(0);
+ swipeDeltaYRef.current = 0;
+ animatingTakeIdRef.current = null;
+ setAnimatingTakeId(null);
+ dismissCurrent();
+ setIsAnimating(false);
+ dismissTimerRef.current = null;
+ }, durationMs);
+ },
+ [dismissCurrent],
+ );
+
+ const handleDismiss = useCallback(
+ (direction: 'left' | 'right', source: 'swipe' | 'button' = 'swipe') => {
+ if (!currentTake || isAnimating) {
+ return;
+ }
+
+ const isButtonSource = source === 'button';
+ const durationMs = isButtonSource
+ ? BUTTON_DISMISS_ANIMATION_MS
+ : DISMISS_ANIMATION_MS;
const vote = direction === 'right' ? 'hot' : 'cold';
logEvent({
@@ -677,10 +964,9 @@ const HotAndColdModal = ({
});
}
- // Start from current drag position, then finish the swipe with momentum.
let initialPush: number;
let flyDistance: number;
- if (source === 'button') {
+ if (isButtonSource) {
initialPush =
direction === 'right'
? SWIPE_THRESHOLD * 0.45
@@ -698,34 +984,18 @@ const HotAndColdModal = ({
direction === 'right' ? DISMISS_FLY_DISTANCE : -DISMISS_FLY_DISTANCE;
}
setSwipeDelta(initialPush);
- const dismissingTakeId = currentTake.id;
- flyTimerRef.current = setTimeout(() => {
- if (animatingTakeIdRef.current !== dismissingTakeId) {
- flyTimerRef.current = null;
- return;
- }
- setSwipeDelta(flyDistance);
- flyTimerRef.current = null;
- }, flyKickDelayMs);
- dismissTimerRef.current = setTimeout(() => {
- if (animatingTakeIdRef.current !== dismissingTakeId) {
- dismissTimerRef.current = null;
- return;
- }
- setSwipeDelta(0);
- swipeDeltaRef.current = 0;
- animatingTakeIdRef.current = null;
- setAnimatingTakeId(null);
- dismissCurrent();
- setIsAnimating(false);
- dismissTimerRef.current = null;
- }, currentDismissDurationMs);
+ startDismissAnimation({
+ takeId: currentTake.id,
+ durationMs,
+ flyDelayMs: isButtonSource ? BUTTON_FLY_KICK_DELAY_MS : 0,
+ onFly: () => setSwipeDelta(flyDistance),
+ });
},
[
currentTake,
isAnimating,
- dismissCurrent,
+ startDismissAnimation,
toggleDownvote,
toggleUpvote,
logEvent,
@@ -733,18 +1003,50 @@ const HotAndColdModal = ({
],
);
+ const handleSkip = useCallback(
+ (source: 'swipe' | 'button' = 'button') => {
+ if (!currentTake || isAnimating) {
+ return;
+ }
+
+ logEvent({
+ event_name: LogEvent.SkipHotTake,
+ target_id: currentTake.id,
+ });
+
+ cancelHotTakeVote({ id: currentTake.id });
+
+ startDismissAnimation({
+ takeId: currentTake.id,
+ durationMs: SKIP_DISMISS_ANIMATION_MS,
+ flyDelayMs: source === 'button' ? BUTTON_FLY_KICK_DELAY_MS : 0,
+ onFly: () => setSkipDelta(-SKIP_DISMISS_FLY_DISTANCE),
+ });
+ },
+ [
+ cancelHotTakeVote,
+ currentTake,
+ isAnimating,
+ startDismissAnimation,
+ logEvent,
+ ],
+ );
+
const isCurrentTakeAnimating =
!!currentTake && isAnimating && animatingTakeId === currentTake.id;
const cardSwipeDelta =
isAnimating && !isCurrentTakeAnimating ? 0 : swipeDelta;
+ const cardSkipDelta = isAnimating && !isCurrentTakeAnimating ? 0 : skipDelta;
const handleSwiped = (direction: 'left' | 'right') => {
setIsDragging(false);
+ setSkipDelta(0);
if (Math.abs(swipeDeltaRef.current) > SWIPE_THRESHOLD) {
handleDismiss(direction, 'swipe');
} else {
setSwipeDelta(0);
swipeDeltaRef.current = 0;
+ swipeDeltaYRef.current = 0;
}
};
@@ -753,11 +1055,33 @@ const HotAndColdModal = ({
if (!isAnimating) {
setIsDragging(true);
setSwipeDelta(e.deltaX);
+ if (e.deltaY < 0 && Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
+ setSkipDelta(getElasticDelta(e.deltaY));
+ } else {
+ setSkipDelta(0);
+ }
swipeDeltaRef.current = e.deltaX;
+ swipeDeltaYRef.current = e.deltaY;
}
},
onSwipedLeft: () => handleSwiped('left'),
onSwipedRight: () => handleSwiped('right'),
+ onSwipedUp: () => {
+ setIsDragging(false);
+ if (
+ swipeDeltaYRef.current < 0 &&
+ Math.abs(swipeDeltaYRef.current) > SWIPE_THRESHOLD
+ ) {
+ setSwipeDelta(0);
+ swipeDeltaRef.current = 0;
+ handleSkip('swipe');
+ } else {
+ setSwipeDelta(0);
+ swipeDeltaRef.current = 0;
+ setSkipDelta(0);
+ swipeDeltaYRef.current = 0;
+ }
+ },
trackMouse: true,
preventScrollOnSwipe: true,
touchEventOptions: { passive: false },
@@ -807,13 +1131,14 @@ const HotAndColdModal = ({
isTop
offset={0}
swipeDelta={cardSwipeDelta}
+ skipDeltaY={cardSkipDelta}
isDismissAnimating={isCurrentTakeAnimating}
isDragging={isDragging}
dismissDurationMs={dismissDurationMs}
/>
-
+
+