forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Delete messages NUX (#5574)
authored by
Samuel Newman
and committed by
GitHub
c2dac855
13c9c79a
-179
-175
src/components/dms/MessagesNUX.tsx
-175
src/components/dms/MessagesNUX.tsx
···
1
-
import React, {useCallback, useEffect} from 'react'
2
-
import {View} from 'react-native'
3
-
import {ChatBskyActorDeclaration} from '@atproto/api'
4
-
import {msg, Trans} from '@lingui/macro'
5
-
import {useLingui} from '@lingui/react'
6
-
7
-
import {useUpdateActorDeclaration} from '#/state/queries/messages/actor-declaration'
8
-
import {useProfileQuery} from '#/state/queries/profile'
9
-
import {useSession} from '#/state/session'
10
-
import * as Toast from '#/view/com/util/Toast'
11
-
import {atoms as a, useTheme, web} from '#/alf'
12
-
import {Button, ButtonText} from '#/components/Button'
13
-
import * as Dialog from '#/components/Dialog'
14
-
import * as Toggle from '#/components/forms/Toggle'
15
-
import {Message_Stroke2_Corner0_Rounded} from '#/components/icons/Message'
16
-
import {Text} from '#/components/Typography'
17
-
18
-
export function MessagesNUX() {
19
-
const control = Dialog.useDialogControl()
20
-
21
-
const {currentAccount} = useSession()
22
-
const {data: profile} = useProfileQuery({
23
-
did: currentAccount!.did,
24
-
})
25
-
26
-
useEffect(() => {
27
-
if (profile && typeof profile.associated?.chat === 'undefined') {
28
-
const timeout = setTimeout(() => {
29
-
control.open()
30
-
}, 1000)
31
-
32
-
return () => {
33
-
clearTimeout(timeout)
34
-
}
35
-
}
36
-
}, [profile, control])
37
-
38
-
if (!profile) return null
39
-
40
-
return (
41
-
<Dialog.Outer control={control}>
42
-
<Dialog.Handle />
43
-
<DialogInner chatDeclation={profile.associated?.chat} />
44
-
</Dialog.Outer>
45
-
)
46
-
}
47
-
48
-
function DialogInner({
49
-
chatDeclation,
50
-
}: {
51
-
chatDeclation?: ChatBskyActorDeclaration.Record
52
-
}) {
53
-
const control = Dialog.useDialogContext()
54
-
const {_} = useLingui()
55
-
const t = useTheme()
56
-
57
-
const [initialized, setInitialzed] = React.useState(false)
58
-
const {mutate: updateDeclaration} = useUpdateActorDeclaration({
59
-
onError: () => {
60
-
Toast.show(_(msg`Failed to update settings`), 'xmark')
61
-
},
62
-
})
63
-
64
-
const onSelectItem = useCallback(
65
-
(keys: string[]) => {
66
-
const key = keys[0]
67
-
if (!key) return
68
-
updateDeclaration(key as 'all' | 'none' | 'following')
69
-
},
70
-
[updateDeclaration],
71
-
)
72
-
73
-
useEffect(() => {
74
-
if (!chatDeclation && !initialized) {
75
-
updateDeclaration('following')
76
-
setInitialzed(true)
77
-
}
78
-
}, [chatDeclation, updateDeclaration, initialized])
79
-
80
-
return (
81
-
<Dialog.ScrollableInner
82
-
label={_(msg`Introducing Direct Messages`)}
83
-
style={web({maxWidth: 440})}>
84
-
<View style={a.gap_xl}>
85
-
<View style={[a.align_center, a.pt_sm, a.pb_xs]}>
86
-
<Message_Stroke2_Corner0_Rounded width={64} />
87
-
<Text style={[a.text_2xl, a.font_bold, a.text_center, a.mt_md]}>
88
-
<Trans>Direct messages are here!</Trans>
89
-
</Text>
90
-
<Text style={[a.text_md, a.text_center, a.mt_sm]}>
91
-
<Trans>Privately chat with other users.</Trans>
92
-
</Text>
93
-
</View>
94
-
<View
95
-
style={[
96
-
a.gap_xs,
97
-
a.border,
98
-
a.overflow_hidden,
99
-
a.rounded_sm,
100
-
t.atoms.border_contrast_low,
101
-
]}>
102
-
<View
103
-
style={[
104
-
a.p_md,
105
-
a.border_b,
106
-
t.atoms.bg_contrast_25,
107
-
t.atoms.border_contrast_low,
108
-
]}>
109
-
<Text style={[a.text_sm, a.font_bold]}>
110
-
<Trans>Who can message you?</Trans>
111
-
</Text>
112
-
<Text
113
-
style={[
114
-
a.mt_xs,
115
-
a.text_sm,
116
-
a.italic,
117
-
t.atoms.text_contrast_medium,
118
-
]}>
119
-
<Trans>You can change this at any time.</Trans>
120
-
</Text>
121
-
</View>
122
-
<View style={[a.px_md, a.py_xs]}>
123
-
<Toggle.Group
124
-
label={_(msg`Who can message you?`)}
125
-
type="radio"
126
-
values={[chatDeclation?.allowIncoming ?? 'following']}
127
-
onChange={onSelectItem}>
128
-
<View>
129
-
<Toggle.Item
130
-
name="all"
131
-
label={_(msg`Everyone`)}
132
-
style={[a.justify_between, a.py_sm, a.rounded_2xs]}>
133
-
<Toggle.LabelText>
134
-
<Trans>Everyone</Trans>
135
-
</Toggle.LabelText>
136
-
<Toggle.Radio />
137
-
</Toggle.Item>
138
-
<Toggle.Item
139
-
name="following"
140
-
label={_(msg`Users I follow`)}
141
-
style={[a.justify_between, a.py_sm, a.rounded_2xs]}>
142
-
<Toggle.LabelText>
143
-
<Trans>Users I follow</Trans>
144
-
</Toggle.LabelText>
145
-
<Toggle.Radio />
146
-
</Toggle.Item>
147
-
<Toggle.Item
148
-
name="none"
149
-
label={_(msg`No one`)}
150
-
style={[a.justify_between, a.py_sm, a.rounded_2xs]}>
151
-
<Toggle.LabelText>
152
-
<Trans>No one</Trans>
153
-
</Toggle.LabelText>
154
-
<Toggle.Radio />
155
-
</Toggle.Item>
156
-
</View>
157
-
</Toggle.Group>
158
-
</View>
159
-
</View>
160
-
<Button
161
-
label={_(msg`Start chatting`)}
162
-
accessibilityHint={_(msg`Close modal`)}
163
-
size="large"
164
-
color="primary"
165
-
variant="solid"
166
-
onPress={() => control.close()}>
167
-
<ButtonText>
168
-
<Trans>Get started</Trans>
169
-
</ButtonText>
170
-
</Button>
171
-
</View>
172
-
<Dialog.Close />
173
-
</Dialog.ScrollableInner>
174
-
)
175
-
}
-4
src/screens/Messages/ChatList.tsx
-4
src/screens/Messages/ChatList.tsx
···
22
22
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
23
23
import {DialogControlProps, useDialogControl} from '#/components/Dialog'
24
24
import {NewChat} from '#/components/dms/dialogs/NewChatDialog'
25
-
import {MessagesNUX} from '#/components/dms/MessagesNUX'
26
25
import {useRefreshOnFocus} from '#/components/hooks/useRefreshOnFocus'
27
26
import {ArrowRotateCounterClockwise_Stroke2_Corner0_Rounded as Retry} from '#/components/icons/ArrowRotateCounterClockwise'
28
27
import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
···
151
150
if (conversations.length < 1) {
152
151
return (
153
152
<View style={a.flex_1}>
154
-
<MessagesNUX />
155
-
156
153
<CenteredView sideBorders={gtMobile} style={[a.h_full_vh]}>
157
154
{gtMobile ? (
158
155
<DesktopHeader
···
240
237
241
238
return (
242
239
<View style={a.flex_1}>
243
-
<MessagesNUX />
244
240
{!gtMobile && (
245
241
<ViewHeader
246
242
title={_(msg`Messages`)}