Fix likes dialog on mobile

This commit is contained in:
Paul Frazee
2024-03-05 21:27:47 -08:00
parent 5100c6b93b
commit 26a338f586
+15 -14
View File
@@ -1,5 +1,5 @@
import React, {useMemo, useCallback} from 'react' import React, {useMemo, useCallback} from 'react'
import {ActivityIndicator, View} from 'react-native' import {ActivityIndicator, FlatList, View} from 'react-native'
import {msg, Trans} from '@lingui/macro' import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react' import {useLingui} from '@lingui/react'
import {AppBskyFeedGetLikes as GetLikes} from '@atproto/api' import {AppBskyFeedGetLikes as GetLikes} from '@atproto/api'
@@ -55,6 +55,7 @@ export function LikesDialogInner({control, uri}: LikesDialogProps) {
if (data?.pages) { if (data?.pages) {
return data.pages.flatMap(page => page.likes) return data.pages.flatMap(page => page.likes)
} }
return []
}, [data]) }, [data])
const onEndReached = useCallback(async () => { const onEndReached = useCallback(async () => {
@@ -92,7 +93,7 @@ export function LikesDialogInner({control, uri}: LikesDialogProps) {
<ActivityIndicator /> <ActivityIndicator />
) : resolveError || isError ? ( ) : resolveError || isError ? (
<ErrorMessage message={cleanError(resolveError || error)} /> <ErrorMessage message={cleanError(resolveError || error)} />
) : likes?.length === 0 ? ( ) : likes.length === 0 ? (
<View style={[t.atoms.bg_contrast_50, a.px_md, a.py_xl, a.rounded_md]}> <View style={[t.atoms.bg_contrast_50, a.px_md, a.py_xl, a.rounded_md]}>
<Text style={[a.text_center]}> <Text style={[a.text_center]}>
<Trans> <Trans>
@@ -100,18 +101,18 @@ export function LikesDialogInner({control, uri}: LikesDialogProps) {
</Trans> </Trans>
</Text> </Text>
</View> </View>
) : ( ) : null}
<Dialog.FlatList <FlatList
data={likes} data={likes}
keyExtractor={item => item.actor.did} keyExtractor={item => item.actor.did}
onEndReached={onEndReached} onEndReached={onEndReached}
renderItem={renderItem} renderItem={renderItem}
initialNumToRender={15} initialNumToRender={15}
ListFooterComponent={ ListFooterComponent={
<ListFooterComponent isFetching={isFetchingNextPage} /> <ListFooterComponent isFetching={isFetchingNextPage} />
} }
/> style={{height: 400}}
)} />
<View style={[gtMobile && [a.flex_row, a.justify_end], a.mt_md]}> <View style={[gtMobile && [a.flex_row, a.justify_end], a.mt_md]}>
<Button <Button
testID="doneBtn" testID="doneBtn"