diff --git a/src/screens/Tabs/Shared/Account.tsx b/src/screens/Tabs/Shared/Account.tsx index c36ee564..758071c0 100644 --- a/src/screens/Tabs/Shared/Account.tsx +++ b/src/screens/Tabs/Shared/Account.tsx @@ -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 const mAccount = menuAccount({ type: 'account', openChange: true, account }) useEffect(() => { navigation.setOptions({ + headerTransparent: true, + headerStyle: { + backgroundColor: `rgba(255, 255, 255, 0)` + }, + title: '', + headerLeft: () => navigation.goBack()} background />, headerRight: () => { return ( diff --git a/src/screens/Tabs/Shared/AccountInLists.tsx b/src/screens/Tabs/Shared/AccountInLists.tsx index 4cc2900f..8628c41c 100644 --- a/src/screens/Tabs/Shared/AccountInLists.tsx +++ b/src/screens/Tabs/Shared/AccountInLists.tsx @@ -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 ( !accountInListsQuery.data?.filter(d => d.id === id).length + listsQuery?.data?.filter( + ({ id }) => !accountInListsQuery?.data?.filter(d => d.id === id)?.length ) || [] } ] diff --git a/src/screens/Tabs/Shared/Attachments.tsx b/src/screens/Tabs/Shared/Attachments.tsx index 773b3938..948d2552 100644 --- a/src/screens/Tabs/Shared/Attachments.tsx +++ b/src/screens/Tabs/Shared/Attachments.tsx @@ -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> = ({ + navigation, route: { params: { account } } }) => { + const { colors } = useTheme() + + useEffect(() => { + navigation.setOptions({ + headerLeft: () => navigation.goBack()} background />, + headerTitle: () => ( + + , + + ]} + /> + + ) + }) + }, []) + const queryKey: QueryKeyTimeline = [ 'Timeline', { page: 'Account_Attachments', account: account.id } ] + return ( ( - - ) + renderItem: ({ item }) => }} /> ) diff --git a/src/screens/Tabs/Shared/Hashtag.tsx b/src/screens/Tabs/Shared/Hashtag.tsx index e905e8a7..541f822b 100644 --- a/src/screens/Tabs/Shared/Hashtag.tsx +++ b/src/screens/Tabs/Shared/Hashtag.tsx @@ -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 params: { hashtag } } }) => { + useEffect(() => { + navigation.setOptions({ + headerLeft: () => navigation.goBack()} />, + title: `#${decodeURIComponent(hashtag)}` + }) + }, []) + const queryKey: QueryKeyTimeline = ['Timeline', { page: 'Hashtag', hashtag }] const { theme } = useTheme() diff --git a/src/screens/Tabs/Shared/History.tsx b/src/screens/Tabs/Shared/History.tsx index 0fd08519..ea8ef633 100644 --- a/src/screens/Tabs/Shared/History.tsx +++ b/src/screens/Tabs/Shared/History.tsx @@ -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 ( <> ( - + - + )) : null} - {Array.isArray(history.media_attachments) && - history.media_attachments.length ? ( + {Array.isArray(history.media_attachments) && history.media_attachments.length ? ( ) : null} @@ -73,15 +67,22 @@ const ContentView = ({ ) } -const TabSharedHistory: React.FC< - TabSharedStackScreenProps<'Tab-Shared-History'> -> = ({ +const TabSharedHistory: React.FC> = ({ + navigation, route: { params: { id } } }) => { + const { t } = useTranslation('screenTabs') const { data } = useStatusHistory({ id }) + useEffect(() => { + navigation.setOptions({ + title: t('shared.history.name'), + headerLeft: () => navigation.goBack()} /> + }) + }, []) + return ( {data && data.length > 0 @@ -90,12 +91,7 @@ const TabSharedHistory: React.FC< .reverse() .map((d, i) => i !== 0 ? ( - + ) : null ) : null} diff --git a/src/screens/Tabs/Shared/Search.tsx b/src/screens/Tabs/Shared/Search.tsx index 1cf14e3f..72843e40 100644 --- a/src/screens/Tabs/Shared/Search.tsx +++ b/src/screens/Tabs/Shared/Search.tsx @@ -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> = ({ + navigation, route: { params: { text } } }) => { const { t } = useTranslation('screenTabs') - const { colors } = useTheme() + const { colors, mode } = useTheme() + + useEffect(() => { + navigation.setOptions({ + ...(Platform.OS === 'ios' + ? { + headerLeft: () => navigation.goBack()} /> + } + : { headerLeft: () => null }), + headerTitle: () => { + const onChangeText = debounce((text: string) => navigation.setParams({ text }), 1000, { + trailing: true + }) + return ( + + + navigation.setParams({ text })} + placeholder={t('shared.search.header.placeholder')} + placeholderTextColor={colors.secondary} + returnKeyType='go' + /> + + ) + } + }) + }, []) const mapKeyToTranslations = { accounts: t('shared.search.sections.accounts'), diff --git a/src/screens/Tabs/Shared/Toot.tsx b/src/screens/Tabs/Shared/Toot.tsx index 1c2dca2d..dbd59181 100644 --- a/src/screens/Tabs/Shared/Toot.tsx +++ b/src/screens/Tabs/Shared/Toot.tsx @@ -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> = ({ + navigation, route: { params: { toot, rootQueryKey } } }) => { + const { t } = useTranslation('screenTabs') + + useEffect(() => { + navigation.setOptions({ + title: t('shared.toot.name'), + headerLeft: () => navigation.goBack()} /> + }) + }, []) + const queryKey: QueryKeyTimeline = ['Timeline', { page: 'Toot', toot: toot.id }] const flRef = useRef(null) const [itemsLength, setItemsLength] = useState(0) const scrolled = useRef(false) - const navigation = useNavigation() const queryClient = useQueryClient() const observer = new InfiniteQueryObserver(queryClient, { queryKey, diff --git a/src/screens/Tabs/Shared/Users.tsx b/src/screens/Tabs/Shared/Users.tsx index e6356b44..d1a6fdf7 100644 --- a/src/screens/Tabs/Shared/Users.tsx +++ b/src/screens/Tabs/Shared/Users.tsx @@ -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> = ({ + navigation, + route: { params } +}) => { + const { t } = useTranslation('screenTabs') + useEffect(() => { + navigation.setOptions({ + title: t(`shared.users.${params.reference}.${params.type}`, { count: params.count }), + headerLeft: () => 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 ( - ( - - )} - 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 ( + } + onEndReached={onEndReached} + onEndReachedThreshold={0.75} + ItemSeparatorComponent={ComponentSeparator} + maintainVisibleContentPosition={{ + minIndexForVisible: 0, + autoscrollToTopThreshold: 2 + }} + /> + ) +} export default TabSharedUsers diff --git a/src/screens/Tabs/Shared/index.tsx b/src/screens/Tabs/Shared/index.tsx index 131079dc..bf07e7fe 100644 --- a/src/screens/Tabs/Shared/index.tsx +++ b/src/screens/Tabs/Shared/index.tsx @@ -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 }) => { @@ -23,167 +16,35 @@ const TabShared = ({ Stack }: { Stack: ReturnType ({ - headerLeft: () => navigation.goBack()} /> - })} - > + ) => { - return { - headerTransparent: true, - headerStyle: { - backgroundColor: `rgba(255, 255, 255, 0)` - }, - title: '', - headerLeft: () => navigation.goBack()} background /> - } - }} /> - - ) => { - return { - headerTitle: () => ( - - , - - ]} - /> - - ) - } - }} /> - ) => ({ - title: `#${decodeURIComponent(route.params.hashtag)}` - })} /> - - - ) => ({ - ...(Platform.OS === 'ios' - ? { - headerLeft: () => navigation.goBack()} /> - } - : { headerLeft: () => null }), - headerTitle: () => { - const onChangeText = debounce((text: string) => navigation.setParams({ text }), 1000, { - trailing: true - }) - return ( - - - navigation.setParams({ text })} - placeholder={t('shared.search.header.placeholder')} - placeholderTextColor={colors.secondary} - returnKeyType='go' - /> - - ) - } - })} - /> - - - - ) => ({ - title: t(`shared.users.${reference}.${type}`, { count }), - ...(Platform.OS === 'android' && { - headerCenter: () => ( - - ) - }) - })} /> + + + ) }