mirror of https://github.com/tooot-app/app
449 lines
15 KiB
TypeScript
449 lines
15 KiB
TypeScript
import { HeaderLeft } from '@components/Header'
|
|
import Icon from '@components/Icon'
|
|
import ComponentSeparator from '@components/Separator'
|
|
import CustomText from '@components/Text'
|
|
import TimelineDefault from '@components/Timeline/Default'
|
|
import { useQuery } from '@tanstack/react-query'
|
|
import apiGeneral from '@utils/api/general'
|
|
import apiInstance from '@utils/api/instance'
|
|
import { urlMatcher } from '@utils/helpers/urlMatcher'
|
|
import { TabSharedStackScreenProps } from '@utils/navigation/navigators'
|
|
import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
|
|
import { getAccountStorage } from '@utils/storage/actions'
|
|
import { StyleConstants } from '@utils/styles/constants'
|
|
import { useTheme } from '@utils/styles/ThemeManager'
|
|
import React, { useEffect, useRef, useState } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { Alert, FlatList, Pressable, View } from 'react-native'
|
|
import { Circle } from 'react-native-animated-spinkit'
|
|
import { Path, Svg } from 'react-native-svg'
|
|
|
|
const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
|
|
navigation,
|
|
route: {
|
|
params: { toot }
|
|
}
|
|
}) => {
|
|
const { colors } = useTheme()
|
|
const { t } = useTranslation(['componentTimeline', 'screenTabs'])
|
|
|
|
const [hasRemoteContent, setHasRemoteContent] = useState<boolean>(false)
|
|
const queryKey: { local: QueryKeyTimeline; remote: QueryKeyTimeline } = {
|
|
local: ['Timeline', { page: 'Toot', toot: toot.id, remote: false }],
|
|
remote: ['Timeline', { page: 'Toot', toot: toot.id, remote: true }]
|
|
}
|
|
|
|
useEffect(() => {
|
|
navigation.setOptions({
|
|
headerTitle: () => (
|
|
<Pressable
|
|
style={{ flexDirection: 'row', alignItems: 'center' }}
|
|
disabled={!hasRemoteContent}
|
|
onPress={() =>
|
|
Alert.alert(
|
|
t('screenTabs:shared.toot.remoteFetch.title'),
|
|
t('screenTabs:shared.toot.remoteFetch.message')
|
|
)
|
|
}
|
|
>
|
|
{hasRemoteContent ? (
|
|
<Icon
|
|
name='Wifi'
|
|
size={StyleConstants.Font.Size.M}
|
|
color={colors.primaryDefault}
|
|
style={{ marginRight: StyleConstants.Spacing.S }}
|
|
/>
|
|
) : null}
|
|
<CustomText
|
|
style={{ color: colors.primaryDefault }}
|
|
fontSize='L'
|
|
fontWeight='Bold'
|
|
numberOfLines={1}
|
|
children={t('screenTabs:shared.toot.name')}
|
|
/>
|
|
</Pressable>
|
|
),
|
|
headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} />
|
|
})
|
|
navigation.setParams({ toot, queryKey: toot._remote ? queryKey.remote : queryKey.local })
|
|
}, [hasRemoteContent])
|
|
|
|
const flRef = useRef<FlatList>(null)
|
|
const scrolled = useRef(false)
|
|
|
|
const match = urlMatcher(toot.url || toot.uri)
|
|
const finalData = useRef<(Mastodon.Status & { key?: string })[]>([
|
|
{ ...toot, _level: 0, key: 'cached' }
|
|
])
|
|
const highlightIndex = useRef<number>(0)
|
|
const queryLocal = useQuery(
|
|
queryKey.local,
|
|
async () => {
|
|
const context = await apiInstance<{
|
|
ancestors: Mastodon.Status[]
|
|
descendants: Mastodon.Status[]
|
|
}>({
|
|
method: 'get',
|
|
url: `statuses/${toot.id}/context`
|
|
})
|
|
|
|
const statuses: (Mastodon.Status & { _level?: number })[] = [
|
|
...context.body.ancestors,
|
|
{ ...toot },
|
|
...context.body.descendants
|
|
]
|
|
|
|
const highlight = context.body.ancestors.length
|
|
highlightIndex.current = highlight
|
|
|
|
for (const [index, status] of statuses.entries()) {
|
|
if (index < highlight || status.id === toot.id) {
|
|
statuses[index]._level = 0
|
|
continue
|
|
}
|
|
|
|
const repliedLevel = statuses.find(s => s.id === status.in_reply_to_id)?._level
|
|
statuses[index]._level = (repliedLevel || 0) + 1
|
|
}
|
|
|
|
return { pages: [{ body: statuses }] }
|
|
},
|
|
{
|
|
enabled: !toot._remote,
|
|
staleTime: 0,
|
|
refetchOnMount: true,
|
|
onSuccess: data => {
|
|
if (data.pages[0].body.length < 1) {
|
|
navigation.goBack()
|
|
return
|
|
}
|
|
|
|
if (finalData.current[0].key === 'cached') {
|
|
finalData.current = data.pages[0].body
|
|
|
|
if (!scrolled.current) {
|
|
scrolled.current = true
|
|
const pointer = data.pages[0].body.findIndex(({ id }) => id === toot.id)
|
|
if (pointer < 1) return
|
|
const length = flRef.current?.props.data?.length
|
|
if (!length) return
|
|
try {
|
|
setTimeout(() => {
|
|
try {
|
|
flRef.current?.scrollToIndex({
|
|
index: pointer,
|
|
viewOffset: 100
|
|
})
|
|
} catch {}
|
|
}, 500)
|
|
} catch (error) {
|
|
return
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
)
|
|
useQuery(
|
|
queryKey.remote,
|
|
async () => {
|
|
const domain = match?.domain
|
|
if (!domain?.length) {
|
|
return Promise.reject('Cannot parse remote doamin')
|
|
}
|
|
const id = match?.status?.id
|
|
if (!id?.length) {
|
|
return Promise.reject('Cannot parse remote toot id')
|
|
}
|
|
|
|
const context = await apiGeneral<{
|
|
ancestors: Mastodon.Status[]
|
|
descendants: Mastodon.Status[]
|
|
}>({
|
|
method: 'get',
|
|
domain,
|
|
url: `api/v1/statuses/${id}/context`
|
|
}).then(res => res.body)
|
|
|
|
if (!context) {
|
|
return Promise.reject('Cannot retrieve remote context')
|
|
}
|
|
|
|
const statuses: (Mastodon.Status & { _level?: number })[] = [
|
|
...context.ancestors,
|
|
{ ...toot },
|
|
...context.descendants
|
|
]
|
|
|
|
const highlight = context.ancestors.length
|
|
highlightIndex.current = highlight
|
|
|
|
for (const [index, status] of statuses.entries()) {
|
|
if (index < highlight || status.id === toot.id) {
|
|
statuses[index]._level = 0
|
|
continue
|
|
}
|
|
|
|
const repliedLevel = statuses.find(s => s.id === status.in_reply_to_id)?._level
|
|
statuses[index]._level = (repliedLevel || 0) + 1
|
|
}
|
|
|
|
return { pages: [{ body: statuses }] }
|
|
},
|
|
{
|
|
enabled:
|
|
['public', 'unlisted'].includes(toot.visibility) &&
|
|
match?.domain !== getAccountStorage.string('auth.domain'),
|
|
staleTime: 0,
|
|
refetchOnMount: true,
|
|
onSuccess: data => {
|
|
if (finalData.current.length < 1 && data.pages[0].body.length < 1) {
|
|
navigation.goBack()
|
|
return
|
|
}
|
|
|
|
if (finalData.current.length < data.pages[0].body.length) {
|
|
finalData.current = data.pages[0].body.map(remote => {
|
|
const localMatch = finalData.current.find(local => local.uri === remote.uri)
|
|
if (localMatch) {
|
|
delete localMatch.key
|
|
return localMatch
|
|
} else {
|
|
remote._remote = true
|
|
|
|
remote.account._remote = true
|
|
remote.mentions = remote.mentions.map(mention => ({ ...mention, _remote: true }))
|
|
if (remote.reblog) {
|
|
remote.reblog.account._remote = true
|
|
remote.reblog.mentions = remote.mentions.map(mention => ({
|
|
...mention,
|
|
_remote: true
|
|
}))
|
|
}
|
|
|
|
return remote
|
|
}
|
|
})
|
|
|
|
setHasRemoteContent(true)
|
|
}
|
|
|
|
scrolled.current = true
|
|
const pointer = data.pages[0].body.findIndex(({ id }) => id === toot.id)
|
|
if (pointer < 1) return
|
|
const length = flRef.current?.props.data?.length
|
|
if (!length) return
|
|
try {
|
|
setTimeout(() => {
|
|
try {
|
|
flRef.current?.scrollToIndex({
|
|
index: pointer,
|
|
viewOffset: 100
|
|
})
|
|
} catch {}
|
|
}, 500)
|
|
} catch (error) {
|
|
return
|
|
}
|
|
}
|
|
}
|
|
)
|
|
|
|
const heights = useRef<(number | undefined)[]>([])
|
|
const MAX_LEVEL = 10
|
|
const ARC = StyleConstants.Avatar.XS / 4
|
|
|
|
return (
|
|
<FlatList
|
|
ref={flRef}
|
|
scrollEventThrottle={16}
|
|
windowSize={7}
|
|
data={finalData.current}
|
|
renderItem={({ item, index }) => {
|
|
const prev = finalData.current[index - 1]?._level || 0
|
|
const curr = item._level
|
|
const next = finalData.current[index + 1]?._level || 0
|
|
|
|
return (
|
|
<View
|
|
style={{
|
|
paddingLeft:
|
|
index > highlightIndex.current
|
|
? Math.min(item._level - 1, MAX_LEVEL) * StyleConstants.Spacing.S
|
|
: undefined
|
|
}}
|
|
onLayout={({
|
|
nativeEvent: {
|
|
layout: { height }
|
|
}
|
|
}) => (heights.current[index] = height)}
|
|
>
|
|
<TimelineDefault
|
|
item={item}
|
|
queryKey={item._remote ? queryKey.remote : queryKey.local}
|
|
highlighted={toot.id === item.id || item.id === 'cached'}
|
|
isConversation={toot.id !== item.id && item.id !== 'cached'}
|
|
/>
|
|
{curr > 1 || next > 1
|
|
? [...new Array(curr)].map((_, i) => {
|
|
if (i > MAX_LEVEL) return null
|
|
|
|
const lastLine = curr === i + 1
|
|
if (lastLine) {
|
|
if (curr === prev + 1 || curr === next - 1) {
|
|
if (curr > next) {
|
|
return null
|
|
}
|
|
return (
|
|
<Svg key={i} style={{ position: 'absolute' }}>
|
|
<Path
|
|
d={
|
|
`M ${curr * StyleConstants.Spacing.S + ARC} ${
|
|
StyleConstants.Spacing.M + StyleConstants.Avatar.XS / 2
|
|
} ` +
|
|
`a ${ARC} ${ARC} 0 0 0 -${ARC} ${ARC} ` +
|
|
`v 999`
|
|
}
|
|
strokeWidth={1}
|
|
stroke={colors.border}
|
|
strokeOpacity={0.6}
|
|
/>
|
|
</Svg>
|
|
)
|
|
} else {
|
|
if (i >= curr - 2) return null
|
|
return (
|
|
<Svg key={i} style={{ position: 'absolute' }}>
|
|
<Path
|
|
d={
|
|
`M ${(i + 1) * StyleConstants.Spacing.S} 0 ` +
|
|
`v ${
|
|
(heights.current[index] || 999) -
|
|
(StyleConstants.Spacing.S * 1.5 + StyleConstants.Font.Size.L) / 2 -
|
|
StyleConstants.Avatar.XS / 2
|
|
} ` +
|
|
`a ${ARC} ${ARC} 0 0 0 ${ARC} ${ARC}`
|
|
}
|
|
strokeWidth={1}
|
|
stroke={colors.border}
|
|
strokeOpacity={0.6}
|
|
/>
|
|
</Svg>
|
|
)
|
|
}
|
|
} else {
|
|
if (i >= next - 1) {
|
|
return (
|
|
<Svg key={i} style={{ position: 'absolute' }}>
|
|
<Path
|
|
d={
|
|
`M ${(i + 1) * StyleConstants.Spacing.S} 0 ` +
|
|
`v ${
|
|
(heights.current[index] || 999) -
|
|
(StyleConstants.Spacing.S * 1.5 +
|
|
StyleConstants.Font.Size.L * 1.35) /
|
|
2
|
|
} ` +
|
|
`h ${ARC}`
|
|
}
|
|
strokeWidth={1}
|
|
stroke={colors.border}
|
|
strokeOpacity={0.6}
|
|
/>
|
|
</Svg>
|
|
)
|
|
} else {
|
|
return (
|
|
<Svg key={i} style={{ position: 'absolute' }}>
|
|
<Path
|
|
d={`M ${(i + 1) * StyleConstants.Spacing.S} 0 ` + `v 999`}
|
|
strokeWidth={1}
|
|
stroke={colors.border}
|
|
strokeOpacity={0.6}
|
|
/>
|
|
</Svg>
|
|
)
|
|
}
|
|
}
|
|
})
|
|
: null}
|
|
{/* <CustomText
|
|
children={finalData.current[index - 1]?._level}
|
|
style={{ position: 'absolute', top: 4, left: 4, color: colors.red }}
|
|
/>
|
|
<CustomText
|
|
children={item._level}
|
|
style={{ position: 'absolute', top: 20, left: 4, color: colors.yellow }}
|
|
/>
|
|
<CustomText
|
|
children={finalData.current[index + 1]?._level}
|
|
style={{ position: 'absolute', top: 36, left: 4, color: colors.green }}
|
|
/> */}
|
|
</View>
|
|
)
|
|
}}
|
|
initialNumToRender={6}
|
|
maxToRenderPerBatch={3}
|
|
ItemSeparatorComponent={({ leadingItem }) => {
|
|
return (
|
|
<>
|
|
<ComponentSeparator
|
|
extraMarginLeft={
|
|
leadingItem.id === toot.id
|
|
? 0
|
|
: StyleConstants.Avatar.XS +
|
|
StyleConstants.Spacing.S +
|
|
Math.min(Math.max(0, leadingItem._level - 1), MAX_LEVEL) *
|
|
StyleConstants.Spacing.S
|
|
}
|
|
/>
|
|
{leadingItem._level > 1
|
|
? [...new Array(leadingItem._level - 1)].map((_, i) => (
|
|
<Svg key={i} style={{ position: 'absolute', top: -1 }}>
|
|
<Path
|
|
d={`M ${(i + 1) * StyleConstants.Spacing.S} 0 ` + `v 1`}
|
|
strokeWidth={1}
|
|
stroke={colors.border}
|
|
strokeOpacity={0.6}
|
|
/>
|
|
</Svg>
|
|
))
|
|
: null}
|
|
</>
|
|
)
|
|
}}
|
|
onScrollToIndexFailed={error => {
|
|
const offset = error.averageItemLength * error.index
|
|
flRef.current?.scrollToOffset({ offset })
|
|
try {
|
|
error.index < finalData.current.length &&
|
|
setTimeout(
|
|
() =>
|
|
flRef.current?.scrollToIndex({
|
|
index: error.index,
|
|
viewOffset: 100
|
|
}),
|
|
500
|
|
)
|
|
} catch {}
|
|
}}
|
|
ListFooterComponent={
|
|
<View
|
|
style={{
|
|
flex: 1,
|
|
alignItems: 'center',
|
|
backgroundColor: colors.backgroundDefault,
|
|
marginHorizontal: StyleConstants.Spacing.M
|
|
}}
|
|
>
|
|
{queryLocal.isFetching ? (
|
|
<Circle size={StyleConstants.Font.Size.L} color={colors.secondary} />
|
|
) : null}
|
|
</View>
|
|
}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export default TabSharedToot
|