2022-12-03 16:50:54 +01:00
|
|
|
import { HeaderLeft } from '@components/Header'
|
2022-04-29 23:57:18 +02:00
|
|
|
import Icon from '@components/Icon'
|
|
|
|
import { ParseEmojis } from '@components/Parse'
|
|
|
|
import ComponentSeparator from '@components/Separator'
|
2022-05-07 00:52:32 +02:00
|
|
|
import CustomText from '@components/Text'
|
2022-04-29 23:57:18 +02:00
|
|
|
import TimelineAttachment from '@components/Timeline/Shared/Attachment'
|
2022-12-03 21:14:00 +01:00
|
|
|
import StatusContext from '@components/Timeline/Shared/Context'
|
2022-04-29 23:57:18 +02:00
|
|
|
import HeaderSharedCreated from '@components/Timeline/Shared/HeaderShared/Created'
|
2022-12-28 23:41:36 +01:00
|
|
|
import removeHTML from '@utils/helpers/removeHTML'
|
2022-04-29 23:57:18 +02:00
|
|
|
import { TabSharedStackScreenProps } from '@utils/navigation/navigators'
|
|
|
|
import { useStatusHistory } from '@utils/queryHooks/statusesHistory'
|
|
|
|
import { StyleConstants } from '@utils/styles/constants'
|
|
|
|
import { useTheme } from '@utils/styles/ThemeManager'
|
2022-12-17 23:21:56 +01:00
|
|
|
import { diffChars, diffWords } from 'diff'
|
2022-12-03 16:50:54 +01:00
|
|
|
import React, { useEffect } from 'react'
|
|
|
|
import { useTranslation } from 'react-i18next'
|
2023-01-06 14:00:50 +01:00
|
|
|
import { FlatList, View } from 'react-native'
|
2022-04-29 23:57:18 +02:00
|
|
|
|
2022-12-17 23:21:56 +01:00
|
|
|
const SCRIPTS_WITHOUT_BOUNDARIES = [
|
|
|
|
'my',
|
|
|
|
'zh',
|
|
|
|
'ja',
|
|
|
|
'kar',
|
|
|
|
'km',
|
|
|
|
'lp',
|
|
|
|
'phag',
|
|
|
|
'pwo',
|
|
|
|
'kar',
|
|
|
|
'lana',
|
|
|
|
'th',
|
|
|
|
'bo'
|
|
|
|
]
|
|
|
|
|
2022-12-11 16:52:34 +01:00
|
|
|
const ContentView: React.FC<{
|
2022-12-17 23:21:56 +01:00
|
|
|
withoutBoundary: boolean
|
2022-12-11 16:52:34 +01:00
|
|
|
item: Mastodon.StatusHistory
|
|
|
|
prevItem?: Mastodon.StatusHistory
|
2022-12-17 23:21:56 +01:00
|
|
|
}> = ({ withoutBoundary, item, prevItem }) => {
|
2022-04-29 23:57:18 +02:00
|
|
|
const { colors } = useTheme()
|
2022-12-03 16:50:54 +01:00
|
|
|
|
2022-12-17 23:21:56 +01:00
|
|
|
const changesSpoiler = withoutBoundary
|
|
|
|
? diffChars(
|
|
|
|
removeHTML(prevItem?.spoiler_text || item.spoiler_text || ''),
|
|
|
|
removeHTML(item.spoiler_text || '')
|
|
|
|
)
|
|
|
|
: diffWords(
|
|
|
|
removeHTML(prevItem?.spoiler_text || item.spoiler_text || ''),
|
|
|
|
removeHTML(item.spoiler_text || '')
|
|
|
|
)
|
|
|
|
const changesContent = withoutBoundary
|
|
|
|
? diffChars(removeHTML(prevItem?.content || item.content), removeHTML(item.content))
|
|
|
|
: diffWords(removeHTML(prevItem?.content || item.content), removeHTML(item.content))
|
2023-01-04 23:12:18 +01:00
|
|
|
const changesPoll = item.poll
|
|
|
|
? item.poll.options.map((option, index) =>
|
|
|
|
withoutBoundary
|
|
|
|
? prevItem?.poll?.options[index].title
|
|
|
|
? diffChars(prevItem?.poll?.options[index].title, option.title)
|
|
|
|
: undefined
|
|
|
|
: prevItem?.poll?.options[index].title
|
|
|
|
? diffWords(prevItem?.poll?.options[index].title, option.title)
|
|
|
|
: undefined
|
|
|
|
)
|
|
|
|
: null
|
2022-12-11 16:52:34 +01:00
|
|
|
|
2022-04-29 23:57:18 +02:00
|
|
|
return (
|
2022-12-03 21:14:00 +01:00
|
|
|
// @ts-ignore
|
|
|
|
<StatusContext.Provider value={{ status: item, disableOnPress: true }}>
|
2022-12-11 16:52:34 +01:00
|
|
|
<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}
|
2022-12-03 21:14:00 +01:00
|
|
|
style={{
|
2022-12-11 16:52:34 +01:00
|
|
|
color: added ? colors.green : removed ? colors.red : undefined,
|
|
|
|
textDecorationLine: removed ? 'line-through' : undefined
|
2022-12-03 21:14:00 +01:00
|
|
|
}}
|
|
|
|
/>
|
2022-12-11 16:52:34 +01:00
|
|
|
))}
|
|
|
|
</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
|
|
|
|
}}
|
2023-01-04 23:12:18 +01:00
|
|
|
name={item.poll?.multiple ? 'Square' : 'Circle'}
|
2022-12-11 16:52:34 +01:00
|
|
|
size={StyleConstants.Font.Size.M}
|
2023-01-04 23:12:18 +01:00
|
|
|
color={
|
|
|
|
prevItem?.poll?.multiple !== item.poll?.multiple ? colors.red : colors.disabled
|
|
|
|
}
|
2022-12-11 16:52:34 +01:00
|
|
|
/>
|
2023-01-04 23:12:18 +01:00
|
|
|
<CustomText style={{ flex: 1, color: colors.primaryDefault }}>
|
|
|
|
{changesPoll?.[index]?.length ? (
|
|
|
|
changesPoll[index]?.map(({ value, added, removed }, index) => (
|
|
|
|
<ParseEmojis
|
|
|
|
key={index}
|
|
|
|
content={value}
|
|
|
|
emojis={item.poll?.emojis}
|
|
|
|
style={{
|
|
|
|
color: added ? colors.green : removed ? colors.red : undefined,
|
|
|
|
textDecorationLine: removed ? 'line-through' : undefined
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
))
|
|
|
|
) : (
|
|
|
|
<ParseEmojis content={option.title} emojis={item.poll?.emojis} />
|
|
|
|
)}
|
2022-12-11 16:52:34 +01:00
|
|
|
</CustomText>
|
|
|
|
</View>
|
2022-12-03 21:14:00 +01:00
|
|
|
</View>
|
2022-12-11 16:52:34 +01:00
|
|
|
))}
|
|
|
|
<TimelineAttachment />
|
|
|
|
</View>
|
2022-12-03 21:14:00 +01:00
|
|
|
</StatusContext.Provider>
|
2022-04-29 23:57:18 +02:00
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2022-12-03 16:50:54 +01:00
|
|
|
const TabSharedHistory: React.FC<TabSharedStackScreenProps<'Tab-Shared-History'>> = ({
|
|
|
|
navigation,
|
2022-04-29 23:57:18 +02:00
|
|
|
route: {
|
2023-01-03 23:57:23 +01:00
|
|
|
params: { status, detectedLanguage }
|
2022-04-29 23:57:18 +02:00
|
|
|
}
|
|
|
|
}) => {
|
2022-12-03 16:50:54 +01:00
|
|
|
const { t } = useTranslation('screenTabs')
|
2023-01-03 23:57:23 +01:00
|
|
|
const { data } = useStatusHistory({ status })
|
2022-04-29 23:57:18 +02:00
|
|
|
|
2022-12-03 16:50:54 +01:00
|
|
|
useEffect(() => {
|
|
|
|
navigation.setOptions({
|
|
|
|
title: t('shared.history.name'),
|
|
|
|
headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} />
|
|
|
|
})
|
|
|
|
}, [])
|
|
|
|
|
2022-12-11 16:52:34 +01:00
|
|
|
const dataReversed = data ? [...data].reverse() : []
|
|
|
|
|
2022-12-17 23:21:56 +01:00
|
|
|
const withoutBoundary = !!SCRIPTS_WITHOUT_BOUNDARIES.filter(script =>
|
|
|
|
detectedLanguage?.toLocaleLowerCase().startsWith(script)
|
|
|
|
).length
|
|
|
|
|
2022-04-29 23:57:18 +02:00
|
|
|
return (
|
2023-01-06 14:00:50 +01:00
|
|
|
<FlatList
|
|
|
|
style={{ flex: 1, minHeight: '100%' }}
|
2022-12-11 16:52:34 +01:00
|
|
|
data={dataReversed}
|
|
|
|
renderItem={({ item, index }) => (
|
2022-12-17 23:21:56 +01:00
|
|
|
<ContentView
|
|
|
|
withoutBoundary={withoutBoundary}
|
|
|
|
item={item}
|
|
|
|
prevItem={dataReversed[index + 1]}
|
|
|
|
/>
|
2022-12-03 21:14:00 +01:00
|
|
|
)}
|
2022-12-11 16:52:34 +01:00
|
|
|
ItemSeparatorComponent={ComponentSeparator}
|
2022-12-03 21:14:00 +01:00
|
|
|
/>
|
2022-04-29 23:57:18 +02:00
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default TabSharedHistory
|