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

Merge branch 'main' into candidate

Browse Source
This commit is contained in:
xmflsct
2023-01-02 02:08:33 +01:00
parent 5fc3899792 6dafbc96af
commit 9b7ea8182f
93 changed files with 589 additions and 1064 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/@types/i18next.d.ts vendored
View File

@ -4,7 +4,6 @@ import common from '../i18n/en/common.json'
import screens from '../i18n/en/screens.json'
import screenAccountSelection from '../i18n/en/screens/accountSelection.json'
import screenActions from '../i18n/en/screens/actions.json'
import screenAnnouncements from '../i18n/en/screens/announcements.json'
import screenCompose from '../i18n/en/screens/compose.json'
import screenImageViewer from '../i18n/en/screens/imageViewer.json'
@ -26,7 +25,6 @@ declare module 'i18next' {
screens: typeof screens
screenAccountSelection: typeof screenAccountSelection
screenActions: typeof screenActions
screenAnnouncements: typeof screenAnnouncements
screenCompose: typeof screenCompose
screenImageViewer: typeof screenImageViewer

4
src/@types/mastodon.d.ts vendored
View File

@ -552,6 +552,10 @@ declare namespace Mastodon {
language?: string
text?: string
filtered?: FilterResult[]
// Internal
_level?: number
_remote?: boolean
}
type StatusHistory = {

5
src/components/Parse/HTML.tsx
View File

@ -168,7 +168,10 @@ const ParseHTML: React.FC<Props> = ({
matchedMention &&
!disableDetails &&
!sameAccount &&
navigation.push('Tab-Shared-Account', { account: matchedMention })
navigation.push('Tab-Shared-Account', {
account: matchedMention,
isRemote: status?._remote
})
}
children={node.children.map(unwrapNode).join('')}
/>

5
src/components/Timeline/Default.tsx
View File

@ -87,9 +87,9 @@ const TimelineDefault: React.FC<Props> = ({
const main = () => (
<>
{item.reblog ? (
<TimelineActioned action='reblog' />
<TimelineActioned action='reblog' rootStatus={item} />
) : item._pinned ? (
<TimelineActioned action='pinned' />
<TimelineActioned action='pinned' rootStatus={item} />
) : null}
<View
@ -167,7 +167,6 @@ const TimelineDefault: React.FC<Props> = ({
queryKey,
rootQueryKey,
status,
reblogStatus: item.reblog ? item : undefined,
ownAccount,
spoilerHidden,
rawContent,

1
src/components/Timeline/Notifications.tsx
View File

@ -61,6 +61,7 @@ const TimelineNotifications: React.FC<Props> = ({ notification, queryKey }) => {
action={notification.type}
isNotification
account={notification.account}
rootStatus={notification.status}
/>
) : null}

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

@ -14,11 +14,12 @@ export interface Props {
action: Mastodon.Notification['type'] | 'reblog' | 'pinned'
isNotification?: boolean
account?: Mastodon.Account // For notification
rootStatus?: Mastodon.Status
}
const TimelineActioned: React.FC<Props> = ({ action, isNotification, ...rest }) => {
const { status, reblogStatus } = useContext(StatusContext)
const account = rest.account || (reblogStatus ? reblogStatus.account : status?.account)
const { status } = useContext(StatusContext)
const account = rest.account || (rest.rootStatus || status)?.account
if (!account) return null
const { t } = useTranslation('componentTimeline')
@ -36,7 +37,8 @@ const TimelineActioned: React.FC<Props> = ({ action, isNotification, ...rest })
/>
)
const onPress = () => navigation.push('Tab-Shared-Account', { account })
const onPress = () =>
navigation.push('Tab-Shared-Account', { account, isRemote: status?._remote })
const children = () => {
switch (action) {

52
src/components/Timeline/Shared/Actions.tsx
View File

@ -22,7 +22,7 @@ import { Pressable, StyleSheet, View } from 'react-native'
import StatusContext from './Context'
const TimelineActions: React.FC = () => {
const { queryKey, rootQueryKey, status, reblogStatus, ownAccount, highlighted, disableDetails } =
const { queryKey, rootQueryKey, status, ownAccount, highlighted, disableDetails } =
useContext(StatusContext)
if (!queryKey || !status || disableDetails) return null
@ -38,16 +38,16 @@ const TimelineActions: React.FC = () => {
const theParams = params as MutationVarsTimelineUpdateStatusProperty
if (
// Un-bookmark from bookmarks page
(queryKey[1].page === 'Bookmarks' && theParams.payload.property === 'bookmarked') ||
(queryKey[1].page === 'Bookmarks' && theParams.payload.type === 'bookmarked') ||
// Un-favourite from favourites page
(queryKey[1].page === 'Favourites' && theParams.payload.property === 'favourited')
(queryKey[1].page === 'Favourites' && theParams.payload.type === 'favourited')
) {
queryClient.invalidateQueries(queryKey)
} else if (theParams.payload.property === 'favourited') {
} else if (theParams.payload.type === 'favourited') {
// When favourited, update favourited page
const tempQueryKey: QueryKeyTimeline = ['Timeline', { page: 'Favourites' }]
queryClient.invalidateQueries(tempQueryKey)
} else if (theParams.payload.property === 'bookmarked') {
} else if (theParams.payload.type === 'bookmarked') {
// When bookmarked, update bookmark page
const tempQueryKey: QueryKeyTimeline = ['Timeline', { page: 'Bookmarks' }]
queryClient.invalidateQueries(tempQueryKey)
@ -60,7 +60,7 @@ const TimelineActions: React.FC = () => {
type: 'error',
message: t('common:message.error.message', {
function: t(
`componentTimeline:shared.actions.${correctParam.payload.property}.function` as any
`componentTimeline:shared.actions.${correctParam.payload.type}.function` as any
)
}),
...(err.status &&
@ -111,13 +111,9 @@ const TimelineActions: React.FC = () => {
type: 'updateStatusProperty',
queryKey,
rootQueryKey,
id: status.id,
isReblog: !!reblogStatus,
status,
payload: {
property: 'reblogged',
currentValue: status.reblogged,
propertyCount: 'reblogs_count',
countValue: status.reblogs_count,
type: 'reblogged',
visibility: 'public'
}
})
@ -127,13 +123,9 @@ const TimelineActions: React.FC = () => {
type: 'updateStatusProperty',
queryKey,
rootQueryKey,
id: status.id,
isReblog: !!reblogStatus,
status,
payload: {
property: 'reblogged',
currentValue: status.reblogged,
propertyCount: 'reblogs_count',
countValue: status.reblogs_count,
type: 'reblogged',
visibility: 'unlisted'
}
})
@ -146,13 +138,9 @@ const TimelineActions: React.FC = () => {
type: 'updateStatusProperty',
queryKey,
rootQueryKey,
id: status.id,
isReblog: !!reblogStatus,
status,
payload: {
property: 'reblogged',
currentValue: status.reblogged,
propertyCount: 'reblogs_count',
countValue: status.reblogs_count,
type: 'reblogged',
visibility: 'public'
}
})
@ -163,13 +151,9 @@ const TimelineActions: React.FC = () => {
type: 'updateStatusProperty',
queryKey,
rootQueryKey,
id: status.id,
isReblog: !!reblogStatus,
status,
payload: {
property: 'favourited',
currentValue: status.favourited,
propertyCount: 'favourites_count',
countValue: status.favourites_count
type: 'favourited'
}
})
}
@ -178,13 +162,9 @@ const TimelineActions: React.FC = () => {
type: 'updateStatusProperty',
queryKey,
rootQueryKey,
id: status.id,
isReblog: !!reblogStatus,
status,
payload: {
property: 'bookmarked',
currentValue: status.bookmarked,
propertyCount: undefined,
countValue: undefined
type: 'bookmarked'
}
})
}

9
src/components/Timeline/Shared/Attachment/AltText.tsx
View File

@ -1,8 +1,7 @@
import Button from '@components/Button'
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 { useTranslation } from 'react-i18next'
import { Alert } from 'react-native'
export interface Props {
sensitiveShown: boolean
@ -14,7 +13,7 @@ const AttachmentAltText: React.FC<Props> = ({ sensitiveShown, text }) => {
return null
}
const navigation = useNavigation<StackNavigationProp<RootStackParamList>>()
const { t } = useTranslation('componentTimeline')
return !sensitiveShown ? (
<Button
@ -28,7 +27,7 @@ const AttachmentAltText: React.FC<Props> = ({ sensitiveShown, text }) => {
type='text'
content='ALT'
fontBold
onPress={() => navigation.navigate('Screen-Actions', { type: 'alt_text', text })}
onPress={() => Alert.alert(t('shared.attachment.altText'), text)}
/>
) : null
}

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

@ -31,7 +31,8 @@ const TimelineAvatar: React.FC<Props> = ({ account }) => {
})
})}
onPress={() =>
!disableOnPress && navigation.push('Tab-Shared-Account', { account: actualAccount })
!disableOnPress &&
navigation.push('Tab-Shared-Account', { account: actualAccount, isRemote: status?._remote })
}
uri={{ original: actualAccount.avatar, static: actualAccount.avatar_static }}
dimension={

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

@ -14,7 +14,7 @@ export interface Props {
}
const TimelineContent: React.FC<Props> = ({ notificationOwnToot = false, setSpoilerExpanded }) => {
const { status, highlighted, inThread, disableDetails } = useContext(StatusContext)
const { status, highlighted, inThread } = useContext(StatusContext)
if (!status || typeof status.content !== 'string' || !status.content.length) return null
const { colors } = useTheme()

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

@ -9,7 +9,6 @@ type StatusContextType = {
status?: Mastodon.Status
reblogStatus?: Mastodon.Status // When it is a reblog, pass the root status
ownAccount?: boolean
spoilerHidden?: boolean
rawContent?: React.MutableRefObject<string[]> // When highlighted, for translate, edit history

7
src/components/Timeline/Shared/HeaderShared/Replies.tsx
View File

@ -40,7 +40,12 @@ const HeaderSharedReplies: React.FC = () => {
<CustomText
style={{ color: colors.blue, paddingLeft: StyleConstants.Spacing.S }}
children={`@${mention.username}`}
onPress={() => navigation.push('Tab-Shared-Account', { account: mention })}
onPress={() =>
navigation.push('Tab-Shared-Account', {
account: mention,
isRemote: status?._remote
})
}
/>
</Fragment>
))}

43
src/components/Timeline/Shared/Poll.tsx
View File

@ -20,15 +20,8 @@ import { Pressable, View } from 'react-native'
import StatusContext from './Context'
const TimelinePoll: React.FC = () => {
const {
queryKey,
rootQueryKey,
status,
reblogStatus,
ownAccount,
spoilerHidden,
disableDetails
} = useContext(StatusContext)
const { queryKey, rootQueryKey, status, ownAccount, spoilerHidden, disableDetails } =
useContext(StatusContext)
if (!queryKey || !status || !status.poll) return null
const poll = status.poll
@ -45,10 +38,9 @@ const TimelinePoll: React.FC = () => {
rootQueryKey && queryClient.cancelQueries(rootQueryKey)
haptics('Success')
switch (theParams.payload.property) {
switch (theParams.payload.type) {
case 'poll':
theParams.payload.data = body as unknown as Mastodon.Poll
updateStatusProperty(theParams)
updateStatusProperty({ ...theParams, poll: body as unknown as Mastodon.Poll })
break
}
},
@ -84,12 +76,10 @@ const TimelinePoll: React.FC = () => {
type: 'updateStatusProperty',
queryKey,
rootQueryKey,
id: status.id,
isReblog: !!reblogStatus,
status,
payload: {
property: 'poll',
id: poll.id,
type: 'vote',
type: 'poll',
action: 'vote',
options: allOptions
}
})
@ -110,12 +100,10 @@ const TimelinePoll: React.FC = () => {
type: 'updateStatusProperty',
queryKey,
rootQueryKey,
id: status.id,
isReblog: !!reblogStatus,
status,
payload: {
property: 'poll',
id: poll.id,
type: 'refresh'
type: 'poll',
action: 'refresh'
}
})
}
@ -230,13 +218,9 @@ const TimelinePoll: React.FC = () => {
const pollVoteCounts = () => {
if (poll.voters_count !== null) {
return (
t('componentTimeline:shared.poll.meta.count.voters', { count: poll.voters_count }) + ' • '
)
return t('componentTimeline:shared.poll.meta.count.voters', { count: poll.voters_count })
} else if (poll.votes_count !== null) {
return (
t('componentTimeline:shared.poll.meta.count.votes', { count: poll.votes_count }) + ' • '
)
return t('componentTimeline:shared.poll.meta.count.votes', { count: poll.votes_count })
}
}
@ -246,11 +230,14 @@ const TimelinePoll: React.FC = () => {
} else {
if (poll.expires_at) {
return (
<>
{' • '}
<Trans
ns='componentTimeline'
i18nKey='shared.poll.meta.expiration.until'
components={[<RelativeTime time={poll.expires_at} />]}
/>
</>
)
}
}

48
src/components/contextMenu/account.ts
View File

@ -4,6 +4,7 @@ import { useNavigation } from '@react-navigation/native'
import { NativeStackNavigationProp } from '@react-navigation/native-stack'
import { useQueryClient } from '@tanstack/react-query'
import { TabSharedStackParamList } from '@utils/navigation/navigators'
import { useAccountQuery } from '@utils/queryHooks/account'
import {
QueryKeyRelationship,
useRelationshipMutation,
@ -34,28 +35,34 @@ const menuAccount = ({
queryKey?: QueryKeyTimeline
rootQueryKey?: QueryKeyTimeline
}): ContextMenu[][] => {
if (!account) return []
const navigation =
useNavigation<NativeStackNavigationProp<TabSharedStackParamList, any, undefined>>()
const { t } = useTranslation(['common', 'componentContextMenu', 'componentRelationship'])
const menus: ContextMenu[][] = [[]]
const ownAccount = useAccountStorage.string('auth.account.id')['0'] === account.id
const [enabled, setEnabled] = useState(openChange)
useEffect(() => {
if (!ownAccount && enabled === false && openChange === true) {
setEnabled(true)
}
}, [openChange, enabled])
const { data, isFetched } = useRelationshipQuery({ id: account.id, options: { enabled } })
const { data: fetchedAccount } = useAccountQuery({
remoteUrl: account?.url,
options: { enabled: !!status?._remote && enabled }
})
const actualAccount = status?._remote ? fetchedAccount : account
const { data, isFetched } = useRelationshipQuery({
id: actualAccount?.id,
options: { enabled: !!actualAccount?.id && enabled }
})
const ownAccount = useAccountStorage.string('auth.account.id')['0'] === actualAccount?.id
const queryClient = useQueryClient()
const timelineMutation = useTimelineMutation({
onSuccess: (_, params) => {
queryClient.refetchQueries(['Relationship', { id: account.id }])
queryClient.refetchQueries(['Relationship', { id: actualAccount?.id }])
const theParams = params as MutationVarsTimelineUpdateAccountProperty
displayMessage({
type: 'success',
@ -101,7 +108,7 @@ const menuAccount = ({
rootQueryKey && queryClient.invalidateQueries(rootQueryKey)
}
})
const queryKeyRelationship: QueryKeyRelationship = ['Relationship', { id: account.id }]
const queryKeyRelationship: QueryKeyRelationship = ['Relationship', { id: actualAccount?.id }]
const relationshipMutation = useRelationshipMutation({
onSuccess: (res, { payload: { action } }) => {
haptics('Success')
@ -128,14 +135,17 @@ const menuAccount = ({
}
})
if (!account) return []
if (!ownAccount && Platform.OS !== 'android' && type !== 'account') {
menus[0].push({
key: 'account-following',
item: {
onSelect: () =>
data &&
actualAccount &&
relationshipMutation.mutate({
id: account.id,
id: actualAccount.id,
type: 'outgoing',
payload: { action: 'follow', state: !data?.requested ? data.following : true }
}),
@ -173,8 +183,9 @@ const menuAccount = ({
key: 'account-show-boosts',
item: {
onSelect: () =>
actualAccount &&
relationshipMutation.mutate({
id: account.id,
id: actualAccount.id,
type: 'outgoing',
payload: { action: 'follow', state: false, reblogs: !data?.showing_reblogs }
}),
@ -192,10 +203,11 @@ const menuAccount = ({
key: 'account-mute',
item: {
onSelect: () =>
actualAccount &&
timelineMutation.mutate({
type: 'updateAccountProperty',
queryKey,
id: account.id,
id: actualAccount.id,
payload: { property: 'mute', currentValue: data?.muting }
}),
disabled: Platform.OS !== 'android' ? !data || !isFetched : false,
@ -215,17 +227,20 @@ const menuAccount = ({
item: {
onSelect: () =>
Alert.alert(
t('componentContextMenu:account.block.alert.title', { username: account.username }),
t('componentContextMenu:account.block.alert.title', {
username: actualAccount?.username
}),
undefined,
[
{
text: t('common:buttons.confirm'),
style: 'destructive',
onPress: () =>
actualAccount &&
timelineMutation.mutate({
type: 'updateAccountProperty',
queryKey,
id: account.id,
id: actualAccount.id,
payload: { property: 'block', currentValue: data?.blocking }
})
},
@ -247,8 +262,13 @@ const menuAccount = ({
{
key: 'account-reports',
item: {
onSelect: () => navigation.navigate('Tab-Shared-Report', { account, status }),
disabled: false,
onSelect: () =>
actualAccount &&
navigation.navigate('Tab-Shared-Report', {
account: actualAccount,
status
}),
disabled: Platform.OS !== 'android' ? !data || !isFetched : false,
destructive: true,
hidden: false
},

20
src/components/contextMenu/status.ts
View File

@ -35,7 +35,7 @@ const menuStatus = ({
onMutate: true,
onError: (err: any, params, oldData) => {
const theFunction = (params as MutationVarsTimelineUpdateStatusProperty).payload
? (params as MutationVarsTimelineUpdateStatusProperty).payload.property
? (params as MutationVarsTimelineUpdateStatusProperty).payload.type
: 'delete'
displayMessage({
theme,
@ -195,15 +195,14 @@ const menuStatus = ({
type: 'updateStatusProperty',
queryKey,
rootQueryKey,
id: status.id,
status,
payload: {
property: 'muted',
currentValue: status.muted
type: 'muted'
}
}),
disabled: false,
destructive: false,
hidden: !ownAccount && !status.mentions?.filter(mention => mention.id === accountId).length
hidden: !ownAccount
},
title: t('componentContextMenu:status.mute.action', {
defaultValue: 'false',
@ -220,17 +219,14 @@ const menuStatus = ({
type: 'updateStatusProperty',
queryKey,
rootQueryKey,
id: status.id,
status,
payload: {
property: 'pinned',
currentValue: status.pinned,
propertyCount: undefined,
countValue: undefined
type: 'pinned'
}
}),
disabled: false,
disabled: status.visibility !== 'public' && status.visibility !== 'unlisted',
destructive: false,
hidden: !ownAccount || (status.visibility !== 'public' && status.visibility !== 'unlisted')
hidden: !ownAccount
},
title: t('componentContextMenu:status.pin.action', {
defaultValue: 'false',

1
src/i18n/ca/index.ts
View File

@ -2,7 +2,6 @@ export default {
common: require('./common'),
screens: require('./screens'),
screenActions: require('./screens/actions'),
screenAnnouncements: require('./screens/announcements'),
screenCompose: require('./screens/compose'),
screenImageViewer: require('./screens/imageViewer'),

7
src/i18n/ca/screens/actions.json
View File

@ -1,7 +0,0 @@
{
"content": {
"altText": {
"heading": "Text alternatiu"
}
}
}

7
src/i18n/cs/screens/actions.json
View File

@ -1,7 +0,0 @@
{
"content": {
"altText": {
"heading": ""
}
}
}

1
src/i18n/de/index.ts
View File

@ -2,7 +2,6 @@ export default {
common: require('./common'),
screens: require('./screens'),
screenActions: require('./screens/actions'),
screenAnnouncements: require('./screens/announcements'),
screenCompose: require('./screens/compose'),
screenImageViewer: require('./screens/imageViewer'),

7
src/i18n/de/screens/actions.json
View File

@ -1,7 +0,0 @@
{
"content": {
"altText": {
"heading": "Alternativtext"
}
}
}

3
src/i18n/en/components/timeline.json
View File

@ -82,7 +82,8 @@
"unsupported": {
"text": "Loading error",
"button": "Try remote link"
}
},
"altText": "Alternative Text"
},
"avatar": {
"accessibilityLabel": "Avatar of {{name}}",

1
src/i18n/en/index.ts
View File

@ -3,7 +3,6 @@ export default {
screens: require('./screens'),
screenAccountSelection: require('./screens/accountSelection.json'),
screenActions: require('./screens/actions'),
screenAnnouncements: require('./screens/announcements'),
screenCompose: require('./screens/compose'),
screenImageViewer: require('./screens/imageViewer'),

7
src/i18n/en/screens/actions.json
View File

@ -1,7 +0,0 @@
{
"content": {
"altText": {
"heading": "Alternative Text"
}
}
}

6
src/i18n/en/screens/tabs.json
View File

@ -376,7 +376,11 @@
"notFound": "Cannot find <bold>{{searchTerm}}</bold> related {{type}}"
},
"toot": {
"name": "Discussions"
"name": "Discussions",
"remoteFetch": {
"title": "Contains remote content",
"message": "Federated content are not always available on local instance. These content are fetched from remote instance and marked. You can interact with these content as usual."
}
},
"users": {
"accounts": {

1
src/i18n/es/index.ts
View File

@ -2,7 +2,6 @@ export default {
common: require('./common'),
screens: require('./screens'),
screenActions: require('./screens/actions'),
screenAnnouncements: require('./screens/announcements'),
screenCompose: require('./screens/compose'),
screenImageViewer: require('./screens/imageViewer'),

7
src/i18n/es/screens/actions.json
View File

@ -1,7 +0,0 @@
{
"content": {
"altText": {
"heading": "Texto alternativo"
}
}
}

1
src/i18n/fr/index.ts
View File

@ -2,7 +2,6 @@ export default {
common: require('./common'),
screens: require('./screens'),
screenActions: require('./screens/actions'),
screenAnnouncements: require('./screens/announcements'),
screenCompose: require('./screens/compose'),
screenImageViewer: require('./screens/imageViewer'),

7
src/i18n/fr/screens/actions.json
View File

@ -1,7 +0,0 @@
{
"content": {
"altText": {
"heading": "Texte de remplacement"
}
}
}

1
src/i18n/it/index.ts
View File

@ -2,7 +2,6 @@ export default {
common: require('./common'),
screens: require('./screens'),
screenActions: require('./screens/actions'),
screenAnnouncements: require('./screens/announcements'),
screenCompose: require('./screens/compose'),
screenImageViewer: require('./screens/imageViewer'),

7
src/i18n/it/screens/actions.json
View File

@ -1,7 +0,0 @@
{
"content": {
"altText": {
"heading": "Testo descrittivo"
}
}
}

1
src/i18n/ja/index.ts
View File

@ -2,7 +2,6 @@ export default {
common: require('./common'),
screens: require('./screens'),
screenActions: require('./screens/actions'),
screenAnnouncements: require('./screens/announcements'),
screenCompose: require('./screens/compose'),
screenImageViewer: require('./screens/imageViewer'),

7
src/i18n/ja/screens/actions.json
View File

@ -1,7 +0,0 @@
{
"content": {
"altText": {
"heading": "代替テキスト"
}
}
}

1
src/i18n/ko/index.ts
View File

@ -2,7 +2,6 @@ export default {
common: require('./common'),
screens: require('./screens'),
screenActions: require('./screens/actions'),
screenAnnouncements: require('./screens/announcements'),
screenCompose: require('./screens/compose'),
screenImageViewer: require('./screens/imageViewer'),

7
src/i18n/ko/screens/actions.json
View File

@ -1,7 +0,0 @@
{
"content": {
"altText": {
"heading": "대체 텍스트"
}
}
}

1
src/i18n/nl/index.ts
View File

@ -2,7 +2,6 @@ export default {
common: require('./common'),
screens: require('./screens'),
screenActions: require('./screens/actions'),
screenAnnouncements: require('./screens/announcements'),
screenCompose: require('./screens/compose'),
screenImageViewer: require('./screens/imageViewer'),

7
src/i18n/nl/screens/actions.json
View File

@ -1,7 +0,0 @@
{
"content": {
"altText": {
"heading": "Alternatieve tekst"
}
}
}

7
src/i18n/pl/screens/actions.json
View File

@ -1,7 +0,0 @@
{
"content": {
"altText": {
"heading": ""
}
}
}

1
src/i18n/pt_BR/index.ts
View File

@ -2,7 +2,6 @@ export default {
common: require('./common'),
screens: require('./screens'),
screenActions: require('./screens/actions'),
screenAnnouncements: require('./screens/announcements'),
screenCompose: require('./screens/compose'),
screenImageViewer: require('./screens/imageViewer'),

7
src/i18n/pt_BR/screens/actions.json
View File

@ -1,7 +0,0 @@
{
"content": {
"altText": {
"heading": "Texto Alternativo"
}
}
}

7
src/i18n/ru/screens/actions.json
View File

@ -1,7 +0,0 @@
{
"content": {
"altText": {
"heading": "Альтернативный текст"
}
}
}

1
src/i18n/sv/index.ts
View File

@ -2,7 +2,6 @@ export default {
common: require('./common'),
screens: require('./screens'),
screenActions: require('./screens/actions'),
screenAnnouncements: require('./screens/announcements'),
screenCompose: require('./screens/compose'),
screenImageViewer: require('./screens/imageViewer'),

7
src/i18n/sv/screens/actions.json
View File

@ -1,7 +0,0 @@
{
"content": {
"altText": {
"heading": "Alternativtext"
}
}
}

1
src/i18n/uk/index.ts
View File

@ -2,7 +2,6 @@ export default {
common: require('./common'),
screens: require('./screens'),
screenActions: require('./screens/actions'),
screenAnnouncements: require('./screens/announcements'),
screenCompose: require('./screens/compose'),
screenImageViewer: require('./screens/imageViewer'),

7
src/i18n/uk/screens/actions.json
View File

@ -1,7 +0,0 @@
{
"content": {
"altText": {
"heading": "Альтернативний текст"
}
}
}

1
src/i18n/vi/index.ts
View File

@ -2,7 +2,6 @@ export default {
common: require('./common'),
screens: require('./screens'),
screenActions: require('./screens/actions'),
screenAnnouncements: require('./screens/announcements'),
screenCompose: require('./screens/compose'),
screenImageViewer: require('./screens/imageViewer'),

7
src/i18n/vi/screens/actions.json
View File

@ -1,7 +0,0 @@
{
"content": {
"altText": {
"heading": "Văn bản thay thế"
}
}
}

1
src/i18n/zh-Hans/index.ts
View File

@ -2,7 +2,6 @@ export default {
common: require('./common'),
screens: require('./screens'),
screenActions: require('./screens/actions'),
screenAnnouncements: require('./screens/announcements'),
screenCompose: require('./screens/compose'),
screenImageViewer: require('./screens/imageViewer'),

7
src/i18n/zh-Hans/screens/actions.json
View File

@ -1,7 +0,0 @@
{
"content": {
"altText": {
"heading": "替代文本"
}
}
}

1
src/i18n/zh-Hant/index.ts
View File

@ -2,7 +2,6 @@ export default {
common: require('./common'),
screens: require('./screens'),
screenActions: require('./screens/actions'),
screenAnnouncements: require('./screens/announcements'),
screenCompose: require('./screens/compose'),
screenImageViewer: require('./screens/imageViewer'),

7
src/i18n/zh-Hant/screens/actions.json
View File

@ -1,7 +0,0 @@
{
"content": {
"altText": {
"heading": "替代文字"
}
}
}

112
src/screens/Actions.tsx
View File

@ -1,112 +0,0 @@
import { RootStackScreenProps } from '@utils/navigation/navigators'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React, { useEffect } from 'react'
import { Dimensions, StyleSheet, View } from 'react-native'
import { PanGestureHandler, State, TapGestureHandler } from 'react-native-gesture-handler'
import Animated, {
Extrapolate,
interpolate,
runOnJS,
useAnimatedGestureHandler,
useAnimatedStyle,
useSharedValue,
withTiming
} from 'react-native-reanimated'
import { useSafeAreaInsets } from 'react-native-safe-area-context'
import ActionsAltText from './Actions/AltText'
const ScreenActions = ({
route: { params },
navigation
}: RootStackScreenProps<'Screen-Actions'>) => {
const { colors } = useTheme()
const insets = useSafeAreaInsets()
const DEFAULT_VALUE = 350
const screenHeight = Dimensions.get('window').height
const panY = useSharedValue(DEFAULT_VALUE)
useEffect(() => {
panY.value = withTiming(0)
}, [])
const styleTop = useAnimatedStyle(() => {
return {
bottom: interpolate(panY.value, [0, screenHeight], [0, -screenHeight], Extrapolate.CLAMP)
}
})
const dismiss = () => navigation.goBack()
const onGestureEvent = useAnimatedGestureHandler({
onActive: ({ translationY }) => {
panY.value = translationY
},
onEnd: ({ velocityY }) => {
if (velocityY > 500) {
runOnJS(dismiss)()
} else {
panY.value = withTiming(0)
}
}
})
const actions = () => {
switch (params.type) {
case 'alt_text':
return <ActionsAltText text={params.text} />
}
}
return (
<Animated.View style={{ flex: 1 }}>
<TapGestureHandler
onHandlerStateChange={({ nativeEvent }) => {
if (nativeEvent.state === State.ACTIVE) {
dismiss()
}
}}
>
<Animated.View
style={[styles.overlay, { backgroundColor: colors.backgroundOverlayInvert }]}
>
<PanGestureHandler onGestureEvent={onGestureEvent}>
<Animated.View
style={[
styles.container,
styleTop,
{
backgroundColor: colors.backgroundDefault,
paddingBottom: insets.bottom || StyleConstants.Spacing.L
}
]}
>
<View style={[styles.handle, { backgroundColor: colors.primaryOverlay }]} />
{actions()}
</Animated.View>
</PanGestureHandler>
</Animated.View>
</TapGestureHandler>
</Animated.View>
)
}
const styles = StyleSheet.create({
overlay: {
flex: 1,
justifyContent: 'flex-end'
},
container: {
paddingTop: StyleConstants.Spacing.M
},
handle: {
alignSelf: 'center',
width: StyleConstants.Spacing.S * 8,
height: StyleConstants.Spacing.S / 2,
borderRadius: 100,
top: -StyleConstants.Spacing.M * 2
},
button: {
marginHorizontal: StyleConstants.Spacing.Global.PagePadding * 2
}
})
export default ScreenActions

42
src/screens/Actions/AltText.tsx
View File

@ -1,42 +0,0 @@
import Button from '@components/Button'
import MenuContainer from '@components/Menu/Container'
import MenuHeader from '@components/Menu/Header'
import CustomText from '@components/Text'
import { useNavigation } from '@react-navigation/native'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React from 'react'
import { useTranslation } from 'react-i18next'
import { Dimensions } from 'react-native'
import { ScrollView } from 'react-native-gesture-handler'
export interface Props {
text: string
}
const ActionsAltText: React.FC<Props> = ({ text }) => {
const navigation = useNavigation()
const { t } = useTranslation(['common', 'screenActions'])
const { colors } = useTheme()
return (
<>
<MenuContainer>
<MenuHeader heading={t(`screenActions:content.altText.heading`)} />
<ScrollView style={{ maxHeight: Dimensions.get('window').height / 2 }}>
<CustomText style={{ color: colors.primaryDefault }}>{text}</CustomText>
</ScrollView>
</MenuContainer>
<Button
type='text'
content={t('common:buttons.OK')}
onPress={() => navigation.goBack()}
style={{
marginHorizontal: StyleConstants.Spacing.Global.PagePadding * 2
}}
/>
</>
)
}
export default ActionsAltText

3
src/screens/Compose/Root/Actions.tsx
View File

@ -141,6 +141,9 @@ const ComposeActions: React.FC = () => {
<View
accessibilityRole='toolbar'
style={{
position: 'absolute',
bottom: 0,
width: '100%',
height: 45,
borderTopWidth: StyleSheet.hairlineWidth,
flexDirection: 'row',

53
src/screens/Compose/Root/Suggestion.tsx
View File

@ -1,53 +0,0 @@
import ComponentAccount from '@components/Account'
import haptics from '@components/haptics'
import ComponentHashtag from '@components/Hashtag'
import React, { useContext, useEffect } from 'react'
import ComposeContext from '../utils/createContext'
import { formatText } from '../utils/processText'
type Props = { item: Mastodon.Account & Mastodon.Tag }
const ComposeRootSuggestion: React.FC<Props> = ({ item }) => {
const { composeState, composeDispatch } = useContext(ComposeContext)
useEffect(() => {
if (composeState.text.raw.length === 0) {
composeDispatch({ type: 'tag', payload: undefined })
}
}, [composeState.text.raw.length])
const onPress = () => {
const focusedInput = composeState.textInputFocus.current
const updatedText = (): string => {
const main = item.acct ? `@${item.acct}` : `#${item.name}`
const textInput = composeState.textInputFocus.current
if (composeState.tag) {
const contentFront = composeState[textInput].raw.slice(0, composeState.tag.index)
const contentRear = composeState[textInput].raw.slice(composeState.tag.lastIndex)
const spaceFront =
composeState[textInput].raw.length === 0 || /\s/g.test(contentFront.slice(-1)) ? '' : ' '
const spaceRear = /\s/g.test(contentRear[0]) ? '' : ' '
return [contentFront, spaceFront, main, spaceRear, contentRear].join('')
} else {
return composeState[textInput].raw
}
}
formatText({
textInput: focusedInput,
composeDispatch,
content: updatedText(),
disableDebounce: true
})
haptics('Light')
}
return item.acct ? (
<ComponentAccount account={item} props={{ onPress }} />
) : (
<ComponentHashtag hashtag={item} onPress={onPress} />
)
}
export default ComposeRootSuggestion

135
src/screens/Compose/Root/Suggestions.tsx Normal file
View File

@ -0,0 +1,135 @@
import ComponentAccount from '@components/Account'
import haptics from '@components/haptics'
import ComponentHashtag from '@components/Hashtag'
import Icon from '@components/Icon'
import ComponentSeparator from '@components/Separator'
import { useSearchQuery } from '@utils/queryHooks/search'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React, { Fragment, useContext, useEffect } from 'react'
import { View } from 'react-native'
import { Circle } from 'react-native-animated-spinkit'
import ComposeContext from '../utils/createContext'
import { formatText } from '../utils/processText'
const ComposeRootSuggestions: React.FC = () => {
const { composeState, composeDispatch } = useContext(ComposeContext)
const { colors } = useTheme()
useEffect(() => {
if (composeState.text.raw.length === 0) {
composeDispatch({ type: 'tag', payload: undefined })
}
}, [composeState.text.raw.length])
const mapSchemaToType = () => {
if (composeState.tag) {
switch (composeState.tag?.schema) {
case '@':
return 'accounts'
case '#':
return 'hashtags'
}
} else {
return undefined
}
}
const { isFetching, data, refetch } = useSearchQuery({
type: mapSchemaToType(),
term: composeState.tag?.raw.substring(1),
limit: 10,
options: { enabled: false }
})
useEffect(() => {
if (
(composeState.tag?.schema === '@' || composeState.tag?.schema === '#') &&
composeState.tag?.raw
) {
refetch()
}
}, [composeState.tag])
const onPress = (content: string) => {
const focusedInput = composeState.textInputFocus.current
const updatedText = (): string => {
const textInput = composeState.textInputFocus.current
if (composeState.tag) {
const contentFront = composeState[textInput].raw.slice(0, composeState.tag.index)
const contentRear = composeState[textInput].raw.slice(composeState.tag.lastIndex)
const spaceFront =
contentFront.length === 0 ||
composeState[textInput].raw.length === 0 ||
/\s/g.test(contentFront.slice(-1))
? ''
: ' '
const spaceRear = /\s/g.test(contentRear[0]) ? '' : ' '
return [contentFront, spaceFront, content, spaceRear, contentRear].join('')
} else {
return composeState[textInput].raw
}
}
formatText({
textInput: focusedInput,
composeDispatch,
content: updatedText(),
disableDebounce: true
})
haptics('Light')
}
const main = () => {
if (composeState.tag) {
switch (composeState.tag?.schema) {
case '@':
return (
<View>
{data?.accounts?.map(account => (
<Fragment key={account.id}>
<ComponentAccount
account={account}
props={{ onPress: () => onPress(`@${account.acct}`) }}
children={
<Icon
name='Plus'
size={StyleConstants.Font.Size.L}
color={colors.secondary}
style={{ marginLeft: 8 }}
/>
}
/>
<ComponentSeparator />
</Fragment>
))}
</View>
)
case '#':
return (
<View>
{data?.hashtags?.map(hashtag => (
<Fragment key={hashtag.name}>
<ComponentHashtag hashtag={hashtag} onPress={() => onPress(`#${hashtag.name}`)} />
<ComponentSeparator />
</Fragment>
))}
</View>
)
}
}
}
return isFetching ? (
<View
key='listEmpty'
style={{ flex: 1, alignItems: 'center', marginVertical: StyleConstants.Spacing.M }}
>
<Circle size={StyleConstants.Font.Size.M * 1.25} color={colors.secondary} />
</View>
) : (
<>{main()}</>
)
}
export default ComposeRootSuggestions

71
src/screens/Compose/Root/index.tsx
View File

@ -1,21 +1,13 @@
import ComponentSeparator from '@components/Separator'
import { useSearchQuery } from '@utils/queryHooks/search'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React, { useContext, useEffect, useRef } from 'react'
import { AccessibilityInfo, findNodeHandle, FlatList, View } from 'react-native'
import { Circle } from 'react-native-animated-spinkit'
import React, { useEffect, useRef } from 'react'
import { AccessibilityInfo, findNodeHandle, ScrollView, View } from 'react-native'
import ComposePosting from '../Posting'
import ComposeContext from '../utils/createContext'
import ComposeActions from './Actions'
import ComposeDrafts from './Drafts'
import ComposeRootFooter from './Footer'
import ComposeRootHeader from './Header'
import ComposeRootSuggestion from './Suggestion'
import ComposeRootSuggestion from './Suggestions'
const ComposeRoot = () => {
const { colors } = useTheme()
const accessibleRefDrafts = useRef(null)
const accessibleRefAttachments = useRef(null)
@ -24,60 +16,17 @@ const ComposeRoot = () => {
tagDrafts && AccessibilityInfo.setAccessibilityFocus(tagDrafts)
}, [accessibleRefDrafts.current])
const { composeState } = useContext(ComposeContext)
const mapSchemaToType = () => {
if (composeState.tag) {
switch (composeState.tag?.schema) {
case '@':
return 'accounts'
case '#':
return 'hashtags'
}
} else {
return undefined
}
}
const { isFetching, data, refetch } = useSearchQuery({
type: mapSchemaToType(),
term: composeState.tag?.raw.substring(1),
options: { enabled: false }
})
useEffect(() => {
if (
(composeState.tag?.schema === '@' || composeState.tag?.schema === '#') &&
composeState.tag?.raw
) {
refetch()
}
}, [composeState.tag])
return (
<View style={{ flex: 1 }}>
<FlatList
renderItem={({ item }) => <ComposeRootSuggestion item={item} />}
ListEmptyComponent={
isFetching ? (
<View key='listEmpty' style={{ flex: 1, alignItems: 'center' }}>
<Circle size={StyleConstants.Font.Size.M * 1.25} color={colors.secondary} />
</View>
) : null
}
keyboardShouldPersistTaps='always'
ListHeaderComponent={ComposeRootHeader}
ListFooterComponent={
<>
<ScrollView keyboardShouldPersistTaps='always' style={{ marginBottom: 50 }}>
<ComposeRootHeader />
<ComposeRootSuggestion />
<ComposeRootFooter accessibleRefAttachments={accessibleRefAttachments} />
}
ItemSeparatorComponent={ComponentSeparator}
// @ts-ignore
data={data ? data[mapSchemaToType()] : undefined}
keyExtractor={() => Math.random().toString()}
/>
<ComposeActions />
</ScrollView>
<ComposeDrafts accessibleRefDrafts={accessibleRefDrafts} />
<ComposePosting />
</View>
<ComposeActions />
</>
)
}

6
src/screens/Compose/index.tsx
View File

@ -10,6 +10,7 @@ import { handleError } from '@utils/api/helpers'
import { RootStackScreenProps } from '@utils/navigation/navigators'
import { useInstanceQuery } from '@utils/queryHooks/instance'
import { usePreferencesQuery } from '@utils/queryHooks/preferences'
import { searchFetchToot, SearchResult } from '@utils/queryHooks/search'
import { useTimelineMutation } from '@utils/queryHooks/timeline'
import {
getAccountStorage,
@ -155,6 +156,11 @@ const ScreenCompose: React.FC<RootStackScreenProps<'Screen-Compose'>> = ({
content: params.accts.map(acct => `@${acct}`).join(' ') + ' ',
disableDebounce: true
})
searchFetchToot(params.incomingStatus.uri).then(status => {
if (status?.uri === params.incomingStatus.uri) {
composeDispatch({ type: 'updateReply', payload: status })
}
})
break
case 'conversation':
formatText({

15
src/screens/Compose/utils/reducer.ts
View File

@ -1,9 +1,6 @@
import { ComposeAction, ComposeState } from './types'
const composeReducer = (
state: ComposeState,
action: ComposeAction
): ComposeState => {
const composeReducer = (state: ComposeState, action: ComposeAction): ComposeState => {
switch (action.type) {
case 'loadDraft':
const draft = action.payload
@ -67,9 +64,7 @@ const composeReducer = (
...state,
attachments: {
...state.attachments,
uploads: state.attachments.uploads.filter(
upload => upload.local?.hash !== action.payload
)
uploads: state.attachments.uploads.filter(upload => upload.local?.hash !== action.payload)
}
}
case 'attachment/delete':
@ -77,9 +72,7 @@ const composeReducer = (
...state,
attachments: {
...state.attachments,
uploads: state.attachments.uploads.filter(
upload => upload.remote?.id !== action.payload
)
uploads: state.attachments.uploads.filter(upload => upload.remote?.id !== action.payload)
}
}
case 'attachment/edit':
@ -101,6 +94,8 @@ const composeReducer = (
...state,
textInputFocus: { ...state.textInputFocus, ...action.payload }
}
case 'updateReply':
return { ...state, replyToStatus: action.payload }
case 'removeReply':
return { ...state, replyToStatus: undefined }
default:

4
src/screens/Compose/utils/types.d.ts vendored
View File

@ -126,6 +126,10 @@ export type ComposeAction =
type: 'textInputFocus'
payload: Partial<ComposeState['textInputFocus']>
}
| {
type: 'updateReply'
payload: Mastodon.Status
}
| {
type: 'removeReply'
}

10
src/screens/Tabs/Me/Root/MyInfo.tsx
View File

@ -2,15 +2,11 @@ import AccountHeader from '@screens/Tabs/Shared/Account/Header'
import AccountInformation from '@screens/Tabs/Shared/Account/Information'
import React from 'react'
export interface Props {
account: Mastodon.Account | undefined
}
const MyInfo: React.FC<Props> = ({ account }) => {
const MyInfo: React.FC = () => {
return (
<>
<AccountHeader account={account} />
<AccountInformation account={account} />
<AccountHeader />
<AccountInformation />
</>
)
}

14
src/screens/Tabs/Me/Root/index.tsx
View File

@ -5,13 +5,11 @@ import Logout from '@screens/Tabs/Me/Root/Logout'
import MyInfo from '@screens/Tabs/Me/Root/MyInfo'
import Settings from '@screens/Tabs/Me/Root/Settings'
import AccountInformationSwitch from '@screens/Tabs/Me/Root/Switch'
import AccountContext from '@screens/Tabs/Shared/Account/Context'
import AccountNav from '@screens/Tabs/Shared/Account/Nav'
import AccountContext from '@screens/Tabs/Shared/Account/utils/createContext'
import accountInitialState from '@screens/Tabs/Shared/Account/utils/initialState'
import accountReducer from '@screens/Tabs/Shared/Account/utils/reducer'
import { useProfileQuery } from '@utils/queryHooks/profile'
import { useGlobalStorage } from '@utils/storage/actions'
import React, { useReducer, useRef } from 'react'
import React, { useRef } from 'react'
import Animated, { useAnimatedScrollHandler, useSharedValue } from 'react-native-reanimated'
const TabMeRoot: React.FC = () => {
@ -24,23 +22,21 @@ const TabMeRoot: React.FC = () => {
const scrollRef = useRef<Animated.ScrollView>(null)
useScrollToTop(scrollRef)
const [accountState, accountDispatch] = useReducer(accountReducer, accountInitialState)
const scrollY = useSharedValue(0)
const onScroll = useAnimatedScrollHandler(event => {
scrollY.value = event.contentOffset.y
})
return (
<AccountContext.Provider value={{ accountState, accountDispatch }}>
{accountActive && data ? <AccountNav scrollY={scrollY} account={data} /> : null}
<AccountContext.Provider value={{ account: data, pageMe: true }}>
{accountActive && data ? <AccountNav scrollY={scrollY} /> : null}
<Animated.ScrollView
ref={scrollRef}
keyboardShouldPersistTaps='handled'
onScroll={onScroll}
scrollEventThrottle={16}
>
{accountActive ? <MyInfo account={data} /> : <ComponentInstance />}
{accountActive ? <MyInfo /> : <ComponentInstance />}
{accountActive ? <Collections /> : null}
<Settings />
{accountActive ? <AccountInformationSwitch /> : null}

40
src/screens/Tabs/Shared/Account/Attachments.tsx
View File

@ -7,17 +7,15 @@ import { useTimelineQuery } from '@utils/queryHooks/timeline'
import { flattenPages } from '@utils/queryHooks/utils'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React from 'react'
import React, { useContext } from 'react'
import { Dimensions, Pressable, View } from 'react-native'
import { FlatList } from 'react-native-gesture-handler'
import Animated, { useAnimatedStyle, withTiming } from 'react-native-reanimated'
import AccountContext from './Context'
export interface Props {
account: Mastodon.Account | undefined
}
const AccountAttachments: React.FC = () => {
const { account } = useContext(AccountContext)
const AccountAttachments: React.FC<Props> = ({ account }) => {
if (!account) return null
if (account?.suspended) return null
const navigation = useNavigation<StackNavigationProp<TabLocalStackParamList>>()
const { colors } = useTheme()
@ -28,30 +26,28 @@ const AccountAttachments: React.FC<Props> = ({ account }) => {
const { data } = useTimelineQuery({
page: 'Account',
account: account.id,
id: account?.id,
exclude_reblogs: false,
only_media: true
only_media: true,
options: { enabled: !!account?.id }
})
const flattenData = flattenPages(data)
.filter(status => !(status as Mastodon.Status).sensitive)
.splice(0, DISPLAY_AMOUNT)
const styleContainer = useAnimatedStyle(() => {
if (flattenData.length) {
return {
height: withTiming(width + StyleConstants.Spacing.Global.PagePadding * 2),
if (!flattenData.length) return null
return (
<View
style={{
flex: 1,
height: width + StyleConstants.Spacing.Global.PagePadding * 2,
paddingVertical: StyleConstants.Spacing.Global.PagePadding,
borderTopWidth: 1,
borderTopColor: colors.border
}
} else {
return {}
}
}, [flattenData.length])
return (
<Animated.View style={[{ flex: 1 }, styleContainer]}>
}}
>
<FlatList
horizontal
data={flattenData}
@ -103,7 +99,7 @@ const AccountAttachments: React.FC<Props> = ({ account }) => {
}}
showsHorizontalScrollIndicator={false}
/>
</Animated.View>
</View>
)
}

9
src/screens/Tabs/Shared/Account/Context.tsx Normal file
View File

@ -0,0 +1,9 @@
import { createContext } from 'react'
type AccountContextType = {
account?: Mastodon.Account
pageMe?: boolean
}
const AccountContext = createContext<AccountContextType>({} as AccountContextType)
export default AccountContext

9
src/screens/Tabs/Shared/Account/Header.tsx
View File

@ -1,15 +1,14 @@
import GracefullyImage from '@components/GracefullyImage'
import navigationRef from '@utils/navigation/navigationRef'
import { useGlobalStorage } from '@utils/storage/actions'
import React from 'react'
import React, { useContext } from 'react'
import { Dimensions, Image } from 'react-native'
import { useSafeAreaInsets } from 'react-native-safe-area-context'
import AccountContext from './Context'
export interface Props {
account?: Mastodon.Account
}
const AccountHeader: React.FC = () => {
const { account } = useContext(AccountContext)
const AccountHeader: React.FC<Props> = ({ account }) => {
const topInset = useSafeAreaInsets().top
useGlobalStorage.string('account.active')

22
src/screens/Tabs/Shared/Account/Information.tsx
View File

@ -13,11 +13,7 @@ import AccountInformationName from './Information/Name'
import AccountInformationNote from './Information/Note'
import AccountInformationStats from './Information/Stats'
export interface Props {
account: Mastodon.Account | undefined
}
const AccountInformation: React.FC<Props> = ({ account }) => {
const AccountInformation: React.FC = () => {
const { colors } = useTheme()
const { name } = useRoute()
@ -31,21 +27,21 @@ const AccountInformation: React.FC<Props> = ({ account }) => {
)}
>
<View style={styles.avatarAndActions}>
<AccountInformationAvatar account={account} myInfo={myInfo} />
<AccountInformationActions account={account} myInfo={myInfo} />
<AccountInformationAvatar />
<AccountInformationActions />
</View>
<AccountInformationName account={account} />
<AccountInformationName />
<AccountInformationAccount account={account} myInfo={myInfo} />
<AccountInformationAccount />
<AccountInformationFields account={account} myInfo={myInfo} />
<AccountInformationFields />
<AccountInformationNote account={account} myInfo={myInfo} />
<AccountInformationNote />
<AccountInformationCreated account={account} hidden={myInfo} />
<AccountInformationCreated />
<AccountInformationStats account={account} myInfo={myInfo} />
<AccountInformationStats />
</Placeholder>
</View>
)

19
src/screens/Tabs/Shared/Account/Information/Account.tsx
View File

@ -4,31 +4,26 @@ import { useRelationshipQuery } from '@utils/queryHooks/relationship'
import { getAccountStorage, useAccountStorage } from '@utils/storage/actions'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React from 'react'
import React, { useContext } from 'react'
import { useTranslation } from 'react-i18next'
import { View } from 'react-native'
import { PlaceholderLine } from 'rn-placeholder'
import AccountContext from '../Context'
export interface Props {
account: Mastodon.Account | undefined
myInfo?: boolean
}
const AccountInformationAccount: React.FC = () => {
const { account, pageMe } = useContext(AccountContext)
const AccountInformationAccount: React.FC<Props> = ({ account, myInfo }) => {
const { t } = useTranslation('screenTabs')
const { colors } = useTheme()
const [acct] = useAccountStorage.string('auth.account.acct')
const domain = getAccountStorage.string('auth.account.domain')
const { data: relationship } = useRelationshipQuery({
id: account?.id || '',
options: { enabled: account !== undefined }
})
const { data: relationship } = useRelationshipQuery({ id: account?.id })
const localInstance = account?.acct.includes('@') ? account?.acct.includes(`@${domain}`) : true
if (account || localInstance) {
if (account || pageMe) {
return (
<View
style={{
@ -51,7 +46,7 @@ const AccountInformationAccount: React.FC<Props> = ({ account, myInfo }) => {
}}
selectable
>
@{myInfo ? acct : account?.acct}
@{pageMe ? acct : account?.acct}
{localInstance ? `@${domain}` : null}
</CustomText>
{relationship?.followed_by ? t('shared.account.followed_by') : null}

14
src/screens/Tabs/Shared/Account/Information/Actions.tsx
View File

@ -5,17 +5,15 @@ import { useNavigation } from '@react-navigation/native'
import { useRelationshipQuery } from '@utils/queryHooks/relationship'
import { useAccountStorage } from '@utils/storage/actions'
import { StyleConstants } from '@utils/styles/constants'
import React from 'react'
import React, { useContext } from 'react'
import { useTranslation } from 'react-i18next'
import { StyleSheet, View } from 'react-native'
import * as DropdownMenu from 'zeego/dropdown-menu'
import AccountContext from '../Context'
export interface Props {
account: Mastodon.Account | undefined
myInfo?: boolean
}
const AccountInformationActions: React.FC = () => {
const { account, pageMe } = useContext(AccountContext)
const AccountInformationActions: React.FC<Props> = ({ account, myInfo }) => {
if (!account || account.suspended) {
return null
}
@ -36,7 +34,7 @@ const AccountInformationActions: React.FC<Props> = ({ account, myInfo }) => {
)
}
if (myInfo) {
if (pageMe) {
return (
<View style={styles.base}>
<Button
@ -76,7 +74,7 @@ const AccountInformationActions: React.FC<Props> = ({ account, myInfo }) => {
{mGroup.map(menu => (
<DropdownMenu.Item key={menu.key} {...menu.item}>
<DropdownMenu.ItemTitle children={menu.title} />
<DropdownMenu.ItemIcon iosIconName={menu.icon} />
<DropdownMenu.ItemIcon ios={{ name: menu.icon }} />
</DropdownMenu.Item>
))}
</DropdownMenu.Group>

12
src/screens/Tabs/Shared/Account/Information/Avatar.tsx
View File

@ -5,14 +5,12 @@ import navigationRef from '@utils/navigation/navigationRef'
import { TabLocalStackParamList } from '@utils/navigation/navigators'
import { useGlobalStorage } from '@utils/storage/actions'
import { StyleConstants } from '@utils/styles/constants'
import React from 'react'
import React, { useContext } from 'react'
import AccountContext from '../Context'
export interface Props {
account: Mastodon.Account | undefined
myInfo: boolean
}
const AccountInformationAvatar: React.FC = () => {
const { account, pageMe } = useContext(AccountContext)
const AccountInformationAvatar: React.FC<Props> = ({ account, myInfo }) => {
const navigation = useNavigation<StackNavigationProp<TabLocalStackParamList>>()
useGlobalStorage.string('account.active')
@ -29,7 +27,7 @@ const AccountInformationAvatar: React.FC<Props> = ({ account, myInfo }) => {
uri={{ original: account?.avatar, static: account?.avatar_static }}
onPress={() => {
if (account) {
if (myInfo) {
if (pageMe) {
navigation.push('Tab-Shared-Account', { account })
return
} else {

12
src/screens/Tabs/Shared/Account/Information/Created.tsx
View File

@ -2,18 +2,16 @@ import Icon from '@components/Icon'
import CustomText from '@components/Text'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React from 'react'
import React, { useContext } from 'react'
import { useTranslation } from 'react-i18next'
import { View } from 'react-native'
import { PlaceholderLine } from 'rn-placeholder'
import AccountContext from '../Context'
export interface Props {
account: Mastodon.Account | undefined
hidden?: boolean
}
const AccountInformationCreated: React.FC = () => {
const { account, pageMe } = useContext(AccountContext)
const AccountInformationCreated: React.FC<Props> = ({ account, hidden = false }) => {
if (hidden) {
if (pageMe) {
return null
}

12
src/screens/Tabs/Shared/Account/Information/Fields.tsx
View File

@ -1,16 +1,14 @@
import { ParseHTML } from '@components/Parse'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React from 'react'
import React, { useContext } from 'react'
import { StyleSheet, View } from 'react-native'
import AccountContext from '../Context'
export interface Props {
account: Mastodon.Account | undefined
myInfo?: boolean
}
const AccountInformationFields: React.FC = () => {
const { account, pageMe } = useContext(AccountContext)
const AccountInformationFields: React.FC<Props> = ({ account, myInfo }) => {
if (account?.suspended || myInfo || !account?.fields || account.fields.length === 0) {
if (account?.suspended || pageMe || !account?.fields || account.fields.length === 0) {
return null
}

9
src/screens/Tabs/Shared/Account/Information/Name.tsx
View File

@ -2,15 +2,14 @@ import { ParseEmojis } from '@components/Parse'
import CustomText from '@components/Text'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React from 'react'
import React, { useContext } from 'react'
import { View } from 'react-native'
import { PlaceholderLine } from 'rn-placeholder'
import AccountContext from '../Context'
export interface Props {
account: Mastodon.Account | undefined
}
const AccountInformationName: React.FC = () => {
const { account } = useContext(AccountContext)
const AccountInformationName: React.FC<Props> = ({ account }) => {
const { colors } = useTheme()
return (

12
src/screens/Tabs/Shared/Account/Information/Note.tsx
View File

@ -1,17 +1,15 @@
import { ParseHTML } from '@components/Parse'
import { StyleConstants } from '@utils/styles/constants'
import React from 'react'
import React, { useContext } from 'react'
import { View } from 'react-native'
import AccountContext from '../Context'
export interface Props {
account: Mastodon.Account | undefined
myInfo?: boolean
}
const AccountInformationNote: React.FC = () => {
const { account, pageMe } = useContext(AccountContext)
const AccountInformationNote: React.FC<Props> = ({ account, myInfo }) => {
if (
account?.suspended ||
myInfo ||
pageMe ||
!account?.note ||
account.note.length === 0 ||
account.note === '<p></p>'

12
src/screens/Tabs/Shared/Account/Information/Stats.tsx
View File

@ -4,17 +4,15 @@ 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 from 'react'
import React, { useContext } from 'react'
import { useTranslation } from 'react-i18next'
import { StyleSheet, View } from 'react-native'
import { PlaceholderLine } from 'rn-placeholder'
import AccountContext from '../Context'
export interface Props {
account: Mastodon.Account | undefined
myInfo: boolean
}
const AccountInformationStats: React.FC = () => {
const { account, pageMe } = useContext(AccountContext)
const AccountInformationStats: React.FC<Props> = ({ account, myInfo }) => {
if (account?.suspended) {
return null
}
@ -32,7 +30,7 @@ const AccountInformationStats: React.FC<Props> = ({ account, myInfo }) => {
count: account.statuses_count || 0
})}
onPress={() => {
myInfo && account && navigation.push('Tab-Shared-Account', { account })
pageMe && account && navigation.push('Tab-Shared-Account', { account })
}}
/>
) : (

8
src/screens/Tabs/Shared/Account/Nav.tsx
View File

@ -2,17 +2,19 @@ import { ParseEmojis } from '@components/Parse'
import CustomText from '@components/Text'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React from 'react'
import React, { useContext } from 'react'
import { Dimensions, StyleSheet, View } from 'react-native'
import Animated, { Extrapolate, interpolate, useAnimatedStyle } from 'react-native-reanimated'
import { useSafeAreaInsets } from 'react-native-safe-area-context'
import AccountContext from './Context'
export interface Props {
scrollY: Animated.SharedValue<number>
account: Mastodon.Account | undefined
}
const AccountNav: React.FC<Props> = ({ scrollY, account }) => {
const AccountNav: React.FC<Props> = ({ scrollY }) => {
const { account } = useContext(AccountContext)
const { colors } = useTheme()
const headerHeight = useSafeAreaInsets().top + 44

35
src/screens/Tabs/Shared/Account/index.tsx
View File

@ -16,6 +16,7 @@ import { Text, View } from 'react-native'
import { useSharedValue } from 'react-native-reanimated'
import * as DropdownMenu from 'zeego/dropdown-menu'
import AccountAttachments from './Attachments'
import AccountContext from './Context'
import AccountHeader from './Header'
import AccountInformation from './Information'
import AccountNav from './Nav'
@ -23,14 +24,19 @@ import AccountNav from './Nav'
const TabSharedAccount: React.FC<TabSharedStackScreenProps<'Tab-Shared-Account'>> = ({
navigation,
route: {
params: { account }
params: { account, isRemote }
}
}) => {
const { t } = useTranslation('screenTabs')
const { colors, mode } = useTheme()
const mShare = menuShare({ type: 'account', url: account.url })
const mAccount = menuAccount({ type: 'account', openChange: true, account })
const { data, dataUpdatedAt } = useAccountQuery({
id: account.id,
...(isRemote && { remoteUrl: account.url })
})
const mShare = menuShare({ type: 'account', url: data?.url })
const mAccount = menuAccount({ type: 'account', openChange: true, account: data })
useEffect(() => {
navigation.setOptions({
headerTransparent: true,
@ -76,14 +82,12 @@ const TabSharedAccount: React.FC<TabSharedStackScreenProps<'Tab-Shared-Account'>
})
}, [mAccount])
const { data } = useAccountQuery({ id: account.id })
const scrollY = useSharedValue(0)
const queryClient = useQueryClient()
const [queryKey, setQueryKey] = useState<QueryKeyTimeline>([
'Timeline',
{ page: 'Account', account: account.id, exclude_reblogs: true, only_media: false }
{ page: 'Account', id: data?.id, exclude_reblogs: true, only_media: false }
])
const page = queryKey[1]
@ -92,9 +96,9 @@ const TabSharedAccount: React.FC<TabSharedStackScreenProps<'Tab-Shared-Account'>
return (
<>
<View style={{ borderBottomWidth: 1, borderBottomColor: colors.border }}>
<AccountHeader account={data} />
<AccountInformation account={data} />
{!data?.suspended ? <AccountAttachments account={data} /> : null}
<AccountHeader />
<AccountInformation />
<AccountAttachments />
</View>
{!data?.suspended ? (
<SegmentedControl
@ -110,7 +114,7 @@ const TabSharedAccount: React.FC<TabSharedStackScreenProps<'Tab-Shared-Account'>
{
...page,
page: 'Account',
account: account.id,
id: data?.id,
exclude_reblogs: true,
only_media: false
}
@ -122,7 +126,7 @@ const TabSharedAccount: React.FC<TabSharedStackScreenProps<'Tab-Shared-Account'>
{
...page,
page: 'Account',
account: account.id,
id: data?.id,
exclude_reblogs: false,
only_media: false
}
@ -158,11 +162,11 @@ const TabSharedAccount: React.FC<TabSharedStackScreenProps<'Tab-Shared-Account'>
) : null}
</>
)
}, [segment, data, queryKey[1].page, mode])
}, [segment, dataUpdatedAt, mode])
return (
<>
<AccountNav scrollY={scrollY} account={data} />
<AccountContext.Provider value={{ account: data }}>
<AccountNav scrollY={scrollY} />
{data?.suspended ? (
ListHeaderComponent
@ -170,6 +174,7 @@ const TabSharedAccount: React.FC<TabSharedStackScreenProps<'Tab-Shared-Account'>
<Timeline
queryKey={queryKey}
disableRefresh
queryOptions={{ enabled: isRemote ? !!data?.id : true }}
customProps={{
renderItem: ({ item }) => <TimelineDefault item={item} queryKey={queryKey} />,
onScroll: ({ nativeEvent }) => (scrollY.value = nativeEvent.contentOffset.y),
@ -180,7 +185,7 @@ const TabSharedAccount: React.FC<TabSharedStackScreenProps<'Tab-Shared-Account'>
}}
/>
)}
</>
</AccountContext.Provider>
)
}

10
src/screens/Tabs/Shared/Account/utils/createContext.ts
View File

@ -1,10 +0,0 @@
import { createContext, Dispatch } from 'react'
import { AccountAction, AccountState } from './types'
type ContextType = {
accountState: AccountState
accountDispatch: Dispatch<AccountAction>
}
const AccountContext = createContext<ContextType>({} as ContextType)
export default AccountContext

9
src/screens/Tabs/Shared/Account/utils/initialState.ts
View File

@ -1,9 +0,0 @@
import { AccountState } from './types'
const accountInitialState: AccountState = {
headerRatio: 1 / 3,
informationLayout: { height: 0, y: 100 },
segmentedIndex: 0
}
export default accountInitialState

19
src/screens/Tabs/Shared/Account/utils/reducer.ts
View File

@ -1,19 +0,0 @@
import { AccountAction, AccountState } from "./types"
const accountReducer = (
state: AccountState,
action: AccountAction
): AccountState => {
switch (action.type) {
case 'headerRatio':
return { ...state, headerRatio: action.payload }
case 'informationLayout':
return { ...state, informationLayout: action.payload }
case 'segmentedIndex':
return { ...state, segmentedIndex: action.payload }
default:
throw new Error('Unexpected action')
}
}
export default accountReducer

22
src/screens/Tabs/Shared/Account/utils/types.d.ts vendored
View File

@ -1,22 +0,0 @@
export type AccountState = {
headerRatio: number
informationLayout?: {
y: number
height: number
}
segmentedIndex: number
}
export type AccountAction =
| {
type: 'headerRatio'
payload: AccountState['headerRatio']
}
| {
type: 'informationLayout'
payload: AccountState['informationLayout']
}
| {
type: 'segmentedIndex'
payload: AccountState['segmentedIndex']
}

2
src/screens/Tabs/Shared/Attachments.tsx
View File

@ -45,7 +45,7 @@ const TabSharedAttachments: React.FC<TabSharedStackScreenProps<'Tab-Shared-Attac
const queryKey: QueryKeyTimeline = [
'Timeline',
{ page: 'Account', account: account.id, exclude_reblogs: true, only_media: true }
{ page: 'Account', id: account.id, exclude_reblogs: true, only_media: true }
]
return (

17
src/screens/Tabs/Shared/Report.tsx
View File

@ -5,6 +5,7 @@ import CustomText from '@components/Text'
import apiInstance from '@utils/api/instance'
import { TabSharedStackScreenProps } from '@utils/navigation/navigators'
import { useRulesQuery } from '@utils/queryHooks/reports'
import { searchFetchToot } from '@utils/queryHooks/search'
import { getAccountStorage } from '@utils/storage/actions'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
@ -19,6 +20,7 @@ const TabSharedReport: React.FC<TabSharedStackScreenProps<'Tab-Shared-Report'>>
params: { account, status }
}
}) => {
console.log('account', account.id)
const { colors } = useTheme()
const { t } = useTranslation(['common', 'screenTabs'])
@ -49,10 +51,19 @@ const TabSharedReport: React.FC<TabSharedStackScreenProps<'Tab-Shared-Report'>>
type='text'
content={t('screenTabs:shared.report.report')}
destructive
onPress={() => {
onPress={async () => {
const body = new FormData()
if (status) {
if (status._remote) {
const fetchedStatus = await searchFetchToot(status.uri)
if (fetchedStatus) {
body.append('status_ids[]', fetchedStatus.id)
}
} else {
body.append('status_ids[]', status.id)
}
}
body.append('account_id', account.id)
status && body.append('status_ids[]', status.id)
comment.length && body.append('comment', comment)
body.append('forward', forward.toString())
body.append('category', categories.find(category => category.selected)?.type || 'other')
@ -71,7 +82,7 @@ const TabSharedReport: React.FC<TabSharedStackScreenProps<'Tab-Shared-Report'>>
/>
)
})
}, [isReporting, comment, forward, categories, rules])
}, [isReporting, comment, forward, categories, rules, account.id])
const localInstance = account?.acct.includes('@')
? account?.acct.includes(`@${getAccountStorage.string('auth.account.domain')}`)

110
src/screens/Tabs/Shared/Toot.tsx
View File

@ -1,4 +1,3 @@
import Button from '@components/Button'
import { HeaderLeft } from '@components/Header'
import Icon from '@components/Icon'
import ComponentSeparator from '@components/Separator'
@ -9,11 +8,12 @@ import apiGeneral from '@utils/api/general'
import apiInstance from '@utils/api/instance'
import { getHost } from '@utils/helpers/urlMatcher'
import { TabSharedStackScreenProps } from '@utils/navigation/navigators'
import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React, { useEffect, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { FlatList, View } from 'react-native'
import { Alert, FlatList, Pressable, View } from 'react-native'
import { Circle } from 'react-native-animated-spinkit'
import { Path, Svg } from 'react-native-svg'
@ -31,7 +31,16 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
useEffect(() => {
navigation.setOptions({
headerTitle: () => (
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<Pressable
style={{ flexDirection: 'row', alignItems: 'center' }}
disabled={!hasRemoteContent}
onPress={() =>
Alert.alert(
t('screenTabs:shared.toot.remoteFetch.title'),
t('screenTabs:shared.toot.remoteFetch.message')
)
}
>
{hasRemoteContent ? (
<Icon
name='Wifi'
@ -47,7 +56,7 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
numberOfLines={1}
children={t('screenTabs:shared.toot.name')}
/>
</View>
</Pressable>
),
headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} />
})
@ -56,12 +65,16 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
const flRef = useRef<FlatList>(null)
const scrolled = useRef(false)
const finalData = useRef<(Mastodon.Status & { _level?: number; _remote?: boolean })[]>([
{ ...toot, _level: 0, _remote: false }
const finalData = useRef<Mastodon.Status[]>([
{ ...toot, _level: 0, _remote: toot._remote }
])
const highlightIndex = useRef<number>(0)
const queryKey: { local: QueryKeyTimeline; remote: QueryKeyTimeline } = {
local: ['Timeline', { page: 'Toot', toot: toot.id, remote: false }],
remote: ['Timeline', { page: 'Toot', toot: toot.id, remote: true }]
}
const queryLocal = useQuery(
['Timeline', { page: 'Toot', toot: toot.id, remote: false }],
queryKey.local,
async () => {
const context = await apiInstance<{
ancestors: Mastodon.Status[]
@ -93,6 +106,7 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
return { pages: [{ body: statuses }] }
},
{
enabled: !toot._remote,
staleTime: 0,
refetchOnMount: true,
onSuccess: data => {
@ -129,7 +143,7 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
}
)
useQuery(
['Timeline', { page: 'Toot', toot: toot.id, remote: true }],
queryKey.remote,
async () => {
let context:
| {
@ -186,17 +200,22 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
{
enabled: toot.account.acct !== toot.account.username, // When on the same instance, these two values are the same
staleTime: 0,
refetchOnMount: false,
refetchOnMount: true,
onSuccess: data => {
if (finalData.current.length < 1 && data.pages[0].body.length < 1) {
navigation.goBack()
return
}
if (finalData.current?.length < data.pages[0].body.length) {
if (finalData.current.length < data.pages[0].body.length) {
finalData.current = data.pages[0].body.map(remote => {
const localMatch = finalData.current?.find(local => local.uri === remote.uri)
return localMatch ? { ...localMatch, _remote: false } : { ...remote, _remote: true }
const localMatch = finalData.current.find(local => local.uri === remote.uri)
if (localMatch) {
return localMatch
} else {
remote._remote = true
return remote
}
})
setHasRemoteContent(true)
}
@ -222,52 +241,6 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
}
)
const empty = () => {
switch (queryLocal.status) {
case 'error':
return (
<>
<Icon name='Frown' size={StyleConstants.Font.Size.L} color={colors.primaryDefault} />
<CustomText
fontStyle='M'
style={{
marginTop: StyleConstants.Spacing.S,
marginBottom: StyleConstants.Spacing.L,
color: colors.primaryDefault
}}
>
{t('componentTimeline:empty.error.message')}
</CustomText>
<Button
type='text'
content={t('componentTimeline:empty.error.button')}
onPress={() => queryLocal.refetch()}
/>
</>
)
case 'success':
return (
<>
<Icon
name='Smartphone'
size={StyleConstants.Font.Size.L}
color={colors.primaryDefault}
/>
<CustomText
fontStyle='M'
style={{
marginTop: StyleConstants.Spacing.S,
marginBottom: StyleConstants.Spacing.L,
color: colors.secondary
}}
>
{t('componentTimeline:empty.success.message')}
</CustomText>
</>
)
}
}
const heights = useRef<(number | undefined)[]>([])
const MAX_LEVEL = 10
const ARC = StyleConstants.Avatar.XS / 4
@ -279,9 +252,9 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
windowSize={7}
data={finalData.current}
renderItem={({ item, index }) => {
const prev = finalData.current?.[index - 1]?._level || 0
const prev = finalData.current[index - 1]?._level || 0
const curr = item._level
const next = finalData.current?.[index + 1]?._level || 0
const next = finalData.current[index + 1]?._level || 0
return (
<View
@ -299,7 +272,7 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
>
<TimelineDefault
item={item}
queryKey={['Timeline', { page: 'Toot', toot: toot.id }]}
queryKey={item._remote ? queryKey.remote : queryKey.local}
rootQueryKey={rootQueryKey}
highlighted={toot.id === item.id}
isConversation={toot.id !== item.id}
@ -437,7 +410,7 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
const offset = error.averageItemLength * error.index
flRef.current?.scrollToOffset({ offset })
try {
error.index < (finalData.current.length || 0) &&
error.index < finalData.current.length &&
setTimeout(
() =>
flRef.current?.scrollToIndex({
@ -448,19 +421,6 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
)
} catch {}
}}
ListEmptyComponent={
<View
style={{
flex: 1,
minHeight: '100%',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: colors.backgroundDefault
}}
>
{empty()}
</View>
}
ListFooterComponent={
<View
style={{

10
src/screens/index.tsx
View File

@ -3,7 +3,6 @@ import { displayMessage, Message } from '@components/Message'
import { NavigationContainer } from '@react-navigation/native'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import ScreenAccountSelection from '@screens/AccountSelection'
import ScreenActions from '@screens/Actions'
import ScreenAnnouncements from '@screens/Announcements'
import ScreenCompose from '@screens/Compose'
import ScreenImagesViewer from '@screens/ImageViewer'
@ -261,15 +260,6 @@ const Screens: React.FC<Props> = ({ localCorrupt }) => {
options={{ headerShown: false }}
/>
<Stack.Screen
name='Screen-Actions'
component={ScreenActions}
options={{
presentation: 'transparentModal',
animation: 'fade',
headerShown: false
}}
/>
<Stack.Screen
name='Screen-Announcements'
component={ScreenAnnouncements}

11
src/utils/navigation/navigators.ts
View File

@ -7,14 +7,6 @@ import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
export type RootStackParamList = {
'Screen-Tabs': NavigatorScreenParams<ScreenTabsStackParamList>
'Screen-Actions':
| {
type: 'notifications_filter'
}
| {
type: 'alt_text'
text: string
}
'Screen-Announcements': { showAll: boolean }
'Screen-Compose':
| {
@ -93,6 +85,7 @@ export type ScreenTabsScreenProps<T extends keyof ScreenTabsStackParamList> = Bo
export type TabSharedStackParamList = {
'Tab-Shared-Account': {
account: Partial<Mastodon.Account> & Pick<Mastodon.Account, 'id' | 'username' | 'acct'>
isRemote?: boolean
}
'Tab-Shared-Account-In-Lists': {
account: Pick<Mastodon.Account, 'id' | 'username'>
@ -107,7 +100,7 @@ export type TabSharedStackParamList = {
}
'Tab-Shared-Report': {
account: Partial<Mastodon.Account> & Pick<Mastodon.Account, 'id' | 'acct' | 'username'>
status?: Pick<Mastodon.Status, 'id'>
status?: Pick<Mastodon.Status, 'id' | '_remote' | 'uri'>
}
'Tab-Shared-Search': undefined
'Tab-Shared-Toot': {

37
src/utils/queryHooks/account.ts
View File

@ -1,15 +1,42 @@
import { QueryFunctionContext, useQuery, UseQueryOptions } from '@tanstack/react-query'
import apiInstance from '@utils/api/instance'
import { AxiosError } from 'axios'
import { SearchResult } from './search'
export type QueryKeyAccount = ['Account', { id: Mastodon.Account['id'] }]
export type QueryKeyAccount = ['Account', { id?: Mastodon.Account['id']; remoteUrl?: string }]
const accountQueryFunction = async ({ queryKey }: QueryFunctionContext<QueryKeyAccount>) => {
const { id } = queryKey[1]
const { id, remoteUrl } = queryKey[1]
if (!id && !remoteUrl) return Promise.reject()
let matchedId = id
if (remoteUrl) {
await apiInstance<SearchResult>({
version: 'v2',
method: 'get',
url: 'search',
params: {
q: remoteUrl,
type: 'accounts',
limit: 1,
resolve: true
}
})
.then(res => {
const account = res.body.accounts[0]
if (account.url !== remoteUrl) {
return Promise.reject()
} else {
matchedId = account.id
}
})
.catch(() => Promise.reject())
}
const res = await apiInstance<Mastodon.Account>({
method: 'get',
url: `accounts/${id}`
url: `accounts/${matchedId}`
})
return res.body
}
@ -21,7 +48,7 @@ const useAccountQuery = ({
options?: UseQueryOptions<Mastodon.Account, AxiosError>
}) => {
const queryKey: QueryKeyAccount = ['Account', { ...queryKeyParams }]
return useQuery(queryKey, accountQueryFunction, options)
return useQuery(queryKey, accountQueryFunction, { ...options })
}
/* ----- */
@ -43,7 +70,7 @@ const accountInListsQueryFunction = async ({
const useAccountInListsQuery = ({
options,
...queryKeyParams
}: QueryKeyAccount[1] & {
}: QueryKeyAccountInLists[1] & {
options?: UseQueryOptions<Mastodon.List[], AxiosError>
}) => {
const queryKey: QueryKeyAccountInLists = ['AccountInLists', { ...queryKeyParams }]

5
src/utils/queryHooks/relationship.ts
View File

@ -8,10 +8,11 @@ import {
import apiInstance from '@utils/api/instance'
import { AxiosError } from 'axios'
export type QueryKeyRelationship = ['Relationship', { id: Mastodon.Account['id'] }]
export type QueryKeyRelationship = ['Relationship', { id?: Mastodon.Account['id'] }]
const queryFunction = async ({ queryKey }: QueryFunctionContext<QueryKeyRelationship>) => {
const { id } = queryKey[1]
if (!id) return Promise.reject()
const res = await apiInstance<Mastodon.Relationship[]>({
method: 'get',
@ -32,6 +33,8 @@ const useRelationshipQuery = ({
const queryKey: QueryKeyRelationship = ['Relationship', { ...queryKeyParams }]
return useQuery(queryKey, queryFunction, {
...options,
enabled:
(typeof options?.enabled === 'boolean' ? options.enabled : true) && !!queryKeyParams.id,
select: data => data[0]
})
}

15
src/utils/queryHooks/search.ts
View File

@ -46,4 +46,19 @@ const useSearchQuery = <T = SearchResult>({
return useQuery(queryKey, queryFunction, options)
}
export const searchFetchToot = (uri: Mastodon.Status['uri']): Promise<Mastodon.Status | void> =>
apiInstance<SearchResult>({
version: 'v2',
method: 'get',
url: 'search',
params: {
q: uri,
type: 'statuses',
limit: 1,
resolve: true
}
})
.then(res => res.body.statuses[0])
.catch(() => {})
export { useSearchQuery }

80
src/utils/queryHooks/timeline.ts
View File

@ -4,9 +4,7 @@ import {
QueryFunctionContext,
useInfiniteQuery,
UseInfiniteQueryOptions,
useMutation,
useQuery,
UseQueryOptions
useMutation
} from '@tanstack/react-query'
import { PagedResponse } from '@utils/api/helpers'
import apiInstance from '@utils/api/instance'
@ -15,6 +13,7 @@ import queryClient from '@utils/queryHooks'
import { getAccountStorage } from '@utils/storage/actions'
import { AxiosError } from 'axios'
import { uniqBy } from 'lodash'
import { searchFetchToot } from './search'
import deleteItem from './timeline/deleteItem'
import editItem from './timeline/editItem'
import updateStatusProperty from './timeline/updateStatusProperty'
@ -40,13 +39,14 @@ export type QueryKeyTimeline = [
}
| {
page: 'Account'
account: Mastodon.Account['id']
id?: Mastodon.Account['id']
exclude_reblogs: boolean
only_media: boolean
}
| {
page: 'Toot'
toot: Mastodon.Status['id']
remote: boolean
}
)
]
@ -131,11 +131,13 @@ const queryFunction = async ({ queryKey, pageParam }: QueryFunctionContext<Query
})
case 'Account':
if (!page.id) return Promise.reject()
if (page.exclude_reblogs) {
if (pageParam && pageParam.hasOwnProperty('max_id')) {
return apiInstance<Mastodon.Status[]>({
method: 'get',
url: `accounts/${page.account}/statuses`,
url: `accounts/${page.id}/statuses`,
params: {
exclude_replies: 'true',
...params
@ -144,7 +146,7 @@ const queryFunction = async ({ queryKey, pageParam }: QueryFunctionContext<Query
} else {
const res1 = await apiInstance<(Mastodon.Status & { _pinned: boolean })[]>({
method: 'get',
url: `accounts/${page.account}/statuses`,
url: `accounts/${page.id}/statuses`,
params: {
pinned: 'true'
}
@ -155,7 +157,7 @@ const queryFunction = async ({ queryKey, pageParam }: QueryFunctionContext<Query
})
const res2 = await apiInstance<Mastodon.Status[]>({
method: 'get',
url: `accounts/${page.account}/statuses`,
url: `accounts/${page.id}/statuses`,
params: {
exclude_replies: 'true'
}
@ -168,7 +170,7 @@ const queryFunction = async ({ queryKey, pageParam }: QueryFunctionContext<Query
} else {
return apiInstance<Mastodon.Status[]>({
method: 'get',
url: `accounts/${page.account}/statuses`,
url: `accounts/${page.id}/statuses`,
params: {
...params,
exclude_replies: page.exclude_reblogs.toString(),
@ -248,34 +250,23 @@ export type MutationVarsTimelineUpdateStatusProperty = {
type: 'updateStatusProperty'
queryKey: QueryKeyTimeline
rootQueryKey?: QueryKeyTimeline
id: Mastodon.Status['id'] | Mastodon.Poll['id']
isReblog?: boolean
status: Mastodon.Status
payload:
| {
property: 'bookmarked' | 'muted' | 'pinned'
currentValue: boolean
propertyCount?: undefined
countValue?: undefined
type: 'bookmarked' | 'muted' | 'pinned' | 'favourited'
}
| {
property: 'favourited'
currentValue: boolean
propertyCount: 'favourites_count' | 'reblogs_count'
countValue: number
}
| {
property: 'reblogged'
currentValue: boolean
propertyCount: 'favourites_count' | 'reblogs_count'
countValue: number
type: 'reblogged'
visibility: 'public' | 'unlisted'
}
| {
property: 'poll'
id: Mastodon.Poll['id']
type: 'vote' | 'refresh'
options?: boolean[]
data?: Mastodon.Poll
type: 'poll'
action: 'vote'
options: boolean[]
}
| {
type: 'poll'
action: 'refresh'
}
}
@ -324,10 +315,10 @@ export type MutationVarsTimeline =
const mutationFunction = async (params: MutationVarsTimeline) => {
switch (params.type) {
case 'updateStatusProperty':
switch (params.payload.property) {
switch (params.payload.type) {
case 'poll':
const formData = new FormData()
params.payload.type === 'vote' &&
params.payload.action === 'vote' &&
params.payload.options?.forEach((option, index) => {
if (option) {
formData.append('choices[]', index.toString())
@ -335,24 +326,33 @@ const mutationFunction = async (params: MutationVarsTimeline) => {
})
return apiInstance<Mastodon.Poll>({
method: params.payload.type === 'vote' ? 'post' : 'get',
method: params.payload.action === 'vote' ? 'post' : 'get',
url:
params.payload.type === 'vote'
? `polls/${params.payload.id}/votes`
: `polls/${params.payload.id}`,
...(params.payload.type === 'vote' && { body: formData })
params.payload.action === 'vote'
? `polls/${params.status.poll?.id}/votes`
: `polls/${params.status.poll?.id}`,
...(params.payload.action === 'vote' && { body: formData })
})
default:
let tootId = params.status.id
if (params.status._remote) {
const fetched = await searchFetchToot(params.status.uri)
if (fetched) {
tootId = fetched.id
} else {
return Promise.reject()
}
}
const body = new FormData()
if (params.payload.property === 'reblogged') {
if (params.payload.type === 'reblogged') {
body.append('visibility', params.payload.visibility)
}
return apiInstance<Mastodon.Status>({
method: 'post',
url: `statuses/${params.id}/${params.payload.currentValue ? 'un' : ''}${
MapPropertyToUrl[params.payload.property]
url: `statuses/${tootId}/${params.status[params.payload.type] ? '' : 'un'}${
MapPropertyToUrl[params.payload.type]
}`,
...(params.payload.property === 'reblogged' && { body })
...(params.payload.type === 'reblogged' && { body })
})
}
case 'updateAccountProperty':

34
src/utils/queryHooks/timeline/update/conversation.ts
View File

@ -1,34 +0,0 @@
import { MutationVarsTimelineUpdateStatusProperty } from '@utils/queryHooks/timeline'
const updateConversation = ({
item,
payload
}: {
item: Mastodon.Conversation
payload: MutationVarsTimelineUpdateStatusProperty['payload']
}) => {
switch (payload.property) {
case 'poll':
if (item.last_status) {
item.last_status[payload.property] = payload.data
}
return item
default:
if (item.last_status) {
item.last_status[payload.property] =
typeof payload.currentValue === 'boolean'
? !payload.currentValue
: true
if (payload.propertyCount) {
if (typeof payload.currentValue === 'boolean' && payload.currentValue) {
item.last_status[payload.propertyCount] = payload.countValue - 1
} else {
item.last_status[payload.propertyCount] = payload.countValue + 1
}
}
}
return item
}
}
export default updateConversation

31
src/utils/queryHooks/timeline/update/notification.ts
View File

@ -1,31 +0,0 @@
import { MutationVarsTimelineUpdateStatusProperty } from '@utils/queryHooks/timeline'
const updateNotification = ({
item,
payload
}: {
item: Mastodon.Notification
payload: MutationVarsTimelineUpdateStatusProperty['payload']
}) => {
switch (payload.property) {
case 'poll':
return item
default:
if (item.status) {
item.status[payload.property] =
typeof payload.currentValue === 'boolean'
? !payload.currentValue
: true
if (payload.propertyCount) {
if (typeof payload.currentValue === 'boolean' && payload.currentValue) {
item.status[payload.propertyCount] = payload.countValue - 1
} else {
item.status[payload.propertyCount] = payload.countValue + 1
}
}
}
return item
}
}
export default updateNotification

46
src/utils/queryHooks/timeline/update/status.ts
View File

@ -1,46 +0,0 @@
import { MutationVarsTimelineUpdateStatusProperty } from '@utils/queryHooks/timeline'
const updateStatus = ({
item,
isReblog,
payload
}: {
item: Mastodon.Status
isReblog?: boolean
payload: MutationVarsTimelineUpdateStatusProperty['payload']
}) => {
switch (payload.property) {
case 'poll':
if (isReblog) {
item.reblog!.poll = payload.data
} else {
item.poll = payload.data
}
break
default:
if (isReblog) {
item.reblog![payload.property] =
typeof payload.currentValue === 'boolean' ? !payload.currentValue : true
if (payload.propertyCount) {
if (typeof payload.currentValue === 'boolean' && payload.currentValue) {
item.reblog![payload.propertyCount] = payload.countValue - 1
} else {
item.reblog![payload.propertyCount] = payload.countValue + 1
}
}
} else {
item[payload.property] =
typeof payload.currentValue === 'boolean' ? !payload.currentValue : true
if (payload.propertyCount) {
if (typeof payload.currentValue === 'boolean' && payload.currentValue) {
item[payload.propertyCount] = payload.countValue - 1
} else {
item[payload.propertyCount] = payload.countValue + 1
}
}
}
return item
}
}
export default updateStatus

113
src/utils/queryHooks/timeline/updateStatusProperty.ts
View File

@ -1,103 +1,76 @@
import { InfiniteData } from '@tanstack/react-query'
import queryClient from '@utils/queryHooks'
import { MutationVarsTimelineUpdateStatusProperty, TimelineData } from '../timeline'
import updateConversation from './update/conversation'
import updateNotification from './update/notification'
import updateStatus from './update/status'
const updateStatusProperty = ({
queryKey,
rootQueryKey,
id,
isReblog,
payload
}: MutationVarsTimelineUpdateStatusProperty) => {
queryClient.setQueryData<InfiniteData<TimelineData> | undefined>(queryKey, old => {
status,
payload,
poll
}: MutationVarsTimelineUpdateStatusProperty & { poll?: Mastodon.Poll }) => {
for (const key of [queryKey, rootQueryKey]) {
if (!key) continue
queryClient.setQueryData<InfiniteData<TimelineData> | undefined>(key, old => {
if (old) {
let foundToot = false
let foundToot: Mastodon.Status | undefined = undefined
old.pages = old.pages.map(page => {
// Skip rest of the pages if any toot is found
if (foundToot) {
return page
} else {
if (typeof (page.body as Mastodon.Conversation[])[0].unread === 'boolean') {
const items = page.body as Mastodon.Conversation[]
const tootIndex = items.findIndex(({ last_status }) => last_status?.id === id)
if (tootIndex >= 0) {
foundToot = true
updateConversation({ item: items[tootIndex], payload })
}
foundToot = (page.body as Mastodon.Conversation[]).find(({ last_status }) =>
last_status?.reblog
? last_status.reblog.id === status.id
: last_status?.id === status.id
)?.last_status
return page
} else if (typeof (page.body as Mastodon.Notification[])[0].type === 'string') {
const items = page.body as Mastodon.Notification[]
const tootIndex = items.findIndex(({ status }) => status?.id === id)
if (tootIndex >= 0) {
foundToot = true
updateNotification({ item: items[tootIndex], payload })
}
foundToot = (page.body as Mastodon.Notification[]).find(no =>
no.status?.reblog ? no.status.reblog.id === status.id : no.status?.id === status.id
)?.status
} else {
const items = page.body as Mastodon.Status[]
const tootIndex = isReblog
? items.findIndex(({ reblog }) => reblog?.id === id)
: items.findIndex(toot => toot.id === id)
// if favourites page and notifications page, remove the item instead
if (tootIndex >= 0) {
foundToot = true
updateStatus({ item: items[tootIndex], isReblog, payload })
}
foundToot = (page.body as Mastodon.Status[]).find(toot =>
toot.reblog ? toot.reblog.id === status.id : toot.id === status.id
)
}
return page
}
})
}
return old
})
rootQueryKey &&
queryClient.setQueryData<InfiniteData<TimelineData> | undefined>(rootQueryKey, old => {
if (old) {
let foundToot = false
old.pages = old.pages.map(page => {
// Skip rest of the pages if any toot is found
if (foundToot) {
return page
} else {
if (typeof (page.body as Mastodon.Conversation[])[0].unread === 'boolean') {
const items = page.body as Mastodon.Conversation[]
const tootIndex = items.findIndex(({ last_status }) => last_status?.id === id)
if (tootIndex >= 0) {
foundToot = true
updateConversation({ item: items[tootIndex], payload })
}
return page
} else if (typeof (page.body as Mastodon.Notification[])[0].type === 'string') {
const items = page.body as Mastodon.Notification[]
const tootIndex = items.findIndex(({ status }) => status?.id === id)
if (tootIndex >= 0) {
foundToot = true
updateNotification({ item: items[tootIndex], payload })
}
} else {
const items = page.body as Mastodon.Status[]
const tootIndex = isReblog
? items.findIndex(({ reblog }) => reblog?.id === id)
: items.findIndex(toot => toot.id === id)
// if favourites page and notifications page, remove the item instead
if (tootIndex >= 0) {
foundToot = true
updateStatus({ item: items[tootIndex], isReblog, payload })
}
enum MapPropertyToCount {
favourited = 'favourites_count',
reblogged = 'reblogs_count'
}
return page
switch (payload.type) {
case 'poll':
status.poll = poll
break
default:
status[payload.type] =
typeof status[payload.type] === 'boolean' ? !status[payload.type] : true
switch (payload.type) {
case 'favourited':
case 'reblogged':
if (typeof status[payload.type] === 'boolean' && status[payload.type]) {
status[MapPropertyToCount[payload.type]]--
} else {
status[MapPropertyToCount[payload.type]]++
}
break
}
break
}
}
})
}
return old
})
}
}
export default updateStatusProperty

2
src/utils/styles/ThemeManager.tsx
View File

@ -19,7 +19,7 @@ const ManageThemeContext = createContext<ContextType>({
export const useTheme = () => useContext(ManageThemeContext)
const useColorSchemeDelay = (delay = 50) => {
const useColorSchemeDelay = (delay = 250) => {
const [colorScheme, setColorScheme] = React.useState(Appearance.getColorScheme())
const onColorSchemeChange = React.useCallback(
throttle(