fluent.js

import $ from "jquery";
import uuid from "uuid/v4";

import { sendAmplitude, sendApiMutate } from "lib/messages";
import { MutationCreateMessageArgs } from "lib/types/graphql";

import { store } from "content/store";

import createMessageGql from "./create-message.gql";
import { renderHighlights } from "./Shadow";
import { Type } from "./state";

// listen for text input
$(document).on("focusin", (event) => {
  const {
    translations: {
      settings: { messenger }
    }
  } = store.getState();
  if (messenger) {
    const element = event.target;

    if (
      element.hasAttribute("contenteditable")
      // || (element.tagName === 'INPUT' && element.getAttribute('type').toLowerCase() === 'text')
    ) {
      if (element.hasAttribute("fluent-messenger-id")) {
        // already selected this, re-select
      } else {
        // new element in store
        const id = uuid();
        element.setAttribute("fluent-messenger-id", id);
        store.dispatch({ type: Type.SET_INPUT, id, element });

        // track activity
        addListeners(element, id);

        // render React
        renderHighlights(element, id);
      }
    }
  }
});

const addListeners = (element, id: string) => {
  element.addEventListener("keyup", handleKeyup(id));
  $(element).bind("click focus", handleCaretChange(id));

  const observer = new MutationObserver((mutations) => {
    return mutations.forEach(({ target: { textContent } }) => {
      const { completedAlerts } = store.getState().messenger.inputs[id];

      if (textContent === "" && completedAlerts.length) {
        // handle what is likely submitting the form

        // reset state
        store.dispatch({
          type: Type.CLEAR_INPUT,
          id
        });

        // submit message
        sendApiMutate<"createMessage", MutationCreateMessageArgs>({
          mutation: createMessageGql,
          variables: { messageTranslationIds: completedAlerts.map((a) => a.id) }
        });

        sendAmplitude({
          event: "Messenger submit",
          translations: completedAlerts.length
        });
      } else {
        // handle editing or deleting completed alerts
        for (const alert of completedAlerts) {
          const {
            translation: { originalText }
          } = alert;
          if (!textContent.includes(originalText)) {
            store.dispatch({
              type: Type.REMOVE_COMPLETED,
              id,
              alert
            });
          }
        }
      }
    });
  });

  observer.observe(element, { childList: true, subtree: true, characterData: true });
};

// general typing
const handleKeyup = (id) => (e) => {
  const codes = [
    8, // backspace
    32, // space
    46 // delete
  ];

  if (codes.includes(e.keyCode)) {
    const textContent = e.target.tagName === "INPUT" ? e.target.value : e.target.textContent;
    store.dispatch({ type: Type.SET_INPUT_TEXT, id, textContent });
  }
};

// clicks, spaces, etc. = trigger translation scan
const handleCaretChange = (id) => (e) => {
  const textContent = e.target.tagName === "INPUT" ? e.target.value : e.target.textContent;
  store.dispatch({ type: Type.SET_INPUT_TEXT, id, textContent });
};