From f84daddf84cbb6249b0baa0fc1191078852f3d17 Mon Sep 17 00:00:00 2001
From: sienori <iilll7d6f@yahoo.co.jp>
Date: Sat, 23 Feb 2019 04:28:00 +0900
Subject: [PATCH] Show link to google translate on error in popup

---
 src/_locales/en/messages.json      |  3 +++
 src/popup/components/PopupPage.js  |  2 ++
 src/popup/components/ResultArea.js | 14 ++++++++++++++
 src/popup/styles/ResultArea.scss   | 12 ++++++++++++
 4 files changed, 31 insertions(+)

diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json
index 54be1f5..5792182 100644
--- a/src/_locales/en/messages.json
+++ b/src/_locales/en/messages.json
@@ -15,6 +15,9 @@
   "showLink": {
     "message": "Translate this page"
   },
+  "openInGoogleLabel": {
+    "message": "Open in Google Translate"
+  },
   "targetLangLabel": {
     "message": "Target language"
   },
diff --git a/src/popup/components/PopupPage.js b/src/popup/components/PopupPage.js
index 3a59155..3ee48ae 100644
--- a/src/popup/components/PopupPage.js
+++ b/src/popup/components/PopupPage.js
@@ -111,6 +111,8 @@ export default class PopupPage extends Component {
         <InputArea inputText={this.state.inputText} handleInputText={this.handleInputText} />
         <hr />
         <ResultArea
+          inputText={this.state.inputText}
+          targetLang={this.state.targetLang}
           resultText={this.state.resultText}
           candidateText={this.state.candidateText}
           statusText={this.state.statusText}
diff --git a/src/popup/components/ResultArea.js b/src/popup/components/ResultArea.js
index cc7021c..60374bd 100644
--- a/src/popup/components/ResultArea.js
+++ b/src/popup/components/ResultArea.js
@@ -1,6 +1,8 @@
 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 "../styles/ResultArea.scss";
 
 const splitLine = text => {
@@ -13,11 +15,23 @@ export default props => {
   const isError = statusText !== "OK";
   const shouldShowCandidate = getSettings("ifShowCandidate");
 
+  const handleLinkClick = () => {
+    const { inputText, targetLang } = props;
+    const encodedText = encodeURIComponent(inputText);
+    const translateUrl = `https://translate.google.com/?sl=auto&tl=${targetLang}&text=${encodedText}`;
+    openUrl(translateUrl);
+  };
+
   return (
     <div id="resultArea">
       <p className="resultText">{splitLine(resultText)}</p>
       {shouldShowCandidate && <p className="candidateText">{splitLine(candidateText)}</p>}
       {isError && <p className="error">{getErrorMessage(statusText)}</p>}
+      {isError && (
+        <p className="translateLink">
+          <a onClick={handleLinkClick}>{browser.i18n.getMessage("openInGoogleLabel")}</a>
+        </p>
+      )}
     </div>
   );
 };
diff --git a/src/popup/styles/ResultArea.scss b/src/popup/styles/ResultArea.scss
index ea0d15d..af10a20 100644
--- a/src/popup/styles/ResultArea.scss
+++ b/src/popup/styles/ResultArea.scss
@@ -23,4 +23,16 @@
       }
     }
   }
+
+  .translateLink {
+    a {
+      font-style: normal;
+      text-decoration: none;
+      color: var(--highlight);
+      cursor: pointer;
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
 }