zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

[🐴] use Toggle component in settings screen (#4048)

Browse source 
* use Toggle component

* nits + notifs sounds native only
This commit is contained in:
Samuel Newman 2024-05-16 16:57:07 +01:00 • committed by GitHub
parent d639c40e17
commit da2bdf5d6f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 62 additions and 102 deletions
Download patch file Download diff file Expand all files Collapse all files

88
src/screens/Messages/Settings.tsx
View file

@ -8,6 +8,7 @@ import {UseQueryResult} from '@tanstack/react-query'
import {CommonNavigatorParams} from '#/lib/routes/types'
import {useGate} from '#/lib/statsig/statsig'
import {isNative} from '#/platform/detection'
import {useUpdateActorDeclaration} from '#/state/queries/messages/actor-declaration'
import {useProfileQuery} from '#/state/queries/profile'
import {useSession} from '#/state/session'
@ -15,8 +16,8 @@ import * as Toast from '#/view/com/util/Toast'
import {ViewHeader} from '#/view/com/util/ViewHeader'
import {CenteredView} from '#/view/com/util/Views'
import {atoms as a} from '#/alf'
import {Divider} from '#/components/Divider'
import * as Toggle from '#/components/forms/Toggle'
import {RadioGroup} from '#/components/RadioGroup'
import {Text} from '#/components/Typography'
import {useBackgroundNotificationPreferences} from '../../../modules/expo-background-notification-handler/src/BackgroundNotificationHandlerProvider'
import {ClipClopGate} from './gate'
@ -39,7 +40,9 @@ export function MessagesSettingsScreen({}: Props) {
})
const onSelectItem = useCallback(
(key: string) => {
(keys: string[]) => {
const key = keys[0]
if (!key) return
updateDeclaration(key as AllowIncoming)
},
[updateDeclaration],
@ -48,37 +51,70 @@ export function MessagesSettingsScreen({}: Props) {
const gate = useGate()
if (!gate('dms')) return <ClipClopGate />
console.log(profile?.associated?.chat?.allowIncoming)
return (
<CenteredView sideBorders style={a.h_full_vh}>
<ViewHeader title={_(msg`Settings`)} showOnDesktop showBorder />
<View style={[a.px_md, a.py_lg, a.gap_md]}>
<Text style={[a.text_xl, a.font_bold, a.px_sm]}>
<View style={[a.p_lg, a.gap_md]}>
<Text style={[a.text_lg, a.font_bold]}>
<Trans>Allow messages from</Trans>
</Text>
<RadioGroup<AllowIncoming>
value={
<Toggle.Group
label={_(msg`Allow messages from`)}
type="radio"
values={[
(profile?.associated?.chat?.allowIncoming as AllowIncoming) ??
'following'
}
items={[
{label: _(msg`Everyone`), value: 'all'},
{label: _(msg`Users I follow`), value: 'following'},
{label: _(msg`No one`), value: 'none'},
'following',
]}
onSelect={onSelectItem}
/>
</View>
<View style={[a.px_md, a.py_lg, a.gap_md]}>
<Toggle.Item
name="a"
label="Click me"
value={preferences.playSoundChat}
onChange={() => {
setPref('playSoundChat', !preferences.playSoundChat)
}}>
<Toggle.Checkbox />
<Toggle.LabelText>Notification Sounds</Toggle.LabelText>
</Toggle.Item>
onChange={onSelectItem}>
<View>
<Toggle.Item
name="all"
label={_(msg`Everyone`)}
style={[a.justify_between, a.py_sm]}>
<Toggle.LabelText>
<Trans>Everyone</Trans>
</Toggle.LabelText>
<Toggle.Radio />
</Toggle.Item>
<Toggle.Item
name="following"
label={_(msg`Users I follow`)}
style={[a.justify_between, a.py_sm]}>
<Toggle.LabelText>
<Trans>Users I follow</Trans>
</Toggle.LabelText>
<Toggle.Radio />
</Toggle.Item>
<Toggle.Item
name="none"
label={_(msg`No one`)}
style={[a.justify_between, a.py_sm]}>
<Toggle.LabelText>
<Trans>No one</Trans>
</Toggle.LabelText>
<Toggle.Radio />
</Toggle.Item>
</View>
</Toggle.Group>
{isNative && (
<>
<Divider style={[a.my_lg]} />
<Toggle.Item
name="playSoundChat"
label={_(msg`Play notification sounds`)}
value={preferences.playSoundChat}
onChange={() => {
setPref('playSoundChat', !preferences.playSoundChat)
}}>
<Toggle.Checkbox />
<Toggle.LabelText>
<Trans>Play notification sounds</Trans>
</Toggle.LabelText>
</Toggle.Item>
</>
)}
</View>
</CenteredView>
)