1
0
mirror of https://github.com/tooot-app/app synced 2025-06-05 22:19:13 +02:00
This commit is contained in:
Zhiyuan Zheng
2022-06-07 20:07:14 +02:00
parent 23bc9aa5f3
commit 0991d50240
16 changed files with 239 additions and 298 deletions

View File

@ -1,62 +1,79 @@
import contextMenuAccount from '@components/ContextMenu/account'
import contextMenuInstance from '@components/ContextMenu/instance'
import contextMenuShare from '@components/ContextMenu/share'
import contextMenuStatus from '@components/ContextMenu/status'
import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
import React from 'react'
import { createContext } from 'react'
import ContextMenu, { ContextMenuAction } from 'react-native-context-menu-view'
import contextMenuAccount from './ContextMenu/account'
import contextMenuInstance from './ContextMenu/instance'
import contextMenuShare from './ContextMenu/share'
import contextMenuStatus from './ContextMenu/status'
import ContextMenu, {
ContextMenuAction,
ContextMenuProps
} from 'react-native-context-menu-view'
export interface Props {
status: Mastodon.Status
status?: Mastodon.Status
queryKey?: QueryKeyTimeline
rootQueryKey?: QueryKeyTimeline
}
export const ContextMenuContext = createContext<ContextMenuAction[]>([])
const TimelineContextMenu: React.FC<Props> = ({
const TimelineContextMenu: React.FC<Props & ContextMenuProps> = ({
children,
status,
queryKey,
rootQueryKey
rootQueryKey,
...props
}) => {
if (!queryKey) {
if (!status || !queryKey) {
return <>{children}</>
}
const menuItems: ContextMenuAction[] = []
const actions: ContextMenuAction[] = []
const shareOnPress = contextMenuShare({ menuItems, status })
const shareOnPress =
status.visibility !== 'direct'
? contextMenuShare({
actions,
type: 'status',
url: status.url || status.uri
})
: null
const statusOnPress = contextMenuStatus({
menuItems,
actions,
status,
queryKey,
rootQueryKey
})
const accountOnPress = contextMenuAccount({
menuItems,
status,
actions,
queryKey,
rootQueryKey
rootQueryKey,
id: status.account.id
})
const instanceOnPress = contextMenuInstance({
menuItems,
actions,
status,
queryKey,
rootQueryKey
})
return (
<ContextMenuContext.Provider value={menuItems}>
<ContextMenuContext.Provider value={actions}>
<ContextMenu
actions={menuItems}
actions={actions}
onPress={({ nativeEvent: { id } }) => {
shareOnPress(id)
statusOnPress(id)
accountOnPress(id)
instanceOnPress(id)
for (const on of [
shareOnPress,
statusOnPress,
accountOnPress,
instanceOnPress
]) {
on && on(id)
}
}}
children={children}
{...props}
/>
</ContextMenuContext.Provider>
)

View File

@ -1,165 +0,0 @@
import analytics from '@components/analytics'
import { displayMessage } from '@components/Message'
import {
MutationVarsTimelineUpdateAccountProperty,
QueryKeyTimeline,
useTimelineMutation
} from '@utils/queryHooks/timeline'
import { getInstanceAccount } from '@utils/slices/instancesSlice'
import { useTheme } from '@utils/styles/ThemeManager'
import { useTranslation } from 'react-i18next'
import { Platform } from 'react-native'
import { ContextMenuAction } from 'react-native-context-menu-view'
import { useQueryClient } from 'react-query'
import { useSelector } from 'react-redux'
export interface Props {
menuItems: ContextMenuAction[]
status: Mastodon.Status
queryKey: QueryKeyTimeline
rootQueryKey?: QueryKeyTimeline
}
const contextMenuAccount = ({
menuItems,
status,
queryKey,
rootQueryKey
}: Props) => {
const { theme } = useTheme()
const { t } = useTranslation('componentContextMenu')
const queryClient = useQueryClient()
const mutateion = useTimelineMutation({
onSuccess: (_, params) => {
const theParams = params as MutationVarsTimelineUpdateAccountProperty
displayMessage({
theme,
type: 'success',
message: t('common:message.success.message', {
function: t(`account.${theParams.payload.property}.action`)
})
})
},
onError: (err: any, params) => {
const theParams = params as MutationVarsTimelineUpdateAccountProperty
displayMessage({
theme,
type: 'error',
message: t('common:message.error.message', {
function: t(`account.${theParams.payload.property}.action`)
}),
...(err.status &&
typeof err.status === 'number' &&
err.data &&
err.data.error &&
typeof err.data.error === 'string' && {
description: err.data.error
})
})
},
onSettled: () => {
queryKey && queryClient.invalidateQueries(queryKey)
rootQueryKey && queryClient.invalidateQueries(rootQueryKey)
}
})
const instanceAccount = useSelector(
getInstanceAccount,
(prev, next) => prev.id === next.id
)
const ownAccount = instanceAccount?.id === status.account.id
if (!ownAccount) {
switch (Platform.OS) {
case 'ios':
menuItems.push({
id: 'account',
title: t('account.title'),
inlineChildren: true,
actions: [
{
id: 'account-mute',
title: t('account.mute.action'),
systemIcon: 'eye.slash'
},
{
id: 'account-block',
title: t('account.block.action'),
systemIcon: 'xmark.circle',
destructive: true
},
{
id: 'account-reports',
title: t('account.reports.action'),
systemIcon: 'flag',
destructive: true
}
]
})
break
default:
menuItems.push(
{
id: 'account-mute',
title: t('account.mute.action'),
systemIcon: 'eye.slash'
},
{
id: 'account-block',
title: t('account.block.action'),
systemIcon: 'xmark.circle',
destructive: true
},
{
id: 'account-reports',
title: t('account.reports.action'),
systemIcon: 'flag',
destructive: true
}
)
break
}
}
return (id: string) => {
const url = status.url || status.uri
switch (id) {
case 'account-mute':
analytics('timeline_shared_headeractions_account_mute_press', {
page: queryKey && queryKey[1].page
})
mutateion.mutate({
type: 'updateAccountProperty',
queryKey,
id: status.account.id,
payload: { property: 'mute' }
})
break
case 'account-block':
analytics('timeline_shared_headeractions_account_block_press', {
page: queryKey && queryKey[1].page
})
mutateion.mutate({
type: 'updateAccountProperty',
queryKey,
id: status.account.id,
payload: { property: 'block' }
})
break
case 'account-report':
analytics('timeline_shared_headeractions_account_reports_press', {
page: queryKey && queryKey[1].page
})
mutateion.mutate({
type: 'updateAccountProperty',
queryKey,
id: status.account.id,
payload: { property: 'reports' }
})
break
}
}
}
export default contextMenuAccount

View File

@ -1,108 +0,0 @@
import analytics from '@components/analytics'
import { displayMessage } from '@components/Message'
import {
QueryKeyTimeline,
useTimelineMutation
} from '@utils/queryHooks/timeline'
import { getInstanceUrl } from '@utils/slices/instancesSlice'
import { useTheme } from '@utils/styles/ThemeManager'
import { useTranslation } from 'react-i18next'
import { Alert, Platform } from 'react-native'
import { ContextMenuAction } from 'react-native-context-menu-view'
import { useQueryClient } from 'react-query'
import { useSelector } from 'react-redux'
export interface Props {
menuItems: ContextMenuAction[]
status: Mastodon.Status
queryKey: QueryKeyTimeline
rootQueryKey?: QueryKeyTimeline
}
const contextMenuInstance = ({
menuItems,
status,
queryKey,
rootQueryKey
}: Props) => {
const { t } = useTranslation('componentContextMenu')
const { theme } = useTheme()
const currentInstance = useSelector(getInstanceUrl)
const instance = status.uri && status.uri.split(new RegExp(/\/\/(.*?)\//))[1]
const queryClient = useQueryClient()
const mutation = useTimelineMutation({
onSettled: () => {
displayMessage({
theme,
type: 'success',
message: t('common:message.success.message', {
function: t(`instance.block.action`, { instance })
})
})
queryClient.invalidateQueries(queryKey)
rootQueryKey && queryClient.invalidateQueries(rootQueryKey)
}
})
if (currentInstance !== instance && instance) {
switch (Platform.OS) {
case 'ios':
menuItems.push({
id: 'instance',
title: t('instance.title'),
actions: [
{
id: 'instance-block',
title: t('instance.block.action', { instance }),
destructive: true
}
]
})
break
default:
menuItems.push({
id: 'instance-block',
title: t('instance.block.action', { instance }),
destructive: true
})
break
}
}
return (id: string) => {
switch (id) {
case 'instance-block':
analytics('timeline_shared_headeractions_domain_block_press', {
page: queryKey[1].page
})
Alert.alert(
t('instance.block.alert.title', { instance }),
t('instance.block.alert.message'),
[
{
text: t('instance.block.alert.buttons.confirm'),
style: 'destructive',
onPress: () => {
analytics(
'timeline_shared_headeractions_domain_block_confirm',
{ page: queryKey && queryKey[1].page }
)
mutation.mutate({
type: 'domainBlock',
queryKey,
domain: instance
})
}
},
{
text: t('common:buttons.cancel')
}
]
)
}
}
}
export default contextMenuInstance

View File

@ -1,40 +0,0 @@
import analytics from '@components/analytics'
import { useTranslation } from 'react-i18next'
import { Platform, Share } from 'react-native'
import { ContextMenuAction } from 'react-native-context-menu-view'
export interface Props {
menuItems: ContextMenuAction[]
status: Mastodon.Status
}
const contextMenuShare = ({ menuItems, status }: Props) => {
const { t } = useTranslation('componentContextMenu')
if (status.visibility !== 'direct') {
menuItems.push({
id: 'share',
title: t(`share.status.action`),
systemIcon: 'square.and.arrow.up'
})
}
return (id: string) => {
const url = status.url || status.uri
switch (id) {
case 'share':
analytics('timeline_shared_headeractions_share_press')
switch (Platform.OS) {
case 'ios':
Share.share({ url })
break
case 'android':
Share.share({ message: url })
break
}
break
}
}
}
export default contextMenuShare

View File

@ -1,286 +0,0 @@
import apiInstance from '@api/instance'
import analytics from '@components/analytics'
import { displayMessage } from '@components/Message'
import { useNavigation } from '@react-navigation/native'
import { NativeStackNavigationProp } from '@react-navigation/native-stack'
import { RootStackParamList } from '@utils/navigation/navigators'
import {
MutationVarsTimelineUpdateStatusProperty,
QueryKeyTimeline,
useTimelineMutation
} from '@utils/queryHooks/timeline'
import {
checkInstanceFeature,
getInstanceAccount
} from '@utils/slices/instancesSlice'
import { useTheme } from '@utils/styles/ThemeManager'
import { useTranslation } from 'react-i18next'
import { Alert, Platform } from 'react-native'
import { ContextMenuAction } from 'react-native-context-menu-view'
import { useQueryClient } from 'react-query'
import { useSelector } from 'react-redux'
export interface Props {
menuItems: ContextMenuAction[]
status: Mastodon.Status
queryKey: QueryKeyTimeline
rootQueryKey?: QueryKeyTimeline
}
const contextMenuStatus = ({
menuItems,
status,
queryKey,
rootQueryKey
}: Props) => {
const navigation =
useNavigation<
NativeStackNavigationProp<RootStackParamList, 'Screen-Tabs'>
>()
const { theme } = useTheme()
const { t } = useTranslation('componentContextMenu')
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'
displayMessage({
theme,
type: 'error',
message: t('common:message.error.message', {
function: t(`status.${theFunction}.action`)
}),
...(err.status &&
typeof err.status === 'number' &&
err.data &&
err.data.error &&
typeof err.data.error === 'string' && {
description: err.data.error
})
})
queryClient.setQueryData(queryKey, oldData)
}
})
const instanceAccount = useSelector(
getInstanceAccount,
(prev, next) => prev.id === next.id
)
const ownAccount = instanceAccount?.id === status.account.id
if (ownAccount) {
const accountMenuItems: ContextMenuAction[] = [
{
id: 'status-delete',
title: t('status.delete.action'),
systemIcon: 'trash',
destructive: true
},
{
id: 'status-delete-edit',
title: t('status.deleteEdit.action'),
systemIcon: 'pencil.and.outline',
destructive: true
},
{
id: 'status-mute',
title: t('status.mute.action-muted', {
context: status.muted.toString()
}),
systemIcon: status.muted ? 'speaker' : 'speaker.slash'
}
]
const canEditPost = useSelector(checkInstanceFeature('edit_post'))
if (canEditPost) {
accountMenuItems.unshift({
id: 'status-edit',
title: t('status.edit.action'),
systemIcon: 'square.and.pencil'
})
}
if (status.visibility === 'public' || status.visibility === 'unlisted') {
accountMenuItems.push({
id: 'status-pin',
title: t('status.pin.action-pinned', {
context: status.pinned.toString()
}),
systemIcon: status.pinned ? 'pin.slash' : 'pin'
})
}
switch (Platform.OS) {
case 'ios':
menuItems.push({
id: 'status',
title: t('status.title'),
inlineChildren: true,
actions: accountMenuItems
})
break
default:
menuItems.push(...accountMenuItems)
break
}
}
return async (id: string) => {
switch (id) {
case 'status-delete':
analytics('timeline_shared_headeractions_status_delete_press', {
page: queryKey && queryKey[1].page
})
Alert.alert(
t('status.delete.alert.title'),
t('status.delete.alert.message'),
[
{
text: t('status.delete.alert.buttons.confirm'),
style: 'destructive',
onPress: async () => {
analytics(
'timeline_shared_headeractions_status_delete_confirm',
{
page: queryKey && queryKey[1].page
}
)
mutation.mutate({
type: 'deleteItem',
source: 'statuses',
queryKey,
rootQueryKey,
id: status.id
})
}
},
{
text: t('common:buttons.cancel')
}
]
)
break
case 'status-delete-edit':
analytics('timeline_shared_headeractions_status_deleteedit_press', {
page: queryKey && queryKey[1].page
})
Alert.alert(
t('status.deleteEdit.alert.title'),
t('status.deleteEdit.alert.message'),
[
{
text: t('status.deleteEdit.alert.buttons.confirm'),
style: 'destructive',
onPress: async () => {
analytics(
'timeline_shared_headeractions_status_deleteedit_confirm',
{
page: queryKey && queryKey[1].page
}
)
let replyToStatus: Mastodon.Status | undefined = undefined
if (status.in_reply_to_id) {
replyToStatus = await apiInstance<Mastodon.Status>({
method: 'get',
url: `statuses/${status.in_reply_to_id}`
}).then(res => res.body)
}
mutation
.mutateAsync({
type: 'deleteItem',
source: 'statuses',
queryKey,
id: status.id
})
.then(res => {
navigation.navigate('Screen-Compose', {
type: 'deleteEdit',
incomingStatus: res.body as Mastodon.Status,
...(replyToStatus && { replyToStatus }),
queryKey
})
})
}
},
{
text: t('common:buttons.cancel')
}
]
)
break
case 'status-mute':
analytics('timeline_shared_headeractions_status_mute_press', {
page: queryKey && queryKey[1].page
})
mutation.mutate({
type: 'updateStatusProperty',
queryKey,
rootQueryKey,
id: status.id,
payload: {
property: 'muted',
currentValue: status.muted,
propertyCount: undefined,
countValue: undefined
}
})
break
case 'status-edit':
analytics('timeline_shared_headeractions_status_edit_press', {
page: queryKey && queryKey[1].page
})
let replyToStatus: Mastodon.Status | undefined = undefined
if (status.in_reply_to_id) {
replyToStatus = await apiInstance<Mastodon.Status>({
method: 'get',
url: `statuses/${status.in_reply_to_id}`
}).then(res => res.body)
}
apiInstance<{
id: Mastodon.Status['id']
text: NonNullable<Mastodon.Status['text']>
spoiler_text: Mastodon.Status['spoiler_text']
}>({
method: 'get',
url: `statuses/${status.id}/source`
}).then(res => {
navigation.navigate('Screen-Compose', {
type: 'edit',
incomingStatus: {
...status,
text: res.body.text,
spoiler_text: res.body.spoiler_text
},
...(replyToStatus && { replyToStatus }),
queryKey,
rootQueryKey
})
})
break
case 'status-pin':
// Also note that reblogs cannot be pinned.
analytics('timeline_shared_headeractions_status_pin_press', {
page: queryKey && queryKey[1].page
})
mutation.mutate({
type: 'updateStatusProperty',
queryKey,
rootQueryKey,
id: status.id,
payload: {
property: 'pinned',
currentValue: status.pinned,
propertyCount: undefined,
countValue: undefined
}
})
break
}
}
}
export default contextMenuStatus

View File

@ -2,11 +2,10 @@ import Icon from '@components/Icon'
import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React, { useContext, useRef } from 'react'
import React, { useContext } from 'react'
import { useTranslation } from 'react-i18next'
import { Pressable, View } from 'react-native'
import ContextMenu from 'react-native-context-menu-view'
import { TouchableWithoutFeedback } from 'react-native-gesture-handler'
import { ContextMenuContext } from './ContextMenu'
import HeaderSharedAccount from './HeaderShared/Account'
import HeaderSharedApplication from './HeaderShared/Application'
@ -24,7 +23,7 @@ const TimelineHeaderDefault = ({ queryKey, status, highlighted }: Props) => {
const { t } = useTranslation('componentContextMenu')
const { colors } = useTheme()
const contextMenuItems = useContext(ContextMenuContext)
const contextMenuContext = useContext(ContextMenuContext)
return (
<View style={{ flex: 1, flexDirection: 'row' }}>
@ -60,16 +59,9 @@ const TimelineHeaderDefault = ({ queryKey, status, highlighted }: Props) => {
}}
>
<ContextMenu
dropdownMenuMode={true}
actions={contextMenuItems}
// onPress={({ nativeEvent: { index, name } }) => {
// console.log('index', index)
// console.log('name', name)
// // shareOnPress(name)
// // statusOnPress(name)
// accountOnPress(name)
// // instanceOnPress(name)
// }}
dropdownMenuMode
actions={contextMenuContext}
onPress={() => {}}
children={
<Icon
name='MoreHorizontal'

View File

@ -3,14 +3,12 @@ import {
RelationshipIncoming,
RelationshipOutgoing
} from '@components/Relationship'
import { useNavigation } from '@react-navigation/native'
import { StackNavigationProp } from '@react-navigation/stack'
import { RootStackParamList } from '@utils/navigation/navigators'
import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React, { useMemo } from 'react'
import React, { useContext, useMemo } from 'react'
import { Pressable, View } from 'react-native'
import ContextMenu from 'react-native-context-menu-view'
import { ContextMenuContext } from './ContextMenu'
import HeaderSharedAccount from './HeaderShared/Account'
import HeaderSharedApplication from './HeaderShared/Application'
import HeaderSharedCreated from './HeaderShared/Created'
@ -18,14 +16,14 @@ import HeaderSharedMuted from './HeaderShared/Muted'
import HeaderSharedVisibility from './HeaderShared/Visibility'
export interface Props {
queryKey: QueryKeyTimeline
notification: Mastodon.Notification
}
const TimelineHeaderNotification = ({ queryKey, notification }: Props) => {
const navigation = useNavigation<StackNavigationProp<RootStackParamList>>()
const TimelineHeaderNotification = ({ notification }: Props) => {
const { colors } = useTheme()
const contextMenuContext = useContext(ContextMenuContext)
const actions = useMemo(() => {
switch (notification.type) {
case 'follow':
@ -42,18 +40,18 @@ const TimelineHeaderNotification = ({ queryKey, notification }: Props) => {
justifyContent: 'center',
paddingBottom: StyleConstants.Spacing.S
}}
onPress={() =>
navigation.navigate('Screen-Actions', {
queryKey,
status: notification.status!,
type: 'status'
})
}
children={
<Icon
name='MoreHorizontal'
color={colors.secondary}
size={StyleConstants.Font.Size.L}
<ContextMenu
dropdownMenuMode
actions={contextMenuContext}
onPress={() => {}}
children={
<Icon
name='MoreHorizontal'
color={colors.secondary}
size={StyleConstants.Font.Size.L}
/>
}
/>
}
/>