import apiInstance from '@api/instance' import analytics from '@components/analytics' import GracefullyImage from '@components/GracefullyImage' 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 TimelineHeaderConversation from './Shared/HeaderConversation' import TimelinePoll from './Shared/Poll' const Avatars: React.FC<{ accounts: Mastodon.Account[] }> = ({ accounts }) => { return ( {accounts.slice(0, 4).map(account => ( 2 ? StyleConstants.Avatar.M / 2 : StyleConstants.Avatar.M }} style={{ flex: 1, flexBasis: '50%' }} /> ))} ) } 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 queryClient = useQueryClient() const fireMutation = useCallback(() => { return apiInstance({ method: 'post', url: `conversations/${conversation.id}/read` }) }, []) const { mutate } = useMutation(fireMutation, { onSettled: () => { queryClient.invalidateQueries(queryKey) } }) const navigation = useNavigation>() const onPress = useCallback(() => { analytics('timeline_conversation_press') if (conversation.last_status) { conversation.unread && mutate() navigation.push('Tab-Shared-Toot', { toot: conversation.last_status, rootQueryKey: queryKey }) } }, []) return ( {conversation.last_status ? ( <> {conversation.last_status.poll ? ( ) : null} account.acct)} reblog={false} /> ) : null} ) }, (prev, next) => isEqual(prev.conversation, next.conversation) ) export default TimelineConversation