Separate Message to InfoMessage and ErrorMessage

7 files changed, 72 insertions, 62 deletions

diff --git a/src/console/components/Console.tsx b/src/console/components/Console.tsx
index fa91336..951b627 100644
--- a/src/console/components/Console.tsx
+++ b/src/console/components/Console.tsx
@@ -1,7 +1,8 @@
 import React from "react";
 import Input from "./console/Input";
 import Completion from "./console/Completion";
-import Message from "./console/Message";
+import InfoMessage from "./InfoMessage";
+import ErrorMessage from "./ErrorMessage";
 import * as consoleActions from "../../console/actions/console";
 import CommandLineParser, {
   InputPhase,
@@ -199,10 +200,15 @@ const Console: React.FC = () => {
         </ColorSchemeProvider>
       );
     case "info":
+      return (
+        <ColorSchemeProvider colorscheme={state.colorscheme}>
+          <InfoMessage>{state.messageText}</InfoMessage>
+        </ColorSchemeProvider>
+      );
     case "error":
       return (
         <ColorSchemeProvider colorscheme={state.colorscheme}>
-          <Message mode={state.mode}>{state.messageText}</Message>
+          <ErrorMessage>{state.messageText}</ErrorMessage>
         </ColorSchemeProvider>
       );
     default:
diff --git a/src/console/components/ErrorMessage.tsx b/src/console/components/ErrorMessage.tsx
new file mode 100644
index 0000000..93b049b
--- /dev/null
+++ b/src/console/components/ErrorMessage.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+import { styled } from "./ColorSchemeProvider";
+
+const Wrapper = styled.p`
+  border-top: 1px solid gray;
+  background-color: ${({ theme }) => theme.consoleErrorBackground};
+  color: ${({ theme }) => theme.consoleErrorForeground};
+  font-weight: bold;
+`;
+
+const ErrorMessage: React.FC = ({ children }) => {
+  return <Wrapper role="alert">{children}</Wrapper>;
+};
+
+export default ErrorMessage;
diff --git a/src/console/components/InfoMessage.tsx b/src/console/components/InfoMessage.tsx
new file mode 100644
index 0000000..02ad27d
--- /dev/null
+++ b/src/console/components/InfoMessage.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+import { styled } from "./ColorSchemeProvider";
+
+const Wrapper = styled.p`
+  border-top: 1px solid gray;
+  background-color: ${({ theme }) => theme.consoleInfoBackground};
+  color: ${({ theme }) => theme.consoleInfoForeground};
+  font-weight: normal;
+`;
+
+const InfoMessage: React.FC = ({ children }) => {
+  return <Wrapper role="status">{children}</Wrapper>;
+};
+
+export default InfoMessage;
diff --git a/src/console/components/console/Message.tsx b/src/console/components/console/Message.tsx
deleted file mode 100644
index 8dcdb5a..0000000
--- a/src/console/components/console/Message.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from "react";
-import { styled } from "../ColorSchemeProvider";
-
-const Error = styled.p`
-  border-top: 1px solid gray;
-  background-color: ${({ theme }) => theme.consoleErrorBackground};
-  color: ${({ theme }) => theme.consoleErrorForeground};
-  font-weight: bold;
-`;
-
-const Info = styled.p`
-  border-top: 1px solid gray;
-  background-color: ${({ theme }) => theme.consoleInfoBackground};
-  color: ${({ theme }) => theme.consoleInfoForeground};
-  font-weight: normal;
-`;
-
-interface Props {
-  mode: string;
-  children: string;
-}
-
-const Message: React.FC<Props> = ({ mode, children }) => {
-  switch (mode) {
-    case "error":
-      return <Error role="alert">{children}</Error>;
-    case "info":
-      return <Info role="status">{children}</Info>;
-  }
-  return null;
-};
-
-export default Message;
diff --git a/test/console/components/ErrorMessage.test.tsx b/test/console/components/ErrorMessage.test.tsx
new file mode 100644
index 0000000..46ec0b0
--- /dev/null
+++ b/test/console/components/ErrorMessage.test.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+import ReactTestRenderer from "react-test-renderer";
+import { expect } from "chai";
+import ErrorMessage from "../../../src/console/components/ErrorMessage";
+
+describe("console/components/console/completion/ErrorMessage", () => {
+  it("renders an error message", () => {
+    const root = ReactTestRenderer.create(
+      <ErrorMessage mode="error">Hello!</ErrorMessage>
+    ).root;
+
+    const p = root.findByType("p");
+
+    expect(p.props["role"]).to.equal("alert");
+    expect(p.children).to.deep.equal(["Hello!"]);
+  });
+});
diff --git a/test/console/components/InfoMessage.test.tsx b/test/console/components/InfoMessage.test.tsx
new file mode 100644
index 0000000..5b678ff
--- /dev/null
+++ b/test/console/components/InfoMessage.test.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+import ReactTestRenderer from "react-test-renderer";
+import { expect } from "chai";
+import InfoMessage from "../../../src/console/components/InfoMessage";
+
+describe("console/components/console/completion/InfoMessage", () => {
+  it("renders an information message", () => {
+    const root = ReactTestRenderer.create(
+      <InfoMessage mode="info">Hello!</InfoMessage>
+    ).root;
+
+    const p = root.findByType("p");
+
+    expect(p.props["role"]).to.equal("status");
+    expect(p.children).to.deep.equal(["Hello!"]);
+  });
+});
diff --git a/test/console/components/console/Message.test.tsx b/test/console/components/console/Message.test.tsx
deleted file mode 100644
index f8f950a..0000000
--- a/test/console/components/console/Message.test.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from "react";
-import ReactTestRenderer from "react-test-renderer";
-import { expect } from "chai";
-import Message from "../../../../src/console/components/console/Message";
-
-describe("console/components/console/completion/Message", () => {
-  it("renders an information message", () => {
-    const root = ReactTestRenderer.create(<Message mode="info">Hello!</Message>)
-      .root;
-
-    const p = root.findByType("p");
-
-    expect(p.props["role"]).to.equal("status");
-    expect(p.children).to.deep.equal(["Hello!"]);
-  });
-
-  it("renders an error message", () => {
-    const root = ReactTestRenderer.create(
-      <Message mode="error">Hello!</Message>
-    ).root;
-
-    const p = root.findByType("p");
-
-    expect(p.props["role"]).to.equal("alert");
-    expect(p.children).to.deep.equal(["Hello!"]);
-  });
-});