tooot/src/screens/Tabs/Shared/Account/Attachments.tsx

147 lines
4.2 KiB
TypeScript
Raw Normal View History

2021-01-24 02:25:43 +01:00
import analytics from '@components/analytics'
2021-01-16 00:00:31 +01:00
import GracefullyImage from '@components/GracefullyImage'
import Icon from '@components/Icon'
import { useNavigation } from '@react-navigation/native'
2021-01-24 02:25:43 +01:00
import { StackNavigationProp } from '@react-navigation/stack'
2021-01-16 00:00:31 +01:00
import { useTimelineQuery } from '@utils/queryHooks/timeline'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React, { useCallback, useEffect } from 'react'
import {
Dimensions,
ListRenderItem,
Pressable,
StyleSheet,
View
} from 'react-native'
import { FlatList } from 'react-native-gesture-handler'
import Animated, { useAnimatedStyle, withTiming } from 'react-native-reanimated'
export interface Props {
account: Mastodon.Account | undefined
}
const AccountAttachments = React.memo(
({ account }: Props) => {
2021-01-24 02:25:43 +01:00
const navigation = useNavigation<
2021-01-30 01:29:15 +01:00
StackNavigationProp<Nav.TabLocalStackParamList>
2021-01-24 02:25:43 +01:00
>()
2021-01-16 00:00:31 +01:00
const { theme } = useTheme()
2021-01-31 03:09:35 +01:00
const DISPLAY_AMOUNT = 6
2021-01-16 00:00:31 +01:00
const width =
(Dimensions.get('screen').width -
StyleConstants.Spacing.Global.PagePadding * 2) /
4
const queryKeyParams = {
page: 'Account_Attachments' as 'Account_Attachments',
account: account?.id
}
2021-02-11 01:33:31 +01:00
const { data, refetch } = useTimelineQuery({
2021-01-16 00:00:31 +01:00
...queryKeyParams,
options: { enabled: false }
})
useEffect(() => {
if (account?.id) {
refetch()
}
}, [account])
2021-01-31 03:09:35 +01:00
const flattenData = data?.pages
? data.pages
2021-02-11 01:33:31 +01:00
.flatMap(d => [...d.body])
.filter(status => !(status as Mastodon.Status).sensitive)
2021-01-31 03:09:35 +01:00
.splice(0, DISPLAY_AMOUNT)
: []
2021-01-16 00:00:31 +01:00
const renderItem = useCallback<ListRenderItem<Mastodon.Status>>(
({ item, index }) => {
2021-01-31 03:09:35 +01:00
if (index === DISPLAY_AMOUNT - 1) {
2021-01-16 00:00:31 +01:00
return (
<Pressable
2021-01-24 02:25:43 +01:00
onPress={() => {
analytics('account_attachment_more_press')
account &&
2021-01-30 01:29:15 +01:00
navigation.push('Tab-Shared-Attachments', { account })
2021-01-24 02:25:43 +01:00
}}
2021-01-16 00:00:31 +01:00
children={
<View
style={{
marginHorizontal: StyleConstants.Spacing.Global.PagePadding,
backgroundColor: theme.backgroundOverlayInvert,
2021-01-16 00:00:31 +01:00
width: width,
height: width,
justifyContent: 'center',
alignItems: 'center'
}}
children={
<Icon
name='MoreHorizontal'
color={theme.primaryOverlay}
size={StyleConstants.Font.Size.L * 1.5}
/>
}
/>
}
/>
)
} else {
return (
<GracefullyImage
uri={{
original: item.media_attachments[0].preview_url,
remote: item.media_attachments[0].remote_url
}}
blurhash={item.media_attachments[0].blurhash}
dimension={{ width: width, height: width }}
style={{ marginLeft: StyleConstants.Spacing.Global.PagePadding }}
2021-01-24 02:25:43 +01:00
onPress={() => {
analytics('account_attachment_item_press')
2021-01-30 01:29:15 +01:00
navigation.push('Tab-Shared-Toot', { toot: item })
2021-01-24 02:25:43 +01:00
}}
2021-01-16 00:00:31 +01:00
/>
)
}
},
[account]
)
const styleContainer = useAnimatedStyle(() => {
if (flattenData.length) {
return {
height: withTiming(
width + StyleConstants.Spacing.Global.PagePadding * 2
),
paddingVertical: StyleConstants.Spacing.Global.PagePadding,
borderTopWidth: 1,
borderTopColor: theme.border
}
} else {
return {}
}
}, [flattenData.length])
return (
<Animated.View style={[styles.base, styleContainer]}>
<FlatList
horizontal
2021-01-31 03:09:35 +01:00
data={flattenData}
2021-01-16 00:00:31 +01:00
renderItem={renderItem}
showsHorizontalScrollIndicator={false}
/>
</Animated.View>
)
},
(_, next) => next.account === undefined
)
const styles = StyleSheet.create({
base: {
flex: 1
}
})
export default AccountAttachments