Refactor translate

2022-03-03 16:24:35 +09:00 · 2022-03-03 16:24:35 +09:00 · 38e52e3a49
parent a63bf0f85d
commit 38e52e3a49
8 changed files with 70 additions and 69 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -1421,6 +1421,14 @@
      "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
      "dev": true
    },
+    "axios": {
+      "version": "0.26.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.26.0.tgz",
+      "integrity": "sha512-lKoGLMYtHvFrPVt3r+RBMp9nh34N0M8zEfCWqdWZx6phynIEhQqAdydpyBAAG211zlhX9Rgu08cOamy6XjE5Og==",
+      "requires": {
+        "follow-redirects": "^1.14.8"
+      }
+    },
    "babel-code-frame": {
      "version": "6.26.0",
      "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
@ -3232,6 +3240,11 @@
        }
      }
    },
+    "follow-redirects": {
+      "version": "1.14.9",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz",
+      "integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w=="
+    },
    "forever-agent": {
      "version": "0.6.1",
      "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
--- a/package.json
+++ b/package.json
@ -2,6 +2,7 @@
  "name": "simple-translate",
  "version": "0.0.0",
  "dependencies": {
+    "axios": "^0.26.0",
    "browser-info": "^1.2.0",
    "loglevel": "^1.6.1",
    "query-string": "^6.1.0",
--- a/src/common/getErrorMessage.js
+++ b/src/common/getErrorMessage.js
@ -1,17 +0,0 @@
-import browser from "webextension-polyfill";
-
-export default statusText => {
-  let errorMessage = "";
-  switch (statusText) {
-    case "Network Error":
-      errorMessage = browser.i18n.getMessage("networkError");
-      break;
-    case "Service Unavailable":
-      errorMessage = browser.i18n.getMessage("unavailableError");
-      break;
-    default:
-      errorMessage = `${browser.i18n.getMessage("unknownError")} [${statusText}]`;
-      break;
-  }
-  return errorMessage;
-};
--- a/src/common/translate.js
+++ b/src/common/translate.js
@ -1,4 +1,5 @@
 import log from "loglevel";
+import axios from "axios";
 let translationHistory = [];

 const logDir = "common/translate";
@ -23,59 +24,62 @@ const setHistory = (sourceWord, sourceLang, targetLang, formattedResult) => {
  });
 };

-const sendRequest = (word, sourceLang, targetLang) => {
-  log.log(logDir, "sendRequest()");
+const sendRequest = async (word, sourceLang, targetLang) => {
  const url = `https://translate.googleapis.com/translate_a/single?client=gtx&sl=${sourceLang}&tl=${targetLang}&dt=t&dt=bd&dj=1&q=${encodeURIComponent(
    word
  )}`;
-  const xhr = new XMLHttpRequest();
-  xhr.responseType = "json";
-  xhr.open("GET", url);
-  xhr.send();
+  const result = await axios.get(url).catch(error => error.response);

-  return new Promise((resolve, reject) => {
-    xhr.onload = () => {
-      resolve(xhr);
-    };
-    xhr.onerror = () => {
-      resolve(xhr);
-    };
-  });
-};
-
-const formatResult = result => {
  const resultData = {
    resultText: "",
    candidateText: "",
    sourceLanguage: "",
    percentage: 0,
-    statusText: ""
+    isError: false,
+    errorMessage: ""
  };

-  if (result.status === 0) resultData.statusText = "Network Error";
-  else if (result.status === 200) resultData.statusText = "OK";
-  else if (result.status === 429) resultData.statusText = "Service Unavailable";
-  else if (result.status === 503) resultData.statusText = "Service Unavailable";
-  else resultData.statusText = result.statusText || result.status;
+  if (!result || result?.status !== 200) {
+    resultData.isError = true;

-  if (resultData.statusText !== "OK") {
-    log.error(logDir, "formatResult()", resultData);
+    if (!result || result.status === 0) resultData.errorMessage = browser.i18n.getMessage("networkError");
+    else if (result.status === 429 || result.status === 503) resultData.errorMessage = browser.i18n.getMessage("unavailableError");
+    else resultData.errorMessage = `${browser.i18n.getMessage("unknownError")} [${result?.status} ${result?.statusText}]`;
+
+    log.error(logDir, "sendRequest()", result);
    return resultData;
  }

-  resultData.sourceLanguage = result.response.src;
-  resultData.percentage = result.response.ld_result.srclangs_confidences[0];
-  resultData.resultText = result.response.sentences.map(sentence => sentence.trans).join("");
-  if (result.response.dict) {
-    resultData.candidateText = result.response.dict
+  resultData.sourceLanguage = result.data.src;
+  resultData.percentage = result.data.ld_result.srclangs_confidences[0];
+  resultData.resultText = result.data.sentences.map(sentence => sentence.trans).join("");
+  if (result.data.dict) {
+    resultData.candidateText = result.data.dict
      .map(dict => `${dict.pos}${dict.pos != "" ? ": " : ""}${dict.terms.join(", ")}\n`)
      .join("");
  }

-  log.log(logDir, "formatResult()", resultData);
+  log.log(logDir, "sendRequest()", resultData);
  return resultData;
 };

+const sendRequestToDeepL = async (word, sourceLang, targetLang) => {
+  log.log(logDir, "sendRequestToDeepL()");
+
+  let params = new URLSearchParams();
+
+  const key = "f5a2c02c-7871-af5c-0d6a-244a9e6d4a1f:fx";
+  params.append("auth_key", key);
+  params.append("text", word);
+  params.append("target_lang", "ja");
+
+  const url = "https://api-free.deepl.com/v2/translate";
+
+  const res = await axios.post(url, params).catch(e => e.response);
+  console.log("!!!!!!!!!!!!!!!", res);
+};
+
+
 export default async (sourceWord, sourceLang = "auto", targetLang) => {
  log.log(logDir, "tranlate()", sourceWord, targetLang);
  sourceWord = sourceWord.trim();
@ -92,7 +96,6 @@ export default async (sourceWord, sourceLang = "auto", targetLang) => {
  if (history) return history.result;

  const result = await sendRequest(sourceWord, sourceLang, targetLang);
-  const formattedResult = formatResult(result);
-  setHistory(sourceWord, sourceLang, targetLang, formattedResult);
-  return formattedResult;
+  setHistory(sourceWord, sourceLang, targetLang, result);
+  return result;
 };
--- a/src/content/components/TranslateContainer.js
+++ b/src/content/components/TranslateContainer.js
@ -21,8 +21,7 @@ const matchesTargetLang = async selectedText => {
  //先頭100字を翻訳にかけて判定
  const partSelectedText = selectedText.substring(0, 100);
  const result = await translateText(partSelectedText);
-  const isError = result.statusText !== "OK";
-  if (isError) return false;
+  if (result.isError) return false;

  const isNotText = result.percentage === 0;
  if (isNotText) return true;
@ -42,7 +41,8 @@ export default class TranslateContainer extends Component {
      currentLang: getSettings("targetLang"),
      resultText: "",
      candidateText: "",
-      statusText: "OK"
+      isError: false,
+      errorMessage: ""
    };
    this.selectedText = props.selectedText;
    this.selectedPosition = props.selectedPosition;
@ -98,7 +98,8 @@ export default class TranslateContainer extends Component {
      panelPosition: panelPosition,
      resultText: result.resultText,
      candidateText: getSettings("ifShowCandidate") ? result.candidateText : "",
-      statusText: result.statusText,
+      isError: result.isError,
+      errorMessage: result.errorMessage,
      currentLang: shouldSwitchSecondLang ? secondLang : targetLang
    });
  };
@ -122,7 +123,8 @@ export default class TranslateContainer extends Component {
          currentLang={this.state.currentLang}
          resultText={this.state.resultText}
          candidateText={this.state.candidateText}
-          statusText={this.state.statusText}
+          isError={this.state.isError}
+          errorMessage={this.state.errorMessage}
          hidePanel={this.hidePanel}
        />
      </div>
--- a/src/content/components/TranslatePanel.js
+++ b/src/content/components/TranslatePanel.js
@ -2,7 +2,6 @@ import browser from "webextension-polyfill";
 import React, { Component } from "react";
 import ReactDOM from "react-dom";
 import { getSettings } from "src/settings/settings";
-import getErrorMessage from "src/common/getErrorMessage";
 import "../styles/TranslatePanel.scss";

 const splitLine = text => {
@ -163,8 +162,7 @@ export default class TranslatePanel extends Component {
  };

  render = () => {
-    const { shouldShow, selectedText, currentLang, resultText, candidateText, statusText } = this.props;
-    const isError = statusText !== "OK";
+    const { shouldShow, selectedText, currentLang, resultText, candidateText, isError, errorMessage } = this.props;
    const { width, height } = this.state.shouldResize
      ? { width: parseInt(getSettings("width")), height: parseInt(getSettings("height")) }
      : { width: this.state.panelWidth, height: this.state.panelHeight };
@ -204,7 +202,7 @@ export default class TranslatePanel extends Component {
            </p>
            {isError && (
              <p className="simple-translate-error" style={candidateStyles}>
-                {getErrorMessage(statusText)}
+                {errorMessage}
                <br />
                <a
                  href={`https://translate.google.com/?sl=auto&tl=${currentLang}&text=${encodeURIComponent(selectedText)}`}
--- a/src/popup/components/PopupPage.js
+++ b/src/popup/components/PopupPage.js
@ -40,7 +40,8 @@ export default class PopupPage extends Component {
      resultText: "",
      candidateText: "",
      sourceLang: "",
-      statusText: "OK",
+      isError: false,
+      errorMessage: "",
      tabUrl: "",
      isConnected: true,
      isEnabledOnPage: true,
@ -112,8 +113,9 @@ export default class PopupPage extends Component {
    this.setState({
      resultText: result.resultText,
      candidateText: result.candidateText,
-      statusText: result.statusText,
-      sourceLang: result.sourceLanguage
+      sourceLang: result.sourceLanguage,
+      isError: result.isError,
+      errorMessage: result.errorMessage
    });
    return result;
  };
@ -152,7 +154,7 @@ export default class PopupPage extends Component {
      const tab = (await browser.tabs.query({ currentWindow: true, active: true }))[0];
      if (isEnabled) await browser.tabs.sendMessage(tab.id, { message: "enableExtension" });
      else await browser.tabs.sendMessage(tab.id, { message: "disableExtension" });
-    } catch (e) {}
+    } catch (e) { }
  };

  render() {
@ -174,7 +176,8 @@ export default class PopupPage extends Component {
          targetLang={this.state.targetLang}
          resultText={this.state.resultText}
          candidateText={this.state.candidateText}
-          statusText={this.state.statusText}
+          isError={this.state.isError}
+          errorMessage={this.state.errorMessage}
        />
        <Footer
          tabUrl={this.state.tabUrl}
--- a/src/popup/components/ResultArea.js
+++ b/src/popup/components/ResultArea.js
@ -1,6 +1,5 @@
 import React from "react";
 import browser from "webextension-polyfill";
-import getErrorMessage from "src/common/getErrorMessage";
 import { getSettings } from "src/settings/settings";
 import openUrl from "src/common/openUrl";
 import CopyButton from "./CopyButton";
@ -13,8 +12,7 @@ const splitLine = text => {
 };

 export default props => {
-  const { resultText, candidateText, statusText, targetLang } = props;
-  const isError = statusText !== "OK";
+  const { resultText, candidateText, isError, errorMessage, targetLang } = props;
  const shouldShowCandidate = getSettings("ifShowCandidate");

  const handleLinkClick = () => {
@ -28,7 +26,7 @@ export default props => {
    <div id="resultArea">
      <p className="resultText" dir="auto">{splitLine(resultText)}</p>
      {shouldShowCandidate && <p className="candidateText" dir="auto">{splitLine(candidateText)}</p>}
-      {isError && <p className="error">{getErrorMessage(statusText)}</p>}
+      {isError && <p className="error">{errorMessage}</p>}
      {isError && (
        <p className="translateLink">
          <a onClick={handleLinkClick}>{browser.i18n.getMessage("openInGoogleLabel")}</a>