Show errors in content

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;
+};

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>

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>
     );

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 {

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));