Update translations handling

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

README.md

@@ -2,7 +2,7 @@
 
 ## Differences compared to Soapbox
 
-- **Broader compatibility**: The compatibility matrix has been updated to support more features on various backends. Support for features specific to GoToSocial and Akkoma has been added, more are coming soon.
+- **Broader compatibility**: The compatibility matrix has been updated to support more features on various backends. Support for features specific to Mitra, Toki, GoToSocial and Akkoma has been added, more are coming soon.
 - **WYSIWYG status composer**: You can use the WYSIWYG editor for advanced text formatting on any backend with Markdown support.
 - **Language detection**: When you write a post, the language gets detected automatically with great accuracy. You can always select it manually.
 - **Drafts**: You can save a post you are working on and finish it later. Drafts are only stored locally and work with any backend.

package.json

@@ -133,7 +133,7 @@
     "multiselect-react-dropdown": "^2.0.25",
     "object-to-formdata": "^4.5.1",
     "path-browserify": "^1.0.1",
-    "pl-api": "^0.0.12",
+    "pl-api": "^0.0.13",
     "postcss": "^8.4.29",
     "process": "^0.11.10",
     "punycode": "^2.1.1",

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 ? (

yarn.lock

@@ -8390,10 +8390,10 @@ pkg-types@^1.0.3:
     mlly "^1.2.0"
     pathe "^1.1.0"
 
-pl-api@^0.0.12:
+pl-api@^0.0.13:
-  version "0.0.12"
+  version "0.0.13"
-  resolved "https://registry.yarnpkg.com/pl-api/-/pl-api-0.0.12.tgz#3bd12c2e1799bc4252420b61fb3893039cb25e78"
+  resolved "https://registry.yarnpkg.com/pl-api/-/pl-api-0.0.13.tgz#e13eb2a47ee4854cc6aa641bbefa6285f7b8d5fd"
-  integrity sha512-S4KouCH5ZL2GOIeQPczgY3NXX8yhtRhbhdcaywUxrjybHY2idVv9SnW3sgldUe83INY0AwnBHBuxRlMY2VuNiA==
+  integrity sha512-cyxMaK+IPUTQzMhODx9LZ+P/sMfLb6xu44RyZj7baJX/LSJj/YSMPqhV6xLQfjWm65HyPNOIDnz5hD6dA0v8/w==
   dependencies:
     blurhash "^2.0.5"
     http-link-header "^1.1.3"