tooot/src/components/Timeline/Conversation.tsx

170 lines
4.8 KiB
TypeScript
Raw Normal View History

2021-02-20 19:12:44 +01:00
import apiInstance from '@api/instance'
2021-01-24 02:25:43 +01:00
import analytics from '@components/analytics'
import GracefullyImage from '@components/GracefullyImage'
2020-11-22 00:46:23 +01:00
import { useNavigation } from '@react-navigation/native'
2021-01-24 02:25:43 +01:00
import { StackNavigationProp } from '@react-navigation/stack'
2021-01-11 21:36:57 +01:00
import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
2021-02-20 19:12:44 +01:00
import { getInstanceAccount } from '@utils/slices/instancesSlice'
2020-12-13 14:04:25 +01:00
import { StyleConstants } from '@utils/styles/constants'
2021-01-11 21:36:57 +01:00
import { useTheme } from '@utils/styles/ThemeManager'
import React, { useCallback } from 'react'
import { Pressable, StyleSheet, View } from 'react-native'
2020-12-27 16:25:29 +01:00
import { useMutation, useQueryClient } from 'react-query'
2021-01-11 21:36:57 +01:00
import { useSelector } from 'react-redux'
import TimelineActions from './Shared/Actions'
import TimelineContent from './Shared/Content'
import TimelineHeaderConversation from './Shared/HeaderConversation'
import TimelinePoll from './Shared/Poll'
2020-11-22 00:46:23 +01:00
2021-01-24 02:25:43 +01:00
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}
2022-02-12 18:25:53 +01:00
uri={{ original: account.avatar, static: account.avatar_static }}
2021-01-24 02:25:43 +01:00
dimension={{
width: StyleConstants.Avatar.M,
height:
accounts.length > 2
? StyleConstants.Avatar.M / 2
: StyleConstants.Avatar.M
}}
style={{ flex: 1, flexBasis: '50%' }}
/>
))}
</View>
)
}
2020-11-22 00:46:23 +01:00
export interface Props {
2020-12-27 16:25:29 +01:00
conversation: Mastodon.Conversation
2021-01-07 19:13:09 +01:00
queryKey: QueryKeyTimeline
2020-12-13 01:24:25 +01:00
highlighted?: boolean
2020-11-22 00:46:23 +01:00
}
2020-12-27 16:25:29 +01:00
2020-12-13 01:24:25 +01:00
const TimelineConversation: React.FC<Props> = ({
2020-12-27 16:25:29 +01:00
conversation,
2020-12-13 01:24:25 +01:00
queryKey,
highlighted = false
}) => {
2021-02-20 19:12:44 +01:00
const instanceAccount = useSelector(
getInstanceAccount,
2021-02-10 00:40:44 +01:00
(prev, next) => prev?.id === next?.id
)
2022-02-12 14:51:01 +01:00
const { colors } = useTheme()
2020-12-27 16:25:29 +01:00
const queryClient = useQueryClient()
2021-01-07 19:13:09 +01:00
const fireMutation = useCallback(() => {
2021-02-20 19:12:44 +01:00
return apiInstance<Mastodon.Conversation>({
2021-01-07 19:13:09 +01:00
method: 'post',
url: `conversations/${conversation.id}/read`
})
}, [])
2020-12-27 16:25:29 +01:00
const { mutate } = useMutation(fireMutation, {
onSettled: () => {
queryClient.invalidateQueries(queryKey)
}
})
2022-02-12 14:51:01 +01:00
const navigation =
useNavigation<StackNavigationProp<Nav.TabLocalStackParamList>>()
2020-12-27 18:43:49 +01:00
const onPress = useCallback(() => {
2021-01-24 02:25:43 +01:00
analytics('timeline_conversation_press')
2020-12-27 16:25:29 +01:00
if (conversation.last_status) {
2021-01-07 19:13:09 +01:00
conversation.unread && mutate()
2021-01-30 01:29:15 +01:00
navigation.push('Tab-Shared-Toot', {
2021-02-13 01:26:02 +01:00
toot: conversation.last_status,
rootQueryKey: queryKey
2020-12-27 16:25:29 +01:00
})
}
}, [])
2020-12-13 01:24:25 +01:00
2020-12-27 18:43:49 +01:00
return (
<Pressable
style={[
styles.base,
2022-02-12 14:51:01 +01:00
{ backgroundColor: colors.backgroundDefault },
conversation.unread && {
borderLeftWidth: StyleConstants.Spacing.XS,
2022-02-12 14:51:01 +01:00
borderLeftColor: colors.blue,
paddingLeft:
StyleConstants.Spacing.Global.PagePadding -
StyleConstants.Spacing.XS
}
]}
onPress={onPress}
>
2020-12-27 18:43:49 +01:00
<View style={styles.header}>
2021-01-24 02:25:43 +01:00
<Avatars accounts={conversation.accounts} />
2020-12-27 18:43:49 +01:00
<TimelineHeaderConversation
queryKey={queryKey}
conversation={conversation}
/>
</View>
{conversation.last_status ? (
2021-01-22 01:34:20 +01:00
<>
<View
style={{
paddingTop: highlighted ? StyleConstants.Spacing.S : 0,
paddingLeft: highlighted
? 0
: StyleConstants.Avatar.M + StyleConstants.Spacing.S
}}
>
<TimelineContent
status={conversation.last_status}
highlighted={highlighted}
/>
2021-06-11 23:07:41 +02:00
{conversation.last_status.poll ? (
2021-01-22 01:34:20 +01:00
<TimelinePoll
queryKey={queryKey}
statusId={conversation.last_status.id}
poll={conversation.last_status.poll}
reblog={false}
2021-02-20 19:12:44 +01:00
sameAccount={
conversation.last_status.id === instanceAccount?.id
}
2021-01-22 01:34:20 +01:00
/>
2021-06-11 23:07:41 +02:00
) : null}
2021-01-22 01:34:20 +01:00
</View>
2021-03-16 23:15:37 +01:00
<TimelineActions
queryKey={queryKey}
status={conversation.last_status}
highlighted={highlighted}
accts={conversation.accounts.map(account => account.acct)}
reblog={false}
/>
2021-01-22 01:34:20 +01:00
</>
2020-12-27 18:43:49 +01:00
) : null}
</Pressable>
)
2020-11-22 00:46:23 +01:00
}
const styles = StyleSheet.create({
base: {
2020-11-22 00:46:23 +01:00
flex: 1,
flexDirection: 'column',
2021-01-23 02:41:50 +01:00
padding: StyleConstants.Spacing.Global.PagePadding,
paddingBottom: 0
2020-11-22 00:46:23 +01:00
},
2020-12-13 23:02:54 +01:00
header: {
2020-11-22 00:46:23 +01:00
flex: 1,
2020-12-13 23:02:54 +01:00
width: '100%',
2020-11-22 00:46:23 +01:00
flexDirection: 'row'
}
})
export default TimelineConversation