mirror of
https://github.com/tooot-app/app
synced 2025-02-18 12:50:46 +01:00
Notification done
This commit is contained in:
Zhiyuan Zheng
parent
301772e735
commit
2fae98cb9e
82
src/components/Toot/Actioned.jsx
Normal file
82
src/components/Toot/Actioned.jsx
Normal file
@ -0,0 +1,82 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import propTypesEmoji from 'src/prop-types/emoji'
|
||||
import { StyleSheet, Text, View } from 'react-native'
|
||||
import { Feather } from '@expo/vector-icons'
|
||||
|
||||
import Emojis from './Emojis'
|
||||
|
||||
export default function Actioned ({
|
||||
action,
|
||||
name,
|
||||
emojis,
|
||||
notification = false
|
||||
}) {
|
||||
let icon
|
||||
let content
|
||||
switch (action) {
|
||||
case 'favourite':
|
||||
icon = (
|
||||
<Feather name='heart' size={12} color='black' style={styles.icon} />
|
||||
)
|
||||
content = `${name} 喜欢了你的嘟嘟`
|
||||
break
|
||||
case 'follow':
|
||||
icon = (
|
||||
<Feather name='user-plus' size={12} color='black' style={styles.icon} />
|
||||
)
|
||||
content = `${name} 开始关注你`
|
||||
break
|
||||
case 'poll':
|
||||
icon = (
|
||||
<Feather
|
||||
name='bar-chart-2'
|
||||
size={12}
|
||||
color='black'
|
||||
style={styles.icon}
|
||||
/>
|
||||
)
|
||||
content = `你参与的投票已结束`
|
||||
break
|
||||
case 'reblog':
|
||||
icon = (
|
||||
<Feather name='repeat' size={12} color='black' style={styles.icon} />
|
||||
)
|
||||
content = `${name} 转嘟了${notification ? '你的嘟嘟' : ''}`
|
||||
break
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={styles.actioned}>
|
||||
{icon}
|
||||
{content ? (
|
||||
<View style={styles.content}>
|
||||
<Emojis content={content} emojis={emojis} dimension={12} />
|
||||
</View>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
actioned: {
|
||||
flexDirection: 'row',
|
||||
marginBottom: 8
|
||||
},
|
||||
icon: {
|
||||
marginLeft: 50 - 12,
|
||||
marginRight: 8
|
||||
},
|
||||
content: {
|
||||
flexDirection: 'row'
|
||||
}
|
||||
})
|
||||
|
||||
Actioned.propTypes = {
|
||||
action: PropTypes.oneOf(['favourite', 'follow', 'poll', 'reblog']).isRequired,
|
||||
name: PropTypes.string,
|
||||
emojis: PropTypes.arrayOf(propTypesEmoji),
|
||||
notification: PropTypes.bool
|
||||
}
|
||||
@ -5,6 +5,7 @@ import { useNavigation } from '@react-navigation/native'
|
||||
|
||||
export default function Avatar ({ uri, id }) {
|
||||
const navigation = useNavigation()
|
||||
// Need to fix go back root
|
||||
return (
|
||||
<Pressable
|
||||
style={styles.avatar}
|
||||
|
||||
@ -1,37 +0,0 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import propTypesEmoji from 'src/prop-types/emoji'
|
||||
import { StyleSheet, Text, View } from 'react-native'
|
||||
import { Feather } from '@expo/vector-icons'
|
||||
|
||||
import Emojis from './Emojis'
|
||||
|
||||
export default function Reblog ({ name, emojis }) {
|
||||
return (
|
||||
<View style={styles.reblog}>
|
||||
<Feather name='repeat' size={12} color='black' style={styles.icon} />
|
||||
<View style={styles.name}>
|
||||
<Emojis content={name} emojis={emojis} dimension={12} />
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
reblog: {
|
||||
flexDirection: 'row',
|
||||
marginBottom: 8
|
||||
},
|
||||
icon: {
|
||||
marginLeft: 50 - 12,
|
||||
marginRight: 8
|
||||
},
|
||||
name: {
|
||||
flexDirection: 'row'
|
||||
}
|
||||
})
|
||||
|
||||
Reblog.propTypes = {
|
||||
name: PropTypes.string.isRequired,
|
||||
emojis: PropTypes.arrayOf(propTypesEmoji)
|
||||
}
|
||||
@ -1,10 +1,9 @@
|
||||
import React, { useMemo } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import propTypesNotification from 'src/prop-types/notification'
|
||||
import { Dimensions, Pressable, StyleSheet, View } from 'react-native'
|
||||
import { Dimensions, Pressable, StyleSheet, Text, View } from 'react-native'
|
||||
import { useNavigation } from '@react-navigation/native'
|
||||
|
||||
import Reblog from './Toot/Reblog'
|
||||
import Actioned from './Toot/Actioned'
|
||||
import Avatar from './Toot/Avatar'
|
||||
import Header from './Toot/Header'
|
||||
import Content from './Toot/Content'
|
||||
@ -15,74 +14,66 @@ import Actions from './Toot/Actions'
|
||||
|
||||
export default function TootNotification ({ toot }) {
|
||||
const navigation = useNavigation()
|
||||
|
||||
let actualContent
|
||||
if (toot.reblog) {
|
||||
actualContent = toot.reblog
|
||||
} else {
|
||||
actualContent = toot
|
||||
}
|
||||
const actualAccount = toot.status ? toot.status.account : toot.account
|
||||
|
||||
const tootView = useMemo(() => {
|
||||
return (
|
||||
<View style={styles.tootTimeline}>
|
||||
{toot.reblog && (
|
||||
<Reblog
|
||||
name={toot.account.display_name || toot.account.username}
|
||||
emojis={toot.account.emojis}
|
||||
/>
|
||||
)}
|
||||
<View style={styles.tootNotification}>
|
||||
<Actioned
|
||||
action={toot.type}
|
||||
name={toot.account.display_name || toot.account.username}
|
||||
emojis={toot.account.emojis}
|
||||
notification
|
||||
/>
|
||||
|
||||
<View style={styles.toot}>
|
||||
<Avatar
|
||||
uri={actualContent.account.avatar}
|
||||
id={actualContent.account.id}
|
||||
/>
|
||||
<Avatar uri={actualAccount.avatar} id={actualAccount.id} />
|
||||
<View style={styles.details}>
|
||||
<Header
|
||||
name={
|
||||
actualContent.account.display_name ||
|
||||
actualContent.account.username
|
||||
}
|
||||
emojis={actualContent.account.emojis}
|
||||
account={actualContent.account.acct}
|
||||
name={actualAccount.display_name || actualAccount.username}
|
||||
emojis={actualAccount.emojis}
|
||||
account={actualAccount.acct}
|
||||
created_at={toot.created_at}
|
||||
application={toot.application}
|
||||
/>
|
||||
{/* Can pass toot info to next page to speed up performance */}
|
||||
<Pressable
|
||||
onPress={() =>
|
||||
navigation.navigate('Toot', { toot: actualContent.id })
|
||||
}
|
||||
onPress={() => navigation.navigate('Toot', { toot: toot.id })}
|
||||
>
|
||||
{actualContent.content ? (
|
||||
<Content
|
||||
content={actualContent.content}
|
||||
emojis={actualContent.emojis}
|
||||
mentions={actualContent.mentions}
|
||||
spoiler_text={actualContent.spoiler_text}
|
||||
tags={actualContent.tags}
|
||||
style={{ flex: 1 }}
|
||||
/>
|
||||
{toot.status ? (
|
||||
<>
|
||||
{toot.status.content && (
|
||||
<Content
|
||||
content={toot.status.content}
|
||||
emojis={toot.status.emojis}
|
||||
mentions={toot.status.mentions}
|
||||
spoiler_text={toot.status.spoiler_text}
|
||||
tags={toot.status.tags}
|
||||
style={{ flex: 1 }}
|
||||
/>
|
||||
)}
|
||||
{toot.status.poll && <Poll poll={toot.status.poll} />}
|
||||
{toot.status.media_attachments && (
|
||||
<Media
|
||||
media_attachments={toot.status.media_attachments}
|
||||
sensitive={toot.status.sensitive}
|
||||
width={Dimensions.get('window').width - 24 - 50 - 8}
|
||||
/>
|
||||
)}
|
||||
{toot.status.card && <Card card={toot.status.card} />}
|
||||
</>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
{actualContent.poll && <Poll poll={actualContent.poll} />}
|
||||
{actualContent.media_attachments && (
|
||||
<Media
|
||||
media_attachments={actualContent.media_attachments}
|
||||
sensitive={actualContent.sensitive}
|
||||
width={Dimensions.get('window').width - 24 - 50 - 8}
|
||||
/>
|
||||
)}
|
||||
{actualContent.card && <Card card={actualContent.card} />}
|
||||
</Pressable>
|
||||
<Actions
|
||||
replies_count={actualContent.replies_count}
|
||||
reblogs_count={actualContent.reblogs_count}
|
||||
reblogged={actualContent.reblogged}
|
||||
favourites_count={actualContent.favourites_count}
|
||||
favourited={actualContent.favourited}
|
||||
/>
|
||||
{toot.status && (
|
||||
<Actions
|
||||
replies_count={toot.status.replies_count}
|
||||
reblogs_count={toot.status.reblogs_count}
|
||||
reblogged={toot.status.reblogged}
|
||||
favourites_count={toot.status.favourites_count}
|
||||
favourited={toot.status.favourited}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
@ -93,7 +84,7 @@ export default function TootNotification ({ toot }) {
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
tootTimeline: {
|
||||
tootNotification: {
|
||||
flex: 1,
|
||||
flexDirection: 'column',
|
||||
padding: 12
|
||||
|
||||
@ -3,7 +3,7 @@ import propTypesStatus from 'src/prop-types/status'
|
||||
import { Dimensions, Pressable, StyleSheet, View } from 'react-native'
|
||||
import { useNavigation } from '@react-navigation/native'
|
||||
|
||||
import Reblog from './Toot/Reblog'
|
||||
import Actioned from './Toot/Actioned'
|
||||
import Avatar from './Toot/Avatar'
|
||||
import Header from './Toot/Header'
|
||||
import Content from './Toot/Content'
|
||||
@ -26,7 +26,8 @@ export default function TootTimeline ({ toot }) {
|
||||
return (
|
||||
<View style={styles.tootTimeline}>
|
||||
{toot.reblog && (
|
||||
<Reblog
|
||||
<Actioned
|
||||
action='reblog'
|
||||
name={toot.account.display_name || toot.account.username}
|
||||
emojis={toot.account.emojis}
|
||||
/>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user