forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Create new useSuggestedFollowsByActorWithDismiss hook (#10048)
+58
-87
+4
-39
src/components/FeedInterstitials.tsx
+4
-39
src/components/FeedInterstitials.tsx
···
12
12
import {useLingui} from '@lingui/react'
13
13
import {Trans} from '@lingui/react/macro'
14
14
import {useNavigation} from '@react-navigation/native'
15
-
import {useQueryClient} from '@tanstack/react-query'
16
15
17
16
import {type NavigationProp} from '#/lib/routes/types'
18
17
import {useModerationOpts} from '#/state/preferences/moderation-opts'
19
18
import {useGetPopularFeedsQuery} from '#/state/queries/feed'
20
19
import {type FeedDescriptor} from '#/state/queries/post-feed'
21
20
import {useProfilesQuery} from '#/state/queries/profile'
22
-
import {
23
-
suggestedFollowsByActorQueryKey,
24
-
useSuggestedFollowsByActorQuery,
25
-
} from '#/state/queries/suggested-follows'
21
+
import {useSuggestedFollowsByActorWithDismiss} from '#/state/queries/suggested-follows'
26
22
import {useSession} from '#/state/session'
27
23
import * as userActionHistory from '#/state/userActionHistory'
28
24
import {type SeenPost} from '#/state/userActionHistory'
···
219
215
}
220
216
221
217
export function SuggestedFollowsProfile({did}: {did: string}) {
222
-
const {
223
-
isLoading: isSuggestionsLoading,
224
-
data,
225
-
error,
226
-
} = useSuggestedFollowsByActorQuery({
227
-
did,
228
-
})
229
-
const queryClient = useQueryClient()
230
-
231
-
const onDismiss = useCallback(
232
-
(dismissedDid: string) => {
233
-
queryClient.setQueryData(
234
-
suggestedFollowsByActorQueryKey(did),
235
-
(previous: typeof data) => {
236
-
if (!previous) return previous
237
-
return {
238
-
...previous,
239
-
suggestions: previous.suggestions.filter(
240
-
s => s.did !== dismissedDid,
241
-
),
242
-
}
243
-
},
244
-
)
245
-
},
246
-
[did, queryClient],
247
-
)
248
-
249
-
const profiles = useMemo(() => {
250
-
return (data?.suggestions ?? []).map(profile => ({
251
-
actor: profile,
252
-
recId: data?.recId,
253
-
}))
254
-
}, [data?.suggestions, data?.recId])
218
+
const {profiles, onDismiss, isLoading, error} =
219
+
useSuggestedFollowsByActorWithDismiss({did})
255
220
256
221
return (
257
222
<ProfileGrid
258
-
isSuggestionsLoading={isSuggestionsLoading}
223
+
isSuggestionsLoading={isLoading}
259
224
profiles={profiles}
260
225
error={error}
261
226
viewContext="profile"
+2
-48
src/screens/Profile/Header/SuggestedFollows.tsx
+2
-48
src/screens/Profile/Header/SuggestedFollows.tsx
···
1
-
import {useCallback, useMemo} from 'react'
2
-
import {useQueryClient} from '@tanstack/react-query'
3
-
4
1
import {AccordionAnimation} from '#/lib/custom-animations/AccordionAnimation'
5
-
import {
6
-
suggestedFollowsByActorQueryKey,
7
-
useSuggestedFollowsByActorQuery,
8
-
} from '#/state/queries/suggested-follows'
2
+
import {useSuggestedFollowsByActorWithDismiss} from '#/state/queries/suggested-follows'
9
3
import {ProfileGrid} from '#/components/FeedInterstitials'
10
4
import {IS_ANDROID} from '#/env'
11
-
import type * as bsky from '#/types/bsky'
12
5
13
6
export function ProfileHeaderSuggestedFollows({
14
7
isExpanded,
···
20
13
onRequestHide: () => void
21
14
}) {
22
15
const {profiles, onDismiss, isLoading, error} =
23
-
useProfileHeaderSuggestions(actorDid)
16
+
useSuggestedFollowsByActorWithDismiss({did: actorDid})
24
17
25
18
/* NOTE (caidanw):
26
19
* Android does not work well with this feature yet.
···
44
37
</AccordionAnimation>
45
38
)
46
39
}
47
-
48
-
function useProfileHeaderSuggestions(actorDid: string) {
49
-
const {isLoading, data, error} = useSuggestedFollowsByActorQuery({
50
-
did: actorDid,
51
-
})
52
-
const queryClient = useQueryClient()
53
-
54
-
const onDismiss = useCallback(
55
-
(dismissedDid: string) => {
56
-
queryClient.setQueryData(
57
-
suggestedFollowsByActorQueryKey(actorDid),
58
-
(previous: typeof data) => {
59
-
if (!previous) return previous
60
-
return {
61
-
...previous,
62
-
suggestions: previous.suggestions.filter(
63
-
s => s.did !== dismissedDid,
64
-
),
65
-
}
66
-
},
67
-
)
68
-
},
69
-
[actorDid, queryClient],
70
-
)
71
-
72
-
const profiles = useMemo(() => {
73
-
return (data?.suggestions ?? []).map(profile => ({
74
-
actor: profile as bsky.profile.AnyProfileView,
75
-
recId: data?.recId,
76
-
}))
77
-
}, [data?.suggestions, data?.recId])
78
-
79
-
return {
80
-
profiles,
81
-
onDismiss,
82
-
isLoading,
83
-
error,
84
-
}
85
-
}
+52
src/state/queries/suggested-follows.ts
+52
src/state/queries/suggested-follows.ts
···
1
+
import {useCallback, useMemo} from 'react'
1
2
import {
2
3
type AppBskyActorDefs,
3
4
type AppBskyActorGetSuggestions,
···
7
8
type InfiniteData,
8
9
type QueryClient,
9
10
useQuery,
11
+
useQueryClient,
10
12
} from '@tanstack/react-query'
11
13
12
14
import {STALE} from '#/state/queries'
13
15
import {useAgent} from '#/state/session'
16
+
import type * as bsky from '#/types/bsky'
14
17
15
18
const suggestedFollowsQueryKeyRoot = 'suggested-follows'
16
19
···
44
47
},
45
48
enabled,
46
49
})
50
+
}
51
+
52
+
export function useSuggestedFollowsByActorWithDismiss({
53
+
did,
54
+
enabled,
55
+
staleTime,
56
+
}: {
57
+
did: string
58
+
enabled?: boolean
59
+
staleTime?: number
60
+
}) {
61
+
const {isLoading, data, error} = useSuggestedFollowsByActorQuery({
62
+
did,
63
+
enabled,
64
+
staleTime,
65
+
})
66
+
const queryClient = useQueryClient()
67
+
68
+
const onDismiss = useCallback(
69
+
(dismissedDid: string) => {
70
+
queryClient.setQueryData(
71
+
suggestedFollowsByActorQueryKey(did),
72
+
(previous: typeof data) => {
73
+
if (!previous) return previous
74
+
return {
75
+
...previous,
76
+
suggestions: previous.suggestions.filter(
77
+
s => s.did !== dismissedDid,
78
+
),
79
+
}
80
+
},
81
+
)
82
+
},
83
+
[did, queryClient],
84
+
)
85
+
86
+
const profiles = useMemo(() => {
87
+
return (data?.suggestions ?? []).map(profile => ({
88
+
actor: profile as bsky.profile.AnyProfileView,
89
+
recId: data?.recId,
90
+
}))
91
+
}, [data?.suggestions, data?.recId])
92
+
93
+
return {
94
+
profiles,
95
+
onDismiss,
96
+
isLoading,
97
+
error,
98
+
}
47
99
}
48
100
49
101
export function* findAllProfilesInQueryData(