mirror of
https://github.com/tooot-app/app
synced 2025-06-05 22:19:13 +02:00
Updates
1. Added more notification types 2. Use `react-native-reanimated` v2
This commit is contained in:
@ -1,110 +1,18 @@
|
||||
import client from '@api/client'
|
||||
import haptics from '@components/haptics'
|
||||
import Icon from '@components/Icon'
|
||||
import { toast } from '@components/toast'
|
||||
import { relationshipFetch } from '@utils/fetches/relationshipFetch'
|
||||
import { RelationshipOutgoing } from '@components/Relationship'
|
||||
import { StyleConstants } from '@utils/styles/constants'
|
||||
import { useTheme } from '@utils/styles/ThemeManager'
|
||||
import React, { useCallback, useEffect, useMemo, useState } from 'react'
|
||||
import { Pressable, StyleSheet, View } from 'react-native'
|
||||
import { Chase } from 'react-native-animated-spinkit'
|
||||
import { useQuery } from 'react-query'
|
||||
import React from 'react'
|
||||
import { StyleSheet, View } from 'react-native'
|
||||
import HeaderSharedAccount from './HeaderShared/Account'
|
||||
import HeaderSharedApplication from './HeaderShared/Application'
|
||||
import HeaderSharedCreated from './HeaderShared/Created'
|
||||
import HeaderSharedVisibility from './HeaderShared/Visibility'
|
||||
import RelationshipIncoming from '@root/components/Relationship/Incoming'
|
||||
|
||||
export interface Props {
|
||||
notification: Mastodon.Notification
|
||||
}
|
||||
|
||||
const TimelineHeaderNotification: React.FC<Props> = ({ notification }) => {
|
||||
const { theme } = useTheme()
|
||||
|
||||
const { status, data, refetch } = useQuery(
|
||||
['Relationship', { id: notification.account.id }],
|
||||
relationshipFetch,
|
||||
{
|
||||
enabled: false
|
||||
}
|
||||
)
|
||||
const [updateData, setUpdateData] = useState<
|
||||
Mastodon.Relationship | undefined
|
||||
>()
|
||||
|
||||
const relationshipOnPress = useCallback(() => {
|
||||
client({
|
||||
method: 'post',
|
||||
instance: 'local',
|
||||
url: `accounts/${notification.account.id}/${
|
||||
updateData
|
||||
? updateData.following || updateData.requested
|
||||
? 'un'
|
||||
: ''
|
||||
: data!.following || data!.requested
|
||||
? 'un'
|
||||
: ''
|
||||
}follow`
|
||||
}).then(res => {
|
||||
if (res.body.id === (updateData && updateData.id) || data!.id) {
|
||||
setUpdateData(res.body)
|
||||
haptics('Success')
|
||||
return Promise.resolve()
|
||||
} else {
|
||||
haptics('Error')
|
||||
toast({ type: 'error', message: '请重试', autoHide: false })
|
||||
return Promise.reject()
|
||||
}
|
||||
})
|
||||
}, [data, updateData])
|
||||
|
||||
useEffect(() => {
|
||||
if (notification.type === 'follow') {
|
||||
refetch()
|
||||
}
|
||||
}, [notification.type])
|
||||
const relationshipIcon = useMemo(() => {
|
||||
switch (status) {
|
||||
case 'idle':
|
||||
case 'loading':
|
||||
return (
|
||||
<Chase size={StyleConstants.Font.Size.L} color={theme.secondary} />
|
||||
)
|
||||
case 'success':
|
||||
return (
|
||||
<Pressable onPress={relationshipOnPress}>
|
||||
<Icon
|
||||
name={
|
||||
updateData
|
||||
? updateData.following
|
||||
? 'UserCheck'
|
||||
: updateData.requested
|
||||
? 'Loader'
|
||||
: 'UserPlus'
|
||||
: data!.following
|
||||
? 'UserCheck'
|
||||
: data!.requested
|
||||
? 'Loader'
|
||||
: 'UserPlus'
|
||||
}
|
||||
color={
|
||||
updateData
|
||||
? updateData.following
|
||||
? theme.primary
|
||||
: theme.secondary
|
||||
: data!.following
|
||||
? theme.primary
|
||||
: theme.secondary
|
||||
}
|
||||
size={StyleConstants.Font.Size.M + 2}
|
||||
/>
|
||||
</Pressable>
|
||||
)
|
||||
default:
|
||||
return null
|
||||
}
|
||||
}, [status, data, updateData])
|
||||
|
||||
return (
|
||||
<View style={styles.base}>
|
||||
<View style={styles.accountAndMeta}>
|
||||
@ -114,6 +22,8 @@ const TimelineHeaderNotification: React.FC<Props> = ({ notification }) => {
|
||||
? notification.status.account
|
||||
: notification.account
|
||||
}
|
||||
{...((notification.type === 'follow' ||
|
||||
notification.type === 'follow_request') && { withoutName: true })}
|
||||
/>
|
||||
<View style={styles.meta}>
|
||||
<HeaderSharedCreated created_at={notification.created_at} />
|
||||
@ -127,7 +37,14 @@ const TimelineHeaderNotification: React.FC<Props> = ({ notification }) => {
|
||||
</View>
|
||||
|
||||
{notification.type === 'follow' && (
|
||||
<View style={styles.relationship}>{relationshipIcon}</View>
|
||||
<View style={styles.relationship}>
|
||||
<RelationshipOutgoing id={notification.account.id} />
|
||||
</View>
|
||||
)}
|
||||
{notification.type === 'follow_request' && (
|
||||
<View style={styles.relationship}>
|
||||
<RelationshipIncoming id={notification.account.id} />
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
)
|
||||
@ -136,10 +53,13 @@ const TimelineHeaderNotification: React.FC<Props> = ({ notification }) => {
|
||||
const styles = StyleSheet.create({
|
||||
base: {
|
||||
flex: 1,
|
||||
flexDirection: 'row'
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'flex-start'
|
||||
},
|
||||
accountAndMeta: {
|
||||
flex: 4
|
||||
flex: 1,
|
||||
flexGrow: 1
|
||||
},
|
||||
meta: {
|
||||
flexDirection: 'row',
|
||||
@ -148,9 +68,8 @@ const styles = StyleSheet.create({
|
||||
marginBottom: StyleConstants.Spacing.S
|
||||
},
|
||||
relationship: {
|
||||
flex: 1,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center'
|
||||
flexShrink: 1,
|
||||
marginLeft: StyleConstants.Spacing.M
|
||||
}
|
||||
})
|
||||
|
||||
|
Reference in New Issue
Block a user