|
|
|
import { LanguageSelector } from "@/components/LanguageSelector";
|
|
|
|
import { useModal, withModal } from "@/modules/modals";
|
|
|
|
import { useEnabledLanguages } from "@/utilities/languages";
|
|
|
|
import { FunctionComponent, useCallback, useMemo, useState } from "react";
|
|
|
|
import { Button, Form } from "react-bootstrap";
|
|
|
|
import { useProcess } from "./ToolContext";
|
|
|
|
import { availableTranslation } from "./tools";
|
|
|
|
|
|
|
|
const TranslationTool: FunctionComponent = () => {
|
|
|
|
const { data: languages } = useEnabledLanguages();
|
|
|
|
|
|
|
|
const available = useMemo(
|
|
|
|
() => languages.filter((v) => v.code2 in availableTranslation),
|
|
|
|
[languages]
|
|
|
|
);
|
|
|
|
|
|
|
|
const Modal = useModal();
|
|
|
|
|
|
|
|
const [selectedLanguage, setLanguage] =
|
|
|
|
useState<Nullable<Language.Info>>(null);
|
|
|
|
|
|
|
|
const process = useProcess();
|
|
|
|
|
|
|
|
const submit = useCallback(() => {
|
|
|
|
if (selectedLanguage) {
|
|
|
|
process("translate", { language: selectedLanguage.code2 });
|
|
|
|
}
|
|
|
|
}, [process, selectedLanguage]);
|
|
|
|
|
|
|
|
const footer = (
|
|
|
|
<Button disabled={!selectedLanguage} onClick={submit}>
|
|
|
|
Translate
|
|
|
|
</Button>
|
|
|
|
);
|
|
|
|
return (
|
|
|
|
<Modal title="Translation" footer={footer}>
|
|
|
|
<Form.Label>
|
|
|
|
Enabled languages not listed here are unsupported by Google Translate.
|
|
|
|
</Form.Label>
|
|
|
|
<LanguageSelector
|
|
|
|
options={available}
|
|
|
|
onChange={setLanguage}
|
|
|
|
></LanguageSelector>
|
|
|
|
</Modal>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default withModal(TranslationTool, "translation-tool");
|