octo/tooot
1
0
Fork 0
mirror of https://github.com/tooot-app/app synced 2025-06-05 22:19:13 +02:00
Code Issues Projects Releases Wiki Activity

More visually stable me page

Browse Source
This commit is contained in:
Zhiyuan Zheng
2021-11-15 23:43:35 +01:00
parent 7ac789c18c
commit 0c28ea6b0c
5 changed files with 89 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/screens/Tabs/Me/Root/Collections.tsx
View File

@ -2,18 +2,35 @@ 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 from 'react'
import { getMePage, updateContextMePage } from '@utils/slices/contextsSlice'
import React, { useEffect } from 'react'
import { useTranslation } from 'react-i18next'
import { useDispatch, useSelector } from 'react-redux'
const Collections: React.FC = () => {
const { t } = useTranslation('screenTabs')
const navigation = useNavigation<any>()
const dispatch = useDispatch()
const mePage = useSelector(
getMePage,
(a, b) => a.announcements.unread === b.announcements.unread
)
const listsQuery = useListsQuery({
options: {
notifyOnChangeProps: ['data']
}
})
useEffect(() => {
if (listsQuery.isSuccess) {
dispatch(
updateContextMePage({
lists: { shown: listsQuery.data?.length ? true : false }
})
)
}
}, [listsQuery.isSuccess, listsQuery.data?.length])
const announcementsQuery = useAnnouncementQuery({
showAll: true,
@ -21,6 +38,20 @@ const Collections: React.FC = () => {
notifyOnChangeProps: ['data']
}
})
useEffect(() => {
if (announcementsQuery.isSuccess) {
dispatch(
updateContextMePage({
announcements: {
shown: announcementsQuery.data?.length ? true : false,
unread: announcementsQuery.data.filter(
announcement => !announcement.read
).length
}
})
)
}
}, [announcementsQuery.isSuccess, announcementsQuery.data?.length])
return (
<MenuContainer>
@ -42,7 +73,7 @@ const Collections: React.FC = () => {
title={t('me.stacks.favourites.name')}
onPress={() => navigation.navigate('Tab-Me-Favourites')}
/>
{listsQuery.data?.length ? (
{mePage.lists.shown ? (
<MenuRow
iconFront='List'
iconBack='ChevronRight'
@ -50,18 +81,15 @@ const Collections: React.FC = () => {
onPress={() => navigation.navigate('Tab-Me-Lists')}
/>
) : null}
{announcementsQuery.data?.length ? (
{mePage.announcements.shown ? (
<MenuRow
iconFront='Clipboard'
iconBack='ChevronRight'
title={t('screenAnnouncements:heading')}
content={
announcementsQuery.data.filter(announcement => !announcement.read)
.length
mePage.announcements.unread
? t('me.root.announcements.content.unread', {
amount: announcementsQuery.data.filter(
announcement => !announcement.read
).length
amount: mePage.announcements.unread
})
: t('me.root.announcements.content.read')
}