mirror of https://github.com/tooot-app/app
103 lines
3.4 KiB
TypeScript
103 lines
3.4 KiB
TypeScript
import { HeaderLeft, HeaderRight } from '@components/Header'
|
|
import { MenuContainer, MenuRow } from '@components/Menu'
|
|
import { useAppDispatch } from '@root/store'
|
|
import { useQueryClient } from '@tanstack/react-query'
|
|
import { TabNotificationsStackScreenProps } from '@utils/navigation/navigators'
|
|
import { useProfileQuery } from '@utils/queryHooks/profile'
|
|
import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
|
|
import { PUSH_ADMIN, PUSH_DEFAULT, usePushFeatures } from '@utils/slices/instances/push/utils'
|
|
import {
|
|
getInstanceNotificationsFilter,
|
|
updateInstanceNotificationsFilter
|
|
} from '@utils/slices/instancesSlice'
|
|
import { isEqual } from 'lodash'
|
|
import React, { useEffect, useState } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { Alert } from 'react-native'
|
|
import { ScrollView } from 'react-native-gesture-handler'
|
|
import { useSelector } from 'react-redux'
|
|
|
|
const TabNotificationsFilters: React.FC<
|
|
TabNotificationsStackScreenProps<'Tab-Notifications-Filters'>
|
|
> = ({ navigation }) => {
|
|
const { t } = useTranslation(['common', 'screenTabs'])
|
|
|
|
const pushFeatures = usePushFeatures()
|
|
|
|
const dispatch = useAppDispatch()
|
|
|
|
const instanceNotificationsFilter = useSelector(getInstanceNotificationsFilter)
|
|
const [filters, setFilters] = useState(instanceNotificationsFilter)
|
|
|
|
const queryClient = useQueryClient()
|
|
useEffect(() => {
|
|
const changed = !isEqual(instanceNotificationsFilter, filters)
|
|
navigation.setOptions({
|
|
title: t('screenTabs:notifications.filters.title'),
|
|
headerLeft: () => (
|
|
<HeaderLeft
|
|
content='ChevronDown'
|
|
onPress={() => {
|
|
if (changed) {
|
|
Alert.alert(t('common:discard.title'), t('common:discard.message'), [
|
|
{
|
|
text: t('common:buttons.discard'),
|
|
style: 'destructive',
|
|
onPress: () => navigation.goBack()
|
|
},
|
|
{
|
|
text: t('common:buttons.cancel'),
|
|
style: 'default'
|
|
}
|
|
])
|
|
} else {
|
|
navigation.goBack()
|
|
}
|
|
}}
|
|
/>
|
|
),
|
|
headerRight: () => (
|
|
<HeaderRight
|
|
type='text'
|
|
content={t('common:buttons.apply')}
|
|
onPress={() => {
|
|
if (changed) {
|
|
dispatch(updateInstanceNotificationsFilter(filters))
|
|
const queryKey: QueryKeyTimeline = ['Timeline', { page: 'Notifications' }]
|
|
queryClient.invalidateQueries({ queryKey })
|
|
}
|
|
navigation.goBack()
|
|
}}
|
|
/>
|
|
)
|
|
})
|
|
}, [filters])
|
|
|
|
const profileQuery = useProfileQuery()
|
|
|
|
return (
|
|
<ScrollView style={{ flex: 1 }}>
|
|
<MenuContainer>
|
|
{PUSH_DEFAULT(pushFeatures).map((type, index) => (
|
|
<MenuRow
|
|
key={index}
|
|
title={t(`screenTabs:me.push.${type}.heading`)}
|
|
switchValue={filters[type]}
|
|
switchOnValueChange={() => setFilters({ ...filters, [type]: !filters[type] })}
|
|
/>
|
|
))}
|
|
{PUSH_ADMIN(pushFeatures, profileQuery.data?.role?.permissions).map(({ type }) => (
|
|
<MenuRow
|
|
key={type}
|
|
title={t(`screenTabs:me.push.${type}.heading`)}
|
|
switchValue={filters[type]}
|
|
switchOnValueChange={() => setFilters({ ...filters, [type]: !filters[type] })}
|
|
/>
|
|
))}
|
|
</MenuContainer>
|
|
</ScrollView>
|
|
)
|
|
}
|
|
|
|
export default TabNotificationsFilters
|