tooot/src/screens/Actions/Status.tsx

201 lines
6.3 KiB
TypeScript
Raw Normal View History

2021-01-30 01:29:15 +01:00
import React from 'react'
import { useTranslation } from 'react-i18next'
import { Alert } from 'react-native'
import { useQueryClient } from 'react-query'
import { MenuContainer, MenuHeader, MenuRow } from '@components/Menu'
import {
MutationVarsTimelineUpdateStatusProperty,
QueryKeyTimeline,
useTimelineMutation
} from '@utils/queryHooks/timeline'
import analytics from '@components/analytics'
2021-02-28 22:49:55 +01:00
import { displayMessage } from '@components/Message'
import { useTheme } from '@utils/styles/ThemeManager'
2021-03-09 00:47:40 +01:00
import apiInstance from '@api/instance'
2021-08-29 15:25:38 +02:00
import { NativeStackNavigationProp } from '@react-navigation/native-stack'
import { RootStackParamList } from '@utils/navigation/navigators'
2021-01-30 01:29:15 +01:00
export interface Props {
2021-08-29 15:25:38 +02:00
navigation: NativeStackNavigationProp<RootStackParamList, 'Screen-Actions'>
2021-01-30 01:29:15 +01:00
queryKey: QueryKeyTimeline
2021-02-13 01:26:02 +01:00
rootQueryKey?: QueryKeyTimeline
2021-01-30 01:29:15 +01:00
status: Mastodon.Status
dismiss: () => void
}
const ActionsStatus: React.FC<Props> = ({
navigation,
queryKey,
2021-02-13 01:26:02 +01:00
rootQueryKey,
2021-01-30 01:29:15 +01:00
status,
dismiss
}) => {
2021-02-28 22:49:55 +01:00
const { mode } = useTheme()
2021-01-30 01:29:15 +01:00
const { t } = useTranslation('componentTimeline')
const queryClient = useQueryClient()
const mutation = useTimelineMutation({
onMutate: true,
onError: (err: any, params, oldData) => {
const theFunction = (params as MutationVarsTimelineUpdateStatusProperty)
.payload
? (params as MutationVarsTimelineUpdateStatusProperty).payload.property
: 'delete'
2021-02-28 22:49:55 +01:00
displayMessage({
mode,
2021-01-30 01:29:15 +01:00
type: 'error',
2021-03-28 23:31:10 +02:00
message: t('common:message.error.message', {
2021-01-30 01:29:15 +01:00
function: t(`shared.header.actions.status.${theFunction}.function`)
}),
...(err.status &&
typeof err.status === 'number' &&
err.data &&
err.data.error &&
typeof err.data.error === 'string' && {
description: err.data.error
})
})
queryClient.setQueryData(queryKey, oldData)
}
})
return (
<MenuContainer>
<MenuHeader heading={t('shared.header.actions.status.heading')} />
<MenuRow
onPress={() => {
analytics('timeline_shared_headeractions_status_delete_press', {
page: queryKey && queryKey[1].page
})
dismiss()
mutation.mutate({
type: 'deleteItem',
source: 'statuses',
queryKey,
2021-02-13 01:26:02 +01:00
rootQueryKey,
2021-01-30 01:29:15 +01:00
id: status.id
})
}}
iconFront='Trash'
title={t('shared.header.actions.status.delete.button')}
/>
<MenuRow
onPress={() => {
analytics('timeline_shared_headeractions_status_deleteedit_press', {
page: queryKey && queryKey[1].page
})
Alert.alert(
t('shared.header.actions.status.edit.alert.title'),
t('shared.header.actions.status.edit.alert.message'),
[
{
text: t(
'shared.header.actions.status.edit.alert.buttons.cancel'
),
style: 'cancel'
},
{
text: t(
'shared.header.actions.status.edit.alert.buttons.confirm'
),
style: 'destructive',
onPress: async () => {
analytics(
'timeline_shared_headeractions_status_deleteedit_confirm',
{
page: queryKey && queryKey[1].page
}
)
2021-03-09 00:47:40 +01:00
let replyToStatus: Mastodon.Status
if (status.in_reply_to_id) {
replyToStatus = await apiInstance<Mastodon.Status>({
method: 'get',
url: `statuses/${status.in_reply_to_id}`
}).then(res => res.body)
2021-01-30 01:29:15 +01:00
}
2021-03-09 00:47:40 +01:00
mutation
.mutateAsync({
type: 'deleteItem',
source: 'statuses',
queryKey,
id: status.id
})
.then(res => {
dismiss()
// @ts-ignore
navigation.navigate('Screen-Compose', {
type: 'edit',
incomingStatus: res.body,
...(replyToStatus && { replyToStatus }),
queryKey
})
})
2021-01-30 01:29:15 +01:00
}
}
]
)
}}
iconFront='Edit'
title={t('shared.header.actions.status.edit.button')}
/>
<MenuRow
onPress={() => {
analytics('timeline_shared_headeractions_status_mute_press', {
page: queryKey && queryKey[1].page
})
dismiss()
mutation.mutate({
type: 'updateStatusProperty',
queryKey,
2021-02-13 01:26:02 +01:00
rootQueryKey,
2021-01-30 01:29:15 +01:00
id: status.id,
payload: {
property: 'muted',
currentValue: status.muted,
propertyCount: undefined,
countValue: undefined
}
})
}}
iconFront='VolumeX'
title={
status.muted
? t('shared.header.actions.status.mute.button.negative')
: t('shared.header.actions.status.mute.button.positive')
}
/>
{/* Also note that reblogs cannot be pinned. */}
{(status.visibility === 'public' || status.visibility === 'unlisted') && (
<MenuRow
onPress={() => {
analytics('timeline_shared_headeractions_status_pin_press', {
page: queryKey && queryKey[1].page
})
dismiss()
mutation.mutate({
type: 'updateStatusProperty',
queryKey,
2021-02-13 01:26:02 +01:00
rootQueryKey,
2021-01-30 01:29:15 +01:00
id: status.id,
payload: {
property: 'pinned',
currentValue: status.pinned,
propertyCount: undefined,
countValue: undefined
}
})
}}
iconFront='Anchor'
title={
status.pinned
? t('shared.header.actions.status.pin.button.negative')
: t('shared.header.actions.status.pin.button.positive')
}
/>
)}
</MenuContainer>
)
}
export default ActionsStatus