Fixed #158

2025-06-05 22:19:13 +02:00 · 2022-06-07 20:07:14 +02:00
parent 23bc9aa5f3
commit 0991d50240
16 changed files with 239 additions and 298 deletions
--- a/src/components/Timeline/Shared/ContextMenu/account.ts
+++ b/src/components/Timeline/Shared/ContextMenu/account.ts
@ -14,17 +14,17 @@ import { useQueryClient } from 'react-query'
 import { useSelector } from 'react-redux'

 export interface Props {
-  menuItems: ContextMenuAction[]
-  status: Mastodon.Status
-  queryKey: QueryKeyTimeline
+  actions: ContextMenuAction[]
+  queryKey?: QueryKeyTimeline
  rootQueryKey?: QueryKeyTimeline
+  id: Mastodon.Account['id']
 }

 const contextMenuAccount = ({
-  menuItems,
-  status,
+  actions,
  queryKey,
-  rootQueryKey
+  rootQueryKey,
+  id: accountId
 }: Props) => {
  const { theme } = useTheme()
  const { t } = useTranslation('componentContextMenu')
@ -68,12 +68,12 @@ const contextMenuAccount = ({
    getInstanceAccount,
    (prev, next) => prev.id === next.id
  )
-  const ownAccount = instanceAccount?.id === status.account.id
+  const ownAccount = instanceAccount?.id === accountId

  if (!ownAccount) {
    switch (Platform.OS) {
      case 'ios':
-        menuItems.push({
+        actions.push({
          id: 'account',
          title: t('account.title'),
          inlineChildren: true,
@ -99,7 +99,7 @@ const contextMenuAccount = ({
        })
        break
      default:
-        menuItems.push(
+        actions.push(
          {
            id: 'account-mute',
            title: t('account.mute.action'),
@ -123,7 +123,6 @@ const contextMenuAccount = ({
  }

  return (id: string) => {
-    const url = status.url || status.uri
    switch (id) {
      case 'account-mute':
        analytics('timeline_shared_headeractions_account_mute_press', {
@ -132,7 +131,7 @@ const contextMenuAccount = ({
        mutateion.mutate({
          type: 'updateAccountProperty',
          queryKey,
-          id: status.account.id,
+          id: accountId,
          payload: { property: 'mute' }
        })
        break
@ -143,7 +142,7 @@ const contextMenuAccount = ({
        mutateion.mutate({
          type: 'updateAccountProperty',
          queryKey,
-          id: status.account.id,
+          id: accountId,
          payload: { property: 'block' }
        })
        break
@ -154,7 +153,7 @@ const contextMenuAccount = ({
        mutateion.mutate({
          type: 'updateAccountProperty',
          queryKey,
-          id: status.account.id,
+          id: accountId,
          payload: { property: 'reports' }
        })
        break
--- a/src/components/Timeline/Shared/ContextMenu/instance.ts
+++ b/src/components/Timeline/Shared/ContextMenu/instance.ts
@ -13,14 +13,14 @@ import { useQueryClient } from 'react-query'
 import { useSelector } from 'react-redux'

 export interface Props {
-  menuItems: ContextMenuAction[]
+  actions: ContextMenuAction[]
  status: Mastodon.Status
  queryKey: QueryKeyTimeline
  rootQueryKey?: QueryKeyTimeline
 }

 const contextMenuInstance = ({
-  menuItems,
+  actions,
  status,
  queryKey,
  rootQueryKey
@ -49,7 +49,7 @@ const contextMenuInstance = ({
  if (currentInstance !== instance && instance) {
    switch (Platform.OS) {
      case 'ios':
-        menuItems.push({
+        actions.push({
          id: 'instance',
          title: t('instance.title'),
          actions: [
@ -62,7 +62,7 @@ const contextMenuInstance = ({
        })
        break
      default:
-        menuItems.push({
+        actions.push({
          id: 'instance-block',
          title: t('instance.block.action', { instance }),
          destructive: true
--- a/src/components/Timeline/Shared/ContextMenu/share.ts
+++ b/src/components/Timeline/Shared/ContextMenu/share.ts
@ -4,23 +4,21 @@ import { Platform, Share } from 'react-native'
 import { ContextMenuAction } from 'react-native-context-menu-view'

 export interface Props {
-  menuItems: ContextMenuAction[]
-  status: Mastodon.Status
+  actions: ContextMenuAction[]
+  type: 'status' | 'account'
+  url: string
 }

-const contextMenuShare = ({ menuItems, status }: Props) => {
+const contextMenuShare = ({ actions, type, url }: Props) => {
  const { t } = useTranslation('componentContextMenu')

-  if (status.visibility !== 'direct') {
-    menuItems.push({
-      id: 'share',
-      title: t(`share.status.action`),
-      systemIcon: 'square.and.arrow.up'
-    })
-  }
+  actions.push({
+    id: 'share',
+    title: t(`share.${type}.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')
--- a/src/components/Timeline/Shared/ContextMenu/status.ts
+++ b/src/components/Timeline/Shared/ContextMenu/status.ts
@ -21,14 +21,14 @@ import { useQueryClient } from 'react-query'
 import { useSelector } from 'react-redux'

 export interface Props {
-  menuItems: ContextMenuAction[]
+  actions: ContextMenuAction[]
  status: Mastodon.Status
  queryKey: QueryKeyTimeline
  rootQueryKey?: QueryKeyTimeline
 }

 const contextMenuStatus = ({
-  menuItems,
+  actions,
  status,
  queryKey,
  rootQueryKey
@ -116,7 +116,7 @@ const contextMenuStatus = ({

    switch (Platform.OS) {
      case 'ios':
-        menuItems.push({
+        actions.push({
          id: 'status',
          title: t('status.title'),
          inlineChildren: true,
@ -124,7 +124,7 @@ const contextMenuStatus = ({
        })
        break
      default:
-        menuItems.push(...accountMenuItems)
+        actions.push(...accountMenuItems)
        break
    }
  }
--- a/src/components/Timeline/Notifications.tsx
+++ b/src/components/Timeline/Notifications.tsx
@ -18,6 +18,7 @@ import { isEqual, uniqBy } from 'lodash'
 import React, { useCallback } from 'react'
 import { Pressable, View } from 'react-native'
 import { useSelector } from 'react-redux'
+import TimelineContextMenu from './Shared/ContextMenu'
 import TimelineFiltered, { shouldFilter } from './Shared/Filtered'
 import TimelineFullConversation from './Shared/FullConversation'

@ -58,103 +59,105 @@ const TimelineNotifications = React.memo(
    }, [])

    return (
-      <Pressable
-        style={{
-          padding: StyleConstants.Spacing.Global.PagePadding,
-          backgroundColor: colors.backgroundDefault,
-          paddingBottom: notification.status
-            ? 0
-            : StyleConstants.Spacing.Global.PagePadding
-        }}
-        onPress={onPress}
-      >
-        {notification.type !== 'mention' ? (
-          <TimelineActioned
-            action={notification.type}
-            account={notification.account}
-            notification
-          />
-        ) : null}
-
-        <View
+      <TimelineContextMenu status={notification.status} queryKey={queryKey}>
+        <Pressable
          style={{
-            opacity:
-              notification.type === 'follow' ||
-              notification.type === 'follow_request' ||
-              notification.type === 'mention' ||
-              notification.type === 'status'
-                ? 1
-                : 0.5
+            padding: StyleConstants.Spacing.Global.PagePadding,
+            backgroundColor: colors.backgroundDefault,
+            paddingBottom: notification.status
+              ? 0
+              : StyleConstants.Spacing.Global.PagePadding
          }}
+          onPress={onPress}
+          onLongPress={() => {}}
        >
-          <View style={{ flex: 1, width: '100%', flexDirection: 'row' }}>
-            <TimelineAvatar
-              queryKey={queryKey}
-              account={actualAccount}
-              highlighted={highlighted}
-            />
-            <TimelineHeaderNotification
-              queryKey={queryKey}
-              notification={notification}
+          {notification.type !== 'mention' ? (
+            <TimelineActioned
+              action={notification.type}
+              account={notification.account}
+              notification
            />
+          ) : null}
+
+          <View
+            style={{
+              opacity:
+                notification.type === 'follow' ||
+                notification.type === 'follow_request' ||
+                notification.type === 'mention' ||
+                notification.type === 'status'
+                  ? 1
+                  : 0.5
+            }}
+          >
+            <View style={{ flex: 1, width: '100%', flexDirection: 'row' }}>
+              <TimelineAvatar
+                queryKey={queryKey}
+                account={actualAccount}
+                highlighted={highlighted}
+              />
+              <TimelineHeaderNotification notification={notification} />
+            </View>
+
+            {notification.status ? (
+              <View
+                style={{
+                  paddingTop: highlighted ? StyleConstants.Spacing.S : 0,
+                  paddingLeft: highlighted
+                    ? 0
+                    : StyleConstants.Avatar.M + StyleConstants.Spacing.S
+                }}
+              >
+                {notification.status.content.length > 0 ? (
+                  <TimelineContent
+                    status={notification.status}
+                    highlighted={highlighted}
+                  />
+                ) : null}
+                {notification.status.poll ? (
+                  <TimelinePoll
+                    queryKey={queryKey}
+                    statusId={notification.status.id}
+                    poll={notification.status.poll}
+                    reblog={false}
+                    sameAccount={
+                      notification.account.id === instanceAccount?.id
+                    }
+                  />
+                ) : null}
+                {notification.status.media_attachments.length > 0 ? (
+                  <TimelineAttachment status={notification.status} />
+                ) : null}
+                {notification.status.card ? (
+                  <TimelineCard card={notification.status.card} />
+                ) : null}
+                <TimelineFullConversation
+                  queryKey={queryKey}
+                  status={notification.status}
+                />
+              </View>
+            ) : null}
          </View>

          {notification.status ? (
-            <View
-              style={{
-                paddingTop: highlighted ? StyleConstants.Spacing.S : 0,
-                paddingLeft: highlighted
-                  ? 0
-                  : StyleConstants.Avatar.M + StyleConstants.Spacing.S
-              }}
-            >
-              {notification.status.content.length > 0 ? (
-                <TimelineContent
-                  status={notification.status}
-                  highlighted={highlighted}
-                />
-              ) : null}
-              {notification.status.poll ? (
-                <TimelinePoll
-                  queryKey={queryKey}
-                  statusId={notification.status.id}
-                  poll={notification.status.poll}
-                  reblog={false}
-                  sameAccount={notification.account.id === instanceAccount?.id}
-                />
-              ) : null}
-              {notification.status.media_attachments.length > 0 ? (
-                <TimelineAttachment status={notification.status} />
-              ) : null}
-              {notification.status.card ? (
-                <TimelineCard card={notification.status.card} />
-              ) : null}
-              <TimelineFullConversation
-                queryKey={queryKey}
-                status={notification.status}
-              />
-            </View>
+            <TimelineActions
+              queryKey={queryKey}
+              status={notification.status}
+              highlighted={highlighted}
+              accts={uniqBy(
+                (
+                  [notification.status.account] as Mastodon.Account[] &
+                    Mastodon.Mention[]
+                )
+                  .concat(notification.status.mentions)
+                  .filter(d => d?.id !== instanceAccount?.id),
+                d => d?.id
+              ).map(d => d?.acct)}
+              reblog={false}
+            />
          ) : null}
-        </View>
-
-        {notification.status ? (
-          <TimelineActions
-            queryKey={queryKey}
-            status={notification.status}
-            highlighted={highlighted}
-            accts={uniqBy(
-              (
-                [notification.status.account] as Mastodon.Account[] &
-                  Mastodon.Mention[]
-              )
-                .concat(notification.status.mentions)
-                .filter(d => d?.id !== instanceAccount?.id),
-              d => d?.id
-            ).map(d => d?.acct)}
-            reblog={false}
-          />
-        ) : null}
-      </Pressable>
+        </Pressable>
+      </TimelineContextMenu>
    )
  },
  (prev, next) => isEqual(prev.notification, next.notification)
--- a/src/components/Timeline/Shared/ContextMenu.tsx
+++ b/src/components/Timeline/Shared/ContextMenu.tsx
@ -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>
  )
--- a/src/components/Timeline/Shared/HeaderDefault.tsx
+++ b/src/components/Timeline/Shared/HeaderDefault.tsx
@ -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'
--- a/src/components/Timeline/Shared/HeaderNotification.tsx
+++ b/src/components/Timeline/Shared/HeaderNotification.tsx
@ -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}
+                    />
+                  }
                />
              }
            />