mirror of https://github.com/tooot-app/app
122 lines
4.2 KiB
TypeScript
122 lines
4.2 KiB
TypeScript
import { HeaderLeft } from '@components/Header'
|
|
import Icon from '@components/Icon'
|
|
import { ParseEmojis } from '@components/Parse'
|
|
import ComponentSeparator from '@components/Separator'
|
|
import CustomText from '@components/Text'
|
|
import TimelineAttachment from '@components/Timeline/Shared/Attachment'
|
|
import StatusContext from '@components/Timeline/Shared/Context'
|
|
import HeaderSharedCreated from '@components/Timeline/Shared/HeaderShared/Created'
|
|
import removeHTML from '@helpers/removeHTML'
|
|
import { TabSharedStackScreenProps } from '@utils/navigation/navigators'
|
|
import { useStatusHistory } from '@utils/queryHooks/statusesHistory'
|
|
import { StyleConstants } from '@utils/styles/constants'
|
|
import { useTheme } from '@utils/styles/ThemeManager'
|
|
import { diffWords } from 'diff'
|
|
import React, { useEffect } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { FlatList, View } from 'react-native'
|
|
|
|
const ContentView: React.FC<{
|
|
item: Mastodon.StatusHistory
|
|
prevItem?: Mastodon.StatusHistory
|
|
}> = ({ item, prevItem }) => {
|
|
const { colors } = useTheme()
|
|
|
|
const changesSpoiler = diffWords(
|
|
removeHTML(prevItem?.spoiler_text || item.spoiler_text || ''),
|
|
removeHTML(item.spoiler_text || '')
|
|
)
|
|
const changesContent = diffWords(
|
|
removeHTML(prevItem?.content || item.content),
|
|
removeHTML(item.content)
|
|
)
|
|
|
|
return (
|
|
// @ts-ignore
|
|
<StatusContext.Provider value={{ status: item, disableOnPress: true }}>
|
|
<View style={{ padding: StyleConstants.Spacing.Global.PagePadding }}>
|
|
<HeaderSharedCreated created_at={item.created_at} />
|
|
{changesSpoiler.length && changesSpoiler[0].count ? (
|
|
<CustomText fontSize='M' style={{ color: colors.primaryDefault }}>
|
|
{changesSpoiler.map(({ value, added, removed }, index) => (
|
|
<ParseEmojis
|
|
key={index}
|
|
content={value}
|
|
emojis={item.emojis}
|
|
style={{
|
|
color: added ? colors.green : removed ? colors.red : undefined,
|
|
textDecorationLine: removed ? 'line-through' : undefined
|
|
}}
|
|
/>
|
|
))}
|
|
</CustomText>
|
|
) : null}
|
|
<CustomText fontSize='M' style={{ color: colors.primaryDefault }}>
|
|
{changesContent.map(({ value, added, removed }, index) => (
|
|
<ParseEmojis
|
|
key={index}
|
|
content={value}
|
|
emojis={item.emojis}
|
|
style={{
|
|
color: added ? colors.green : removed ? colors.red : undefined,
|
|
textDecorationLine: removed ? 'line-through' : undefined
|
|
}}
|
|
/>
|
|
))}
|
|
</CustomText>
|
|
{item.poll?.options.map((option, index) => (
|
|
<View key={index} style={{ flex: 1, paddingVertical: StyleConstants.Spacing.XS }}>
|
|
<View style={{ flex: 1, flexDirection: 'row' }}>
|
|
<Icon
|
|
style={{
|
|
paddingTop: StyleConstants.Font.LineHeight.M - StyleConstants.Font.Size.M,
|
|
marginRight: StyleConstants.Spacing.S
|
|
}}
|
|
name='Circle'
|
|
size={StyleConstants.Font.Size.M}
|
|
color={colors.disabled}
|
|
/>
|
|
<CustomText style={{ flex: 1 }}>
|
|
<ParseEmojis content={option.title} emojis={item.poll?.emojis} />
|
|
</CustomText>
|
|
</View>
|
|
</View>
|
|
))}
|
|
<TimelineAttachment />
|
|
</View>
|
|
</StatusContext.Provider>
|
|
)
|
|
}
|
|
|
|
const TabSharedHistory: React.FC<TabSharedStackScreenProps<'Tab-Shared-History'>> = ({
|
|
navigation,
|
|
route: {
|
|
params: { id }
|
|
}
|
|
}) => {
|
|
const { t } = useTranslation('screenTabs')
|
|
const { data } = useStatusHistory({ id })
|
|
|
|
useEffect(() => {
|
|
navigation.setOptions({
|
|
title: t('shared.history.name'),
|
|
headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} />
|
|
})
|
|
}, [])
|
|
|
|
const dataReversed = data ? [...data].reverse() : []
|
|
|
|
return (
|
|
<FlatList
|
|
style={{ flex: 1, minHeight: '100%' }}
|
|
data={dataReversed}
|
|
renderItem={({ item, index }) => (
|
|
<ContentView item={item} prevItem={dataReversed[index + 1]} />
|
|
)}
|
|
ItemSeparatorComponent={ComponentSeparator}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export default TabSharedHistory
|