Add input message

src/components/MessageInput/MessageInput.css

@@ -0,0 +1,6 @@
+.MessageInput {
+  display: flex;
+  flex-direction: row;
+  padding: 1em;
+  background-color: grey;
+}

src/components/MessageInput/MessageInput.js

@@ -0,0 +1,42 @@
+import React, { useState } from "react";
+import "./MessageInput.css";
+
+const MessageInput = (props) => {
+  const [content, setContent] = useState("");
+  const [isPublic, setIsPublic] = useState(true);
+
+  const sendMessage = () => {
+    if (content.length > 0) {
+      props.handleSubmit({ author: "User", content, isPublic });
+      setContent("");
+    }
+  };
+
+  return (
+    <div className="MessageInput">
+      <input
+        type="text"
+        data-testid="input-text"
+        value={content}
+        placeholder={"Type your message"}
+        onChange={(e) => setContent(e.target.value)}
+      />
+      <input
+        type="checkbox"
+        data-testid="input-checkbox"
+        name="isPublic"
+        defaultChecked={isPublic}
+        onChange={() => setIsPublic(!isPublic)}
+      />
+      <button
+        onClick={sendMessage}
+        disabled={props.isLoading}
+        data-testid="submit-btn"
+      >
+        Send {isPublic ? "public" : "private"}
+      </button>
+    </div>
+  );
+};
+
+export default MessageInput;

src/components/MessageInput/MessageInput.test.js

@@ -0,0 +1,47 @@
+import React from "react";
+import { render, fireEvent, cleanup } from "@testing-library/react";
+import MessageInput from "./MessageInput";
+
+afterEach(cleanup);
+
+describe("<MessageInput />", () => {
+  it("should send messages", () => {
+    const fn = jest.fn();
+    const { getByTestId } = render(<MessageInput handleSubmit={fn} />);
+    const inputText = getByTestId("input-text");
+    const btn = getByTestId("submit-btn");
+    fireEvent.change(inputText, { target: { value: "last message" } });
+    fireEvent.click(btn);
+    expect(fn).toHaveBeenCalledTimes(1);
+    expect(fn).toHaveBeenCalledWith({
+      author: "User",
+      isPublic: true,
+      content: "last message",
+    });
+  });
+
+  it("should send private messages", () => {
+    const fn = jest.fn();
+    const { getByTestId } = render(<MessageInput handleSubmit={fn} />);
+    const inputText = getByTestId("input-text");
+    const inputCheckbox = getByTestId("input-checkbox");
+    const btn = getByTestId("submit-btn");
+    fireEvent.change(inputText, { target: { value: "last private message" } });
+    fireEvent.click(inputCheckbox);
+    fireEvent.click(btn);
+    expect(fn).toHaveBeenCalledTimes(1);
+    expect(fn).toHaveBeenCalledWith({
+      author: "User",
+      isPublic: false,
+      content: "last private message",
+    });
+  });
+
+  it("should not send blank messages", () => {
+    const fn = jest.fn();
+    const { getByTestId } = render(<MessageInput handleSubmit={fn} />);
+    const btn = getByTestId("submit-btn");
+    fireEvent.click(btn);
+    expect(fn).toHaveBeenCalledTimes(0);
+  });
+});