tooot/src/screens/Tabs/Me/Root/Collections.tsx

88 lines
2.6 KiB
TypeScript

import { MenuContainer, MenuRow } from '@components/Menu'
import { useNavigation } from '@react-navigation/native'
import { useAnnouncementQuery } from '@utils/queryHooks/announcement'
import { useListsQuery } from '@utils/queryHooks/lists'
import React, { useMemo } from 'react'
import { useTranslation } from 'react-i18next'
const Collections: React.FC = () => {
const { t, i18n } = useTranslation('meRoot')
const navigation = useNavigation()
const listsQuery = useListsQuery({
options: {
notifyOnChangeProps: []
}
})
const rowLists = useMemo(() => {
if (listsQuery.isSuccess && listsQuery.data?.length) {
return (
<MenuRow
iconFront='List'
iconBack='ChevronRight'
title={t('content.collections.lists')}
onPress={() => navigation.navigate('Tab-Me-Lists')}
/>
)
}
}, [listsQuery.isSuccess, listsQuery.data, i18n.language])
const announcementsQuery = useAnnouncementQuery({
showAll: true,
options: {
notifyOnChangeProps: []
}
})
const rowAnnouncements = useMemo(() => {
if (announcementsQuery.isSuccess && announcementsQuery.data?.length) {
const amount = announcementsQuery.data.filter(
announcement => !announcement.read
).length
return (
<MenuRow
iconFront='Clipboard'
iconBack='ChevronRight'
title={t('content.collections.announcements.heading')}
content={
amount
? t('content.collections.announcements.content.unread', {
amount
})
: t('content.collections.announcements.content.read')
}
onPress={() =>
navigation.navigate('Screen-Announcements', { showAll: true })
}
/>
)
}
}, [announcementsQuery.isSuccess, announcementsQuery.data, i18n.language])
return (
<MenuContainer>
<MenuRow
iconFront='Mail'
iconBack='ChevronRight'
title={t('content.collections.conversations')}
onPress={() => navigation.navigate('Tab-Me-Conversations')}
/>
<MenuRow
iconFront='Bookmark'
iconBack='ChevronRight'
title={t('content.collections.bookmarks')}
onPress={() => navigation.navigate('Tab-Me-Bookmarks')}
/>
<MenuRow
iconFront='Heart'
iconBack='ChevronRight'
title={t('content.collections.favourites')}
onPress={() => navigation.navigate('Tab-Me-Favourites')}
/>
{rowLists}
{rowAnnouncements}
</MenuContainer>
)
}
export default Collections