From f11d20e8c9ac166b4da7b8cc4b6ab5888d455306 Mon Sep 17 00:00:00 2001 From: Nouman Tahir Date: Thu, 2 Mar 2023 02:56:42 +0500 Subject: [PATCH] attempt to make overall vote interaction more responsive --- .../postCard/children/upvoteButton.tsx | 65 ++++++++++--------- .../upvotePopover/container/upvotePopover.tsx | 17 +++-- 2 files changed, 43 insertions(+), 39 deletions(-) diff --git a/src/components/postCard/children/upvoteButton.tsx b/src/components/postCard/children/upvoteButton.tsx index 4b416241f..bb6a5e790 100644 --- a/src/components/postCard/children/upvoteButton.tsx +++ b/src/components/postCard/children/upvoteButton.tsx @@ -1,5 +1,5 @@ -import React, { Fragment, useEffect, useRef, useState } from "react"; -import { findNodeHandle, NativeModules, View, TouchableOpacity, Text } from "react-native"; +import React, { Fragment, useCallback, useEffect, useRef, useState } from "react"; +import { findNodeHandle, NativeModules, View, TouchableOpacity, Text, Alert } from "react-native"; import { useAppSelector } from "../../../hooks"; import { PulseAnimation } from "../../animations"; import { isVoted as isVotedFunc, isDownVoted as isDownVotedFunc } from '../../../utils/postParser'; @@ -15,7 +15,7 @@ interface UpvoteButtonProps { isShowPayoutValue?: boolean, boldPayout?: boolean, parentType?: PostTypes; - onUpvotePress: (anchorRect: Rect, onVotingStart: (isVoting:boolean)=>void) => void, + onUpvotePress: (anchorRect: Rect, onVotingStart: (status:number)=>void) => void, onPayoutDetailsPress: (anchorRef: Rect) => void, } @@ -33,29 +33,25 @@ export const UpvoteButton = ({ const currentAccount = useAppSelector((state => state.account.currentAccount)); - const [isVoted, setIsVoted] = useState(null); - const [isDownVoted, setIsDownVoted] = useState(null); - const [isVoting, setIsVoting] = useState(false); + const [isVoted, setIsVoted] = useState(null); + const [isDownVoted, setIsDownVoted] = useState(null); useEffect(() => { - let _isMounted = true; - - const _calculateVoteStatus = async () => { - - //TODO: do this heavy lifting during parsing or react-query/cache response - const _isVoted = await isVotedFunc(activeVotes, currentAccount?.name); - const _isDownVoted = await isDownVotedFunc(activeVotes, currentAccount?.name); - - if (_isMounted) { - setIsVoted(_isVoted && parseInt(_isVoted, 10) / 10000); - setIsDownVoted(_isDownVoted && (parseInt(_isDownVoted, 10) / 10000) * -1); - } - }; - _calculateVoteStatus(); - setIsVoting(false); - return () => { _isMounted = false }; + }, [activeVotes]); + + + const _calculateVoteStatus = useCallback(async () => { + + //TODO: do this heavy lifting during parsing or react-query/cache response + const _isVoted = await isVotedFunc(activeVotes, currentAccount?.name); + const _isDownVoted = await isDownVotedFunc(activeVotes, currentAccount?.name); + + + setIsVoted(_isVoted && parseInt(_isVoted, 10) / 10000); + setIsDownVoted(_isDownVoted && (parseInt(_isDownVoted, 10) / 10000) * -1); + }, [activeVotes]); @@ -64,16 +60,25 @@ export const UpvoteButton = ({ if (handle) { NativeModules.UIManager.measure(handle, (x0, y0, width, height, x, y) => { const anchorRect: Rect = { x, y, width, height }; - callback(anchorRect, (_isVoting) => { - setIsVoting(_isVoting); - }) + callback(anchorRect) }); } } const _onPress = () => { - _getRectFromRef(upvoteRef, onUpvotePress); + const _onVotingStart = (status) => { + if(status > 0){ + setIsVoted(true); + } else if (status < 0) { + setIsDownVoted(true); + } else { + _calculateVoteStatus(); + } + } + _getRectFromRef(upvoteRef, (rect)=>{ + onUpvotePress(rect, _onVotingStart) + }); } const _onDetailsPress = () => { @@ -112,7 +117,7 @@ export const UpvoteButton = ({ onPress={_onPress} style={styles.upvoteButton} > - + {/* {isVoting ? ( - ) : ( + ) : ( */} - )} - + {/* )} + */} {isShowPayoutValue && ( diff --git a/src/components/upvotePopover/container/upvotePopover.tsx b/src/components/upvotePopover/container/upvotePopover.tsx index 8c4b80b2d..18c931e86 100644 --- a/src/components/upvotePopover/container/upvotePopover.tsx +++ b/src/components/upvotePopover/container/upvotePopover.tsx @@ -168,7 +168,7 @@ const UpvotePopover = forwardRef(({ }: Props, ref) => { const _upvoteContent = async () => { if (!isDownVoted) { _closePopover(); - onVotingStartRef.current ? onVotingStartRef.current(true) : null; + onVotingStartRef.current ? onVotingStartRef.current(1) : null; await delay(300) @@ -179,6 +179,7 @@ const UpvotePopover = forwardRef(({ }: Props, ref) => { const _permlink = content?.permlink; console.log(`casting up vote: ${weight}`); + _updateVoteCache(_author, _permlink, amount, false, CacheStatus.PENDING) vote(currentAccount, pinCode, _author, _permlink, weight) .then((response) => { @@ -206,7 +207,6 @@ const UpvotePopover = forwardRef(({ }: Props, ref) => { return; } setIsVoted(!!sliderValue); - onVotingStartRef.current ? onVotingStartRef.current(false) : null; _updateVoteCache(_author, _permlink, amount, false, CacheStatus.PUBLISHED); }) .catch((err) => { @@ -218,12 +218,12 @@ const UpvotePopover = forwardRef(({ }: Props, ref) => { ) { // when RC is not enough, offer boosting account setIsVoted(false); - onVotingStartRef.current ? onVotingStartRef.current(false) : null; + onVotingStartRef.current ? onVotingStartRef.current(0) : null; dispatch(setRcOffer(true)); } else if (err && err.jse_shortmsg && err.jse_shortmsg.includes('wait to transact')) { // when RC is not enough, offer boosting account setIsVoted(false); - onVotingStartRef.current ? onVotingStartRef.current(false) : null; + onVotingStartRef.current ? onVotingStartRef.current(0) : null; dispatch(setRcOffer(true)); } else { // // when voting with same percent or other errors @@ -240,7 +240,7 @@ const UpvotePopover = forwardRef(({ }: Props, ref) => { ), ); _updateVoteCache(_author, _permlink, amount, false, CacheStatus.FAILED); - onVotingStartRef.current ? onVotingStartRef.current(false) : null; + onVotingStartRef.current ? onVotingStartRef.current(0) : null; } }); } else { @@ -252,7 +252,7 @@ const UpvotePopover = forwardRef(({ }: Props, ref) => { const _downvoteContent = async () => { if (isDownVoted) { _closePopover(); - onVotingStartRef.current ? onVotingStartRef.current(true) : null; + onVotingStartRef.current ? onVotingStartRef.current(-1) : null; await delay(300) @@ -263,7 +263,7 @@ const UpvotePopover = forwardRef(({ }: Props, ref) => { const _permlink = content?.permlink; console.log(`casting down vote: ${weight}`); - + _updateVoteCache(_author, _permlink, amount, true, CacheStatus.PENDING); vote(currentAccount, pinCode, _author, _permlink, weight) .then((response) => { @@ -273,7 +273,6 @@ const UpvotePopover = forwardRef(({ }: Props, ref) => { transactionId: response.id, }); setIsVoted(!!sliderValue); - onVotingStartRef.current ? onVotingStartRef.current(false) : null; _updateVoteCache(_author, _permlink, amount, true, CacheStatus.PUBLISHED); }) .catch((err) => { @@ -284,7 +283,7 @@ const UpvotePopover = forwardRef(({ }: Props, ref) => { ); _updateVoteCache(_author, _permlink, amount, true, CacheStatus.FAILED); setIsVoted(false); - onVotingStartRef.current ? onVotingStartRef.current(false) : null; + onVotingStartRef.current ? onVotingStartRef.current(0) : null; });