From 063aa7f31fb7798e42fdd5ca4901f4c360755130 Mon Sep 17 00:00:00 2001
From: sienori <iilll7d6f@yahoo.co.jp>
Date: Sat, 23 Feb 2019 02:30:34 +0900
Subject: [PATCH] Show errors in content

---
 src/common/getErrorMessage.js                | 17 +++++++++++++++++
 src/content/components/TranslateContainer.js |  7 +++++--
 src/content/components/TranslatePanel.js     | 19 ++++++++++++++++---
 src/content/styles/TranslatePanel.scss       |  3 ++-
 src/popup/components/ResultArea.js           | 18 +-----------------
 5 files changed, 41 insertions(+), 23 deletions(-)
 create mode 100644 src/common/getErrorMessage.js

diff --git a/src/common/getErrorMessage.js b/src/common/getErrorMessage.js
new file mode 100644
index 0000000..2bf585e
--- /dev/null
+++ b/src/common/getErrorMessage.js
@@ -0,0 +1,17 @@
+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;
+};
diff --git a/src/content/components/TranslateContainer.js b/src/content/components/TranslateContainer.js
index 43b739a..8ca41a2 100644
--- a/src/content/components/TranslateContainer.js
+++ b/src/content/components/TranslateContainer.js
@@ -62,7 +62,8 @@ export default class TranslateContainer extends Component {
       shouldShowPanel: false,
       panelPosition: { x: 0, y: 0 },
       resultText: "",
-      candidateText: ""
+      candidateText: "",
+      statusText: "OK"
     };
     this.selectedText = "";
     this.init();
@@ -121,7 +122,8 @@ export default class TranslateContainer extends Component {
       shouldShowPanel: true,
       panelPosition: position,
       resultText: result.resultText,
-      candidateText: getSettings("ifShowCandidate") ? result.candidateText : ""
+      candidateText: getSettings("ifShowCandidate") ? result.candidateText : "",
+      statusText: result.statusText
     });
   };
 
@@ -176,6 +178,7 @@ export default class TranslateContainer extends Component {
           position={this.state.panelPosition}
           resultText={this.state.resultText}
           candidateText={this.state.candidateText}
+          statusText={this.state.statusText}
           hidePanel={this.hidePanel}
         />
       </div>
diff --git a/src/content/components/TranslatePanel.js b/src/content/components/TranslatePanel.js
index 5f76e03..6edc905 100644
--- a/src/content/components/TranslatePanel.js
+++ b/src/content/components/TranslatePanel.js
@@ -1,8 +1,14 @@
 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 => {
+  const regex = /(\n)/g;
+  return text.split(regex).map((line, i) => (line.match(regex) ? <br key={i} /> : line));
+};
+
 export default class TranslatePanel extends Component {
   constructor(props) {
     super(props);
@@ -75,6 +81,8 @@ export default class TranslatePanel extends Component {
   };
 
   render = () => {
+    const { shouldShow, resultText, candidateText, statusText } = this.props;
+    const isError = statusText !== "OK";
     const { width, height } = this.state.shouldResize
       ? { width: parseInt(getSettings("width")), height: parseInt(getSettings("height")) }
       : { width: this.state.panelWidth, height: this.state.panelHeight };
@@ -99,17 +107,22 @@ export default class TranslatePanel extends Component {
 
     return (
       <div
-        className={`simple-translate-panel ${this.props.shouldShow ? "isShow" : ""}`}
+        className={`simple-translate-panel ${shouldShow ? "isShow" : ""}`}
         ref="panel"
         style={panelStyles}
       >
         <div className="simple-translate-result-wrapper" ref="wrapper" style={wrapperStyles}>
           <p className="simple-translate-result" style={resultStyles}>
-            {this.props.resultText}
+            {splitLine(resultText)}
           </p>
           <p className="simple-translate-candidate" style={candidateStyles}>
-            {this.props.candidateText}
+            {splitLine(candidateText)}
           </p>
+          {isError && (
+            <p className="simple-translate-error" style={candidateStyles}>
+              {getErrorMessage(statusText)}
+            </p>
+          )}
         </div>
       </div>
     );
diff --git a/src/content/styles/TranslatePanel.scss b/src/content/styles/TranslatePanel.scss
index b096e25..3b4466e 100644
--- a/src/content/styles/TranslatePanel.scss
+++ b/src/content/styles/TranslatePanel.scss
@@ -43,7 +43,8 @@
         &.simple-translate-result {
           color: var(--simple-translate-main-text);
         }
-        &.simple-translate-candidate {
+        &.simple-translate-candidate,
+        &.simple-translate-error {
           color: var(--simple-translate-sub-text);
           margin-top: 1em;
           &:empty {
diff --git a/src/popup/components/ResultArea.js b/src/popup/components/ResultArea.js
index 6e21fe0..495cf87 100644
--- a/src/popup/components/ResultArea.js
+++ b/src/popup/components/ResultArea.js
@@ -1,23 +1,7 @@
 import React from "react";
-import browser from "webextension-polyfill";
+import getErrorMessage from "src/common/getErrorMessage";
 import "../styles/ResultArea.scss";
 
-const getErrorMessage = statusText => {
-  let errorMessage = "";
-  switch (statusText) {
-    case "":
-      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;
-};
-
 const splitLine = text => {
   const regex = /(\n)/g;
   return text.split(regex).map((line, i) => (line.match(regex) ? <br key={i} /> : line));