mirror of https://github.com/tooot-app/app
162 lines
4.6 KiB
TypeScript
162 lines
4.6 KiB
TypeScript
import Button from '@components/Button'
|
|
import haptics from '@components/haptics'
|
|
import { displayMessage } from '@components/Message'
|
|
import { useRoute } from '@react-navigation/native'
|
|
import { useQueryClient } from '@tanstack/react-query'
|
|
import { featureCheck } from '@utils/helpers/featureCheck'
|
|
import {
|
|
QueryKeyRelationship,
|
|
useRelationshipMutation,
|
|
useRelationshipQuery
|
|
} from '@utils/queryHooks/relationship'
|
|
import { StyleConstants } from '@utils/styles/constants'
|
|
import { useTheme } from '@utils/styles/ThemeManager'
|
|
import React from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
|
|
export interface Props {
|
|
id: Mastodon.Account['id']
|
|
}
|
|
|
|
const RelationshipOutgoing: React.FC<Props> = ({ id }: Props) => {
|
|
const { theme } = useTheme()
|
|
const { t } = useTranslation(['common', 'componentRelationship'])
|
|
|
|
const canFollowNotify = featureCheck('account_follow_notify')
|
|
|
|
const query = useRelationshipQuery({ id })
|
|
|
|
const queryKeyRelationship: QueryKeyRelationship = ['Relationship', { id }]
|
|
const queryClient = useQueryClient()
|
|
const mutation = useRelationshipMutation({
|
|
onSuccess: (res, vars) => {
|
|
haptics('Success')
|
|
queryClient.setQueryData<Mastodon.Relationship[]>(queryKeyRelationship, [res])
|
|
if (vars.type === 'outgoing' && vars.payload.action === 'block') {
|
|
const queryKey = ['Timeline', { page: 'Following' }]
|
|
queryClient.invalidateQueries({ queryKey, exact: false })
|
|
}
|
|
},
|
|
onError: (err: any, vars) => {
|
|
displayMessage({
|
|
theme,
|
|
type: 'error',
|
|
message: t('common:message.error.message', {
|
|
function: t(`componentRelationship:${(vars.payload as any).action}.function` as any)
|
|
}),
|
|
...(err.status &&
|
|
typeof err.status === 'number' &&
|
|
err.data &&
|
|
err.data.error &&
|
|
typeof err.data.error === 'string' && {
|
|
description: err.data.error
|
|
})
|
|
})
|
|
}
|
|
})
|
|
|
|
let content: string
|
|
let onPress: () => void
|
|
|
|
if (query.isError) {
|
|
content = t('componentRelationship:button.error')
|
|
onPress = () => {}
|
|
} else {
|
|
if (query.data?.blocked_by) {
|
|
content = t('componentRelationship:button.blocked_by')
|
|
onPress = () => {}
|
|
} else {
|
|
if (query.data?.blocking) {
|
|
content = t('componentRelationship:button.blocking')
|
|
onPress = () => {
|
|
mutation.mutate({
|
|
id,
|
|
type: 'outgoing',
|
|
payload: {
|
|
action: 'block',
|
|
state: query.data?.blocking
|
|
}
|
|
})
|
|
}
|
|
} else {
|
|
if (query.data?.following) {
|
|
content = t('componentRelationship:button.following')
|
|
onPress = () => {
|
|
mutation.mutate({
|
|
id,
|
|
type: 'outgoing',
|
|
payload: {
|
|
action: 'follow',
|
|
state: query.data?.following
|
|
}
|
|
})
|
|
}
|
|
} else {
|
|
if (query.data?.requested) {
|
|
content = t('componentRelationship:button.requested')
|
|
onPress = () => {
|
|
mutation.mutate({
|
|
id,
|
|
type: 'outgoing',
|
|
payload: {
|
|
action: 'follow',
|
|
state: query.data?.requested
|
|
}
|
|
})
|
|
}
|
|
} else {
|
|
content = t('componentRelationship:button.default')
|
|
onPress = () => {
|
|
mutation.mutate({
|
|
id,
|
|
type: 'outgoing',
|
|
payload: {
|
|
action: 'follow',
|
|
state: false
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
const { name } = useRoute()
|
|
const isPageNotifications = name === 'Tab-Notifications-Root'
|
|
|
|
return (
|
|
<>
|
|
{!isPageNotifications && canFollowNotify && query.data?.following ? (
|
|
<Button
|
|
type='icon'
|
|
content={query.data.notifying ? 'bell-off' : 'bell'}
|
|
round
|
|
onPress={() =>
|
|
mutation.mutate({
|
|
id,
|
|
type: 'outgoing',
|
|
payload: {
|
|
action: 'follow',
|
|
state: false,
|
|
notify: !query.data.notifying
|
|
}
|
|
})
|
|
}
|
|
loading={query.isLoading || mutation.isLoading}
|
|
style={{ marginRight: StyleConstants.Spacing.S }}
|
|
/>
|
|
) : null}
|
|
<Button
|
|
type='text'
|
|
content={content}
|
|
onPress={onPress}
|
|
loading={query.isLoading || mutation.isLoading}
|
|
disabled={query.isError || query.data?.blocked_by}
|
|
/>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default RelationshipOutgoing
|