ecency/ecency-mobile
1
1
Fork 0
mirror of https://github.com/ecency/ecency-mobile.git synced 2024-12-03 11:40:44 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

attempt to make overall vote interaction more responsive

Browse Source
This commit is contained in:
Nouman Tahir 2023-03-02 02:56:42 +05:00
parent 5d3a0f4ba0
commit f11d20e8c9
2 changed files with 43 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
src/components/postCard/children/upvoteButton.tsx
View File

@ -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<any>(null);
const [isDownVoted, setIsDownVoted] = useState<any>(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}
>
<Fragment>
{/* <Fragment>
{isVoting ? (
<View style={{ width: 19 }}>
<PulseAnimation
@ -124,7 +129,7 @@ export const UpvoteButton = ({
isShow={!isVoting}
/>
</View>
) : (
) : ( */}
<View hitSlop={{ top: 10, bottom: 10, left: 10, right: 5 }}>
<Icon
style={[styles.upvoteIcon, isDownVoted && { color: '#ec8b88' }]}
@ -133,8 +138,8 @@ export const UpvoteButton = ({
name={isDownVoted ? downVoteIconName : iconName}
/>
</View>
)}
</Fragment>
{/* )}
</Fragment> */}
</TouchableOpacity>
<View style={styles.payoutTextButton}>
{isShowPayoutValue && (

17
src/components/upvotePopover/container/upvotePopover.tsx
View File

@ -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;
});