+50

functions/api/also-liked.ts

reviewed

··· 1 1 + const ALSO_LIKED_URL = 'https://foryou.club/also-liked' 2 2 + 3 3 + function json(data: unknown, init?: ResponseInit) { 4 4 + return new Response(JSON.stringify(data), { 5 5 + ...init, 6 6 + headers: { 7 7 + 'access-control-allow-origin': '*', 8 8 + 'cache-control': 'no-store', 9 9 + 'content-type': 'application/json; charset=utf-8', 10 10 + ...init?.headers, 11 11 + }, 12 12 + }) 13 13 + } 14 14 + 15 15 + export async function onRequestGet(context: {request: Request}) { 16 16 + const url = new URL(context.request.url) 17 17 + const post = url.searchParams.get('post') 18 18 + 19 19 + if (!post) { 20 20 + return json({error: 'Missing post parameter'}, {status: 400}) 21 21 + } 22 22 + 23 23 + const upstreamUrl = new URL(ALSO_LIKED_URL) 24 24 + upstreamUrl.searchParams.set('format', 'json') 25 25 + upstreamUrl.searchParams.set('post', post) 26 26 + 27 27 + const limit = url.searchParams.get('limit') 28 28 + if (limit) { 29 29 + upstreamUrl.searchParams.set('limit', limit) 30 30 + } 31 31 + 32 32 + const cursor = url.searchParams.get('cursor') 33 33 + if (cursor) { 34 34 + upstreamUrl.searchParams.set('cursor', cursor) 35 35 + } 36 36 + 37 37 + const response = await fetch(upstreamUrl.toString()) 38 38 + const body = await response.text() 39 39 + 40 40 + return new Response(body, { 41 41 + status: response.status, 42 42 + headers: { 43 43 + 'access-control-allow-origin': '*', 44 44 + 'cache-control': 'no-store', 45 45 + 'content-type': 46 46 + response.headers.get('content-type') || 47 47 + 'application/json; charset=utf-8', 48 48 + }, 49 49 + }) 50 50 + }

+91

src/screens/PostThread/components/ThreadAlsoLiked.tsx

reviewed

··· 1 1 + import {View} from 'react-native' 2 2 + import {type AppBskyFeedDefs} from '@atproto/api' 3 3 + import {Trans, useLingui} from '@lingui/react/macro' 4 4 + 5 5 + import {cleanError} from '#/lib/strings/errors' 6 6 + import {Post} from '#/view/com/post/Post' 7 7 + import {atoms as a, useTheme} from '#/alf' 8 8 + import {Button, ButtonText} from '#/components/Button' 9 9 + import {Loader} from '#/components/Loader' 10 10 + import {Text} from '#/components/Typography' 11 11 + 12 12 + export function ThreadAlsoLiked({ 13 13 + posts, 14 14 + enabled, 15 15 + isLoading, 16 16 + isFetchingNextPage, 17 17 + error, 18 18 + onRetry, 19 19 + spacerHeight, 20 20 + isTombstoneView, 21 21 + }: { 22 22 + posts: AppBskyFeedDefs.PostView[] 23 23 + enabled: boolean 24 24 + isLoading: boolean 25 25 + isFetchingNextPage: boolean 26 26 + error: unknown 27 27 + onRetry: () => void 28 28 + spacerHeight: number | undefined 29 29 + isTombstoneView: boolean 30 30 + }) { 31 31 + const {t: l} = useLingui() 32 32 + const t = useTheme() 33 33 + const hasSection = 34 34 + enabled && (posts.length > 0 || isLoading || Boolean(error)) 35 35 + 36 36 + return ( 37 37 + <View> 38 38 + {hasSection && ( 39 39 + <View style={[a.border_t, t.atoms.border_contrast_low]}> 40 40 + <View style={[a.px_lg, a.pt_xl, a.pb_md, a.gap_2xs]}> 41 41 + <Text style={[a.text_xl, a.font_bold]}> 42 42 + <Trans>Also liked</Trans> 43 43 + </Text> 44 44 + <Text style={[a.text_sm, t.atoms.text_contrast_medium]}> 45 45 + <Trans>Posts liked by people who liked this post</Trans> 46 46 + </Text> 47 47 + </View> 48 48 + 49 49 + {posts.map((post, index) => ( 50 50 + <Post key={post.uri} post={post} hideTopBorder={index === 0} /> 51 51 + ))} 52 52 + 53 53 + {(isLoading || isFetchingNextPage) && ( 54 54 + <View style={[a.align_center, a.py_xl]}> 55 55 + <Loader size="xl" /> 56 56 + </View> 57 57 + )} 58 58 + 59 59 + {Boolean(error) && !isLoading && !isFetchingNextPage && ( 60 60 + <View style={[a.px_lg, a.pb_xl, a.gap_md]}> 61 61 + <Text style={[a.text_sm, t.atoms.text_contrast_medium]}> 62 62 + {cleanError(error)} 63 63 + </Text> 64 64 + <View style={[a.flex_row]}> 65 65 + <Button 66 66 + label={l`Retry loading also liked posts`} 67 67 + onPress={onRetry} 68 68 + variant="solid" 69 69 + color="secondary_inverted" 70 70 + size="small"> 71 71 + <ButtonText> 72 72 + <Trans>Retry</Trans> 73 73 + </ButtonText> 74 74 + </Button> 75 75 + </View> 76 76 + </View> 77 77 + )} 78 78 + </View> 79 79 + )} 80 80 + 81 81 + <View 82 82 + style={[ 83 83 + a.w_full, 84 84 + !hasSection && 85 85 + !isTombstoneView && [a.border_t, t.atoms.border_contrast_low], 86 86 + {height: spacerHeight ?? 180}, 87 87 + ]} 88 88 + /> 89 89 + </View> 90 90 + ) 91 91 + }

+48 -16

src/screens/PostThread/index.tsx

reviewed

··· 15 15 import {useOpenComposer} from '#/lib/hooks/useOpenComposer' 16 16 import {usePostViewTracking} from '#/lib/hooks/usePostViewTracking' 17 17 import {useFeedFeedback} from '#/state/feed-feedback' 18 18 + import {useAlsoLikedFeedEnabled} from '#/state/preferences/also-liked-feed-enabled' 19 19 + import {usePostAlsoLikedQuery} from '#/state/queries/post-also-liked' 18 20 import {type ThreadViewOption} from '#/state/queries/preferences/useThreadPreferences' 19 21 import { 20 22 PostThreadContextProvider, ··· 27 29 import {useUnstablePostSource} from '#/state/unstable-post-source' 28 30 import {List, type ListMethods} from '#/view/com/util/List' 29 31 import {HeaderDropdown} from '#/screens/PostThread/components/HeaderDropdown' 32 32 + import {ThreadAlsoLiked} from '#/screens/PostThread/components/ThreadAlsoLiked' 30 33 import {ThreadComposePrompt} from '#/screens/PostThread/components/ThreadComposePrompt' 31 34 import {ThreadError} from '#/screens/PostThread/components/ThreadError' 32 35 import { ··· 50 53 } from '#/screens/PostThread/components/ThreadItemTreePost' 51 54 import {atoms as a, native, platform, useBreakpoints, web} from '#/alf' 52 55 import * as Layout from '#/components/Layout' 53 53 - import {ListFooter} from '#/components/Lists' 54 56 import {useAnalytics} from '#/analytics' 55 57 import {IS_NATIVE} from '#/env' 56 58 ··· 148 150 149 151 const isRoot = !!anchor && anchor.value.post.record.reply === undefined 150 152 const canReply = !anchor?.value.post?.viewer?.replyDisabled 153 153 + const alsoLikedFeedEnabled = useAlsoLikedFeedEnabled() 154 154 + const alsoLikedAnchorUri = 155 155 + anchor?.type === 'threadPost' && isRoot ? anchor.value.post.uri : undefined 156 156 + const alsoLiked = usePostAlsoLikedQuery(alsoLikedAnchorUri, { 157 157 + enabled: Boolean(alsoLikedAnchorUri) && alsoLikedFeedEnabled, 158 158 + }) 159 159 + const alsoLikedPosts = useMemo(() => { 160 160 + const seen = new Set<string>() 161 161 + return (alsoLiked.data?.pages ?? []) 162 162 + .flatMap(page => page.posts) 163 163 + .filter(post => { 164 164 + if (seen.has(post.uri)) return false 165 165 + seen.add(post.uri) 166 166 + return true 167 167 + }) 168 168 + }, [alsoLiked.data]) 151 169 const [maxParentCount, setMaxParentCount] = useState(PARENT_CHUNK_SIZE) 152 170 const [maxChildrenCount, setMaxChildrenCount] = useState(CHILDREN_CHUNK_SIZE) 153 171 const totalParentCount = useRef(0) // recomputed below ··· 331 349 if (thread.state.isFetching) return 332 350 // can be true after `prepareForParamsUpdate` is called 333 351 if (deferParents) return 334 334 - // prevent any state mutations if we know we're done 335 335 - if (maxChildrenCount >= totalChildrenCount.current) return 336 336 - setMaxChildrenCount(prev => prev + CHILDREN_CHUNK_SIZE) 352 352 + if (maxChildrenCount < totalChildrenCount.current) { 353 353 + setMaxChildrenCount(prev => prev + CHILDREN_CHUNK_SIZE) 354 354 + return 355 355 + } 356 356 + if ( 357 357 + alsoLikedAnchorUri && 358 358 + alsoLikedFeedEnabled && 359 359 + !alsoLiked.isLoading && 360 360 + !alsoLiked.isFetchingNextPage && 361 361 + alsoLiked.hasNextPage 362 362 + ) { 363 363 + void alsoLiked.fetchNextPage() 364 364 + } 337 365 } 338 366 339 367 const slices = useMemo(() => { ··· 543 571 ) 544 572 545 573 const defaultListFooterHeight = hasParents ? windowHeight - 200 : undefined 574 574 + const retryAlsoLiked = useCallback(() => { 575 575 + if (alsoLikedPosts.length > 0) { 576 576 + void alsoLiked.fetchNextPage() 577 577 + } else { 578 578 + void alsoLiked.refetch() 579 579 + } 580 580 + }, [alsoLiked, alsoLikedPosts.length]) 546 581 547 582 return ( 548 583 <PostThreadContextProvider context={thread.context}> ··· 596 631 desktopFixedHeight 597 632 sideBorders={false} 598 633 ListFooterComponent={ 599 599 - <ListFooter 600 600 - /* 601 601 - * On native, if `deferParents` is true, we need some extra buffer to 602 602 - * account for the `on*ReachedThreshold` values. 603 603 - * 604 604 - * Otherwise, and on web, this value needs to be the height of 605 605 - * the viewport _minus_ a sensible min-post height e.g. 200, so 606 606 - * that there's enough scroll remaining to get the anchor post 607 607 - * back to the top of the screen when handling scroll. 608 608 - */ 609 609 - height={platform({ 634 634 + <ThreadAlsoLiked 635 635 + posts={alsoLikedPosts} 636 636 + enabled={Boolean(alsoLikedAnchorUri) && alsoLikedFeedEnabled} 637 637 + isLoading={alsoLiked.isLoading} 638 638 + isFetchingNextPage={alsoLiked.isFetchingNextPage} 639 639 + error={alsoLiked.error} 640 640 + onRetry={retryAlsoLiked} 641 641 + spacerHeight={platform({ 610 642 web: defaultListFooterHeight, 611 643 default: deferParents 612 644 ? windowHeight * 2 613 645 : defaultListFooterHeight, 614 646 })} 615 615 - style={isTombstoneView ? {borderTopWidth: 0} : undefined} 647 647 + isTombstoneView={isTombstoneView} 616 648 /> 617 649 } 618 650 initialNumToRender={initialNumToRender}

+21

src/screens/Settings/RunesSettings/DisplaySettings.tsx

reviewed

··· 7 7 import {dynamicActivate as dynamicActivateWeb} from '#/locale/i18n.web' 8 8 import {type AppLanguage} from '#/locale/languages' 9 9 import { 10 10 + useAlsoLikedFeedEnabled, 11 11 + useSetAlsoLikedFeedEnabled, 12 12 + } from '#/state/preferences/also-liked-feed-enabled' 13 13 + import { 10 14 useHighQualityImages, 11 15 useSetHighQualityImages, 12 16 } from '#/state/preferences/high-quality-images' ··· 28 32 import {Button, ButtonText} from '#/components/Button' 29 33 import * as Dialog from '#/components/Dialog' 30 34 import * as Toggle from '#/components/forms/Toggle' 35 35 + import {Heart2_Stroke2_Corner0_Rounded as HeartIcon} from '#/components/icons/Heart2' 31 36 import {Image_Stroke2_Corner0_Rounded as ImageIcon} from '#/components/icons/Image' 32 37 import {Pencil_Stroke2_Corner0_Rounded as PencilIcon} from '#/components/icons/Pencil' 33 38 import {Repost_Stroke2_Corner3_Rounded as RepostIcon} from '#/components/icons/Repost' ··· 42 47 const repostCarouselEnabled = useRepostCarouselEnabled() 43 48 const setRepostCarouselEnabled = useSetRepostCarouselEnabled() 44 49 50 50 + const alsoLikedFeedEnabled = useAlsoLikedFeedEnabled() 51 51 + const setAlsoLikedFeedEnabled = useSetAlsoLikedFeedEnabled() 52 52 + 45 53 const highQualityImages = useHighQualityImages() 46 54 const setHighQualityImages = useSetHighQualityImages() 47 55 ··· 61 69 <SettingsList.ItemIcon icon={RepostIcon} /> 62 70 <SettingsList.ItemText> 63 71 <Trans>Combine reposts into a horizontal carousel</Trans> 72 72 + </SettingsList.ItemText> 73 73 + <Toggle.Platform /> 74 74 + </SettingsList.Item> 75 75 + </Toggle.Item> 76 76 + <Toggle.Item 77 77 + name="also_liked_feed" 78 78 + label={l`Show "Also liked" recommendations under post replies`} 79 79 + value={alsoLikedFeedEnabled} 80 80 + onChange={value => setAlsoLikedFeedEnabled(value)}> 81 81 + <SettingsList.Item> 82 82 + <SettingsList.ItemIcon icon={HeartIcon} /> 83 83 + <SettingsList.ItemText> 84 84 + <Trans>Show "Also liked" recommendations under post replies</Trans> 64 85 </SettingsList.ItemText> 65 86 <Toggle.Platform /> 66 87 </SettingsList.Item>

+2

src/state/persisted/schema.ts

reviewed

··· 169 169 noAppLabelers: z.boolean().optional(), 170 170 noDiscoverFallback: z.boolean().optional(), 171 171 repostCarouselEnabled: z.boolean().optional(), 172 172 + alsoLikedFeedEnabled: z.boolean().optional(), 172 173 constellationInstance: z.string().optional(), 173 174 showLinkInHandle: z.boolean().optional(), 174 175 showLinkInHandleOnlyOnWorkingLinks: z.boolean().optional(), ··· 299 300 noAppLabelers: false, 300 301 noDiscoverFallback: false, 301 302 repostCarouselEnabled: false, 303 303 + alsoLikedFeedEnabled: true, 302 304 constellationInstance: 'https://constellation.microcosm.blue/', 303 305 showLinkInHandle: true, 304 306 showLinkInHandleOnlyOnWorkingLinks: true,

+49

src/state/preferences/also-liked-feed-enabled.tsx

reviewed

··· 1 1 + import { 2 2 + createContext, 3 3 + type ReactNode, 4 4 + useCallback, 5 5 + useContext, 6 6 + useEffect, 7 7 + useState, 8 8 + } from 'react' 9 9 + 10 10 + import * as persisted from '#/state/persisted' 11 11 + 12 12 + type StateContext = boolean 13 13 + type SetContext = (v: boolean) => void 14 14 + 15 15 + const stateContext = createContext<StateContext>( 16 16 + Boolean(persisted.defaults.alsoLikedFeedEnabled), 17 17 + ) 18 18 + const setContext = createContext<SetContext>((_: boolean) => {}) 19 19 + 20 20 + export function Provider({children}: {children: ReactNode}) { 21 21 + const [state, setState] = useState( 22 22 + Boolean(persisted.get('alsoLikedFeedEnabled')), 23 23 + ) 24 24 + 25 25 + const setStateWrapped = useCallback( 26 26 + (value: persisted.Schema['alsoLikedFeedEnabled']) => { 27 27 + setState(Boolean(value)) 28 28 + persisted.write('alsoLikedFeedEnabled', value) 29 29 + }, 30 30 + [setState], 31 31 + ) 32 32 + 33 33 + useEffect(() => { 34 34 + return persisted.onUpdate('alsoLikedFeedEnabled', nextValue => { 35 35 + setState(Boolean(nextValue)) 36 36 + }) 37 37 + }, [setStateWrapped]) 38 38 + 39 39 + return ( 40 40 + <stateContext.Provider value={state}> 41 41 + <setContext.Provider value={setStateWrapped}> 42 42 + {children} 43 43 + </setContext.Provider> 44 44 + </stateContext.Provider> 45 45 + ) 46 46 + } 47 47 + 48 48 + export const useAlsoLikedFeedEnabled = () => useContext(stateContext) 49 49 + export const useSetAlsoLikedFeedEnabled = () => useContext(setContext)

+64 -57

src/state/preferences/index.tsx

reviewed

··· 1 1 import {type PropsWithChildren} from 'react' 2 2 3 3 + import {Provider as AlsoLikedFeedProvider} from './also-liked-feed-enabled' 3 4 import {Provider as AltTextRequiredProvider} from './alt-text-required' 4 5 import {Provider as AutoLikeOnRepostProvider} from './auto-like-on-repost' 5 6 import {Provider as AutoplayProvider} from './autoplay' ··· 57 58 import {Provider as UseHandleInLinksProvider} from './use-handle-in-links' 58 59 import {Provider as UsedStarterPacksProvider} from './used-starter-packs' 59 60 61 61 + export { 62 62 + useAlsoLikedFeedEnabled, 63 63 + useSetAlsoLikedFeedEnabled, 64 64 + } from './also-liked-feed-enabled' 60 65 export { 61 66 useRequireAltTextEnabled, 62 67 useSetRequireAltTextEnabled, ··· 143 148 <SubtitlesProvider> 144 149 <TrendingSettingsProvider> 145 150 <RepostCarouselProvider> 146 146 - <KawaiiProvider> 147 147 - <HideFeedsPromoTabProvider> 148 148 - <DisableViaRepostNotificationProvider> 149 149 - <DisableLikesMetricsProvider> 150 150 - <DisableRepostsMetricsProvider> 151 151 - <DisableQuotesMetricsProvider> 152 152 - <DisableSavesMetricsProvider> 153 153 - <DisableReplyMetricsProvider> 154 154 - <DisableFollowersMetricsProvider> 155 155 - <DisableFollowingMetricsProvider> 156 156 - <DisableFollowedByMetricsProvider> 157 157 - <DisablePostsMetricsProvider> 158 158 - <ShowFollowsYouBadgeProvider> 159 159 - <HideSimilarAccountsRecommProvider> 160 160 - <HideScaryFollowButtonsProvider> 161 161 - <HideUnreplyablePostsProvider> 162 162 - <EnableSquareAvatarsProvider> 163 163 - <EnableSquareButtonsProvider> 164 164 - <ShowViaClientProvider> 165 165 - <PostNameReplacementProvider> 166 166 - <DisableVerifyEmailReminderProvider> 167 167 - <TranslationServicePreferenceProvider> 168 168 - <OpenRouterProvider> 169 169 - <DisableComposerPromptProvider> 170 170 - <DisableTopOfFeedButtonProvider> 171 171 - <DiscoverContextEnabledProvider> 172 172 - <OmitViaFieldProvider> 173 173 - { 174 174 - children 175 175 - } 176 176 - </OmitViaFieldProvider> 177 177 - </DiscoverContextEnabledProvider> 178 178 - </DisableTopOfFeedButtonProvider> 179 179 - </DisableComposerPromptProvider> 180 180 - </OpenRouterProvider> 181 181 - </TranslationServicePreferenceProvider> 182 182 - </DisableVerifyEmailReminderProvider> 183 183 - </PostNameReplacementProvider> 184 184 - </ShowViaClientProvider> 185 185 - </EnableSquareButtonsProvider> 186 186 - </EnableSquareAvatarsProvider> 187 187 - </HideUnreplyablePostsProvider> 188 188 - </HideScaryFollowButtonsProvider> 189 189 - </HideSimilarAccountsRecommProvider> 190 190 - </ShowFollowsYouBadgeProvider> 191 191 - </DisablePostsMetricsProvider> 192 192 - </DisableFollowedByMetricsProvider> 193 193 - </DisableFollowingMetricsProvider> 194 194 - </DisableFollowersMetricsProvider> 195 195 - </DisableReplyMetricsProvider> 196 196 - </DisableSavesMetricsProvider> 197 197 - </DisableQuotesMetricsProvider> 198 198 - </DisableRepostsMetricsProvider> 199 199 - </DisableLikesMetricsProvider> 200 200 - </DisableViaRepostNotificationProvider> 201 201 - </HideFeedsPromoTabProvider> 202 202 - </KawaiiProvider> 151 151 + <AlsoLikedFeedProvider> 152 152 + <KawaiiProvider> 153 153 + <HideFeedsPromoTabProvider> 154 154 + <DisableViaRepostNotificationProvider> 155 155 + <DisableLikesMetricsProvider> 156 156 + <DisableRepostsMetricsProvider> 157 157 + <DisableQuotesMetricsProvider> 158 158 + <DisableSavesMetricsProvider> 159 159 + <DisableReplyMetricsProvider> 160 160 + <DisableFollowersMetricsProvider> 161 161 + <DisableFollowingMetricsProvider> 162 162 + <DisableFollowedByMetricsProvider> 163 163 + <DisablePostsMetricsProvider> 164 164 + <ShowFollowsYouBadgeProvider> 165 165 + <HideSimilarAccountsRecommProvider> 166 166 + <HideScaryFollowButtonsProvider> 167 167 + <HideUnreplyablePostsProvider> 168 168 + <EnableSquareAvatarsProvider> 169 169 + <EnableSquareButtonsProvider> 170 170 + <ShowViaClientProvider> 171 171 + <PostNameReplacementProvider> 172 172 + <DisableVerifyEmailReminderProvider> 173 173 + <TranslationServicePreferenceProvider> 174 174 + <OpenRouterProvider> 175 175 + <DisableComposerPromptProvider> 176 176 + <DisableTopOfFeedButtonProvider> 177 177 + <DiscoverContextEnabledProvider> 178 178 + <OmitViaFieldProvider> 179 179 + { 180 180 + children 181 181 + } 182 182 + </OmitViaFieldProvider> 183 183 + </DiscoverContextEnabledProvider> 184 184 + </DisableTopOfFeedButtonProvider> 185 185 + </DisableComposerPromptProvider> 186 186 + </OpenRouterProvider> 187 187 + </TranslationServicePreferenceProvider> 188 188 + </DisableVerifyEmailReminderProvider> 189 189 + </PostNameReplacementProvider> 190 190 + </ShowViaClientProvider> 191 191 + </EnableSquareButtonsProvider> 192 192 + </EnableSquareAvatarsProvider> 193 193 + </HideUnreplyablePostsProvider> 194 194 + </HideScaryFollowButtonsProvider> 195 195 + </HideSimilarAccountsRecommProvider> 196 196 + </ShowFollowsYouBadgeProvider> 197 197 + </DisablePostsMetricsProvider> 198 198 + </DisableFollowedByMetricsProvider> 199 199 + </DisableFollowingMetricsProvider> 200 200 + </DisableFollowersMetricsProvider> 201 201 + </DisableReplyMetricsProvider> 202 202 + </DisableSavesMetricsProvider> 203 203 + </DisableQuotesMetricsProvider> 204 204 + </DisableRepostsMetricsProvider> 205 205 + </DisableLikesMetricsProvider> 206 206 + </DisableViaRepostNotificationProvider> 207 207 + </HideFeedsPromoTabProvider> 208 208 + </KawaiiProvider> 209 209 + </AlsoLikedFeedProvider> 203 210 </RepostCarouselProvider> 204 211 </TrendingSettingsProvider> 205 212 </SubtitlesProvider>

+144

src/state/queries/post-also-liked.ts

reviewed

··· 1 1 + import {type AppBskyFeedDefs} from '@atproto/api' 2 2 + import {type InfiniteData, useInfiniteQuery} from '@tanstack/react-query' 3 3 + 4 4 + import {STALE} from '#/state/queries' 5 5 + import {useAgent} from '#/state/session' 6 6 + import {IS_WEB} from '#/env' 7 7 + 8 8 + const ALSO_LIKED_URL = 'https://foryou.club/also-liked' 9 9 + const ALSO_LIKED_PROXY_PATH = '/api/also-liked' 10 10 + const ALSO_LIKED_PROXY_HOST = 'https://witchsky.app' 11 11 + const ALSO_LIKED_PAGE_SIZE = 10 12 12 + 13 13 + type AlsoLikedSkeletonResponse = { 14 14 + cursor?: string 15 15 + feed?: Array<{post?: string}> 16 16 + } 17 17 + 18 18 + type AlsoLikedPage = { 19 19 + cursor?: string 20 20 + posts: AppBskyFeedDefs.PostView[] 21 21 + } 22 22 + 23 23 + async function fetchAlsoLikedSkeleton( 24 24 + postUri: string, 25 25 + pageParam: string | undefined, 26 26 + ) { 27 27 + const urls = getAlsoLikedUrls(postUri, pageParam) 28 28 + let lastError: Error | undefined 29 29 + 30 30 + for (const url of urls) { 31 31 + try { 32 32 + const res = await fetch(url.toString()) 33 33 + if (!res.ok) { 34 34 + lastError = new Error( 35 35 + `Failed to load also liked recommendations (${res.status})`, 36 36 + ) 37 37 + continue 38 38 + } 39 39 + 40 40 + const contentType = res.headers.get('content-type') || '' 41 41 + if (!contentType.includes('application/json')) { 42 42 + const body = await res.text() 43 43 + lastError = new Error( 44 44 + body.startsWith('<!DOCTYPE') || body.startsWith('<!doctype') 45 45 + ? 'Also liked is unavailable from this web environment right now.' 46 46 + : 'Also liked returned an unexpected response.', 47 47 + ) 48 48 + continue 49 49 + } 50 50 + 51 51 + return (await res.json()) as AlsoLikedSkeletonResponse 52 52 + } catch (err) { 53 53 + lastError = err instanceof Error ? err : new Error(String(err)) 54 54 + } 55 55 + } 56 56 + 57 57 + throw lastError || new Error('Failed to load also liked recommendations') 58 58 + } 59 59 + 60 60 + function getAlsoLikedUrls(postUri: string, pageParam: string | undefined) { 61 61 + const urls: URL[] = [] 62 62 + const appendParams = (url: URL) => { 63 63 + url.searchParams.set('format', 'json') 64 64 + url.searchParams.set('post', postUri) 65 65 + url.searchParams.set('limit', String(ALSO_LIKED_PAGE_SIZE)) 66 66 + if (pageParam) { 67 67 + url.searchParams.set('cursor', pageParam) 68 68 + } 69 69 + return url 70 70 + } 71 71 + 72 72 + if (IS_WEB) { 73 73 + urls.push( 74 74 + appendParams(new URL(ALSO_LIKED_PROXY_PATH, window.location.origin)), 75 75 + ) 76 76 + 77 77 + const hostedProxyUrl = new URL(ALSO_LIKED_PROXY_PATH, ALSO_LIKED_PROXY_HOST) 78 78 + if (hostedProxyUrl.origin !== window.location.origin) { 79 79 + urls.push(appendParams(hostedProxyUrl)) 80 80 + } 81 81 + } else { 82 82 + urls.push(appendParams(new URL(ALSO_LIKED_URL))) 83 83 + } 84 84 + 85 85 + return urls 86 86 + } 87 87 + 88 88 + export const RQKEY_ROOT = 'post-also-liked' 89 89 + export const RQKEY = (uri: string) => [RQKEY_ROOT, uri] as [string, string] 90 90 + 91 91 + export function usePostAlsoLikedQuery( 92 92 + uri: string | undefined, 93 93 + opts?: {enabled?: boolean}, 94 94 + ) { 95 95 + const agent = useAgent() 96 96 + 97 97 + return useInfiniteQuery< 98 98 + AlsoLikedPage, 99 99 + Error, 100 100 + InfiniteData<AlsoLikedPage>, 101 101 + [string, string], 102 102 + string | undefined 103 103 + >({ 104 104 + enabled: Boolean(uri) && opts?.enabled !== false, 105 105 + staleTime: STALE.MINUTES.FIVE, 106 106 + queryKey: RQKEY(uri || ''), 107 107 + initialPageParam: undefined as string | undefined, 108 108 + getNextPageParam: lastPage => lastPage.cursor || undefined, 109 109 + async queryFn({pageParam}): Promise<AlsoLikedPage> { 110 110 + if (!uri) { 111 111 + throw new Error('No post URI provided for also liked query') 112 112 + } 113 113 + 114 114 + const data = await fetchAlsoLikedSkeleton(uri, pageParam) 115 115 + const uris = Array.from( 116 116 + new Set( 117 117 + (data.feed || []) 118 118 + .map(item => item.post) 119 119 + .filter((post): post is string => Boolean(post)), 120 120 + ), 121 121 + ).slice(0, 25) 122 122 + 123 123 + if (!uris.length) { 124 124 + return {cursor: undefined, posts: []} 125 125 + } 126 126 + 127 127 + const postsRes = await agent.getPosts({uris}) 128 128 + if (!postsRes.success) { 129 129 + throw new Error('Failed to hydrate also liked recommendations') 130 130 + } 131 131 + 132 132 + const postsByUri = new Map( 133 133 + postsRes.data.posts.map(post => [post.uri, post] as const), 134 134 + ) 135 135 + 136 136 + return { 137 137 + cursor: data.cursor, 138 138 + posts: uris 139 139 + .map(postUri => postsByUri.get(postUri)) 140 140 + .filter((post): post is AppBskyFeedDefs.PostView => Boolean(post)), 141 141 + } 142 142 + }, 143 143 + }) 144 144 + }