octo/tooot
1
0
Fork 0
mirror of https://github.com/tooot-app/app synced 2025-06-05 22:19:13 +02:00
Code Issues Projects Releases Wiki Activity

Edited posts can be viewed

Browse Source
This commit is contained in:
Zhiyuan Zheng
2022-04-29 23:57:18 +02:00
parent bceb70e805
commit 95ec76f411
25 changed files with 411 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/Timeline/Shared/Actioned.tsx
View File

@ -3,6 +3,7 @@ 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, { useCallback, useMemo } from 'react'
@ -20,7 +21,7 @@ const TimelineActioned = React.memo(
const { t } = useTranslation('componentTimeline')
const { colors } = useTheme()
const navigation =
useNavigation<StackNavigationProp<Nav.TabLocalStackParamList>>()
useNavigation<StackNavigationProp<TabLocalStackParamList>>()
const name = account.display_name || account.username
const iconColor = colors.primaryDefault

108
src/components/Timeline/Shared/ActionsUsers.tsx
View File

@ -1,108 +0,0 @@
import analytics from '@components/analytics'
import { useNavigation } from '@react-navigation/native'
import { StackNavigationProp } from '@react-navigation/stack'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React from 'react'
import { useTranslation } from 'react-i18next'
import { StyleSheet, Text, View } from 'react-native'
export interface Props {
status: Mastodon.Status
highlighted: boolean
}
const TimelineActionsUsers = React.memo(
({ status, highlighted }: Props) => {
if (!highlighted) {
return null
}
const { t } = useTranslation('componentTimeline')
const { colors } = useTheme()
const navigation =
useNavigation<StackNavigationProp<Nav.TabLocalStackParamList>>()
return (
<View style={styles.base}>
{status.reblogs_count > 0 ? (
<Text
accessibilityLabel={t(
'shared.actionsUsers.reblogged_by.accessibilityLabel',
{
count: status.reblogs_count
}
)}
accessibilityHint={t(
'shared.actionsUsers.reblogged_by.accessibilityHint'
)}
accessibilityRole='button'
style={[styles.text, { color: colors.blue }]}
onPress={() => {
analytics('timeline_shared_actionsusers_press_boosted', {
count: status.reblogs_count
})
navigation.push('Tab-Shared-Users', {
reference: 'statuses',
id: status.id,
type: 'reblogged_by',
count: status.reblogs_count
})
}}
>
{t('shared.actionsUsers.reblogged_by.text', {
count: status.reblogs_count
})}
</Text>
) : null}
{status.favourites_count > 0 ? (
<Text
accessibilityLabel={t(
'shared.actionsUsers.favourited_by.accessibilityLabel',
{
count: status.reblogs_count
}
)}
accessibilityHint={t(
'shared.actionsUsers.favourited_by.accessibilityHint'
)}
accessibilityRole='button'
style={[styles.text, { color: colors.blue }]}
onPress={() => {
analytics('timeline_shared_actionsusers_press_boosted', {
count: status.favourites_count
})
navigation.push('Tab-Shared-Users', {
reference: 'statuses',
id: status.id,
type: 'favourited_by',
count: status.favourites_count
})
}}
>
{t('shared.actionsUsers.favourited_by.text', {
count: status.favourites_count
})}
</Text>
) : null}
</View>
)
},
(prev, next) =>
prev.status.reblogs_count === next.status.reblogs_count &&
prev.status.favourites_count === next.status.favourites_count
)
const styles = StyleSheet.create({
base: {
flexDirection: 'row'
},
text: {
...StyleConstants.FontStyle.M,
padding: StyleConstants.Spacing.S,
paddingLeft: 0,
marginRight: StyleConstants.Spacing.S
}
})
export default TimelineActionsUsers

3
src/components/Timeline/Shared/Attachment.tsx
View File

@ -6,6 +6,7 @@ import AttachmentImage from '@components/Timeline/Shared/Attachment/Image'
import AttachmentUnsupported from '@components/Timeline/Shared/Attachment/Unsupported'
import AttachmentVideo from '@components/Timeline/Shared/Attachment/Video'
import { useNavigation } from '@react-navigation/native'
import { StackNavigationProp } from '@react-navigation/stack'
import { RootStackParamList } from '@utils/navigation/navigators'
import { StyleConstants } from '@utils/styles/constants'
import layoutAnimation from '@utils/styles/layoutAnimation'
@ -38,7 +39,7 @@ const TimelineAttachment = React.memo(
const imageUrls = useRef<
RootStackParamList['Screen-ImagesViewer']['imageUrls']
>([])
const navigation = useNavigation()
const navigation = useNavigation<StackNavigationProp<RootStackParamList>>()
useEffect(() => {
status.media_attachments.forEach((attachment, index) => {
switch (attachment.type) {

3
src/components/Timeline/Shared/Avatar.tsx
View File

@ -2,6 +2,7 @@ import analytics from '@components/analytics'
import GracefullyImage from '@components/GracefullyImage'
import { useNavigation } from '@react-navigation/native'
import { StackNavigationProp } from '@react-navigation/stack'
import { TabLocalStackParamList } from '@utils/navigation/navigators'
import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
import { StyleConstants } from '@utils/styles/constants'
import React, { useCallback } from 'react'
@ -17,7 +18,7 @@ const TimelineAvatar = React.memo(
({ queryKey, account, highlighted }: Props) => {
const { t } = useTranslation('componentTimeline')
const navigation =
useNavigation<StackNavigationProp<Nav.TabLocalStackParamList>>()
useNavigation<StackNavigationProp<TabLocalStackParamList>>()
// Need to fix go back root
const onPress = useCallback(() => {
analytics('timeline_shared_avatar_press', {

5
src/components/Timeline/Shared/Content.tsx
View File

@ -5,7 +5,10 @@ import { useTranslation } from 'react-i18next'
import { useSelector } from 'react-redux'
export interface Props {
status: Mastodon.Status
status: Pick<Mastodon.Status, 'content' | 'spoiler_text' | 'emojis'> & {
mentions?: Mastodon.Status['mentions']
tags?: Mastodon.Status['tags']
}
numberOfLines?: number
highlighted?: boolean
disableDetails?: boolean

141
src/components/Timeline/Shared/Feedback.tsx Normal file
View File

@ -0,0 +1,141 @@
import analytics from '@components/analytics'
import { useNavigation } from '@react-navigation/native'
import { StackNavigationProp } from '@react-navigation/stack'
import { TabLocalStackParamList } from '@utils/navigation/navigators'
import { useStatusHistory } from '@utils/queryHooks/statusesHistory'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React from 'react'
import { useTranslation } from 'react-i18next'
import { StyleSheet, Text, View } from 'react-native'
export interface Props {
status: Mastodon.Status
highlighted: boolean
}
const TimelineFeedback = React.memo(
({ status, highlighted }: Props) => {
if (!highlighted) {
return null
}
const { t } = useTranslation('componentTimeline')
const { colors } = useTheme()
const navigation =
useNavigation<StackNavigationProp<TabLocalStackParamList>>()
const { data } = useStatusHistory({
id: status.id,
options: { enabled: status.edited_at !== undefined }
})
return (
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<View>
{status.reblogs_count > 0 ? (
<Text
accessibilityLabel={t(
'shared.actionsUsers.reblogged_by.accessibilityLabel',
{
count: status.reblogs_count
}
)}
accessibilityHint={t(
'shared.actionsUsers.reblogged_by.accessibilityHint'
)}
accessibilityRole='button'
style={[styles.text, { color: colors.blue }]}
onPress={() => {
analytics('timeline_shared_feedback_press_reblog', {
count: status.reblogs_count
})
navigation.push('Tab-Shared-Users', {
reference: 'statuses',
id: status.id,
type: 'reblogged_by',
count: status.reblogs_count
})
}}
>
{t('shared.actionsUsers.reblogged_by.text', {
count: status.reblogs_count
})}
</Text>
) : null}
{status.favourites_count > 0 ? (
<Text
accessibilityLabel={t(
'shared.actionsUsers.favourited_by.accessibilityLabel',
{
count: status.reblogs_count
}
)}
accessibilityHint={t(
'shared.actionsUsers.favourited_by.accessibilityHint'
)}
accessibilityRole='button'
style={[styles.text, { color: colors.blue }]}
onPress={() => {
analytics('timeline_shared_feedback_press_favourite', {
count: status.favourites_count
})
navigation.push('Tab-Shared-Users', {
reference: 'statuses',
id: status.id,
type: 'favourited_by',
count: status.favourites_count
})
}}
>
{t('shared.actionsUsers.favourited_by.text', {
count: status.favourites_count
})}
</Text>
) : null}
</View>
<View>
{data && data.length > 1 ? (
<Text
accessibilityLabel={t(
'shared.actionsUsers.history.accessibilityLabel',
{
count: data.length - 1
}
)}
accessibilityHint={t(
'shared.actionsUsers.history.accessibilityHint'
)}
accessibilityRole='button'
style={[styles.text, { marginRight: 0, color: colors.blue }]}
onPress={() => {
analytics('timeline_shared_feedback_press_history', {
count: data.length - 1
})
navigation.push('Tab-Shared-History', { id: status.id })
}}
>
{t('shared.actionsUsers.history.text', {
count: data.length - 1
})}
</Text>
) : null}
</View>
</View>
)
},
(prev, next) =>
prev.status.reblogs_count === next.status.reblogs_count &&
prev.status.favourites_count === next.status.favourites_count
)
const styles = StyleSheet.create({
text: {
...StyleConstants.FontStyle.M,
padding: StyleConstants.Spacing.S,
paddingLeft: 0,
marginRight: StyleConstants.Spacing.S
}
})
export default TimelineFeedback

1
src/components/Timeline/Shared/HeaderConversation.tsx
View File

@ -103,6 +103,7 @@ const HeaderConversation = React.memo(
{conversation.last_status?.created_at ? (
<HeaderSharedCreated
created_at={conversation.last_status?.created_at}
edited_at={conversation.last_status?.edited_at}
/>
) : null}
<HeaderSharedMuted muted={conversation.last_status?.muted} />

10
src/components/Timeline/Shared/HeaderDefault.tsx
View File

@ -1,5 +1,7 @@
import Icon from '@components/Icon'
import { useNavigation } from '@react-navigation/native'
import { StackNavigationProp } from '@react-navigation/stack'
import { RootStackParamList } from '@utils/navigation/navigators'
import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
@ -21,7 +23,7 @@ export interface Props {
const TimelineHeaderDefault = React.memo(
({ queryKey, rootQueryKey, status }: Props) => {
const { t } = useTranslation('componentTimeline')
const navigation = useNavigation()
const navigation = useNavigation<StackNavigationProp<RootStackParamList>>()
const { colors } = useTheme()
return (
@ -29,7 +31,10 @@ const TimelineHeaderDefault = React.memo(
<View style={styles.accountAndMeta}>
<HeaderSharedAccount account={status.account} />
<View style={styles.meta}>
<HeaderSharedCreated created_at={status.created_at} />
<HeaderSharedCreated
created_at={status.created_at}
edited_at={status.edited_at}
/>
<HeaderSharedVisibility visibility={status.visibility} />
<HeaderSharedMuted muted={status.muted} />
<HeaderSharedApplication application={status.application} />
@ -45,7 +50,6 @@ const TimelineHeaderDefault = React.memo(
queryKey,
rootQueryKey,
status,
url: status.url || status.uri,
type: 'status'
})
}

12
src/components/Timeline/Shared/HeaderNotification.tsx
View File

@ -4,6 +4,8 @@ import {
RelationshipOutgoing
} from '@components/Relationship'
import { useNavigation } from '@react-navigation/native'
import { StackNavigationProp } from '@react-navigation/stack'
import { RootStackParamList } from '@utils/navigation/navigators'
import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
@ -22,7 +24,7 @@ export interface Props {
const TimelineHeaderNotification = React.memo(
({ queryKey, notification }: Props) => {
const navigation = useNavigation()
const navigation = useNavigation<StackNavigationProp<RootStackParamList>>()
const { colors } = useTheme()
const actions = useMemo(() => {
@ -44,8 +46,7 @@ const TimelineHeaderNotification = React.memo(
onPress={() =>
navigation.navigate('Screen-Actions', {
queryKey,
status: notification.status,
url: notification.status?.url || notification.status?.uri,
status: notification.status!,
type: 'status'
})
}
@ -83,7 +84,10 @@ const TimelineHeaderNotification = React.memo(
notification.type === 'follow_request') && { withoutName: true })}
/>
<View style={styles.meta}>
<HeaderSharedCreated created_at={notification.created_at} />
<HeaderSharedCreated
created_at={notification.created_at}
edited_at={notification.status?.edited_at}
/>
{notification.status?.visibility ? (
<HeaderSharedVisibility
visibility={notification.status.visibility}

37
src/components/Timeline/Shared/HeaderShared/Created.tsx
View File

@ -1,30 +1,43 @@
import Icon from '@components/Icon'
import RelativeTime from '@components/RelativeTime'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React from 'react'
import { StyleSheet, Text } from 'react-native'
import { useTranslation } from 'react-i18next'
import { Text } from 'react-native'
export interface Props {
created_at: Mastodon.Status['created_at'] | number
created_at: Mastodon.Status['created_at']
edited_at?: Mastodon.Status['edited_at']
}
const HeaderSharedCreated = React.memo(
({ created_at }: Props) => {
({ created_at, edited_at }: Props) => {
const { t } = useTranslation('componentTimeline')
const { colors } = useTheme()
return (
<Text style={[styles.created_at, { color: colors.secondary }]}>
<RelativeTime date={created_at} />
</Text>
<>
<Text
style={{ ...StyleConstants.FontStyle.S, color: colors.secondary }}
>
<RelativeTime date={edited_at || created_at} />
</Text>
{edited_at ? (
<Icon
accessibilityLabel={t(
'shared.header.shared.edited.accessibilityLabel'
)}
name='Edit'
size={StyleConstants.Font.Size.S}
color={colors.secondary}
style={{ marginLeft: StyleConstants.Spacing.S }}
/>
) : null}
</>
)
},
() => true
)
const styles = StyleSheet.create({
created_at: {
...StyleConstants.FontStyle.S
}
})
export default HeaderSharedCreated