mirror of https://github.com/tooot-app/app
80 lines
2.6 KiB
TypeScript
80 lines
2.6 KiB
TypeScript
import Icon from '@components/Icon'
|
|
import { displayMessage } from '@components/Message'
|
|
import Timeline from '@components/Timeline'
|
|
import { NativeStackScreenProps } from '@react-navigation/native-stack'
|
|
import { useQueryClient } from '@tanstack/react-query'
|
|
import { TabMeStackParamList } from '@utils/navigation/navigators'
|
|
import { QueryKeyLists, useListsMutation } from '@utils/queryHooks/lists'
|
|
import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
|
|
import { StyleConstants } from '@utils/styles/constants'
|
|
import { useTheme } from '@utils/styles/ThemeManager'
|
|
import React, { useEffect } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import * as DropdownMenu from 'zeego/dropdown-menu'
|
|
import { menuListAccounts, menuListDelete, menuListEdit } from './menus'
|
|
|
|
const TabMeList: React.FC<NativeStackScreenProps<TabMeStackParamList, 'Tab-Me-List'>> = ({
|
|
navigation,
|
|
route: {
|
|
key,
|
|
params: { list }
|
|
}
|
|
}) => {
|
|
const { colors } = useTheme()
|
|
const { t } = useTranslation(['common', 'screenTabs'])
|
|
const queryKey: QueryKeyTimeline = ['Timeline', { page: 'List', list: list.id }]
|
|
|
|
const queryKeyLists: QueryKeyLists = ['Lists']
|
|
const queryClient = useQueryClient()
|
|
const mutation = useListsMutation({
|
|
onSuccess: () => {
|
|
queryClient.refetchQueries(queryKeyLists)
|
|
navigation.pop(1)
|
|
},
|
|
onError: () => {
|
|
displayMessage({
|
|
type: 'danger',
|
|
message: t('common:message.error.message', {
|
|
function: t('screenTabs:me.listDelete.heading')
|
|
})
|
|
})
|
|
}
|
|
})
|
|
|
|
useEffect(() => {
|
|
const listAccounts = menuListAccounts({ list })
|
|
const listEdit = menuListEdit({ list, key })
|
|
const listDelete = menuListDelete({ list, mutation })
|
|
|
|
navigation.setOptions({
|
|
headerRight: () => (
|
|
<DropdownMenu.Root>
|
|
<DropdownMenu.Trigger>
|
|
<Icon
|
|
name='MoreHorizontal'
|
|
size={StyleConstants.Spacing.M * 1.25}
|
|
color={colors.primaryDefault}
|
|
/>
|
|
</DropdownMenu.Trigger>
|
|
|
|
<DropdownMenu.Content>
|
|
{[listAccounts, listEdit, listDelete].map((menu, index) => (
|
|
<DropdownMenu.Group key={index}>
|
|
<DropdownMenu.Item key={menu.key} onSelect={menu.onSelect}>
|
|
<DropdownMenu.ItemTitle children={menu.title} />
|
|
<DropdownMenu.ItemIcon ios={{ name: menu.icon }} />
|
|
</DropdownMenu.Item>
|
|
</DropdownMenu.Group>
|
|
))}
|
|
</DropdownMenu.Content>
|
|
</DropdownMenu.Root>
|
|
)
|
|
})
|
|
navigation.setParams({ queryKey })
|
|
}, [list])
|
|
|
|
return <Timeline queryKey={queryKey} />
|
|
}
|
|
|
|
export default TabMeList
|