feat: real-time translation

packages/extension/__tests__/setup.ts

@@ -71,4 +71,13 @@ Object.defineProperty(global, 'open', {
   value: jest.fn(),
 });
 
+Object.defineProperty(global, 'TransformStream', {
+  writable: true,
+  value: jest.fn().mockImplementation(() => ({
+    backpressure: jest.fn(),
+    readable: jest.fn(),
+    writable: jest.fn(),
+  })),
+});
+
 structuredCloneJsonPolyfill();

packages/extension/package.json

@@ -24,6 +24,7 @@
     "date-fns": "^2.25.0",
     "date-fns-tz": "1.2.2",
     "dompurify": "^2.5.4",
+    "fetch-event-stream": "^0.1.5",
     "focus-visible": "^5.2.1",
     "graphql": "^16.9.0",
     "graphql-request": "^3.6.1",

packages/extension/src/companion/Companion.tsx

@@ -17,7 +17,7 @@ import { useBackgroundRequest } from '@dailydotdev/shared/src/hooks/companion';
 import {
   getPostByIdKey,
   updatePostCache,
-} from '@dailydotdev/shared/src/hooks/usePostById';
+} from '@dailydotdev/shared/src/lib/query';
 import { getCompanionWrapper } from '@dailydotdev/shared/src/lib/extension';
 import CompanionMenu from './CompanionMenu';
 import CompanionContent from './CompanionContent';

packages/shared/__tests__/setup.ts

@@ -53,6 +53,15 @@ Object.defineProperty(global, 'open', {
   value: jest.fn(),
 });
 
+Object.defineProperty(global, 'TransformStream', {
+  writable: true,
+  value: jest.fn().mockImplementation(() => ({
+    backpressure: jest.fn(),
+    readable: jest.fn(),
+    writable: jest.fn(),
+  })),
+});
+
 jest.mock('next/router', () => ({
   useRouter: jest.fn().mockImplementation(
     () =>

packages/shared/package.json

@@ -106,6 +106,7 @@
     "@paddle/paddle-js": "^1.3.2",
     "@tippyjs/react": "^4.2.6",
     "check-password-strength": "^2.0.10",
+    "fetch-event-stream": "^0.1.5",
     "graphql-ws": "^5.5.5",
     "node-fetch": "^2.6.6",
     "react-markdown": "^8.0.7",

packages/shared/src/components/PostOptionsMenu.tsx

@@ -46,14 +46,11 @@ import {
   useToastNotification,
 } from '../hooks';
 import type { AllFeedPages } from '../lib/query';
-import { generateQueryKey, RequestKey } from '../lib/query';
+import { generateQueryKey, getPostByIdKey, RequestKey } from '../lib/query';
 import AuthContext from '../contexts/AuthContext';
 import { LogEvent, Origin } from '../lib/log';
 import { usePostMenuActions } from '../hooks/usePostMenuActions';
-import usePostById, {
-  getPostByIdKey,
-  invalidatePostCacheById,
-} from '../hooks/usePostById';
+import usePostById, { invalidatePostCacheById } from '../hooks/usePostById';
 import { useLazyModal } from '../hooks/useLazyModal';
 import { LazyModal } from './modals/common/types';
 import { labels } from '../lib';

packages/shared/src/graphql/feed.ts

@@ -79,6 +79,9 @@ export const FEED_POST_FRAGMENT = gql`
       }
       slug
       clickbaitTitleDetected
+      translation {
+        title
+      }
     }
     trending
     feedMeta

packages/shared/src/graphql/fragments.ts

@@ -219,6 +219,9 @@ export const FEED_POST_INFO_FRAGMENT = gql`
     }
     slug
     clickbaitTitleDetected
+    translation {
+      title
+    }
   }
 `;
 
@@ -269,6 +272,9 @@ export const SHARED_POST_INFO_FRAGMENT = gql`
     slug
     domain
     clickbaitTitleDetected
+    translation {
+      title
+    }
   }
   ${PRIVILEGED_MEMBERS_FRAGMENT}
   ${SOURCE_BASE_FRAGMENT}

packages/shared/src/graphql/posts.ts

@@ -129,6 +129,7 @@ export interface Post {
   bookmarkList?: BookmarkFolder;
   domain?: string;
   clickbaitTitleDetected?: boolean;
+  translation?: { title?: boolean };
 }
 
 export type RelatedPost = Pick<

packages/shared/src/hooks/bookmark/useFeedBookmarkPost.ts

@@ -9,7 +9,7 @@ import type { UseBookmarkPost } from '../useBookmarkPost';
 import { mutateBookmarkFeedPost, useBookmarkPost } from '../useBookmarkPost';
 import type { UseBookmarkMutationProps } from './types';
 import { bookmarkMutationMatcher } from './types';
-import { updatePostCache } from '../usePostById';
+import { updatePostCache } from '../../lib/query';
 
 export type UseFeedBookmarkPost = {
   feedName: string;

packages/shared/src/hooks/bookmark/useMoveBookmarkToFolder.ts

@@ -2,7 +2,7 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 import type { MoveBookmarkToFolderProps } from '../../graphql/bookmarks';
 import { moveBookmarkToFolder } from '../../graphql/bookmarks';
 import type { EmptyResponse } from '../../graphql/emptyResponse';
-import { getPostByIdKey } from '../usePostById';
+import { getPostByIdKey } from '../../lib/query';
 import type { PostData } from '../../graphql/posts';
 import { useToastNotification } from '../useToastNotification';
 

packages/shared/src/hooks/notifications/useBookmarkReminder.ts

@@ -7,9 +7,8 @@ import type {
 } from '../../graphql/bookmarks';
 import { setBookmarkReminder } from '../../graphql/bookmarks';
 import { useToastNotification } from '../useToastNotification';
-import { updatePostCache } from '../usePostById';
 import { useActiveFeedContext } from '../../contexts';
-import { updateCachedPagePost } from '../../lib/query';
+import { updateCachedPagePost, updatePostCache } from '../../lib/query';
 import { optimisticPostUpdateInFeed, postLogEvent } from '../../lib/feed';
 import type { EmptyResponse } from '../../graphql/emptyResponse';
 import { useLogContext } from '../../contexts/LogContext';

packages/shared/src/hooks/post/useBlockPostPanel.ts

@@ -79,7 +79,7 @@ export const useBlockPostPanel = (
   const client = useQueryClient();
   const { user } = useAuthContext();
   const { checkHasCompleted, completeAction } = useActions();
-  const key = generateQueryKey(RequestKey.PostKey, user, `block:${post?.id}`);
+  const key = generateQueryKey(RequestKey.Post, user, `block:${post?.id}`);
   const { data } = useQuery<BlockData>({
     queryKey: key,
     queryFn: () => client.getQueryData(key),

packages/shared/src/hooks/post/useMutateComment.ts

@@ -12,9 +12,9 @@ import {
   generateQueryKey,
   getAllCommentsQuery,
   RequestKey,
+  updatePostCache,
 } from '../../lib/query';
 import { useBackgroundRequest } from '../companion';
-import { updatePostCache } from '../usePostById';
 import type { Edge } from '../../graphql/common';
 import { useLogContext } from '../../contexts/LogContext';
 import { useRequestProtocol } from '../useRequestProtocol';

packages/shared/src/hooks/post/useRelatedPosts.ts

@@ -14,10 +14,10 @@ import {
 import {
   generateQueryKey,
   getNextPageParam,
+  getPostByIdKey,
   RequestKey,
   StaleTime,
 } from '../../lib/query';
-import { getPostByIdKey } from '../usePostById';
 import { useRequestProtocol } from '../useRequestProtocol';
 
 export type UseRelatedPostsProps = {

packages/shared/src/hooks/post/useSmartTitle.ts

@@ -3,10 +3,9 @@ import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { gqlClient } from '../../graphql/common';
 import type { Post } from '../../graphql/posts';
 import { POST_FETCH_SMART_TITLE_QUERY } from '../../graphql/posts';
-import { getPostByIdKey } from '../usePostById';
 import { usePlusSubscription } from '../usePlusSubscription';
 import { useAuthContext } from '../../contexts/AuthContext';
-import { generateQueryKey, RequestKey } from '../../lib/query';
+import { generateQueryKey, getPostByIdKey, RequestKey } from '../../lib/query';
 import { disabledRefetch } from '../../lib/func';
 import { useActions } from '../useActions';
 import { ActionType } from '../../graphql/actions';
@@ -115,7 +114,7 @@ export const useSmartTitle = (post: Post): UseSmartTitle => {
     return fetchedSmartTitle
       ? smartTitle
       : post?.title || post?.sharedPost?.title;
-  }, [fetchedSmartTitle, smartTitle, post]);
+  }, [fetchedSmartTitle, smartTitle, post?.title, post?.sharedPost?.title]);
 
   const shieldActive = useMemo(() => {
     return (

packages/shared/src/hooks/translation/useTranslation.ts

@@ -0,0 +1,166 @@
+import { useCallback, useEffect, useRef } from 'react';
+import type { InfiniteData, QueryKey } from '@tanstack/react-query';
+import { useQueryClient } from '@tanstack/react-query';
+import { events } from 'fetch-event-stream';
+import { useAuthContext } from '../../contexts/AuthContext';
+import { apiUrl } from '../../lib/config';
+import type { FeedData, Post } from '../../graphql/posts';
+import {
+  updateCachedPagePost,
+  findIndexOfPostInData,
+  updatePostCache,
+} from '../../lib/query';
+import { useSettingsContext } from '../../contexts/SettingsContext';
+
+export enum ServerEvents {
+  Connect = 'connect',
+  Message = 'message',
+  Disconnect = 'disconnect',
+  Error = 'error',
+}
+
+type UseTranslation = (props: {
+  queryKey: QueryKey;
+  queryType: 'post' | 'feed';
+}) => {
+  fetchTranslations: (id: Post[]) => void;
+};
+
+type TranslateEvent = {
+  id: string;
+  title: string;
+};
+
+const updateTranslation = (post: Post, translation: TranslateEvent): Post => {
+  const updatedPost = post;
+  if (post.title) {
+    updatedPost.title = translation.title;
+    updatedPost.translation = { title: !!translation.title };
+  } else {
+    updatedPost.sharedPost.title = translation.title;
+    updatedPost.sharedPost.translation = { title: !!translation.title };
+  }
+
+  return updatedPost;
+};
+
+export const useTranslation: UseTranslation = ({ queryKey, queryType }) => {
+  const abort = useRef<AbortController>();
+  const { user, accessToken, isLoggedIn } = useAuthContext();
+  const { flags } = useSettingsContext();
+  const queryClient = useQueryClient();
+
+  const { language } = user || {};
+  const isStreamActive = isLoggedIn && !!language;
+
+  const updateFeed = useCallback(
+    (translatedPost: TranslateEvent) => {
+      const updatePost = updateCachedPagePost(queryKey, queryClient);
+      const feedData =
+        queryClient.getQueryData<InfiniteData<FeedData>>(queryKey);
+      const { pageIndex, index } = findIndexOfPostInData(
+        feedData,
+        translatedPost.id,
+        true,
+      );
+      if (index > -1) {
+        updatePost(
+          pageIndex,
+          index,
+          updateTranslation(
+            feedData.pages[pageIndex].page.edges[index].node,
+            translatedPost,
+          ),
+        );
+      }
+    },
+    [queryKey, queryClient],
+  );
+
+  const updatePost = useCallback(
+    (translatedPost: TranslateEvent) => {
+      updatePostCache(queryClient, translatedPost.id, (post) =>
+        updateTranslation(post, translatedPost),
+      );
+    },
+    [queryClient],
+  );
+
+  const fetchTranslations = useCallback(
+    async (posts: Post[]) => {
+      if (!isStreamActive) {
+        return;
+      }
+      if (posts.length === 0) {
+        return;
+      }
+
+      const postIds = posts
+        .filter((node) =>
+          node?.title
+            ? !node?.translation?.title
+            : !node?.sharedPost?.translation?.title,
+        )
+        .filter((node) =>
+          flags?.clickbaitShieldEnabled && node?.title
+            ? !node.clickbaitTitleDetected
+            : !node.sharedPost?.clickbaitTitleDetected,
+        )
+        .filter(Boolean)
+        .map((node) => (node?.title ? node.id : node?.sharedPost.id));
+
+      if (postIds.length === 0) {
+        return;
+      }
+
+      const params = new URLSearchParams();
+      postIds.forEach((id) => {
+        params.append('id', id);
+      });
+
+      const response = await fetch(`${apiUrl}/translate/post/title?${params}`, {
+        signal: abort.current?.signal,
+        headers: {
+          Accept: 'text/event-stream',
+          Authorization: `Bearer ${accessToken?.token}`,
+          'Content-Language': language as string,
+        },
+      });
+
+      if (!response.ok) {
+        return;
+      }
+
+      // 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;
+          if (queryType === 'feed') {
+            updateFeed(post);
+          } else {
+            updatePost(post);
+          }
+        }
+      }
+    },
+    [
+      accessToken?.token,
+      flags?.clickbaitShieldEnabled,
+      isStreamActive,
+      language,
+      queryType,
+      updateFeed,
+      updatePost,
+    ],
+  );
+
+  useEffect(() => {
+    abort.current = new AbortController();
+
+    return () => {
+      abort.current?.abort();
+    };
+  }, []);
+
+  return { fetchTranslations };
+};

packages/shared/src/hooks/useBookmarkPost.ts

@@ -10,7 +10,7 @@ import LogContext from '../contexts/LogContext';
 import { useToastNotification } from './useToastNotification';
 import { useRequestProtocol } from './useRequestProtocol';
 import AuthContext from '../contexts/AuthContext';
-import { updatePostCache } from './usePostById';
+import { updatePostCache } from '../lib/query';
 import { AuthTriggers } from '../lib/auth';
 import type { Origin } from '../lib/log';
 import { LogEvent } from '../lib/log';