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

import Icon from '@components/Icon'
import { ParseEmojis } from '@components/Parse'
import { useNavigation } from '@react-navigation/native'
import { StackNavigationProp } from '@react-navigation/stack'
import { TabLocalStackParamList } from '@utils/navigation/navigators'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React, { useContext } from 'react'
import { useTranslation } from 'react-i18next'
import { Pressable, StyleSheet, View } from 'react-native'
import StatusContext from './Context'

export interface Props {
  action: Mastodon.Notification['type'] | 'reblog' | 'pinned'
  isNotification?: boolean
  account?: Mastodon.Account
}

const TimelineActioned: React.FC<Props> = ({ action, isNotification, ...rest }) => {
  const { status } = useContext(StatusContext)
  const account = isNotification ? rest.account : status?.account
  if (!status || !account) return null

  const { t } = useTranslation('componentTimeline')
  const { colors } = useTheme()
  const navigation = useNavigation<StackNavigationProp<TabLocalStackParamList>>()
  const name = account?.display_name || account?.username
  const iconColor = colors.primaryDefault

  const content = (content: string) => (
    <ParseEmojis content={content} emojis={account.emojis} size='S' />
  )

  const onPress = () => navigation.push('Tab-Shared-Account', { account })

  const children = () => {
    switch (action) {
      case 'pinned':
        return (
          <>
            <Icon
              name='Anchor'
              size={StyleConstants.Font.Size.S}
              color={iconColor}
              style={styles.icon}
            />
            {content(t('shared.actioned.pinned'))}
          </>
        )
      case 'favourite':
        return (
          <>
            <Icon
              name='Heart'
              size={StyleConstants.Font.Size.S}
              color={iconColor}
              style={styles.icon}
            />
            <Pressable onPress={onPress}>
              {content(t('shared.actioned.favourite', { name }))}
            </Pressable>
          </>
        )
      case 'follow':
        return (
          <>
            <Icon
              name='UserPlus'
              size={StyleConstants.Font.Size.S}
              color={iconColor}
              style={styles.icon}
            />
            <Pressable onPress={onPress}>
              {content(t('shared.actioned.follow', { name }))}
            </Pressable>
          </>
        )
      case 'follow_request':
        return (
          <>
            <Icon
              name='UserPlus'
              size={StyleConstants.Font.Size.S}
              color={iconColor}
              style={styles.icon}
            />
            <Pressable onPress={onPress}>
              {content(t('shared.actioned.follow_request', { name }))}
            </Pressable>
          </>
        )
      case 'poll':
        return (
          <>
            <Icon
              name='BarChart2'
              size={StyleConstants.Font.Size.S}
              color={iconColor}
              style={styles.icon}
            />
            {content(t('shared.actioned.poll'))}
          </>
        )
      case 'reblog':
        return (
          <>
            <Icon
              name='Repeat'
              size={StyleConstants.Font.Size.S}
              color={iconColor}
              style={styles.icon}
            />
            <Pressable onPress={onPress}>
              {content(
                isNotification
                  ? t('shared.actioned.reblog.notification', { name })
                  : t('shared.actioned.reblog.default', { name })
              )}
            </Pressable>
          </>
        )
      case 'status':
        return (
          <>
            <Icon
              name='Activity'
              size={StyleConstants.Font.Size.S}
              color={iconColor}
              style={styles.icon}
            />
            <Pressable onPress={onPress}>
              {content(t('shared.actioned.status', { name }))}
            </Pressable>
          </>
        )
      case 'update':
        return (
          <>
            <Icon
              name='BarChart2'
              size={StyleConstants.Font.Size.S}
              color={iconColor}
              style={styles.icon}
            />
            {content(t('shared.actioned.update'))}
          </>
        )
      default:
        return <></>
    }
  }

  return (
    <View
      style={{
        flexDirection: 'row',
        alignItems: 'center',
        marginBottom: StyleConstants.Spacing.S,
        paddingLeft: StyleConstants.Avatar.M - StyleConstants.Font.Size.S,
        paddingRight: StyleConstants.Spacing.Global.PagePadding
      }}
      children={children()}
    />
  )
}

const styles = StyleSheet.create({
  icon: {
    marginRight: StyleConstants.Spacing.S
  }
})

export default TimelineActioned