2021-01-26 12:17:25 +01:00
|
|
|
import { HeaderCenter, HeaderRight } from '@components/Header'
|
2021-02-08 23:47:20 +01:00
|
|
|
import Timeline from '@components/Timeline'
|
2021-02-27 16:33:54 +01:00
|
|
|
import TimelineDefault from '@components/Timeline/Default'
|
2021-08-21 01:45:43 +02:00
|
|
|
import { createNativeStackNavigator } from '@react-navigation/native-stack'
|
2022-08-19 12:22:30 +02:00
|
|
|
import { ScreenTabsScreenProps, TabLocalStackParamList } from '@utils/navigation/navigators'
|
2022-11-14 15:54:51 +01:00
|
|
|
import usePopToTop from '@utils/navigation/usePopToTop'
|
2022-08-13 00:48:20 +02:00
|
|
|
import { useListsQuery } from '@utils/queryHooks/lists'
|
2021-02-27 16:33:54 +01:00
|
|
|
import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
|
2022-08-13 00:48:20 +02:00
|
|
|
import layoutAnimation from '@utils/styles/layoutAnimation'
|
|
|
|
import React, { useEffect, useState } from 'react'
|
2021-01-26 12:17:25 +01:00
|
|
|
import { useTranslation } from 'react-i18next'
|
2022-12-03 01:08:38 +01:00
|
|
|
import * as DropdownMenu from 'zeego/dropdown-menu'
|
2022-11-20 16:14:08 +01:00
|
|
|
import TabShared from './Shared'
|
2021-01-26 12:17:25 +01:00
|
|
|
|
2021-08-29 15:25:38 +02:00
|
|
|
const Stack = createNativeStackNavigator<TabLocalStackParamList>()
|
2021-01-30 01:29:15 +01:00
|
|
|
|
|
|
|
const TabLocal = React.memo(
|
2021-08-29 15:25:38 +02:00
|
|
|
({ navigation }: ScreenTabsScreenProps<'Tab-Local'>) => {
|
2022-08-13 00:48:20 +02:00
|
|
|
const { t } = useTranslation('screenTabs')
|
2021-01-26 12:17:25 +01:00
|
|
|
|
2022-08-13 00:48:20 +02:00
|
|
|
const { data: lists } = useListsQuery({})
|
|
|
|
useEffect(() => {
|
|
|
|
layoutAnimation()
|
2022-08-14 22:18:41 +02:00
|
|
|
}, [lists?.length])
|
2021-02-27 16:33:54 +01:00
|
|
|
|
2022-08-19 12:22:30 +02:00
|
|
|
const [queryKey, setQueryKey] = useState<QueryKeyTimeline>(['Timeline', { page: 'Following' }])
|
2021-01-26 12:17:25 +01:00
|
|
|
|
2022-11-14 15:54:51 +01:00
|
|
|
usePopToTop()
|
|
|
|
|
2021-01-26 12:17:25 +01:00
|
|
|
return (
|
2021-08-21 01:45:43 +02:00
|
|
|
<Stack.Navigator screenOptions={{ headerShadowVisible: false }}>
|
2021-01-30 01:29:15 +01:00
|
|
|
<Stack.Screen
|
|
|
|
name='Tab-Local-Root'
|
2022-08-13 00:48:20 +02:00
|
|
|
options={{
|
|
|
|
headerTitle: () => (
|
2022-12-03 01:08:38 +01:00
|
|
|
<DropdownMenu.Root>
|
|
|
|
<DropdownMenu.Trigger>
|
2022-08-14 22:18:41 +02:00
|
|
|
<HeaderCenter
|
|
|
|
dropdown={(lists?.length ?? 0) > 0}
|
|
|
|
content={
|
|
|
|
queryKey[1].page === 'List' && queryKey[1].list?.length
|
2022-08-19 12:22:30 +02:00
|
|
|
? lists?.find(list => list.id === queryKey[1].list)?.title
|
2022-08-14 22:18:41 +02:00
|
|
|
: t('tabs.local.name')
|
|
|
|
}
|
|
|
|
/>
|
2022-12-03 01:08:38 +01:00
|
|
|
</DropdownMenu.Trigger>
|
|
|
|
|
|
|
|
<DropdownMenu.Content>
|
|
|
|
{lists?.length
|
|
|
|
? [
|
|
|
|
{
|
|
|
|
key: 'default',
|
|
|
|
item: {
|
|
|
|
onSelect: () => setQueryKey(['Timeline', { page: 'Following' }]),
|
|
|
|
disabled: queryKey[1].page === 'Following',
|
|
|
|
destructive: false,
|
|
|
|
hidden: false
|
|
|
|
},
|
|
|
|
title: t('tabs.local.name'),
|
|
|
|
icon: ''
|
|
|
|
},
|
|
|
|
...lists?.map(list => ({
|
|
|
|
key: list.id,
|
|
|
|
item: {
|
|
|
|
onSelect: () =>
|
|
|
|
setQueryKey(['Timeline', { page: 'List', list: list.id }]),
|
|
|
|
disabled: queryKey[1].page === 'List' && queryKey[1].list === list.id,
|
|
|
|
destructive: false,
|
|
|
|
hidden: false
|
|
|
|
},
|
|
|
|
title: list.title,
|
|
|
|
icon: ''
|
|
|
|
}))
|
|
|
|
].map(menu => (
|
|
|
|
<DropdownMenu.Item key={menu.key} {...menu.item}>
|
|
|
|
<DropdownMenu.ItemTitle children={menu.title} />
|
|
|
|
<DropdownMenu.ItemIcon iosIconName={menu.icon} />
|
|
|
|
</DropdownMenu.Item>
|
|
|
|
))
|
|
|
|
: undefined}
|
|
|
|
</DropdownMenu.Content>
|
|
|
|
</DropdownMenu.Root>
|
2022-08-13 00:48:20 +02:00
|
|
|
),
|
|
|
|
headerRight: () => (
|
|
|
|
<HeaderRight
|
|
|
|
accessibilityLabel={t('common.search.accessibilityLabel')}
|
|
|
|
accessibilityHint={t('common.search.accessibilityHint')}
|
|
|
|
content='Search'
|
2022-11-29 23:44:11 +01:00
|
|
|
onPress={() =>
|
2022-08-13 00:48:20 +02:00
|
|
|
navigation.navigate('Tab-Local', {
|
|
|
|
screen: 'Tab-Shared-Search',
|
|
|
|
params: { text: undefined }
|
|
|
|
})
|
2022-11-29 23:44:11 +01:00
|
|
|
}
|
2022-08-13 00:48:20 +02:00
|
|
|
/>
|
|
|
|
)
|
|
|
|
}}
|
|
|
|
children={() => (
|
2022-08-14 22:18:41 +02:00
|
|
|
<Timeline
|
|
|
|
queryKey={queryKey}
|
|
|
|
lookback='Following'
|
|
|
|
customProps={{
|
2022-08-19 12:22:30 +02:00
|
|
|
renderItem: ({ item }) => <TimelineDefault item={item} queryKey={queryKey} />
|
2022-08-14 22:18:41 +02:00
|
|
|
}}
|
|
|
|
/>
|
2022-08-13 00:48:20 +02:00
|
|
|
)}
|
2021-02-08 23:19:55 +01:00
|
|
|
/>
|
2022-11-20 16:14:08 +01:00
|
|
|
{TabShared({ Stack })}
|
2021-01-26 12:17:25 +01:00
|
|
|
</Stack.Navigator>
|
|
|
|
)
|
2021-01-22 01:34:20 +01:00
|
|
|
},
|
|
|
|
() => true
|
|
|
|
)
|
2020-10-31 21:04:46 +01:00
|
|
|
|
2021-01-30 01:29:15 +01:00
|
|
|
export default TabLocal
|