zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

#420: add updateDataOptimistically utility to disallow like counter out of sync (#446)

Browse source 
* add isLikedPressed flag to disallow like counter out of sync

* create revertible helper for updateDataOptimistically

* test implementation

* Update updateDataOptimistically() and apply to reposts

---------

Co-authored-by: Paul Frazee <pfrazee@gmail.com>
This commit is contained in:
Ansh 2023-04-19 13:58:24 -07:00 • committed by GitHub
parent be83d2933c
commit 1472bd4f17
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 173 additions and 125 deletions
Download patch file Download diff file Expand all files Collapse all files

74
src/view/com/util/PostCtrls.tsx
View file

@ -103,8 +103,6 @@ export function PostCtrls(opts: PostCtrlsOpts) {
}),
[theme],
) as StyleProp<ViewStyle>
const [repostMod, setRepostMod] = React.useState<number>(0)
const [likeMod, setLikeMod] = React.useState<number>(0)
// DISABLED see #135
// const repostRef = React.useRef<TriggerableAnimatedRef | null>(null)
// const likeRef = React.useRef<TriggerableAnimatedRef | null>(null)
@ -112,11 +110,7 @@ export function PostCtrls(opts: PostCtrlsOpts) {
store.shell.closeModal()
if (!opts.isReposted) {
ReactNativeHapticFeedback.trigger('impactMedium')
setRepostMod(1)
opts
.onPressToggleRepost()
.catch(_e => undefined)
.then(() => setRepostMod(0))
opts.onPressToggleRepost().catch(_e => undefined)
// DISABLED see #135
// repostRef.current?.trigger(
// {start: ctrlAnimStart, style: ctrlAnimStyle},
@ -126,11 +120,7 @@ export function PostCtrls(opts: PostCtrlsOpts) {
// },
// )
} else {
setRepostMod(-1)
opts
.onPressToggleRepost()
.catch(_e => undefined)
.then(() => setRepostMod(0))
opts.onPressToggleRepost().catch(_e => undefined)
}
}
@ -157,14 +147,10 @@ export function PostCtrls(opts: PostCtrlsOpts) {
})
}
const onPressToggleLikeWrapper = () => {
const onPressToggleLikeWrapper = async () => {
if (!opts.isLiked) {
ReactNativeHapticFeedback.trigger('impactMedium')
setLikeMod(1)
opts
.onPressToggleLike()
.catch(_e => undefined)
.then(() => setLikeMod(0))
await opts.onPressToggleLike().catch(_e => undefined)
// DISABLED see #135
// likeRef.current?.trigger(
// {start: ctrlAnimStart, style: ctrlAnimStyle},
@ -173,12 +159,10 @@ export function PostCtrls(opts: PostCtrlsOpts) {
// setLikeMod(0)
// },
// )
// setIsLikedPressed(false)
} else {
setLikeMod(-1)
opts
.onPressToggleLike()
.catch(_e => undefined)
.then(() => setLikeMod(0))
await opts.onPressToggleLike().catch(_e => undefined)
// setIsLikedPressed(false)
}
}
@ -210,35 +194,22 @@ export function PostCtrls(opts: PostCtrlsOpts) {
style={styles.ctrl}>
<RepostIcon
style={
opts.isReposted || repostMod > 0
opts.isReposted
? (styles.ctrlIconReposted as StyleProp<ViewStyle>)
: defaultCtrlColor
}
strokeWidth={2.4}
size={opts.big ? 24 : 20}
/>
{
undefined /*DISABLED see #135 <TriggerableAnimated ref={repostRef}>
<RepostIcon
style={
(opts.isReposted
? styles.ctrlIconReposted
: defaultCtrlColor) as ViewStyle
}
strokeWidth={2.4}
size={opts.big ? 24 : 20}
/>
</TriggerableAnimated>*/
}
{typeof opts.repostCount !== 'undefined' ? (
<Text
testID="repostCount"
style={
opts.isReposted || repostMod > 0
opts.isReposted
? [s.bold, s.green3, s.f15, s.ml5]
: [defaultCtrlColor, s.f15, s.ml5]
}>
{opts.repostCount + repostMod}
{opts.repostCount}
</Text>
) : undefined}
</TouchableOpacity>
@ -249,7 +220,7 @@ export function PostCtrls(opts: PostCtrlsOpts) {
style={styles.ctrl}
hitSlop={HITSLOP}
onPress={onPressToggleLikeWrapper}>
{opts.isLiked || likeMod > 0 ? (
{opts.isLiked ? (
<HeartIconSolid
style={styles.ctrlIconLiked as StyleProp<ViewStyle>}
size={opts.big ? 22 : 16}
@ -261,34 +232,15 @@ export function PostCtrls(opts: PostCtrlsOpts) {
size={opts.big ? 20 : 16}
/>
)}
{
undefined /*DISABLED see #135 <TriggerableAnimated ref={likeRef}>
{opts.isLiked || likeMod > 0 ? (
<HeartIconSolid
style={styles.ctrlIconLiked as ViewStyle}
size={opts.big ? 22 : 16}
/>
) : (
<HeartIcon
style={[
defaultCtrlColor as ViewStyle,
opts.big ? styles.mt1 : undefined,
]}
strokeWidth={3}
size={opts.big ? 20 : 16}
/>
)}
</TriggerableAnimated>*/
}
{typeof opts.likeCount !== 'undefined' ? (
<Text
testID="likeCount"
style={
opts.isLiked || likeMod > 0
opts.isLiked
? [s.bold, s.red3, s.f15, s.ml5]
: [defaultCtrlColor, s.f15, s.ml5]
}>
{opts.likeCount + likeMod}
{opts.likeCount}
</Text>
) : undefined}
</TouchableOpacity>