tooot/src/components/Timeline/Shared/Actions.tsx

344 lines
10 KiB
TypeScript
Raw Normal View History

import Icon from '@components/Icon'
2021-02-28 22:49:55 +01:00
import { displayMessage } from '@components/Message'
import CustomText from '@components/Text'
2022-10-31 23:43:42 +01:00
import { useActionSheet } from '@expo/react-native-action-sheet'
2020-12-07 12:31:40 +01:00
import { useNavigation } from '@react-navigation/native'
2022-04-30 21:47:17 +02:00
import { StackNavigationProp } from '@react-navigation/stack'
import { RootStackParamList } from '@utils/navigation/navigators'
2021-01-11 21:36:57 +01:00
import {
MutationVarsTimelineUpdateStatusProperty,
QueryKeyTimeline,
useTimelineMutation
} from '@utils/queryHooks/timeline'
2021-01-01 16:48:16 +01:00
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React, { useCallback, useMemo } from 'react'
2021-01-01 23:10:47 +01:00
import { useTranslation } from 'react-i18next'
import { Pressable, StyleSheet, View } from 'react-native'
2021-01-11 21:36:57 +01:00
import { useQueryClient } from 'react-query'
export interface Props {
2021-01-07 19:13:09 +01:00
queryKey: QueryKeyTimeline
2021-02-13 01:26:02 +01:00
rootQueryKey?: QueryKeyTimeline
2021-03-16 23:15:37 +01:00
highlighted: boolean
status: Mastodon.Status
ownAccount?: boolean
2021-01-24 02:25:43 +01:00
accts: Mastodon.Account['acct'][] // When replying to conversations
2020-12-19 18:21:37 +01:00
reblog: boolean
}
const TimelineActions: React.FC<Props> = ({
queryKey,
rootQueryKey,
highlighted,
status,
ownAccount = false,
accts,
reblog
}) => {
2022-04-30 21:47:17 +02:00
const navigation = useNavigation<StackNavigationProp<RootStackParamList>>()
const { t } = useTranslation('componentTimeline')
2022-02-12 14:51:01 +01:00
const { colors, theme } = useTheme()
const iconColor = colors.secondary
2020-11-23 00:07:32 +01:00
const queryClient = useQueryClient()
const mutation = useTimelineMutation({
onMutate: true,
onSuccess: (_, params) => {
const theParams = params as MutationVarsTimelineUpdateStatusProperty
if (
// Un-bookmark from bookmarks page
2022-10-31 21:54:24 +01:00
(queryKey[1].page === 'Bookmarks' && theParams.payload.property === 'bookmarked') ||
// Un-favourite from favourites page
2022-10-31 21:54:24 +01:00
(queryKey[1].page === 'Favourites' && theParams.payload.property === 'favourited')
) {
2021-01-12 00:12:44 +01:00
queryClient.invalidateQueries(queryKey)
} else if (theParams.payload.property === 'favourited') {
// When favourited, update favourited page
2022-10-31 21:54:24 +01:00
const tempQueryKey: QueryKeyTimeline = ['Timeline', { page: 'Favourites' }]
queryClient.invalidateQueries(tempQueryKey)
} else if (theParams.payload.property === 'bookmarked') {
// When bookmarked, update bookmark page
2022-10-31 21:54:24 +01:00
const tempQueryKey: QueryKeyTimeline = ['Timeline', { page: 'Bookmarks' }]
queryClient.invalidateQueries(tempQueryKey)
2021-01-24 02:25:43 +01:00
}
},
onError: (err: any, params, oldData) => {
const correctParam = params as MutationVarsTimelineUpdateStatusProperty
displayMessage({
2022-02-12 14:51:01 +01:00
theme,
type: 'error',
2021-03-28 23:31:10 +02:00
message: t('common:message.error.message', {
2022-10-31 21:54:24 +01:00
function: t(`shared.actions.${correctParam.payload.property}.function`)
}),
...(err.status &&
typeof err.status === 'number' &&
err.data &&
err.data.error &&
typeof err.data.error === 'string' && {
description: err.data.error
})
2021-03-06 21:01:38 +01:00
})
queryClient.invalidateQueries(queryKey)
}
})
2022-11-29 23:44:11 +01:00
const onPressReply = useCallback(
() =>
navigation.navigate('Screen-Compose', {
type: 'reply',
incomingStatus: status,
accts,
queryKey
}),
[status.replies_count]
)
2022-10-31 23:43:42 +01:00
const { showActionSheetWithOptions } = useActionSheet()
const onPressReblog = useCallback(() => {
2022-10-31 23:43:42 +01:00
if (!status.reblogged) {
showActionSheetWithOptions(
{
title: t('shared.actions.reblogged.options.title'),
options: [
t('shared.actions.reblogged.options.public'),
t('shared.actions.reblogged.options.unlisted'),
t('common:buttons.cancel')
],
cancelButtonIndex: 2
},
(selectedIndex: number) => {
switch (selectedIndex) {
case 0:
mutation.mutate({
type: 'updateStatusProperty',
queryKey,
rootQueryKey,
id: status.id,
reblog,
payload: {
property: 'reblogged',
currentValue: status.reblogged,
propertyCount: 'reblogs_count',
countValue: status.reblogs_count,
visibility: 'public'
}
})
break
case 1:
mutation.mutate({
type: 'updateStatusProperty',
queryKey,
rootQueryKey,
id: status.id,
reblog,
payload: {
property: 'reblogged',
currentValue: status.reblogged,
propertyCount: 'reblogs_count',
countValue: status.reblogs_count,
visibility: 'unlisted'
}
})
break
}
}
)
} else {
mutation.mutate({
type: 'updateStatusProperty',
queryKey,
rootQueryKey,
id: status.id,
reblog,
payload: {
property: 'reblogged',
currentValue: status.reblogged,
propertyCount: 'reblogs_count',
countValue: status.reblogs_count,
visibility: 'public'
}
})
}
}, [status.reblogged, status.reblogs_count])
const onPressFavourite = useCallback(() => {
mutation.mutate({
type: 'updateStatusProperty',
queryKey,
rootQueryKey,
id: status.id,
reblog,
payload: {
property: 'favourited',
currentValue: status.favourited,
propertyCount: 'favourites_count',
countValue: status.favourites_count
}
})
}, [status.favourited, status.favourites_count])
const onPressBookmark = useCallback(() => {
mutation.mutate({
type: 'updateStatusProperty',
queryKey,
rootQueryKey,
id: status.id,
reblog,
payload: {
property: 'bookmarked',
currentValue: status.bookmarked,
propertyCount: undefined,
countValue: undefined
}
})
}, [status.bookmarked])
2021-03-06 21:01:38 +01:00
const childrenReply = useMemo(
() => (
<>
2022-10-31 21:54:24 +01:00
<Icon name='MessageCircle' color={iconColor} size={StyleConstants.Font.Size.L} />
2021-06-11 23:07:41 +02:00
{status.replies_count > 0 ? (
<CustomText
style={{
2022-02-12 14:51:01 +01:00
color: colors.secondary,
fontSize: StyleConstants.Font.Size.M,
marginLeft: StyleConstants.Spacing.XS
}}
>
{status.replies_count}
</CustomText>
2021-06-11 23:07:41 +02:00
) : null}
</>
),
[status.replies_count]
)
const childrenReblog = useMemo(() => {
2022-02-12 14:51:01 +01:00
const color = (state: boolean) => (state ? colors.green : colors.secondary)
return (
<>
<Icon
name='Repeat'
color={
2022-10-31 21:54:24 +01:00
status.visibility === 'direct' || (status.visibility === 'private' && !ownAccount)
2022-02-12 14:51:01 +01:00
? colors.disabled
: color(status.reblogged)
}
size={StyleConstants.Font.Size.L}
/>
2021-06-11 23:07:41 +02:00
{status.reblogs_count > 0 ? (
<CustomText
style={{
color:
status.visibility === 'private' && !ownAccount
? colors.disabled
: color(status.reblogged),
fontSize: StyleConstants.Font.Size.M,
marginLeft: StyleConstants.Spacing.XS
}}
>
{status.reblogs_count}
</CustomText>
2021-06-11 23:07:41 +02:00
) : null}
</>
2021-03-06 21:01:38 +01:00
)
}, [status.reblogged, status.reblogs_count])
const childrenFavourite = useMemo(() => {
2022-02-12 14:51:01 +01:00
const color = (state: boolean) => (state ? colors.red : colors.secondary)
return (
<>
2022-10-31 21:54:24 +01:00
<Icon name='Heart' color={color(status.favourited)} size={StyleConstants.Font.Size.L} />
2021-06-11 23:07:41 +02:00
{status.favourites_count > 0 ? (
<CustomText
style={{
color: color(status.favourited),
fontSize: StyleConstants.Font.Size.M,
marginLeft: StyleConstants.Spacing.XS,
marginTop: 0
}}
>
{status.favourites_count}
</CustomText>
2021-06-11 23:07:41 +02:00
) : null}
</>
)
}, [status.favourited, status.favourites_count])
const childrenBookmark = useMemo(() => {
2022-02-12 14:51:01 +01:00
const color = (state: boolean) => (state ? colors.yellow : colors.secondary)
2021-03-06 21:01:38 +01:00
return (
2022-10-31 21:54:24 +01:00
<Icon name='Bookmark' color={color(status.bookmarked)} size={StyleConstants.Font.Size.L} />
)
}, [status.bookmarked])
return (
<View
style={{
2022-10-31 21:54:24 +01:00
paddingLeft: highlighted ? 0 : StyleConstants.Avatar.M + StyleConstants.Spacing.S
}}
>
<View style={{ flexDirection: 'row' }}>
<Pressable
2021-04-09 21:43:12 +02:00
{...(highlighted
? {
2022-10-31 21:54:24 +01:00
accessibilityLabel: t('shared.actions.reply.accessibilityLabel'),
2021-04-09 21:43:12 +02:00
accessibilityRole: 'button'
}
: { accessibilityLabel: '' })}
style={styles.action}
onPress={onPressReply}
children={childrenReply}
/>
<Pressable
2021-04-09 21:43:12 +02:00
{...(highlighted
? {
2022-10-31 21:54:24 +01:00
accessibilityLabel: t('shared.actions.reblogged.accessibilityLabel'),
2021-04-09 21:43:12 +02:00
accessibilityRole: 'button'
}
: { accessibilityLabel: '' })}
style={styles.action}
onPress={onPressReblog}
children={childrenReblog}
disabled={
2022-10-31 21:54:24 +01:00
status.visibility === 'direct' || (status.visibility === 'private' && !ownAccount)
}
/>
<Pressable
2021-04-09 21:43:12 +02:00
{...(highlighted
? {
2022-10-31 21:54:24 +01:00
accessibilityLabel: t('shared.actions.favourited.accessibilityLabel'),
2021-04-09 21:43:12 +02:00
accessibilityRole: 'button'
}
: { accessibilityLabel: '' })}
style={styles.action}
onPress={onPressFavourite}
children={childrenFavourite}
/>
<Pressable
2021-04-09 21:43:12 +02:00
{...(highlighted
? {
2022-10-31 21:54:24 +01:00
accessibilityLabel: t('shared.actions.bookmarked.accessibilityLabel'),
2021-04-09 21:43:12 +02:00
accessibilityRole: 'button'
}
: { accessibilityLabel: '' })}
style={styles.action}
onPress={onPressBookmark}
children={childrenBookmark}
/>
2021-03-16 23:15:37 +01:00
</View>
</View>
)
}
const styles = StyleSheet.create({
action: {
2021-01-19 01:13:45 +01:00
flex: 1,
flexDirection: 'row',
2021-01-01 16:48:16 +01:00
justifyContent: 'center',
2021-01-20 00:39:39 +01:00
alignItems: 'center',
2021-05-19 23:28:01 +02:00
minHeight: StyleConstants.Font.Size.L + StyleConstants.Spacing.S * 3,
2021-03-15 00:18:44 +01:00
marginHorizontal: StyleConstants.Spacing.S
}
})
2020-12-03 01:28:56 +01:00
export default TimelineActions