App.js

// @flow
import * as React from "react";
import Editor from "./components/editor";

// svg icons
import Microphone from "./microphone.svg";
import Smiley from "./smiley.svg";
import Send from "./send.svg";

// css module
import styles from "./App.module.css";

type State = { isTyping: boolean };

export default class App extends React.Component<{}, State> {
  state = { isTyping: false };

  getEditorRef = (ref: React.ElementRef<*>) => {
    this.editor = ref;
  };

  onChangeText = (text: string) => this.setState({ isTyping: !!text.trim() });

  onSubmit = () => {
    if (this.editor) this.editor.clearEditor();
    this.setState({ isTyping: false });
  };

  handleSend = (event: SyntheticMouseEvent<HTMLButtonElement>) => {
    const { isTyping } = this.state;

    event.preventDefault();
    if (isTyping) this.onSubmit();
  };

  editor: ?React.ElementRef<*>;

  render() {
    const { isTyping } = this.state;

    return (
      <div className={styles.container}>
        <div className={styles.footer}>
          <button type="button" className={styles.button}>
            <img src={Smiley} className={styles.icon} alt="Emojis" />
          </button>
          <div className={styles.editorContainer}>
            <div className={styles.editor}>
              <Editor
                placeholder="Digite uma mensagem"
                ref={this.getEditorRef}
                onChangeText={this.onChangeText}
                onSubmit={this.onSubmit}
              />
            </div>
          </div>
          <button
            type="button"
            className={styles.button}
            onClick={this.handleSend}
          >
            <img
              src={isTyping ? Send : Microphone}
              className={styles.icon}
              alt="Send text or voice"
            />
          </button>
        </div>
      </div>
    );
  }
}