2021-01-01 16:48:16 +01:00
|
|
|
import Button from '@components/Button'
|
|
|
|
import haptics from '@components/haptics'
|
2023-01-15 20:34:22 +01:00
|
|
|
import { Loading } from '@components/Loading'
|
2021-01-01 16:48:16 +01:00
|
|
|
import { ParseHTML } from '@components/Parse'
|
2022-06-10 17:02:04 +02:00
|
|
|
import RelativeTime from '@components/RelativeTime'
|
2022-05-07 00:52:32 +02:00
|
|
|
import CustomText from '@components/Text'
|
2021-01-30 01:29:15 +01:00
|
|
|
import { BlurView } from '@react-native-community/blur'
|
2021-03-27 00:02:32 +01:00
|
|
|
import { useAccessibility } from '@utils/accessibility/AccessibilityManager'
|
2023-01-31 14:26:43 +01:00
|
|
|
import { connectMedia } from '@utils/api/helpers/connect'
|
2021-08-29 15:25:38 +02:00
|
|
|
import { RootStackScreenProps } from '@utils/navigation/navigators'
|
2022-11-29 23:44:11 +01:00
|
|
|
import { useAnnouncementMutation, useAnnouncementQuery } from '@utils/queryHooks/announcement'
|
2021-01-01 16:48:16 +01:00
|
|
|
import { StyleConstants } from '@utils/styles/constants'
|
|
|
|
import { useTheme } from '@utils/styles/ThemeManager'
|
2022-12-29 00:36:35 +01:00
|
|
|
import React, { useEffect, useState } from 'react'
|
2021-01-19 01:13:45 +01:00
|
|
|
import { Trans, useTranslation } from 'react-i18next'
|
2022-08-07 01:18:10 +02:00
|
|
|
import {
|
|
|
|
Dimensions,
|
|
|
|
NativeScrollEvent,
|
|
|
|
NativeSyntheticEvent,
|
|
|
|
Platform,
|
|
|
|
Pressable,
|
|
|
|
StyleSheet,
|
|
|
|
View
|
|
|
|
} from 'react-native'
|
2021-03-27 00:02:32 +01:00
|
|
|
import FastImage from 'react-native-fast-image'
|
2020-12-23 01:31:11 +01:00
|
|
|
import { FlatList, ScrollView } from 'react-native-gesture-handler'
|
|
|
|
import { SafeAreaView } from 'react-native-safe-area-context'
|
|
|
|
|
2022-11-29 23:44:11 +01:00
|
|
|
const ScreenAnnouncements: React.FC<RootStackScreenProps<'Screen-Announcements'>> = ({
|
2020-12-23 15:57:20 +01:00
|
|
|
route: {
|
2021-01-07 22:18:14 +01:00
|
|
|
params: { showAll = false }
|
2020-12-23 15:57:20 +01:00
|
|
|
},
|
|
|
|
navigation
|
|
|
|
}) => {
|
2021-03-27 00:02:32 +01:00
|
|
|
const { reduceMotionEnabled } = useAccessibility()
|
2022-02-12 14:51:01 +01:00
|
|
|
const { colors, mode } = useTheme()
|
2020-12-23 01:31:11 +01:00
|
|
|
const [index, setIndex] = useState(0)
|
2021-03-28 23:31:10 +02:00
|
|
|
const { t } = useTranslation('screenAnnouncements')
|
2020-12-23 01:31:11 +01:00
|
|
|
|
2021-01-11 21:36:57 +01:00
|
|
|
const query = useAnnouncementQuery({
|
2021-01-07 19:13:09 +01:00
|
|
|
showAll,
|
|
|
|
options: {
|
|
|
|
select: announcements =>
|
2022-11-29 23:44:11 +01:00
|
|
|
announcements.filter(announcement => (showAll ? announcement : !announcement.read))
|
2021-01-07 19:13:09 +01:00
|
|
|
}
|
2020-12-23 01:31:11 +01:00
|
|
|
})
|
2021-01-11 21:36:57 +01:00
|
|
|
const mutation = useAnnouncementMutation({
|
2020-12-23 01:31:11 +01:00
|
|
|
onSettled: () => {
|
2020-12-30 14:33:33 +01:00
|
|
|
haptics('Success')
|
2021-01-11 21:36:57 +01:00
|
|
|
query.refetch()
|
2020-12-23 01:31:11 +01:00
|
|
|
}
|
|
|
|
})
|
|
|
|
|
|
|
|
useEffect(() => {
|
2021-01-11 21:36:57 +01:00
|
|
|
if (!showAll && query.data?.length === 0) {
|
2020-12-23 01:31:11 +01:00
|
|
|
navigation.goBack()
|
|
|
|
}
|
2021-01-11 21:36:57 +01:00
|
|
|
}, [query.data])
|
2020-12-23 01:31:11 +01:00
|
|
|
|
2022-12-29 00:36:35 +01:00
|
|
|
const renderItem = ({ item, index }: { item: Mastodon.Announcement; index: number }) => (
|
|
|
|
<View
|
|
|
|
key={index}
|
|
|
|
style={{
|
|
|
|
width: Dimensions.get('window').width,
|
|
|
|
padding: StyleConstants.Spacing.Global.PagePadding,
|
|
|
|
marginVertical: StyleConstants.Spacing.Global.PagePadding,
|
|
|
|
justifyContent: 'center'
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<Pressable style={StyleSheet.absoluteFillObject} onPress={() => navigation.goBack()} />
|
2022-05-07 00:52:32 +02:00
|
|
|
<View
|
|
|
|
style={{
|
2022-12-29 00:36:35 +01:00
|
|
|
flexShrink: 1,
|
2022-05-07 00:52:32 +02:00
|
|
|
padding: StyleConstants.Spacing.Global.PagePadding,
|
2022-12-29 00:36:35 +01:00
|
|
|
marginTop: StyleConstants.Spacing.Global.PagePadding,
|
|
|
|
borderWidth: 1,
|
|
|
|
borderRadius: 6,
|
|
|
|
borderColor: colors.primaryDefault,
|
|
|
|
backgroundColor: colors.backgroundDefault
|
2022-05-07 00:52:32 +02:00
|
|
|
}}
|
|
|
|
>
|
2022-12-29 00:36:35 +01:00
|
|
|
<CustomText
|
|
|
|
fontStyle='S'
|
2022-05-07 00:52:32 +02:00
|
|
|
style={{
|
2022-12-29 00:36:35 +01:00
|
|
|
marginBottom: StyleConstants.Spacing.S,
|
|
|
|
color: colors.secondary
|
2022-05-07 00:52:32 +02:00
|
|
|
}}
|
2020-12-23 01:31:11 +01:00
|
|
|
>
|
2022-12-29 00:36:35 +01:00
|
|
|
<Trans
|
|
|
|
ns='screenAnnouncements'
|
|
|
|
i18nKey='content.published'
|
|
|
|
components={[<RelativeTime time={item.published_at} />]}
|
|
|
|
/>
|
|
|
|
</CustomText>
|
|
|
|
<ScrollView
|
|
|
|
style={{
|
|
|
|
marginBottom: StyleConstants.Spacing.Global.PagePadding / 2
|
|
|
|
}}
|
|
|
|
showsVerticalScrollIndicator
|
|
|
|
>
|
|
|
|
<ParseHTML
|
|
|
|
content={item.content}
|
|
|
|
size='M'
|
|
|
|
emojis={item.emojis}
|
|
|
|
mentions={item.mentions}
|
|
|
|
numberOfLines={999}
|
|
|
|
selectable
|
|
|
|
/>
|
|
|
|
</ScrollView>
|
|
|
|
{item.reactions?.length ? (
|
|
|
|
<View
|
2022-05-07 00:52:32 +02:00
|
|
|
style={{
|
2022-12-29 00:36:35 +01:00
|
|
|
flexDirection: 'row',
|
|
|
|
flexWrap: 'wrap',
|
2022-05-07 00:52:32 +02:00
|
|
|
marginBottom: StyleConstants.Spacing.Global.PagePadding / 2
|
|
|
|
}}
|
|
|
|
>
|
2022-12-29 00:36:35 +01:00
|
|
|
{item.reactions?.map(reaction => (
|
|
|
|
<Pressable
|
|
|
|
key={reaction.name}
|
|
|
|
style={{
|
|
|
|
borderWidth: 1,
|
|
|
|
padding: StyleConstants.Spacing.Global.PagePadding / 2,
|
|
|
|
marginTop: StyleConstants.Spacing.Global.PagePadding / 2,
|
|
|
|
marginBottom: StyleConstants.Spacing.Global.PagePadding / 2,
|
|
|
|
marginRight: StyleConstants.Spacing.M,
|
|
|
|
borderRadius: 6,
|
|
|
|
flexDirection: 'row',
|
|
|
|
borderColor: reaction.me ? colors.disabled : colors.primaryDefault,
|
|
|
|
backgroundColor: reaction.me ? colors.disabled : colors.backgroundDefault
|
|
|
|
}}
|
|
|
|
onPress={() =>
|
|
|
|
mutation.mutate({
|
|
|
|
id: item.id,
|
|
|
|
type: 'reaction',
|
|
|
|
name: reaction.name,
|
|
|
|
me: reaction.me
|
|
|
|
})
|
|
|
|
}
|
|
|
|
>
|
|
|
|
{reaction.url ? (
|
|
|
|
<FastImage
|
2023-01-31 14:26:43 +01:00
|
|
|
source={connectMedia({
|
2022-12-29 00:36:35 +01:00
|
|
|
uri: reduceMotionEnabled ? reaction.static_url : reaction.url
|
2023-01-29 15:32:40 +01:00
|
|
|
})}
|
2022-12-29 00:36:35 +01:00
|
|
|
style={{
|
|
|
|
width: StyleConstants.Font.LineHeight.M + 3,
|
|
|
|
height: StyleConstants.Font.LineHeight.M
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
) : (
|
|
|
|
<CustomText fontStyle='M'>{reaction.name}</CustomText>
|
|
|
|
)}
|
|
|
|
{reaction.count ? (
|
|
|
|
<CustomText
|
|
|
|
fontStyle='S'
|
|
|
|
style={{
|
|
|
|
marginLeft: StyleConstants.Spacing.S,
|
|
|
|
color: colors.primaryDefault
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
{reaction.count}
|
|
|
|
</CustomText>
|
|
|
|
) : null}
|
|
|
|
</Pressable>
|
|
|
|
))}
|
|
|
|
</View>
|
|
|
|
) : null}
|
|
|
|
<Button
|
|
|
|
type='text'
|
|
|
|
content={item.read ? t('content.button.read') : t('content.button.unread')}
|
|
|
|
loading={mutation.isLoading}
|
|
|
|
disabled={item.read}
|
|
|
|
onPress={() => {
|
|
|
|
!item.read &&
|
|
|
|
mutation.mutate({
|
|
|
|
id: item.id,
|
|
|
|
type: 'dismiss'
|
|
|
|
})
|
|
|
|
}}
|
|
|
|
/>
|
2020-12-23 01:31:11 +01:00
|
|
|
</View>
|
2022-12-29 00:36:35 +01:00
|
|
|
</View>
|
2020-12-23 01:31:11 +01:00
|
|
|
)
|
|
|
|
|
2022-12-29 00:36:35 +01:00
|
|
|
const onMomentumScrollEnd = ({
|
|
|
|
nativeEvent: {
|
|
|
|
contentOffset: { x },
|
|
|
|
layoutMeasurement: { width }
|
|
|
|
}
|
|
|
|
}: NativeSyntheticEvent<NativeScrollEvent>) => setIndex(Math.floor(x / width))
|
2020-12-23 01:31:11 +01:00
|
|
|
|
2022-12-29 00:36:35 +01:00
|
|
|
const ListEmptyComponent = () => {
|
2021-01-10 02:12:14 +01:00
|
|
|
return (
|
2023-01-15 20:34:22 +01:00
|
|
|
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
|
|
|
|
<Loading />
|
2021-01-10 02:12:14 +01:00
|
|
|
</View>
|
|
|
|
)
|
2022-12-29 00:36:35 +01:00
|
|
|
}
|
2021-01-10 02:12:14 +01:00
|
|
|
|
2022-01-03 18:33:30 +01:00
|
|
|
return Platform.OS === 'ios' ? (
|
2021-01-30 01:29:15 +01:00
|
|
|
<BlurView
|
|
|
|
blurType={mode}
|
|
|
|
blurAmount={20}
|
2022-05-07 00:52:32 +02:00
|
|
|
style={{ flex: 1 }}
|
2022-02-12 14:51:01 +01:00
|
|
|
reducedTransparencyFallbackColor={colors.backgroundDefault}
|
2021-01-30 01:29:15 +01:00
|
|
|
>
|
2022-05-07 00:52:32 +02:00
|
|
|
<SafeAreaView style={{ flex: 1 }}>
|
2021-01-30 01:29:15 +01:00
|
|
|
<FlatList
|
|
|
|
horizontal
|
|
|
|
data={query.data}
|
|
|
|
pagingEnabled
|
|
|
|
renderItem={renderItem}
|
|
|
|
showsHorizontalScrollIndicator={false}
|
|
|
|
onMomentumScrollEnd={onMomentumScrollEnd}
|
|
|
|
ListEmptyComponent={ListEmptyComponent}
|
|
|
|
/>
|
2022-05-07 00:52:32 +02:00
|
|
|
<View
|
|
|
|
style={{
|
|
|
|
flexDirection: 'row',
|
|
|
|
justifyContent: 'center',
|
|
|
|
alignItems: 'center',
|
|
|
|
minHeight: 49
|
|
|
|
}}
|
|
|
|
>
|
2021-01-30 01:29:15 +01:00
|
|
|
{query.data && query.data.length > 1 ? (
|
|
|
|
<>
|
|
|
|
{query.data.map((d, i) => (
|
|
|
|
<View
|
|
|
|
key={i}
|
2022-05-07 00:52:32 +02:00
|
|
|
style={{
|
|
|
|
width: StyleConstants.Spacing.S,
|
|
|
|
height: StyleConstants.Spacing.S,
|
|
|
|
borderRadius: StyleConstants.Spacing.S,
|
|
|
|
borderWidth: 1,
|
|
|
|
borderColor: colors.primaryDefault,
|
2022-11-29 23:44:11 +01:00
|
|
|
backgroundColor: i === index ? colors.primaryDefault : undefined,
|
|
|
|
marginLeft: i === query.data.length ? 0 : StyleConstants.Spacing.S
|
2022-05-07 00:52:32 +02:00
|
|
|
}}
|
2021-01-30 01:29:15 +01:00
|
|
|
/>
|
|
|
|
))}
|
|
|
|
</>
|
|
|
|
) : null}
|
|
|
|
</View>
|
|
|
|
</SafeAreaView>
|
|
|
|
</BlurView>
|
2022-01-03 18:33:30 +01:00
|
|
|
) : (
|
2022-11-29 23:44:11 +01:00
|
|
|
<SafeAreaView style={{ flex: 1, backgroundColor: colors.backgroundDefault }}>
|
2022-01-03 18:33:30 +01:00
|
|
|
<FlatList
|
|
|
|
horizontal
|
|
|
|
data={query.data}
|
|
|
|
pagingEnabled
|
|
|
|
renderItem={renderItem}
|
|
|
|
showsHorizontalScrollIndicator={false}
|
|
|
|
onMomentumScrollEnd={onMomentumScrollEnd}
|
|
|
|
ListEmptyComponent={ListEmptyComponent}
|
|
|
|
/>
|
2022-05-07 00:52:32 +02:00
|
|
|
<View
|
|
|
|
style={{
|
|
|
|
flexDirection: 'row',
|
|
|
|
justifyContent: 'center',
|
|
|
|
alignItems: 'center',
|
|
|
|
minHeight: 49
|
|
|
|
}}
|
|
|
|
>
|
2022-01-03 18:33:30 +01:00
|
|
|
{query.data && query.data.length > 1 ? (
|
|
|
|
<>
|
|
|
|
{query.data.map((d, i) => (
|
|
|
|
<View
|
|
|
|
key={i}
|
2022-05-07 00:52:32 +02:00
|
|
|
style={{
|
|
|
|
width: StyleConstants.Spacing.S,
|
|
|
|
height: StyleConstants.Spacing.S,
|
|
|
|
borderRadius: StyleConstants.Spacing.S,
|
|
|
|
borderWidth: 1,
|
|
|
|
borderColor: colors.primaryDefault,
|
2022-11-29 23:44:11 +01:00
|
|
|
backgroundColor: i === index ? colors.primaryDefault : undefined,
|
|
|
|
marginLeft: i === query.data.length ? 0 : StyleConstants.Spacing.S
|
2022-05-07 00:52:32 +02:00
|
|
|
}}
|
2022-01-03 18:33:30 +01:00
|
|
|
/>
|
|
|
|
))}
|
|
|
|
</>
|
|
|
|
) : null}
|
|
|
|
</View>
|
|
|
|
</SafeAreaView>
|
2020-12-23 01:31:11 +01:00
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2021-01-30 01:29:15 +01:00
|
|
|
export default ScreenAnnouncements
|