octo/tooot
1
0
Fork 0
mirror of https://github.com/tooot-app/app synced 2025-06-05 22:19:13 +02:00
Code Issues Projects Releases Wiki Activity

Merge branch 'main' into candidate

Browse Source
This commit is contained in:
xmflsct
2022-12-31 16:25:21 +01:00
parent a34af98ef8 554825a9ea
commit 5fc3899792
12 changed files with 387 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/Parse/HTML.tsx
View File

@ -15,7 +15,7 @@ import { ElementType, parseDocument } from 'htmlparser2'
import i18next from 'i18next'
import React, { useContext, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { Platform, Pressable, Text, TextStyleIOS, View } from 'react-native'
import { Platform, Pressable, Text, View } from 'react-native'
export interface Props {
content: string
@ -78,8 +78,8 @@ const ParseHTML: React.FC<Props> = ({
return node.data
case ElementType.Tag:
if (node.name === 'span') {
if (node.attribs.class?.includes('invisible')) return ''
if (node.attribs.class?.includes('ellipsis'))
if (node.attribs.class?.includes('invisible') && !showFullLink) return ''
if (node.attribs.class?.includes('ellipsis') && !showFullLink)
return node.children.map(child => unwrapNode(child)).join('') + '...'
}
return node.children.map(child => unwrapNode(child)).join('')
@ -87,15 +87,26 @@ const ParseHTML: React.FC<Props> = ({
return ''
}
}
const startingOfText = useRef<boolean>(false)
const openingMentions = useRef<boolean>(true)
const renderNode = (node: ChildNode, index: number) => {
switch (node.type) {
case ElementType.Text:
node.data.trim().length && (startingOfText.current = true) // Removing empty spaces appeared between tags and mentions
let content: string = node.data
if (openingMentions.current) {
if (node.data.trim().length) {
openingMentions.current = false // Removing empty spaces appeared between tags and mentions
content = excludeMentions?.current.length
? node.data.replace(new RegExp(/^\s+/), '')
: node.data
} else {
content = node.data.trim()
}
}
return (
<ParseEmojis
key={index}
content={node.data.replace(new RegExp(/^\s+/), '')}
content={content}
emojis={status?.emojis || emojis}
size={size}
adaptiveSize={adaptiveSize}
@ -108,6 +119,7 @@ const ParseHTML: React.FC<Props> = ({
const href = node.attribs.href
if (classes) {
if (classes.includes('hashtag')) {
openingMentions.current = false
const tag = href.match(new RegExp(/\/tags?\/(.*)/, 'i'))?.[1].toLowerCase()
const paramsHashtag = (params as { hashtag: Mastodon.Tag['name'] } | undefined)
?.hashtag
@ -142,7 +154,6 @@ const ParseHTML: React.FC<Props> = ({
)
if (
matchedMention &&
!startingOfText.current &&
excludeMentions?.current.find(eM => eM.id === matchedMention.id)
) {
return null
@ -165,6 +176,7 @@ const ParseHTML: React.FC<Props> = ({
}
}
openingMentions.current = false
const content = node.children.map(child => unwrapNode(child)).join('')
const shouldBeTag = status?.tags?.find(tag => `#${tag.name}` === content)
return (
@ -182,7 +194,7 @@ const ParseHTML: React.FC<Props> = ({
}
}
}}
children={content !== href ? content : showFullLink ? href : content}
children={content}
/>
)
break

7
src/components/Timeline/Default.tsx
View File

@ -37,6 +37,7 @@ export interface Props {
disableDetails?: boolean
disableOnPress?: boolean
isConversation?: boolean
isRemote?: boolean
}
// When the poll is long
@ -47,7 +48,8 @@ const TimelineDefault: React.FC<Props> = ({
highlighted = false,
disableDetails = false,
disableOnPress = false,
isConversation = false
isConversation = false,
isRemote = false
}) => {
const status = item.reblog ? item.reblog : item
const rawContent = useRef<string[]>([])
@ -175,7 +177,8 @@ const TimelineDefault: React.FC<Props> = ({
inThread: queryKey?.[1].page === 'Toot',
disableDetails,
disableOnPress,
isConversation
isConversation,
isRemote
}}
>
{disableOnPress ? (

1
src/components/Timeline/Shared/Context.tsx
View File

@ -21,6 +21,7 @@ type StatusContextType = {
disableDetails?: boolean
disableOnPress?: boolean
isConversation?: boolean
isRemote?: boolean
}
const StatusContext = createContext<StatusContextType>({} as StatusContextType)

10
src/components/Timeline/Shared/HeaderDefault.tsx
View File

@ -17,7 +17,7 @@ import HeaderSharedReplies from './HeaderShared/Replies'
import HeaderSharedVisibility from './HeaderShared/Visibility'
const TimelineHeaderDefault: React.FC = () => {
const { queryKey, rootQueryKey, status, highlighted, disableDetails, rawContent } =
const { queryKey, rootQueryKey, status, highlighted, disableDetails, rawContent, isRemote } =
useContext(StatusContext)
if (!status) return null
@ -58,6 +58,14 @@ const TimelineHeaderDefault: React.FC = () => {
: { marginTop: StyleConstants.Spacing.XS, marginBottom: StyleConstants.Spacing.S })
}}
>
{isRemote ? (
<Icon
name='Wifi'
size={StyleConstants.Font.Size.M}
color={colors.secondary}
style={{ marginRight: StyleConstants.Spacing.S }}
/>
) : null}
<HeaderSharedCreated
created_at={status.created_at}
edited_at={status.edited_at}

42
src/components/Timeline/Shared/HeaderShared/Replies.tsx
View File

@ -3,7 +3,7 @@ import { useNavigation } from '@react-navigation/native'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React, { Fragment, useContext } from 'react'
import { useTranslation } from 'react-i18next'
import { Trans, useTranslation } from 'react-i18next'
import StatusContext from '../Context'
const HeaderSharedReplies: React.FC = () => {
@ -11,7 +11,7 @@ const HeaderSharedReplies: React.FC = () => {
if (!isConversation) return null
const navigation = useNavigation<any>()
const { t } = useTranslation('componentTimeline')
const { t } = useTranslation(['common', 'componentTimeline'])
const { colors } = useTheme()
const mentionsBeginning = rawContent?.current?.[0]
@ -26,25 +26,27 @@ const HeaderSharedReplies: React.FC = () => {
return excludeMentions?.current.length ? (
<CustomText
fontStyle='S'
style={{
marginLeft: StyleConstants.Spacing.S,
flexDirection: 'row',
color: colors.secondary
}}
style={{ flex: 1, marginLeft: StyleConstants.Spacing.S, color: colors.secondary }}
numberOfLines={1}
>
<>
{t('shared.header.shared.replies')}
{excludeMentions.current.map((mention, index) => (
<Fragment key={index}>
{' '}
<CustomText
style={{ color: colors.blue, paddingLeft: StyleConstants.Spacing.S }}
children={`@${mention.username}`}
onPress={() => navigation.push('Tab-Shared-Account', { account: mention })}
/>
</Fragment>
))}
</>
<Trans
ns='componentTimeline'
i18nKey='shared.header.shared.replies'
components={[
<>
{excludeMentions.current.map((mention, index) => (
<Fragment key={index}>
{index > 0 ? t('common:separator') : null}
<CustomText
style={{ color: colors.blue, paddingLeft: StyleConstants.Spacing.S }}
children={`@${mention.username}`}
onPress={() => navigation.push('Tab-Shared-Account', { account: mention })}
/>
</Fragment>
))}
</>
]}
/>
</CustomText>
) : null
}

2
src/i18n/en/components/contextMenu.json
View File

@ -6,7 +6,7 @@
"action_false": "Follow user",
"action_true": "Unfollow user"
},
"inLists": "Manage user of lists",
"inLists": "Lists containing user",
"showBoosts": {
"action_false": "Show user's boosts",
"action_true": "Hide users's boosts"

2
src/i18n/en/components/timeline.json
View File

@ -122,7 +122,7 @@
"muted": {
"accessibilityLabel": "Toot muted"
},
"replies": "Replies",
"replies": "Replies <0 />",
"visibility": {
"direct": {
"accessibilityLabel": "Toot is a direct message"

15
src/screens/ImageViewer/index.tsx
View File

@ -4,7 +4,7 @@ import { useActionSheet } from '@expo/react-native-action-sheet'
import { androidActionSheetStyles } from '@utils/helpers/androidActionSheetStyles'
import { RootStackScreenProps } from '@utils/navigation/navigators'
import { useTheme } from '@utils/styles/ThemeManager'
import React, { useState } from 'react'
import React, { useCallback, useState } from 'react'
import { useTranslation } from 'react-i18next'
import {
Dimensions,
@ -50,6 +50,13 @@ const ScreenImagesViewer = ({
const isZoomed = useSharedValue(false)
const onViewableItemsChanged = useCallback(
({ viewableItems }: { viewableItems: ViewToken[] }) => {
setCurrentIndex(viewableItems[0]?.index || 0)
},
[]
)
return (
<View style={{ backgroundColor: 'black' }}>
<StatusBar hidden />
@ -107,7 +114,7 @@ const ScreenImagesViewer = ({
/>
</View>
<LongPressGestureHandler
onEnded={() => {
onActivated={() => {
showActionSheetWithOptions(
{
options: [
@ -207,9 +214,7 @@ const ScreenImagesViewer = ({
/>
)
}}
onViewableItemsChanged={({ viewableItems }: { viewableItems: ViewToken[] }) => {
setCurrentIndex(viewableItems[0]?.index || 0)
}}
onViewableItemsChanged={onViewableItemsChanged}
viewabilityConfig={{
itemVisiblePercentThreshold: 50
}}

5
src/screens/Tabs/Public/Root.tsx
View File

@ -83,7 +83,10 @@ const Root: React.FC<NativeStackScreenProps<TabPublicStackParamList, 'Tab-Public
swipeEnabled
renderScene={renderScene}
renderTabBar={() => null}
onIndexChange={index => setSegment(index)}
onIndexChange={index => {
setSegment(index)
setGlobalStorage('app.prev_public_segment', segments[index])
}}
navigationState={{ index: segment, routes }}
initialLayout={{ width: Dimensions.get('window').width }}
/>

82
src/screens/Tabs/Shared/Account/Information/Fields.tsx
View File

@ -1,4 +1,3 @@
import Icon from '@components/Icon'
import { ParseHTML } from '@components/Parse'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
@ -18,10 +17,39 @@ const AccountInformationFields: React.FC<Props> = ({ account, myInfo }) => {
const { colors } = useTheme()
return (
<View style={[styles.fields, { borderTopColor: colors.border }]}>
<View
style={{
borderTopWidth: StyleSheet.hairlineWidth,
marginBottom: StyleConstants.Spacing.M,
borderTopColor: colors.border
}}
>
{account.fields.map((field, index) => (
<View key={index} style={[styles.field, { borderBottomColor: colors.border }]}>
<View style={[styles.fieldLeft, { borderRightColor: colors.border }]}>
<View
key={index}
style={[
{
flex: 1,
flexDirection: 'row',
borderBottomWidth: StyleSheet.hairlineWidth,
paddingTop: StyleConstants.Spacing.S,
paddingBottom: StyleConstants.Spacing.S,
borderBottomColor: colors.border
},
field.verified_at ? { backgroundColor: 'rgba(0, 255, 0, 0.035)' } : undefined
]}
>
<View
style={{
flex: 1,
flexDirection: 'row',
alignItems: 'center',
borderRightWidth: 1,
paddingLeft: StyleConstants.Spacing.S,
paddingRight: StyleConstants.Spacing.S,
borderRightColor: colors.border
}}
>
<ParseHTML
content={field.name}
size={'S'}
@ -30,16 +58,15 @@ const AccountInformationFields: React.FC<Props> = ({ account, myInfo }) => {
numberOfLines={5}
selectable
/>
{field.verified_at ? (
<Icon
name='CheckCircle'
size={StyleConstants.Font.Size.M}
color={colors.primaryDefault}
style={styles.fieldCheck}
/>
) : null}
</View>
<View style={styles.fieldRight}>
<View
style={{
flex: 2,
justifyContent: 'center',
paddingLeft: StyleConstants.Spacing.S,
paddingRight: StyleConstants.Spacing.S
}}
>
<ParseHTML
content={field.value}
size={'S'}
@ -55,33 +82,4 @@ const AccountInformationFields: React.FC<Props> = ({ account, myInfo }) => {
)
}
const styles = StyleSheet.create({
fields: {
borderTopWidth: StyleSheet.hairlineWidth,
marginBottom: StyleConstants.Spacing.M
},
field: {
flex: 1,
flexDirection: 'row',
borderBottomWidth: StyleSheet.hairlineWidth,
paddingTop: StyleConstants.Spacing.S,
paddingBottom: StyleConstants.Spacing.S
},
fieldLeft: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
borderRightWidth: 1,
paddingLeft: StyleConstants.Spacing.S,
paddingRight: StyleConstants.Spacing.S
},
fieldCheck: { marginLeft: StyleConstants.Spacing.XS },
fieldRight: {
flex: 2,
justifyContent: 'center',
paddingLeft: StyleConstants.Spacing.S,
paddingRight: StyleConstants.Spacing.S
}
})
export default AccountInformationFields

314
src/screens/Tabs/Shared/Toot.tsx
View File

@ -1,14 +1,20 @@
import Button from '@components/Button'
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 { getHost } from '@utils/helpers/urlMatcher'
import { TabSharedStackScreenProps } from '@utils/navigation/navigators'
import { QueryKeyTimeline, useTootQuery } from '@utils/queryHooks/timeline'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React, { useEffect, useRef } from 'react'
import React, { useEffect, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { FlatList, 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'>> = ({
@ -18,74 +24,271 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
}
}) => {
const { colors } = useTheme()
const { t } = useTranslation('screenTabs')
const { t } = useTranslation(['componentTimeline', 'screenTabs'])
const [hasRemoteContent, setHasRemoteContent] = useState<boolean>(false)
useEffect(() => {
navigation.setOptions({
title: t('shared.toot.name'),
headerTitle: () => (
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
{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')}
/>
</View>
),
headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} />
})
}, [])
}, [hasRemoteContent])
const flRef = useRef<FlatList>(null)
const scrolled = useRef(false)
const queryKey: QueryKeyTimeline = ['Timeline', { page: 'Toot', toot: toot.id }]
const { data } = useTootQuery({
...queryKey[1],
options: {
meta: { toot },
const finalData = useRef<(Mastodon.Status & { _level?: number; _remote?: boolean })[]>([
{ ...toot, _level: 0, _remote: false }
])
const highlightIndex = useRef<number>(0)
const queryLocal = useQuery(
['Timeline', { page: 'Toot', toot: toot.id, remote: false }],
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 }] }
},
{
staleTime: 0,
refetchOnMount: true,
onSuccess: data => {
if (data.body.length < 1) {
if (data.pages[0].body.length < 1) {
navigation.goBack()
return
}
if (!scrolled.current) {
scrolled.current = true
const pointer = data.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
if (finalData.current.length < data.pages[0].body.length) {
// if the remote has been loaded first
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(
['Timeline', { page: 'Toot', toot: toot.id, remote: true }],
async () => {
let context:
| {
ancestors: Mastodon.Status[]
descendants: Mastodon.Status[]
}
| undefined
try {
const domain = getHost(toot.url || toot.uri)
if (!domain?.length) {
throw new Error()
}
const id = (toot.url || toot.uri).match(new RegExp(/\/([0-9]+)$/))?.[1]
if (!id?.length) {
throw new Error()
}
context = await apiGeneral<{
ancestors: Mastodon.Status[]
descendants: Mastodon.Status[]
}>({
method: 'get',
domain,
url: `api/v1/statuses/${id}/context`
}).then(res => res.body)
} catch {}
if (!context) {
throw new Error()
}
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: toot.account.acct !== toot.account.username, // When on the same instance, these two values are the same
staleTime: 0,
refetchOnMount: false,
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)
return localMatch ? { ...localMatch, _remote: false } : { ...remote, _remote: true }
})
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 empty = () => {
switch (queryLocal.status) {
case 'error':
return (
<>
<Icon name='Frown' size={StyleConstants.Font.Size.L} color={colors.primaryDefault} />
<CustomText
fontStyle='M'
style={{
marginTop: StyleConstants.Spacing.S,
marginBottom: StyleConstants.Spacing.L,
color: colors.primaryDefault
}}
>
{t('componentTimeline:empty.error.message')}
</CustomText>
<Button
type='text'
content={t('componentTimeline:empty.error.button')}
onPress={() => queryLocal.refetch()}
/>
</>
)
case 'success':
return (
<>
<Icon
name='Smartphone'
size={StyleConstants.Font.Size.L}
color={colors.primaryDefault}
/>
<CustomText
fontStyle='M'
style={{
marginTop: StyleConstants.Spacing.S,
marginBottom: StyleConstants.Spacing.L,
color: colors.secondary
}}
>
{t('componentTimeline:empty.success.message')}
</CustomText>
</>
)
}
}
const heights = useRef<(number | undefined)[]>([])
const MAX_LEVEL = 10
const ARC = StyleConstants.Avatar.XS / 4
return (
<FlatList
ref={flRef}
scrollEventThrottle={16}
windowSize={7}
data={data?.body}
data={finalData.current}
renderItem={({ item, index }) => {
const MAX_LEVEL = 10
const ARC = StyleConstants.Avatar.XS / 4
const prev = data?.body[index - 1]?._level || 0
const prev = finalData.current?.[index - 1]?._level || 0
const curr = item._level
const next = data?.body[index + 1]?._level || 0
const next = finalData.current?.[index + 1]?._level || 0
return (
<View
style={{
paddingLeft:
index > (data?.highlightIndex || 0)
? Math.min(item._level, MAX_LEVEL) * StyleConstants.Spacing.S
index > highlightIndex.current
? Math.min(item._level - 1, MAX_LEVEL) * StyleConstants.Spacing.S
: undefined
}}
onLayout={({
@ -96,10 +299,11 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
>
<TimelineDefault
item={item}
queryKey={queryKey}
queryKey={['Timeline', { page: 'Toot', toot: toot.id }]}
rootQueryKey={rootQueryKey}
highlighted={toot.id === item.id}
isConversation={toot.id !== item.id}
isRemote={item._remote}
/>
{curr > 1 || next > 1
? [...new Array(curr)].map((_, i) => {
@ -206,11 +410,12 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
<>
<ComponentSeparator
extraMarginLeft={
toot.id === leadingItem.id
leadingItem.id === toot.id
? 0
: StyleConstants.Avatar.XS +
StyleConstants.Spacing.S +
Math.max(0, leadingItem._level - 1) * 8
Math.min(Math.max(0, leadingItem._level - 1), MAX_LEVEL) *
StyleConstants.Spacing.S
}
/>
{leadingItem._level > 1
@ -232,7 +437,7 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
const offset = error.averageItemLength * error.index
flRef.current?.scrollToOffset({ offset })
try {
error.index < (data?.body.length || 0) &&
error.index < (finalData.current.length || 0) &&
setTimeout(
() =>
flRef.current?.scrollToIndex({
@ -243,6 +448,33 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
)
} catch {}
}}
ListEmptyComponent={
<View
style={{
flex: 1,
minHeight: '100%',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: colors.backgroundDefault
}}
>
{empty()}
</View>
}
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>
}
/>
)
}

63
src/utils/queryHooks/timeline.ts
View File

@ -19,67 +19,6 @@ import deleteItem from './timeline/deleteItem'
import editItem from './timeline/editItem'
import updateStatusProperty from './timeline/updateStatusProperty'
const queryFunctionToot = async ({ queryKey, meta }: QueryFunctionContext<QueryKeyTimeline>) => {
// @ts-ignore
const id = queryKey[1].toot
const target =
(meta?.toot as Mastodon.Status) ||
undefined ||
(await apiInstance<Mastodon.Status>({
method: 'get',
url: `statuses/${id}`
}).then(res => res.body))
const context = await apiInstance<{
ancestors: Mastodon.Status[]
descendants: Mastodon.Status[]
}>({
method: 'get',
url: `statuses/${id}/context`
})
const statuses: (Mastodon.Status & { _level?: number })[] = [
...context.body.ancestors,
target,
...context.body.descendants
]
const highlightIndex = context.body.ancestors.length
for (const [index, status] of statuses.entries()) {
if (index < highlightIndex || status.id === 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 { body: statuses, highlightIndex }
}
const useTootQuery = ({
options,
...queryKeyParams
}: QueryKeyTimeline[1] & {
options?: UseQueryOptions<
{
body: (Mastodon.Status & { _level: number })[]
highlightIndex: number
},
AxiosError
>
}) => {
const queryKey: QueryKeyTimeline = ['Timeline', { ...queryKeyParams }]
return useQuery(queryKey, queryFunctionToot, {
staleTime: 0,
refetchOnMount: true,
...options
})
}
/* ----- */
export type QueryKeyTimeline = [
'Timeline',
(
@ -501,4 +440,4 @@ const useTimelineMutation = ({
})
}
export { useTootQuery, useTimelineQuery, useTimelineMutation }
export { useTimelineQuery, useTimelineMutation }