quilling.dev
An ATproto social media client -- with an independent Appview.
[APP-1157] disable searches for logged out users, prompt them to sign in (#8697)
+109
-1
+45
src/components/SearchError.tsx
+45
src/components/SearchError.tsx
···
1
+
import {View} from 'react-native'
2
+
3
+
import {usePalette} from '#/lib/hooks/usePalette'
4
+
import {atoms as a, useBreakpoints} from '#/alf'
5
+
import * as Layout from '#/components/Layout'
6
+
import {Text} from '#/components/Typography'
7
+
import {TimesLarge_Stroke2_Corner0_Rounded} from './icons/Times'
8
+
9
+
export function SearchError({
10
+
title,
11
+
children,
12
+
}: {
13
+
title?: string
14
+
children?: React.ReactNode
15
+
}) {
16
+
const {gtMobile} = useBreakpoints()
17
+
const pal = usePalette('default')
18
+
19
+
return (
20
+
<Layout.Content>
21
+
<View
22
+
style={[
23
+
a.align_center,
24
+
a.gap_4xl,
25
+
a.px_xl,
26
+
{
27
+
paddingVertical: 150,
28
+
},
29
+
]}>
30
+
<TimesLarge_Stroke2_Corner0_Rounded width={32} fill={pal.colors.icon} />
31
+
<View
32
+
style={[
33
+
a.align_center,
34
+
{maxWidth: gtMobile ? 394 : 294},
35
+
gtMobile ? a.gap_md : a.gap_sm,
36
+
]}>
37
+
<Text style={[a.font_bold, a.text_lg, a.text_center, a.leading_snug]}>
38
+
{title}
39
+
</Text>
40
+
{children}
41
+
</View>
42
+
</View>
43
+
</Layout.Content>
44
+
)
45
+
}
+64
-1
src/screens/Search/SearchResults.tsx
+64
-1
src/screens/Search/SearchResults.tsx
···
4
4
import {msg, Trans} from '@lingui/macro'
5
5
import {useLingui} from '@lingui/react'
6
6
7
+
import {usePalette} from '#/lib/hooks/usePalette'
7
8
import {augmentSearchQuery} from '#/lib/strings/helpers'
8
9
import {useActorSearch} from '#/state/queries/actor-search'
9
10
import {usePopularFeedsSearch} from '#/state/queries/feed'
10
11
import {useSearchPostsQuery} from '#/state/queries/search-posts'
11
12
import {useSession} from '#/state/session'
13
+
import {useLoggedOutViewControls} from '#/state/shell/logged-out'
14
+
import {useCloseAllActiveElements} from '#/state/util'
12
15
import {Pager} from '#/view/com/pager/Pager'
13
16
import {TabBar} from '#/view/com/pager/TabBar'
14
17
import {Post} from '#/view/com/post/Post'
···
17
20
import {atoms as a, useTheme, web} from '#/alf'
18
21
import * as FeedCard from '#/components/FeedCard'
19
22
import * as Layout from '#/components/Layout'
23
+
import {InlineLinkText} from '#/components/Link'
24
+
import {SearchError} from '#/components/SearchError'
20
25
import {Text} from '#/components/Typography'
21
26
22
27
let SearchResults = ({
···
104
109
)
105
110
}
106
111
107
-
function EmptyState({message, error}: {message: string; error?: string}) {
112
+
function EmptyState({
113
+
message,
114
+
error,
115
+
children,
116
+
}: {
117
+
message: string
118
+
error?: string
119
+
children?: React.ReactNode
120
+
}) {
108
121
const t = useTheme()
109
122
110
123
return (
···
132
145
</Text>
133
146
</>
134
147
)}
148
+
149
+
{children}
135
150
</View>
136
151
</View>
137
152
</Layout.Content>
···
161
176
const {_} = useLingui()
162
177
const {currentAccount} = useSession()
163
178
const [isPTR, setIsPTR] = useState(false)
179
+
const isLoggedin = Boolean(currentAccount?.did)
164
180
165
181
const augmentedQuery = useMemo(() => {
166
182
return augmentSearchQuery(query || '', {did: currentAccount?.did})
···
177
193
hasNextPage,
178
194
} = useSearchPostsQuery({query: augmentedQuery, sort, enabled: active})
179
195
196
+
const pal = usePalette('default')
197
+
const t = useTheme()
180
198
const onPullToRefresh = useCallback(async () => {
181
199
setIsPTR(true)
182
200
await refetch()
···
215
233
216
234
return temp
217
235
}, [posts, isFetchingNextPage])
236
+
237
+
const closeAllActiveElements = useCloseAllActiveElements()
238
+
const {requestSwitchToAccount} = useLoggedOutViewControls()
239
+
240
+
const showSignIn = () => {
241
+
closeAllActiveElements()
242
+
requestSwitchToAccount({requestedAccount: 'none'})
243
+
}
244
+
245
+
const showCreateAccount = () => {
246
+
closeAllActiveElements()
247
+
requestSwitchToAccount({requestedAccount: 'new'})
248
+
}
249
+
250
+
if (!isLoggedin) {
251
+
return (
252
+
<SearchError
253
+
title={_(msg`Search is currently unavailable when logged out`)}>
254
+
<Text style={[a.text_md, a.text_center, a.leading_snug]}>
255
+
<Trans>
256
+
<InlineLinkText
257
+
style={[pal.link]}
258
+
label={_(msg`sign in`)}
259
+
to={'#'}
260
+
onPress={showSignIn}>
261
+
Sign in
262
+
</InlineLinkText>
263
+
<Text style={t.atoms.text_contrast_medium}> or </Text>
264
+
<InlineLinkText
265
+
style={[pal.link]}
266
+
label={_(msg`create an account`)}
267
+
to={'#'}
268
+
onPress={showCreateAccount}>
269
+
create an account
270
+
</InlineLinkText>
271
+
<Text> </Text>
272
+
<Text style={t.atoms.text_contrast_medium}>
273
+
to search for news, sports, politics, and everything else
274
+
happening on Bluesky.
275
+
</Text>
276
+
</Trans>
277
+
</Text>
278
+
</SearchError>
279
+
)
280
+
}
218
281
219
282
return error ? (
220
283
<EmptyState