octo/tooot
octo
/
tooot
mirror of https://github.com/tooot-app/app
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Move screen options into each screen

This commit is contained in:
xmflsct 2022-12-03 16:50:54 +01:00
parent ddfd3a830d
commit 6a9f951dba
9 changed files with 203 additions and 232 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,6 @@
import menuAccount from '@components/contextMenu/account'
import menuShare from '@components/contextMenu/share'
import { HeaderRight } from '@components/Header'
import { HeaderLeft, HeaderRight } from '@components/Header'
import Timeline from '@components/Timeline'
import TimelineDefault from '@components/Timeline/Default'
import SegmentedControl from '@react-native-community/segmented-control'
@ -33,6 +33,12 @@ const TabSharedAccount: React.FC<TabSharedStackScreenProps<'Tab-Shared-Account'>
const mAccount = menuAccount({ type: 'account', openChange: true, account })
useEffect(() => {
navigation.setOptions({
headerTransparent: true,
headerStyle: {
backgroundColor: `rgba(255, 255, 255, 0)`
},
title: '',
headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} background />,
headerRight: () => {
return (
<DropdownMenu.Root>

7
src/screens/Tabs/Shared/AccountInLists.tsx
View File

@ -10,7 +10,7 @@ import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React, { useEffect } from 'react'
import { useTranslation } from 'react-i18next'
import { SectionList, Text, View } from 'react-native'
import { SectionList, View } from 'react-native'
const TabSharedAccountInLists: React.FC<
TabSharedStackScreenProps<'Tab-Shared-Account-In-Lists'>
@ -27,7 +27,6 @@ const TabSharedAccountInLists: React.FC<
navigation.setOptions({
presentation: 'modal',
title: t('shared.accountInLists.name', { username: account.username }),
headerLeft: () => null,
headerRight: () => {
return (
<HeaderRight
@ -49,8 +48,8 @@ const TabSharedAccountInLists: React.FC<
id: 'out',
title: t('shared.accountInLists.notInLists'),
data:
listsQuery.data?.filter(
({ id }) => !accountInListsQuery.data?.filter(d => d.id === id).length
listsQuery?.data?.filter(
({ id }) => !accountInListsQuery?.data?.filter(d => d.id === id)?.length
) || []
}
]

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

@ -1,27 +1,57 @@
import { HeaderLeft } from '@components/Header'
import { ParseEmojis } from '@components/Parse'
import CustomText from '@components/Text'
import Timeline from '@components/Timeline'
import TimelineDefault from '@components/Timeline/Default'
import { TabSharedStackScreenProps } from '@utils/navigation/navigators'
import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
import React from 'react'
import { useTheme } from '@utils/styles/ThemeManager'
import React, { useEffect } from 'react'
import { Trans } from 'react-i18next'
const TabSharedAttachments: React.FC<
TabSharedStackScreenProps<'Tab-Shared-Attachments'>
> = ({
const TabSharedAttachments: React.FC<TabSharedStackScreenProps<'Tab-Shared-Attachments'>> = ({
navigation,
route: {
params: { account }
}
}) => {
const { colors } = useTheme()
useEffect(() => {
navigation.setOptions({
headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} background />,
headerTitle: () => (
<CustomText numberOfLines={1}>
<Trans
i18nKey='screenTabs:shared.attachments.name'
components={[
<ParseEmojis
content={account.display_name || account.username}
emojis={account.emojis}
fontBold
/>,
<CustomText
fontStyle='M'
style={{ color: colors.primaryDefault }}
fontWeight='Bold'
/>
]}
/>
</CustomText>
)
})
}, [])
const queryKey: QueryKeyTimeline = [
'Timeline',
{ page: 'Account_Attachments', account: account.id }
]
return (
<Timeline
queryKey={queryKey}
customProps={{
renderItem: ({ item }) => (
<TimelineDefault item={item} queryKey={queryKey} />
)
renderItem: ({ item }) => <TimelineDefault item={item} queryKey={queryKey} />
}}
/>
)

9
src/screens/Tabs/Shared/Hashtag.tsx
View File

@ -1,5 +1,5 @@
import haptics from '@components/haptics'
import { HeaderRight } from '@components/Header'
import { HeaderLeft, HeaderRight } from '@components/Header'
import { displayMessage } from '@components/Message'
import Timeline from '@components/Timeline'
import TimelineDefault from '@components/Timeline/Default'
@ -18,6 +18,13 @@ const TabSharedHashtag: React.FC<TabSharedStackScreenProps<'Tab-Shared-Hashtag'>
params: { hashtag }
}
}) => {
useEffect(() => {
navigation.setOptions({
headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} />,
title: `#${decodeURIComponent(hashtag)}`
})
}, [])
const queryKey: QueryKeyTimeline = ['Timeline', { page: 'Hashtag', hashtag }]
const { theme } = useTheme()

42
src/screens/Tabs/Shared/History.tsx
View File

@ -1,3 +1,4 @@
import { HeaderLeft } from '@components/Header'
import Icon from '@components/Icon'
import { ParseEmojis } from '@components/Parse'
import ComponentSeparator from '@components/Separator'
@ -9,7 +10,8 @@ import { TabSharedStackScreenProps } 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 React, { useEffect } from 'react'
import { useTranslation } from 'react-i18next'
import { View } from 'react-native'
import { ScrollView } from 'react-native-gesture-handler'
@ -23,6 +25,7 @@ const ContentView = ({
last: boolean
}) => {
const { colors } = useTheme()
return (
<>
<View
@ -37,16 +40,11 @@ const ContentView = ({
) : null}
{history.poll
? history.poll.options.map((option, index) => (
<View
key={index}
style={{ flex: 1, paddingVertical: StyleConstants.Spacing.S }}
>
<View key={index} style={{ flex: 1, paddingVertical: StyleConstants.Spacing.S }}>
<View style={{ flex: 1, flexDirection: 'row' }}>
<Icon
style={{
paddingTop:
StyleConstants.Font.LineHeight.M -
StyleConstants.Font.Size.M,
paddingTop: StyleConstants.Font.LineHeight.M - StyleConstants.Font.Size.M,
marginRight: StyleConstants.Spacing.S
}}
name='Circle'
@ -54,17 +52,13 @@ const ContentView = ({
color={colors.disabled}
/>
<CustomText style={{ flex: 1 }}>
<ParseEmojis
content={option.title}
emojis={history.poll?.emojis}
/>
<ParseEmojis content={option.title} emojis={history.poll?.emojis} />
</CustomText>
</View>
</View>
))
: null}
{Array.isArray(history.media_attachments) &&
history.media_attachments.length ? (
{Array.isArray(history.media_attachments) && history.media_attachments.length ? (
<TimelineAttachment status={history} />
) : null}
</View>
@ -73,15 +67,22 @@ const ContentView = ({
)
}
const TabSharedHistory: React.FC<
TabSharedStackScreenProps<'Tab-Shared-History'>
> = ({
const TabSharedHistory: React.FC<TabSharedStackScreenProps<'Tab-Shared-History'>> = ({
navigation,
route: {
params: { id }
}
}) => {
const { t } = useTranslation('screenTabs')
const { data } = useStatusHistory({ id })
useEffect(() => {
navigation.setOptions({
title: t('shared.history.name'),
headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} />
})
}, [])
return (
<ScrollView>
{data && data.length > 0
@ -90,12 +91,7 @@ const TabSharedHistory: React.FC<
.reverse()
.map((d, i) =>
i !== 0 ? (
<ContentView
key={i}
history={d}
first={i === 1}
last={i === data.length - 1}
/>
<ContentView key={i} history={d} first={i === 1} last={i === data.length - 1} />
) : null
)
: null}

69
src/screens/Tabs/Shared/Search.tsx
View File

@ -1,5 +1,6 @@
import ComponentAccount from '@components/Account'
import ComponentHashtag from '@components/Hashtag'
import { HeaderLeft } from '@components/Header'
import ComponentSeparator from '@components/Separator'
import CustomText from '@components/Text'
import TimelineDefault from '@components/Timeline/Default'
@ -7,18 +8,80 @@ import { TabSharedStackScreenProps } from '@utils/navigation/navigators'
import { useSearchQuery } from '@utils/queryHooks/search'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React, { useCallback, useMemo } from 'react'
import { debounce } from 'lodash'
import React, { useCallback, useEffect, useMemo } from 'react'
import { Trans, useTranslation } from 'react-i18next'
import { KeyboardAvoidingView, Platform, SectionList, StyleSheet, View } from 'react-native'
import {
KeyboardAvoidingView,
Platform,
SectionList,
StyleSheet,
TextInput,
View
} from 'react-native'
import { Circle } from 'react-native-animated-spinkit'
const TabSharedSearch: React.FC<TabSharedStackScreenProps<'Tab-Shared-Search'>> = ({
navigation,
route: {
params: { text }
}
}) => {
const { t } = useTranslation('screenTabs')
const { colors } = useTheme()
const { colors, mode } = useTheme()
useEffect(() => {
navigation.setOptions({
...(Platform.OS === 'ios'
? {
headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} />
}
: { headerLeft: () => null }),
headerTitle: () => {
const onChangeText = debounce((text: string) => navigation.setParams({ text }), 1000, {
trailing: true
})
return (
<View
style={{
flexBasis: '80%',
flexDirection: 'row',
alignItems: 'center'
}}
>
<TextInput
editable={false}
style={{
fontSize: StyleConstants.Font.Size.M,
color: colors.primaryDefault
}}
defaultValue={t('shared.search.header.prefix')}
/>
<TextInput
accessibilityRole='search'
keyboardAppearance={mode}
style={{
fontSize: StyleConstants.Font.Size.M,
flex: 1,
color: colors.primaryDefault,
paddingLeft: StyleConstants.Spacing.XS
}}
autoFocus
onChangeText={onChangeText}
autoCapitalize='none'
autoCorrect={false}
clearButtonMode='never'
keyboardType='web-search'
onSubmitEditing={({ nativeEvent: { text } }) => navigation.setParams({ text })}
placeholder={t('shared.search.header.placeholder')}
placeholderTextColor={colors.secondary}
returnKeyType='go'
/>
</View>
)
}
})
}, [])
const mapKeyToTranslations = {
accounts: t('shared.search.sections.accounts'),

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

@ -1,24 +1,34 @@
import { HeaderLeft } from '@components/Header'
import Timeline from '@components/Timeline'
import TimelineDefault from '@components/Timeline/Default'
import { useNavigation } from '@react-navigation/native'
import { TabSharedStackScreenProps } from '@utils/navigation/navigators'
import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
import React, { useEffect, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { FlatList } from 'react-native'
import { InfiniteQueryObserver, useQueryClient } from 'react-query'
const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
navigation,
route: {
params: { toot, rootQueryKey }
}
}) => {
const { t } = useTranslation('screenTabs')
useEffect(() => {
navigation.setOptions({
title: t('shared.toot.name'),
headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} />
})
}, [])
const queryKey: QueryKeyTimeline = ['Timeline', { page: 'Toot', toot: toot.id }]
const flRef = useRef<FlatList>(null)
const [itemsLength, setItemsLength] = useState(0)
const scrolled = useRef(false)
const navigation = useNavigation()
const queryClient = useQueryClient()
const observer = new InfiniteQueryObserver(queryClient, {
queryKey,

93
src/screens/Tabs/Shared/Users.tsx
View File

@ -1,58 +1,57 @@
import ComponentAccount from '@components/Account'
import { HeaderLeft } from '@components/Header'
import ComponentSeparator from '@components/Separator'
import { TabSharedStackScreenProps } from '@utils/navigation/navigators'
import { QueryKeyUsers, useUsersQuery } from '@utils/queryHooks/users'
import React, { useCallback } from 'react'
import { StyleSheet } from 'react-native'
import React, { useCallback, useEffect } from 'react'
import { useTranslation } from 'react-i18next'
import { FlatList } from 'react-native-gesture-handler'
const TabSharedUsers = React.memo(
({ route: { params } }: TabSharedStackScreenProps<'Tab-Shared-Users'>) => {
const queryKey: QueryKeyUsers = ['Users', params]
const { data, hasNextPage, fetchNextPage, isFetchingNextPage } =
useUsersQuery({
...queryKey[1],
options: {
getPreviousPageParam: firstPage =>
firstPage.links?.prev && { since_id: firstPage.links.next },
getNextPageParam: lastPage =>
lastPage.links?.next && { max_id: lastPage.links.next }
}
})
const flattenData = data?.pages
? data.pages.flatMap(page => [...page.body])
: []
const TabSharedUsers: React.FC<TabSharedStackScreenProps<'Tab-Shared-Users'>> = ({
navigation,
route: { params }
}) => {
const { t } = useTranslation('screenTabs')
useEffect(() => {
navigation.setOptions({
title: t(`shared.users.${params.reference}.${params.type}`, { count: params.count }),
headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} />
})
}, [])
const onEndReached = useCallback(
() => hasNextPage && !isFetchingNextPage && fetchNextPage(),
[hasNextPage, isFetchingNextPage]
)
const queryKey: QueryKeyUsers = ['Users', params]
const { data, hasNextPage, fetchNextPage, isFetchingNextPage } = useUsersQuery({
...queryKey[1],
options: {
getPreviousPageParam: firstPage =>
firstPage.links?.prev && { since_id: firstPage.links.next },
getNextPageParam: lastPage => lastPage.links?.next && { max_id: lastPage.links.next }
}
})
const flattenData = data?.pages ? data.pages.flatMap(page => [...page.body]) : []
return (
<FlatList
windowSize={7}
data={flattenData}
style={styles.flatList}
renderItem={({ item }) => (
<ComponentAccount account={item} />
)}
onEndReached={onEndReached}
onEndReachedThreshold={0.75}
ItemSeparatorComponent={ComponentSeparator}
maintainVisibleContentPosition={{
minIndexForVisible: 0,
autoscrollToTopThreshold: 2
}}
/>
)
},
() => true
)
const onEndReached = useCallback(
() => hasNextPage && !isFetchingNextPage && fetchNextPage(),
[hasNextPage, isFetchingNextPage]
)
const styles = StyleSheet.create({
flatList: {
minHeight: '100%'
}
})
return (
<FlatList
windowSize={7}
data={flattenData}
style={{
minHeight: '100%'
}}
renderItem={({ item }) => <ComponentAccount account={item} />}
onEndReached={onEndReached}
onEndReachedThreshold={0.75}
ItemSeparatorComponent={ComponentSeparator}
maintainVisibleContentPosition={{
minIndexForVisible: 0,
autoscrollToTopThreshold: 2
}}
/>
)
}
export default TabSharedUsers

149
src/screens/Tabs/Shared/index.tsx
View File

@ -1,6 +1,3 @@
import { HeaderCenter, HeaderLeft } from '@components/Header'
import { ParseEmojis } from '@components/Parse'
import CustomText from '@components/Text'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import TabSharedAccount from '@screens/Tabs/Shared/Account'
import TabSharedAttachments from '@screens/Tabs/Shared/Attachments'
@ -9,13 +6,9 @@ import TabSharedHistory from '@screens/Tabs/Shared/History'
import TabSharedSearch from '@screens/Tabs/Shared/Search'
import TabSharedToot from '@screens/Tabs/Shared/Toot'
import TabSharedUsers from '@screens/Tabs/Shared/Users'
import { TabSharedStackScreenProps } from '@utils/navigation/navigators'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import { debounce } from 'lodash'
import React from 'react'
import { Trans, useTranslation } from 'react-i18next'
import { Platform, TextInput, View } from 'react-native'
import { useTranslation } from 'react-i18next'
import TabSharedAccountInLists from './AccountInLists'
const TabShared = ({ Stack }: { Stack: ReturnType<typeof createNativeStackNavigator> }) => {
@ -23,167 +16,35 @@ const TabShared = ({ Stack }: { Stack: ReturnType<typeof createNativeStackNaviga
const { t } = useTranslation('screenTabs')
return (
<Stack.Group
screenOptions={({ navigation }) => ({
headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} />
})}
>
<Stack.Group>
<Stack.Screen
key='Tab-Shared-Account'
name='Tab-Shared-Account'
component={TabSharedAccount}
options={({
navigation,
route: {
params: { account }
}
}: TabSharedStackScreenProps<'Tab-Shared-Account'>) => {
return {
headerTransparent: true,
headerStyle: {
backgroundColor: `rgba(255, 255, 255, 0)`
},
title: '',
headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} background />
}
}}
/>
<Stack.Screen
key='Tab-Shared-Account-In-Lists'
name='Tab-Shared-Account-In-Lists'
component={TabSharedAccountInLists}
/>
<Stack.Screen
key='Tab-Shared-Attachments'
name='Tab-Shared-Attachments'
component={TabSharedAttachments}
options={({
route: {
params: { account }
}
}: TabSharedStackScreenProps<'Tab-Shared-Attachments'>) => {
return {
headerTitle: () => (
<CustomText numberOfLines={1}>
<Trans
i18nKey='screenTabs:shared.attachments.name'
components={[
<ParseEmojis
content={account.display_name || account.username}
emojis={account.emojis}
fontBold
/>,
<CustomText
fontStyle='M'
style={{ color: colors.primaryDefault }}
fontWeight='Bold'
/>
]}
/>
</CustomText>
)
}
}}
/>
<Stack.Screen
key='Tab-Shared-Hashtag'
name='Tab-Shared-Hashtag'
component={TabSharedHashtag}
options={({ route }: TabSharedStackScreenProps<'Tab-Shared-Hashtag'>) => ({
title: `#${decodeURIComponent(route.params.hashtag)}`
})}
/>
<Stack.Screen
key='Tab-Shared-History'
name='Tab-Shared-History'
component={TabSharedHistory}
options={{ title: t('screenTabs:shared.history.name') }}
/>
<Stack.Screen
key='Tab-Shared-Search'
name='Tab-Shared-Search'
component={TabSharedSearch}
options={({ navigation }: TabSharedStackScreenProps<'Tab-Shared-Search'>) => ({
...(Platform.OS === 'ios'
? {
headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} />
}
: { headerLeft: () => null }),
headerTitle: () => {
const onChangeText = debounce((text: string) => navigation.setParams({ text }), 1000, {
trailing: true
})
return (
<View
style={{
flexBasis: '80%',
flexDirection: 'row',
alignItems: 'center'
}}
>
<TextInput
editable={false}
style={{
fontSize: StyleConstants.Font.Size.M,
color: colors.primaryDefault
}}
defaultValue={t('shared.search.header.prefix')}
/>
<TextInput
accessibilityRole='search'
keyboardAppearance={mode}
style={{
fontSize: StyleConstants.Font.Size.M,
flex: 1,
color: colors.primaryDefault,
paddingLeft: StyleConstants.Spacing.XS
}}
autoFocus
onChangeText={onChangeText}
autoCapitalize='none'
autoCorrect={false}
clearButtonMode='never'
keyboardType='web-search'
onSubmitEditing={({ nativeEvent: { text } }) => navigation.setParams({ text })}
placeholder={t('shared.search.header.placeholder')}
placeholderTextColor={colors.secondary}
returnKeyType='go'
/>
</View>
)
}
})}
/>
<Stack.Screen
key='Tab-Shared-Toot'
name='Tab-Shared-Toot'
component={TabSharedToot}
options={{ title: t('shared.toot.name') }}
/>
<Stack.Screen
key='Tab-Shared-Users'
name='Tab-Shared-Users'
component={TabSharedUsers}
options={({
route: {
params: { reference, type, count }
}
}: TabSharedStackScreenProps<'Tab-Shared-Users'>) => ({
title: t(`shared.users.${reference}.${type}`, { count }),
...(Platform.OS === 'android' && {
headerCenter: () => (
<HeaderCenter content={t(`shared.users.${reference}.${type}`, { count })} />
)
})
})}
/>
<Stack.Screen key='Tab-Shared-Search' name='Tab-Shared-Search' component={TabSharedSearch} />
<Stack.Screen key='Tab-Shared-Toot' name='Tab-Shared-Toot' component={TabSharedToot} />
<Stack.Screen key='Tab-Shared-Users' name='Tab-Shared-Users' component={TabSharedUsers} />
</Stack.Group>
)
}