Translated Timeline components

src/components/Timelines/Timeline/Shared/HeaderNotification.tsx

@@ -1,33 +1,26 @@
 import client from '@api/client'
 import { Feather } from '@expo/vector-icons'
 import haptics from '@components/haptics'
-import openLink from '@components/openLink'
-import { ParseEmojis } from '@components/Parse'
-import relativeTime from '@components/relativeTime'
 import { toast } from '@components/toast'
 import { relationshipFetch } from '@utils/fetches/relationshipFetch'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
-import { Pressable, StyleSheet, Text, View } from 'react-native'
+import { Pressable, StyleSheet, View } from 'react-native'
 import { Chase } from 'react-native-animated-spinkit'
 import { useQuery } from 'react-query'
+import HeaderSharedApplication from './HeaderShared/Application'
+import HeaderSharedVisibility from './HeaderShared/Visibility'
+import HeaderSharedCreated from './HeaderShared/Created'
+import HeaderSharedAccount from './HeaderShared/Account'
 
 export interface Props {
   notification: Mastodon.Notification
 }
 
 const TimelineHeaderNotification: React.FC<Props> = ({ notification }) => {
-  const actualAccount = notification.status
-    ? notification.status.account
-    : notification.account
-  const name = actualAccount.display_name || actualAccount.username
-  const emojis = actualAccount.emojis
-  const account = actualAccount.acct
   const { theme } = useTheme()
 
-  const [since, setSince] = useState(relativeTime(notification.created_at))
-
   const { status, data, refetch } = useQuery(
     ['Relationship', { id: notification.account.id }],
     relationshipFetch,
@@ -39,19 +32,6 @@ const TimelineHeaderNotification: React.FC<Props> = ({ notification }) => {
     Mastodon.Relationship | undefined
   >()
 
-  useEffect(() => {
-    setTimeout(() => {
-      setSince(relativeTime(notification.created_at))
-    }, 1000)
-  }, [since])
-
-  const applicationOnPress = useCallback(
-    async () =>
-      notification.status?.application.website &&
-      (await openLink(notification.status.application.website)),
-    []
-  )
-
   const relationshipOnPress = useCallback(() => {
     client({
       method: 'post',
@@ -72,7 +52,7 @@ const TimelineHeaderNotification: React.FC<Props> = ({ notification }) => {
         return Promise.resolve()
       } else {
         haptics('Error')
-        toast({ type: 'error', content: '请重试', autoHide: false })
+        toast({ type: 'error', message: '请重试', autoHide: false })
         return Promise.reject()
       }
     })
@@ -127,44 +107,22 @@ const TimelineHeaderNotification: React.FC<Props> = ({ notification }) => {
 
   return (
     <View style={styles.base}>
-      <View style={styles.nameAndMeta}>
-        <View style={styles.nameAndAccount}>
-          <Text numberOfLines={1}>
-            <ParseEmojis content={name} emojis={emojis} fontBold />
-          </Text>
-          <Text
-            style={[styles.account, { color: theme.secondary }]}
-            numberOfLines={1}
-          >
-            @{account}
-          </Text>
-        </View>
-
+      <View style={styles.accountAndMeta}>
+        <HeaderSharedAccount
+          account={
+            notification.status
+              ? notification.status.account
+              : notification.account
+          }
+        />
         <View style={styles.meta}>
-          <View>
-            <Text style={[styles.created_at, { color: theme.secondary }]}>
-              {since}
-            </Text>
-          </View>
-          {notification.status?.visibility === 'private' && (
-            <Feather
-              name='lock'
-              size={StyleConstants.Font.Size.S}
-              color={theme.secondary}
-              style={styles.visibility}
-            />
-          )}
-          {notification.status?.application &&
-            notification.status?.application.name !== 'Web' && (
-              <View>
-                <Text
-                  onPress={applicationOnPress}
-                  style={[styles.application, { color: theme.secondary }]}
-                >
-                  发自于 - {notification.status?.application.name}
-                </Text>
-              </View>
-            )}
+          <HeaderSharedCreated created_at={notification.created_at} />
+          <HeaderSharedVisibility
+            visibility={notification.status?.visibility}
+          />
+          <HeaderSharedApplication
+            application={notification.status?.application}
+          />
         </View>
       </View>
 
@@ -180,16 +138,8 @@ const styles = StyleSheet.create({
     flex: 1,
     flexDirection: 'row'
   },
-  nameAndMeta: {
-    width: '80%'
-  },
-  nameAndAccount: {
-    flexDirection: 'row',
-    alignItems: 'center'
-  },
-  account: {
-    flexShrink: 1,
-    marginLeft: StyleConstants.Spacing.XS
+  accountAndMeta: {
+    flex: 4
   },
   meta: {
     flexDirection: 'row',
@@ -197,18 +147,8 @@ const styles = StyleSheet.create({
     marginTop: StyleConstants.Spacing.XS,
     marginBottom: StyleConstants.Spacing.S
   },
-  created_at: {
-    ...StyleConstants.FontStyle.S
-  },
-  visibility: {
-    marginLeft: StyleConstants.Spacing.S
-  },
-  application: {
-    ...StyleConstants.FontStyle.S,
-    marginLeft: StyleConstants.Spacing.S
-  },
   relationship: {
-    flexBasis: '20%',
+    flex: 1,
     flexDirection: 'row',
     justifyContent: 'center'
   }