diff --git a/src/components/Header/Center.tsx b/src/components/Header/Center.tsx index bd868a3d..efbccd30 100644 --- a/src/components/Header/Center.tsx +++ b/src/components/Header/Center.tsx @@ -3,27 +3,30 @@ import { useTheme } from '@utils/styles/ThemeManager' import React from 'react' export interface Props { - content: string + content: React.ReactNode | string inverted?: boolean + onPress?: () => void } // Used for Android mostly -const HeaderCenter = React.memo( - ({ content, inverted = false }: Props) => { - const { colors } = useTheme() +const HeaderCenter: React.FC = ({ + content, + inverted = false, + onPress +}) => { + const { colors } = useTheme() - return ( - - ) - }, - (prev, next) => prev.content === next.content -) + return ( + + ) +} export default HeaderCenter diff --git a/src/screens/Tabs/Local.tsx b/src/screens/Tabs/Local.tsx index 30c073fd..b46f5b79 100644 --- a/src/screens/Tabs/Local.tsx +++ b/src/screens/Tabs/Local.tsx @@ -1,5 +1,7 @@ import analytics from '@components/analytics' import { HeaderCenter, HeaderRight } from '@components/Header' +import Icon from '@components/Icon' +import CustomText from '@components/Text' import Timeline from '@components/Timeline' import TimelineDefault from '@components/Timeline/Default' import { createNativeStackNavigator } from '@react-navigation/native-stack' @@ -7,64 +9,141 @@ import { ScreenTabsScreenProps, TabLocalStackParamList } from '@utils/navigation/navigators' +import { useListsQuery } from '@utils/queryHooks/lists' import { QueryKeyTimeline } from '@utils/queryHooks/timeline' -import React, { useCallback, useMemo } from 'react' +import { StyleConstants } from '@utils/styles/constants' +import layoutAnimation from '@utils/styles/layoutAnimation' +import { useTheme } from '@utils/styles/ThemeManager' +import React, { useEffect, useState } from 'react' import { useTranslation } from 'react-i18next' -import { Platform } from 'react-native' +import { Pressable, StyleSheet, Text, View } from 'react-native' import TabSharedRoot from './Shared/Root' const Stack = createNativeStackNavigator() const TabLocal = React.memo( ({ navigation }: ScreenTabsScreenProps<'Tab-Local'>) => { - const { t, i18n } = useTranslation('screenTabs') + const { colors } = useTheme() + const { t } = useTranslation('screenTabs') - const screenOptionsRoot = useMemo( - () => ({ - title: t('tabs.local.name'), - ...(Platform.OS === 'android' && { - headerCenter: () => - }), - headerRight: () => ( - { - analytics('search_tap', { page: 'Local' }) - navigation.navigate('Tab-Local', { - screen: 'Tab-Shared-Search', - params: { text: undefined } - }) - }} - /> - ) - }), - [i18n.language] - ) + const { data: lists } = useListsQuery({}) + const [listsShown, setListsShown] = useState(false) + useEffect(() => { + layoutAnimation() + }, [listsShown]) - const queryKey: QueryKeyTimeline = ['Timeline', { page: 'Following' }] - const children = useCallback( - () => ( - ( - - ) - }} - /> - ), - [] - ) + const [queryKey, setQueryKey] = useState([ + 'Timeline', + { page: 'Following' } + ]) return ( ( + { + if (lists?.length) { + setListsShown(!listsShown) + } + }} + content={ + <> + {t('tabs.local.name')} + {lists?.length ? ( + + ) : null} + + } + /> + ), + headerRight: () => ( + { + analytics('search_tap', { page: 'Local' }) + navigation.navigate('Tab-Local', { + screen: 'Tab-Shared-Search', + params: { text: undefined } + }) + }} + /> + ) + }} + children={() => ( + <> + ( + + ) + }} + /> + {listsShown ? ( + + { + setQueryKey(['Timeline', { page: 'Following' }]) + setListsShown(!listsShown) + }} + > + + Default + + + {lists?.map(list => ( + { + setQueryKey([ + 'Timeline', + { page: 'List', list: list.id } + ]) + setListsShown(!listsShown) + }} + > + + {list.title} + + + ))} + + ) : null} + + )} /> {TabSharedRoot({ Stack })}