Update translations handling

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

src/api/hooks/index.ts

@@ -28,6 +28,9 @@ export { useLeaveGroup } from './groups/useLeaveGroup';
 export { usePromoteGroupMember } from './groups/usePromoteGroupMember';
 export { useUpdateGroup } from './groups/useUpdateGroup';
 
+// Instance
+export { useTranslationLanguages } from './instance/useTranslationLanguages';
+
 // Statuses
 export { useBookmarkFolders } from './statuses/useBookmarkFolders';
 export { useBookmarkFolder } from './statuses/useBookmarkFolder';

src/api/hooks/instance/useTranslationLanguages.ts

@@ -0,0 +1,37 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { useClient, useFeatures, useInstance, useLoggedIn } from 'soapbox/hooks';
+
+const useTranslationLanguages = () => {
+  const client = useClient();
+  const { isLoggedIn } = useLoggedIn();
+  const features = useFeatures();
+  const instance = useInstance();
+
+  const getTranslationLanguages = async () => {
+    const metadata = instance.pleroma.metadata;
+
+    if (metadata.translation.source_languages?.length) {
+      return Object.fromEntries(metadata.translation.source_languages.map(source => [
+        source,
+        metadata.translation.target_languages!.filter(lang => lang !== source),
+      ]));
+    }
+
+    return client.instance.getInstanceTranslationLanguages();
+  };
+
+  const { data, ...result } = useQuery({
+    queryKey: ['translationLanguages'],
+    queryFn: getTranslationLanguages,
+    placeholderData: {},
+    enabled: isLoggedIn && features.translations,
+  });
+
+  return {
+    translationLanguages: data || {},
+    ...result,
+  };
+};
+
+export { useTranslationLanguages };

src/components/status-action-bar.tsx

@@ -14,7 +14,7 @@ import { initReport, ReportableEntities } from 'soapbox/actions/reports';
 import { changeSetting } from 'soapbox/actions/settings';
 import { deleteStatus, editStatus, toggleMuteStatus, translateStatus, undoStatusTranslation } from 'soapbox/actions/statuses';
 import { deleteFromTimelines } from 'soapbox/actions/timelines';
-import { useBlockGroupMember, useGroup, useGroupRelationship } from 'soapbox/api/hooks';
+import { useBlockGroupMember, useGroup, useGroupRelationship, useTranslationLanguages } from 'soapbox/api/hooks';
 import { useDeleteGroupStatus } from 'soapbox/api/hooks/groups/useDeleteGroupStatus';
 import DropdownMenu from 'soapbox/components/dropdown-menu';
 import StatusActionButton from 'soapbox/components/status-action-button';
@@ -140,16 +140,16 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
   const { autoTranslate, boostModal, deleteModal, knownLanguages } = useSettings();
   const soapboxConfig = useSoapboxConfig();
 
+  const { translationLanguages } = useTranslationLanguages();
+
   const autoTranslating = useMemo(() => {
     const {
       allow_remote: allowRemote,
       allow_unauthenticated: allowUnauthenticated,
-      source_languages: sourceLanguages,
-      target_languages: targetLanguages,
     } = instance.pleroma.metadata.translation;
 
     const renderTranslate = (me || allowUnauthenticated) && (allowRemote || status.account.local) && ['public', 'unlisted'].includes(status.visibility) && status.contentHtml.length > 0 && status.language !== null && !knownLanguages.includes(status.language);
-    const supportsLanguages = (!sourceLanguages || sourceLanguages.includes(status.language!)) && (!targetLanguages || targetLanguages.includes(intl.locale));
+    const supportsLanguages = (translationLanguages[status.language!]?.includes(intl.locale));
 
     return autoTranslate && features.translations && renderTranslate && supportsLanguages;
   }, [me, status, autoTranslate]);

src/components/translate-button.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 
 import { translateStatus, undoStatusTranslation } from 'soapbox/actions/statuses';
+import { useTranslationLanguages } from 'soapbox/api/hooks';
 import { useAppDispatch, useAppSelector, useFeatures, useInstance, useSettings } from 'soapbox/hooks';
 
 import { HStack, Icon, Stack, Text } from './ui';
@@ -23,17 +24,16 @@ const TranslateButton: React.FC<ITranslateButton> = ({ status }) => {
   const knownLanguages = autoTranslate ? [...settings.knownLanguages, intl.locale] : [intl.locale];
 
   const me = useAppSelector((state) => state.me);
+  const { translationLanguages } = useTranslationLanguages();
 
   const {
     allow_remote: allowRemote,
     allow_unauthenticated: allowUnauthenticated,
-    source_languages: sourceLanguages,
-    target_languages: targetLanguages,
   } = instance.pleroma.metadata.translation;
 
   const renderTranslate = (me || allowUnauthenticated) && (allowRemote || status.account.local) && ['public', 'unlisted'].includes(status.visibility) && status.contentHtml.length > 0 && status.language !== null && intl.locale !== status.language && !status.contentMapHtml?.[intl.locale];
 
-  const supportsLanguages = (!sourceLanguages || sourceLanguages.includes(status.language!)) && (!targetLanguages || targetLanguages.includes(intl.locale));
+  const supportsLanguages = (translationLanguages[status.language!]?.includes(intl.locale));
 
   const handleTranslate: React.MouseEventHandler<HTMLButtonElement> = (e) => {
     e.stopPropagation();

src/features/compose/components/search-results.tsx

@@ -47,7 +47,6 @@ const SearchResults = () => {
   const filterByAccount = useAppSelector((state) => state.search.accountId || undefined);
   const { trendingLinks } = useTrendingLinks();
   const { account } = useAccount(filterByAccount);
-  useAppSelector((state) => console.log(state.search.toJS()));
 
   const handleLoadMore = () => dispatch(expandSearch(selectedFilter));
 
@@ -218,8 +217,6 @@ const SearchResults = () => {
     }
   }
   
-  console.log(submitted, loaded, selectedFilter);
-
   return (
     <>
       {filterByAccount ? (