tooot/src/components/Timeline/Shared/Feedback.tsx

147 lines
4.8 KiB
TypeScript
Raw Normal View History

2022-04-29 23:57:18 +02:00
import analytics from '@components/analytics'
import CustomText from '@components/Text'
2022-04-29 23:57:18 +02:00
import { useNavigation } from '@react-navigation/native'
import { StackNavigationProp } from '@react-navigation/stack'
import { TabLocalStackParamList } from '@utils/navigation/navigators'
import { useStatusHistory } from '@utils/queryHooks/statusesHistory'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React from 'react'
import { useTranslation } from 'react-i18next'
import { StyleSheet, View } from 'react-native'
2022-04-29 23:57:18 +02:00
export interface Props {
2022-04-30 21:47:17 +02:00
status: Pick<
Mastodon.Status,
'id' | 'edited_at' | 'reblogs_count' | 'favourites_count'
>
2022-04-29 23:57:18 +02:00
highlighted: boolean
}
const TimelineFeedback = React.memo(
({ status, highlighted }: Props) => {
if (!highlighted) {
return null
}
const { t } = useTranslation('componentTimeline')
const { colors } = useTheme()
const navigation =
useNavigation<StackNavigationProp<TabLocalStackParamList>>()
const { data } = useStatusHistory({
id: status.id,
options: { enabled: status.edited_at !== undefined }
})
return (
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
2022-04-30 23:41:48 +02:00
<View style={{ flexDirection: 'row' }}>
2022-04-29 23:57:18 +02:00
{status.reblogs_count > 0 ? (
<CustomText
2022-04-29 23:57:18 +02:00
accessibilityLabel={t(
'shared.actionsUsers.reblogged_by.accessibilityLabel',
{
count: status.reblogs_count
}
)}
accessibilityHint={t(
'shared.actionsUsers.reblogged_by.accessibilityHint'
)}
accessibilityRole='button'
style={[styles.text, { color: colors.blue }]}
onPress={() => {
analytics('timeline_shared_feedback_press_reblog', {
count: status.reblogs_count
})
navigation.push('Tab-Shared-Users', {
reference: 'statuses',
id: status.id,
type: 'reblogged_by',
count: status.reblogs_count
})
}}
>
{t('shared.actionsUsers.reblogged_by.text', {
count: status.reblogs_count
})}
</CustomText>
2022-04-29 23:57:18 +02:00
) : null}
{status.favourites_count > 0 ? (
<CustomText
2022-04-29 23:57:18 +02:00
accessibilityLabel={t(
'shared.actionsUsers.favourited_by.accessibilityLabel',
{
count: status.reblogs_count
}
)}
accessibilityHint={t(
'shared.actionsUsers.favourited_by.accessibilityHint'
)}
accessibilityRole='button'
style={[styles.text, { color: colors.blue }]}
onPress={() => {
analytics('timeline_shared_feedback_press_favourite', {
count: status.favourites_count
})
navigation.push('Tab-Shared-Users', {
reference: 'statuses',
id: status.id,
type: 'favourited_by',
count: status.favourites_count
})
}}
>
{t('shared.actionsUsers.favourited_by.text', {
count: status.favourites_count
})}
</CustomText>
2022-04-29 23:57:18 +02:00
) : null}
</View>
<View>
{data && data.length > 1 ? (
<CustomText
2022-04-29 23:57:18 +02:00
accessibilityLabel={t(
'shared.actionsUsers.history.accessibilityLabel',
{
count: data.length - 1
}
)}
accessibilityHint={t(
'shared.actionsUsers.history.accessibilityHint'
)}
accessibilityRole='button'
style={[styles.text, { marginRight: 0, color: colors.blue }]}
onPress={() => {
analytics('timeline_shared_feedback_press_history', {
count: data.length - 1
})
navigation.push('Tab-Shared-History', { id: status.id })
}}
>
{t('shared.actionsUsers.history.text', {
count: data.length - 1
})}
</CustomText>
2022-04-29 23:57:18 +02:00
) : null}
</View>
</View>
)
},
(prev, next) =>
2022-04-30 21:47:17 +02:00
prev.status.edited_at === next.status.edited_at &&
2022-04-29 23:57:18 +02:00
prev.status.reblogs_count === next.status.reblogs_count &&
prev.status.favourites_count === next.status.favourites_count
)
const styles = StyleSheet.create({
text: {
...StyleConstants.FontStyle.M,
padding: StyleConstants.Spacing.S,
paddingLeft: 0,
marginRight: StyleConstants.Spacing.S
}
})
export default TimelineFeedback