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

Fixed #476

Browse Source
This commit is contained in:
xmflsct
2022-12-03 20:47:11 +01:00
parent 6a9f951dba
commit 20a55efb9c
22 changed files with 990 additions and 1175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

163
src/components/Timeline/Conversation.tsx
View File

@ -4,90 +4,52 @@ import { useNavigation } from '@react-navigation/native'
import { StackNavigationProp } from '@react-navigation/stack'
import { TabLocalStackParamList } from '@utils/navigation/navigators'
import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
import { getInstanceAccount } from '@utils/slices/instancesSlice'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import { isEqual } from 'lodash'
import React, { useCallback } from 'react'
import { Pressable, View } from 'react-native'
import { useMutation, useQueryClient } from 'react-query'
import { useSelector } from 'react-redux'
import TimelineActions from './Shared/Actions'
import TimelineContent from './Shared/Content'
import StatusContext from './Shared/Context'
import TimelineHeaderConversation from './Shared/HeaderConversation'
import TimelinePoll from './Shared/Poll'
const Avatars: React.FC<{ accounts: Mastodon.Account[] }> = ({ accounts }) => {
return (
<View
style={{
borderRadius: 4,
overflow: 'hidden',
marginRight: StyleConstants.Spacing.S,
width: StyleConstants.Avatar.M,
height: StyleConstants.Avatar.M,
flexDirection: 'row',
flexWrap: 'wrap'
}}
>
{accounts.slice(0, 4).map(account => (
<GracefullyImage
key={account.id}
uri={{ original: account.avatar, static: account.avatar_static }}
dimension={{
width: StyleConstants.Avatar.M,
height:
accounts.length > 2
? StyleConstants.Avatar.M / 2
: StyleConstants.Avatar.M
}}
style={{ flex: 1, flexBasis: '50%' }}
/>
))}
</View>
)
}
export interface Props {
conversation: Mastodon.Conversation
queryKey: QueryKeyTimeline
highlighted?: boolean
}
const TimelineConversation = React.memo(
({ conversation, queryKey, highlighted = false }: Props) => {
const instanceAccount = useSelector(
getInstanceAccount,
(prev, next) => prev?.id === next?.id
)
const { colors } = useTheme()
const TimelineConversation: React.FC<Props> = ({ conversation, queryKey, highlighted = false }) => {
const { colors } = useTheme()
const queryClient = useQueryClient()
const fireMutation = useCallback(() => {
return apiInstance<Mastodon.Conversation>({
method: 'post',
url: `conversations/${conversation.id}/read`
})
}, [])
const { mutate } = useMutation(fireMutation, {
onSettled: () => {
queryClient.invalidateQueries(queryKey)
}
const queryClient = useQueryClient()
const fireMutation = useCallback(() => {
return apiInstance<Mastodon.Conversation>({
method: 'post',
url: `conversations/${conversation.id}/read`
})
}, [])
const { mutate } = useMutation(fireMutation, {
onSettled: () => {
queryClient.invalidateQueries(queryKey)
}
})
const navigation =
useNavigation<StackNavigationProp<TabLocalStackParamList>>()
const onPress = useCallback(() => {
if (conversation.last_status) {
conversation.unread && mutate()
navigation.push('Tab-Shared-Toot', {
toot: conversation.last_status,
rootQueryKey: queryKey
})
}
}, [])
const navigation = useNavigation<StackNavigationProp<TabLocalStackParamList>>()
const onPress = useCallback(() => {
if (conversation.last_status) {
conversation.unread && mutate()
navigation.push('Tab-Shared-Toot', {
toot: conversation.last_status,
rootQueryKey: queryKey
})
}
}, [])
return (
return (
<StatusContext.Provider value={{ queryKey, status: conversation.last_status }}>
<Pressable
style={[
{
@ -100,19 +62,39 @@ const TimelineConversation = React.memo(
conversation.unread && {
borderLeftWidth: StyleConstants.Spacing.XS,
borderLeftColor: colors.blue,
paddingLeft:
StyleConstants.Spacing.Global.PagePadding -
StyleConstants.Spacing.XS
paddingLeft: StyleConstants.Spacing.Global.PagePadding - StyleConstants.Spacing.XS
}
]}
onPress={onPress}
>
<View style={{ flex: 1, width: '100%', flexDirection: 'row' }}>
<Avatars accounts={conversation.accounts} />
<TimelineHeaderConversation
queryKey={queryKey}
conversation={conversation}
/>
<View
style={{
borderRadius: 4,
overflow: 'hidden',
marginRight: StyleConstants.Spacing.S,
width: StyleConstants.Avatar.M,
height: StyleConstants.Avatar.M,
flexDirection: 'row',
flexWrap: 'wrap'
}}
>
{conversation.accounts.slice(0, 4).map(account => (
<GracefullyImage
key={account.id}
uri={{ original: account.avatar, static: account.avatar_static }}
dimension={{
width: StyleConstants.Avatar.M,
height:
conversation.accounts.length > 2
? StyleConstants.Avatar.M / 2
: StyleConstants.Avatar.M
}}
style={{ flex: 1, flexBasis: '50%' }}
/>
))}
</View>
<TimelineHeaderConversation conversation={conversation} />
</View>
{conversation.last_status ? (
@ -120,40 +102,19 @@ const TimelineConversation = React.memo(
<View
style={{
paddingTop: highlighted ? StyleConstants.Spacing.S : 0,
paddingLeft: highlighted
? 0
: StyleConstants.Avatar.M + StyleConstants.Spacing.S
paddingLeft: highlighted ? 0 : StyleConstants.Avatar.M + StyleConstants.Spacing.S
}}
>
<TimelineContent
status={conversation.last_status}
highlighted={highlighted}
/>
{conversation.last_status.poll ? (
<TimelinePoll
queryKey={queryKey}
statusId={conversation.last_status.id}
poll={conversation.last_status.poll}
reblog={false}
sameAccount={
conversation.last_status.id === instanceAccount?.id
}
/>
) : null}
<TimelineContent />
<TimelinePoll />
</View>
<TimelineActions
queryKey={queryKey}
status={conversation.last_status}
highlighted={highlighted}
accts={conversation.accounts.map(account => account.acct)}
reblog={false}
/>
<TimelineActions />
</>
) : null}
</Pressable>
)
},
(prev, next) => isEqual(prev.conversation, next.conversation)
)
</StatusContext.Provider>
)
}
export default TimelineConversation