dan
f8cdd6b9ae
* Split out NotificationsTab * Remove unused route parameter * Refine the split between components * Hoist some logic out of NotificationFeed * Remove unused option * Add all|conversations to query, hardcode "all" * Add a Conversations tab * Rename to Mentions * Bump packages * Rename fields * Fix oopsie * Simplify header * Track active tab * Fix types * Separate logic for tabs * Better border for first unread * Highlight unread for all only * Fix spinner races * Fix fetchPage races * Fix bottom bar border being obscured by glimmer * Remember last tab within the session * One tab at a time * Fix TS * Handle all RQKEY usages * Nit
99 lines
3.4 KiB
TypeScript
99 lines
3.4 KiB
TypeScript
import {Text} from 'react-native'
|
|
import {msg, Trans} from '@lingui/macro'
|
|
import {useLingui} from '@lingui/react'
|
|
|
|
import {AllNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
|
|
import {useNotificationFeedQuery} from '#/state/queries/notifications/feed'
|
|
import {useNotificationSettingsMutation} from '#/state/queries/notifications/settings'
|
|
import {atoms as a} from '#/alf'
|
|
import {Admonition} from '#/components/Admonition'
|
|
import {Error} from '#/components/Error'
|
|
import * as Toggle from '#/components/forms/Toggle'
|
|
import {Beaker_Stroke2_Corner2_Rounded as BeakerIcon} from '#/components/icons/Beaker'
|
|
import * as Layout from '#/components/Layout'
|
|
import {Loader} from '#/components/Loader'
|
|
import * as SettingsList from './components/SettingsList'
|
|
|
|
type Props = NativeStackScreenProps<AllNavigatorParams, 'NotificationSettings'>
|
|
export function NotificationSettingsScreen({}: Props) {
|
|
const {_} = useLingui()
|
|
|
|
const {
|
|
data,
|
|
isError: isQueryError,
|
|
refetch,
|
|
} = useNotificationFeedQuery({
|
|
filter: 'all',
|
|
})
|
|
const serverPriority = data?.pages.at(0)?.priority
|
|
|
|
const {
|
|
mutate: onChangePriority,
|
|
isPending: isMutationPending,
|
|
variables,
|
|
} = useNotificationSettingsMutation()
|
|
|
|
const priority = isMutationPending
|
|
? variables[0] === 'enabled'
|
|
: serverPriority
|
|
|
|
return (
|
|
<Layout.Screen>
|
|
<Layout.Header.Outer>
|
|
<Layout.Header.BackButton />
|
|
<Layout.Header.Content>
|
|
<Layout.Header.TitleText>
|
|
<Trans>Notification Settings</Trans>
|
|
</Layout.Header.TitleText>
|
|
</Layout.Header.Content>
|
|
<Layout.Header.Slot />
|
|
</Layout.Header.Outer>
|
|
<Layout.Content>
|
|
{isQueryError ? (
|
|
<Error
|
|
title={_(msg`Oops!`)}
|
|
message={_(msg`Something went wrong!`)}
|
|
onRetry={refetch}
|
|
sideBorders={false}
|
|
/>
|
|
) : (
|
|
<SettingsList.Container>
|
|
<SettingsList.Group>
|
|
<SettingsList.ItemIcon icon={BeakerIcon} />
|
|
<SettingsList.ItemText>
|
|
<Trans>Notification filters</Trans>
|
|
</SettingsList.ItemText>
|
|
<Toggle.Group
|
|
label={_(msg`Priority notifications`)}
|
|
type="checkbox"
|
|
values={priority ? ['enabled'] : []}
|
|
onChange={onChangePriority}
|
|
disabled={typeof priority !== 'boolean' || isMutationPending}>
|
|
<Toggle.Item
|
|
name="enabled"
|
|
label={_(msg`Enable priority notifications`)}
|
|
style={[a.flex_1, a.justify_between]}>
|
|
<Toggle.LabelText>
|
|
<Trans>Enable priority notifications</Trans>
|
|
</Toggle.LabelText>
|
|
{!data ? <Loader size="md" /> : <Toggle.Platform />}
|
|
</Toggle.Item>
|
|
</Toggle.Group>
|
|
</SettingsList.Group>
|
|
<SettingsList.Item>
|
|
<Admonition type="warning" style={[a.flex_1]}>
|
|
<Trans>
|
|
<Text style={[a.font_bold]}>Experimental:</Text> When this
|
|
preference is enabled, you'll only receive reply and quote
|
|
notifications from users you follow. We'll continue to add
|
|
more controls here over time.
|
|
</Trans>
|
|
</Admonition>
|
|
</SettingsList.Item>
|
|
</SettingsList.Container>
|
|
)}
|
|
</Layout.Content>
|
|
</Layout.Screen>
|
|
)
|
|
}
|