diff --git a/packages/shared/src/hooks/post/useSmartTitle.ts b/packages/shared/src/hooks/post/useSmartTitle.ts index 1b8ddc7adc..d0a323414d 100644 --- a/packages/shared/src/hooks/post/useSmartTitle.ts +++ b/packages/shared/src/hooks/post/useSmartTitle.ts @@ -15,6 +15,8 @@ import { useLogContext } from '../../contexts/LogContext'; import { useSettingsContext } from '../../contexts/SettingsContext'; import { useToastNotification } from '../useToastNotification'; import { labels } from '../../lib'; +import { useTranslation } from '../translation/useTranslation'; +import { useActiveFeedContext } from '../../contexts'; type UseSmartTitle = { fetchSmartTitle: () => Promise; @@ -31,6 +33,7 @@ export const useSmartTitle = (post: Post): UseSmartTitle => { const { isPlus } = usePlusSubscription(); const { completeAction } = useActions(); const { flags } = useSettingsContext(); + const { queryKey } = useActiveFeedContext(); const { clickbaitShieldEnabled } = flags || {}; @@ -38,13 +41,20 @@ export const useSmartTitle = (post: Post): UseSmartTitle => { () => [...getPostByIdKey(post?.id), { key: 'title' }], [post?.id], ); + + const { fetchTranslations } = useTranslation({ + queryKey: queryKey || getPostByIdKey(post?.id), + queryType: queryKey ? 'feed' : 'post', + clickbaitShieldEnabled: !clickbaitShieldEnabled, + }); + const fetchSmartTitleKey = generateQueryKey( RequestKey.FetchedOriginalTitle, user, ...getPostByIdKey(post?.id), ); - const { data: smartTitle, refetch } = useQuery({ + const { data: smartTitle } = useQuery({ queryKey: key, queryFn: async () => { let title = post?.title || post?.sharedPost?.title; @@ -89,7 +99,9 @@ export const useSmartTitle = (post: Post): UseSmartTitle => { const fetchSmartTitle = useCallback(async () => { if (!fetchedSmartTitle) { - await refetch(); + const [translateResult] = await fetchTranslations([post]); + + client.setQueryData(key, translateResult?.value || post?.title); } else { client.setQueryData(key, post?.title); } @@ -106,8 +118,8 @@ export const useSmartTitle = (post: Post): UseSmartTitle => { logEvent, post, isPlus, - refetch, key, + fetchTranslations, ]); const title = useMemo(() => { diff --git a/packages/shared/src/hooks/translation/useTranslation.ts b/packages/shared/src/hooks/translation/useTranslation.ts index d4282aac4a..9824f6b61c 100644 --- a/packages/shared/src/hooks/translation/useTranslation.ts +++ b/packages/shared/src/hooks/translation/useTranslation.ts @@ -23,8 +23,9 @@ export enum ServerEvents { type UseTranslation = (props: { queryKey: QueryKey; queryType: 'post' | 'feed'; + clickbaitShieldEnabled?: boolean; }) => { - fetchTranslations: (id: Post[]) => void; + fetchTranslations: (id: Post[]) => Promise; }; type TranslateFields = 'title' | 'smartTitle'; @@ -93,11 +94,18 @@ const updateTranslation = ({ return updatedPost; }; -export const useTranslation: UseTranslation = ({ queryKey, queryType }) => { +export const useTranslation: UseTranslation = ({ + queryKey, + queryType, + clickbaitShieldEnabled: clickbaitShieldEnabledProp, +}) => { const abort = useRef(); const { user, accessToken, isLoggedIn } = useAuthContext(); const { flags } = useSettingsContext(); const queryClient = useQueryClient(); + const clickbaitShieldEnabled = !!( + clickbaitShieldEnabledProp ?? flags?.clickbaitShieldEnabled + ); const { language } = user || {}; const isStreamActive = isLoggedIn && !!language; @@ -119,12 +127,12 @@ export const useTranslation: UseTranslation = ({ queryKey, queryType }) => { updateTranslation({ post: feedData.pages[pageIndex].page.edges[index].node, translation: translatedPost, - clickbaitShieldEnabled: !!flags?.clickbaitShieldEnabled, + clickbaitShieldEnabled, }), ); } }, - [queryKey, queryClient, flags?.clickbaitShieldEnabled], + [queryKey, queryClient, clickbaitShieldEnabled], ); const updatePost = useCallback( @@ -133,20 +141,20 @@ export const useTranslation: UseTranslation = ({ queryKey, queryType }) => { updateTranslation({ post, translation: translatedPost, - clickbaitShieldEnabled: !!flags?.clickbaitShieldEnabled, + clickbaitShieldEnabled, }), ); }, - [queryClient, flags?.clickbaitShieldEnabled], + [queryClient, clickbaitShieldEnabled], ); const fetchTranslations = useCallback( async (posts: Post[]) => { if (!isStreamActive) { - return; + return []; } if (posts.length === 0) { - return; + return []; } const postsToTranslate = posts @@ -161,14 +169,14 @@ export const useTranslation: UseTranslation = ({ queryKey, queryType }) => { .map((node) => (node?.title ? node : node?.sharedPost)); if (postsToTranslate.length === 0) { - return; + return []; } const payload = postsToTranslate.reduce((acc, post) => { const fields = []; const shouldUseSmartTitle = - post.clickbaitTitleDetected && flags?.clickbaitShieldEnabled; + post.clickbaitTitleDetected && clickbaitShieldEnabled; if (shouldUseSmartTitle && !post.translation?.smartTitle) { fields.push('smartTitle'); @@ -186,7 +194,7 @@ export const useTranslation: UseTranslation = ({ queryKey, queryType }) => { }, {} as TranslatePayload); if (Object.keys(payload).length === 0) { - return; + return []; } const response = await fetch(`${apiUrl}/translate/post`, { @@ -202,13 +210,18 @@ export const useTranslation: UseTranslation = ({ queryKey, queryType }) => { }); if (!response.ok) { - return; + return []; } + const results: TranslateEvent[] = []; + // eslint-disable-next-line no-restricted-syntax for await (const message of events(response)) { if (message.event === ServerEvents.Message) { const post = JSON.parse(message.data) as TranslateEvent; + + results.push(post); + if (queryType === 'feed') { updateFeed(post); } else { @@ -216,6 +229,8 @@ export const useTranslation: UseTranslation = ({ queryKey, queryType }) => { } } } + + return results; }, [ accessToken?.token, @@ -224,7 +239,7 @@ export const useTranslation: UseTranslation = ({ queryKey, queryType }) => { queryType, updateFeed, updatePost, - flags?.clickbaitShieldEnabled, + clickbaitShieldEnabled, ], );