1
0
mirror of https://github.com/tooot-app/app synced 2025-06-05 22:19:13 +02:00
1. Added more notification types
2. Use `react-native-reanimated` v2
This commit is contained in:
Zhiyuan Zheng
2021-01-04 10:50:24 +01:00
parent dceaf8d25c
commit e9ea0ed71e
47 changed files with 956 additions and 700 deletions

View File

@ -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
}
})