From 1549043c0ae6f5bd8b3d1ef9a845f3f23fed02ca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Thu, 22 Aug 2024 19:17:52 +0200 Subject: [PATCH] Update translations handling MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- README.md | 2 +- package.json | 2 +- src/api/hooks/index.ts | 3 ++ .../hooks/instance/useTranslationLanguages.ts | 37 +++++++++++++++++++ src/components/status-action-bar.tsx | 8 ++-- src/components/translate-button.tsx | 6 +-- .../compose/components/search-results.tsx | 3 -- yarn.lock | 8 ++-- 8 files changed, 53 insertions(+), 16 deletions(-) create mode 100644 src/api/hooks/instance/useTranslationLanguages.ts diff --git a/README.md b/README.md index a35bdc0d3..9697ef6d8 100644 --- a/README.md +++ b/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. diff --git a/package.json b/package.json index 26d362024..a744a7def 100644 --- a/package.json +++ b/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", diff --git a/src/api/hooks/index.ts b/src/api/hooks/index.ts index 2b4a12338..0c15925f9 100644 --- a/src/api/hooks/index.ts +++ b/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'; diff --git a/src/api/hooks/instance/useTranslationLanguages.ts b/src/api/hooks/instance/useTranslationLanguages.ts new file mode 100644 index 000000000..a45c3f521 --- /dev/null +++ b/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 }; diff --git a/src/components/status-action-bar.tsx b/src/components/status-action-bar.tsx index 1dd800523..49fc2ab43 100644 --- a/src/components/status-action-bar.tsx +++ b/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 = ({ 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]); diff --git a/src/components/translate-button.tsx b/src/components/translate-button.tsx index 5755be9c8..d512443bf 100644 --- a/src/components/translate-button.tsx +++ b/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 = ({ 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 = (e) => { e.stopPropagation(); diff --git a/src/features/compose/components/search-results.tsx b/src/features/compose/components/search-results.tsx index c6367081a..db6a51c07 100644 --- a/src/features/compose/components/search-results.tsx +++ b/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 ? ( diff --git a/yarn.lock b/yarn.lock index 2485014e0..04f967d12 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8390,10 +8390,10 @@ pkg-types@^1.0.3: mlly "^1.2.0" pathe "^1.1.0" -pl-api@^0.0.12: - version "0.0.12" - resolved "https://registry.yarnpkg.com/pl-api/-/pl-api-0.0.12.tgz#3bd12c2e1799bc4252420b61fb3893039cb25e78" - integrity sha512-S4KouCH5ZL2GOIeQPczgY3NXX8yhtRhbhdcaywUxrjybHY2idVv9SnW3sgldUe83INY0AwnBHBuxRlMY2VuNiA== +pl-api@^0.0.13: + version "0.0.13" + resolved "https://registry.yarnpkg.com/pl-api/-/pl-api-0.0.13.tgz#e13eb2a47ee4854cc6aa641bbefa6285f7b8d5fd" + integrity sha512-cyxMaK+IPUTQzMhODx9LZ+P/sMfLb6xu44RyZj7baJX/LSJj/YSMPqhV6xLQfjWm65HyPNOIDnz5hD6dA0v8/w== dependencies: blurhash "^2.0.5" http-link-header "^1.1.3"