HtmlRunner.jsx

/* eslint-disable react-hooks/exhaustive-deps */
import "../../../../assets/stylesheets/HtmlRunner.scss";
import React, { useRef, useEffect, useState, useCallback } from "react";
import { useDispatch, useSelector } from "react-redux";
import { parse } from "node-html-parser";
import { useMediaQuery } from "react-responsive";

import {
  setPage,
  showErrorModal,
  codeRunHandled,
  triggerCodeRun,
  loadingRunner,
  setLoadedRunner,
} from "../../../../redux/EditorSlice";

import { useExternalLinkState } from "../../../../utils/externalLinkHelper";

import { useTranslation } from "react-i18next";
import { Tab, TabList, TabPanel, Tabs } from "react-tabs";
import OpenInNewTabIcon from "../../../../assets/icons/open_in_new_tab.svg";
import RunnerControls from "../../../RunButton/RunnerControls";
import { MOBILE_MEDIA_QUERY } from "../../../../utils/mediaQueryBreakpoints";
import {
  MSG_HTML_PREVIEW_EVENT,
  MSG_HTML_PREVIEW_READY,
  MSG_HTML_PROJECT_UPDATE,
} from "../../../../utils/iframeUtils";

function HtmlRunner() {
  const project = useSelector((state) => state.editor.project);
  const projectCode = project.components;
  const projectMedia = [
    ...(project.image_list || []),
    ...(project.audio || []),
    ...(project.videos || []),
  ];

  const firstPanelIndex = 0;
  const focussedFileIndex = useSelector(
    (state) => state.editor.focussedFileIndices,
  )[firstPanelIndex];
  const openFiles = useSelector((state) => state.editor.openFiles)[
    firstPanelIndex
  ];
  const codeRunTriggered = useSelector(
    (state) => state.editor.codeRunTriggered,
  );
  const justLoaded = useSelector((state) => state.editor.justLoaded);
  const isEmbedded = useSelector((state) => state.editor.isEmbedded);
  const autorunEnabled = useSelector((state) => state.editor.autorunEnabled);
  const codeHasBeenRun = useSelector((state) => state.editor.codeHasBeenRun);
  const browserPreview = useSelector((state) => state.editor.browserPreview);
  const page = useSelector((state) => state.editor.page);

  const [rendererReady, setRendererReady] = useState(false);

  const { t, i18n } = useTranslation();
  const locale = i18n.language;

  const dispatch = useDispatch();
  const output = useRef(null);
  const reloadAfterPreviewChange = useRef(false);

  const isMobile = useMediaQuery({ query: MOBILE_MEDIA_QUERY });

  const focussedComponent = (fileName = "index.html") =>
    projectCode.filter(
      (component) => `${component.name}.${component.extension}` === fileName,
    )[0];

  const previewable = (file = "") => file.endsWith(".html");
  let defaultPreviewFile = "index.html";

  const pageExists = (page) => {
    return projectCode.some(
      (file) => `${file.name}.${file.extension}` === page,
    );
  };

  if (isEmbedded && page && previewable(page) && pageExists(page)) {
    defaultPreviewFile = page;
  } else if (!isEmbedded && previewable(openFiles[focussedFileIndex])) {
    defaultPreviewFile = openFiles[focussedFileIndex];
  }

  const [previewFile, setPreviewFile] = useState(defaultPreviewFile);
  const [runningFile, setRunningFile] = useState(previewFile);
  const previewFileRef = useRef(previewFile);

  const showModal = () => {
    dispatch(showErrorModal());
    eventListener();
  };

  const {
    externalLink,
    setExternalLink,
    handleAllowedExternalLink,
    handleExternalLinkError,
  } = useExternalLinkState(showModal);

  const eventListener = () => {
    window.addEventListener("message", (event) => {
      if (event.data?.type === MSG_HTML_PREVIEW_EVENT) {
        if (event.data?.msg === "ERROR: External link") {
          handleExternalLinkError(showModal);
        } else if (event.data?.msg === "Allowed external link") {
          handleAllowedExternalLink(event.data.payload.linkTo);
        } else if (event.data?.msg === "RELOAD") {
          const nextPreviewFile = `${event.data.payload.linkTo}.html`;
          setExternalLink(null);

          if (nextPreviewFile === previewFileRef.current) {
            reloadAfterPreviewChange.current = false;
            dispatch(triggerCodeRun());
          } else {
            reloadAfterPreviewChange.current = true;
            setPreviewFile(nextPreviewFile);
          }
        }
      }
    });
  };

  useEffect(() => {
    eventListener();
    dispatch(loadingRunner("html"));
    dispatch(setLoadedRunner("html"));
  }, []);

  let timeout;

  useEffect(() => {
    if (justLoaded && isEmbedded) {
      dispatch(triggerCodeRun());
    } else if (!justLoaded && autorunEnabled) {
      timeout = setTimeout(() => {
        dispatch(triggerCodeRun());
      }, 2000);
      return () => clearTimeout(timeout);
    }
  }, [previewFile]);

  useEffect(() => {
    if (codeRunTriggered && rendererReady) {
      runCode();
    }
  }, [codeRunTriggered, rendererReady]);

  useEffect(() => {
    if (
      !externalLink &&
      !isEmbedded &&
      previewable(openFiles[focussedFileIndex])
    ) {
      setPreviewFile(openFiles[focussedFileIndex]);
    }
  }, [focussedFileIndex, openFiles]);

  useEffect(() => {
    previewFileRef.current = previewFile;
    if (reloadAfterPreviewChange.current) {
      reloadAfterPreviewChange.current = false;
      dispatch(triggerCodeRun());
    }
  }, [previewFile]);

  useEffect(() => {
    if (isEmbedded && browserPreview) {
      dispatch(setPage(runningFile));
    }
  }, [runningFile]);

  useEffect(() => {
    window.addEventListener("message", listener);
    return () => window.removeEventListener("message", listener);
  });

  const listener = useCallback(
    (event) => {
      const message = event.data;
      if (message?.type === MSG_HTML_PREVIEW_READY) {
        setRendererReady(true);
      }
    },
    [setRendererReady],
  );

  const runCode = () => {
    setRunningFile(previewFile);

    if (!externalLink) {
      const indexPage = parse(focussedComponent(previewFile).content);

      output.current.contentWindow.postMessage(
        {
          type: MSG_HTML_PROJECT_UPDATE,
          code: projectCode,
          media: projectMedia,
          current: indexPage.toString(),
        },
        process.env.HTML_RENDERER_URL,
      );

      if (codeRunTriggered) {
        dispatch(codeRunHandled());
      }
    } else {
      output.current.src = externalLink;
      dispatch(codeRunHandled());
    }
  };

  const cacheProjectForBrowserPreview = () => {
    localStorage.setItem(
      project.identifier || "project",
      JSON.stringify(project),
    );
  };

  return (
    <div className="htmlrunner-container" data-testid="html-runner-container">
      {isEmbedded || autorunEnabled || codeHasBeenRun ? (
        <Tabs>
          <div className="react-tabs__tab-container">
            <TabList>
              <Tab>
                <span
                  className="react-tabs__tab-text"
                  data-testid="html-runner-preview-tab"
                >
                  {`${runningFile} ${t("output.preview")}`}
                </span>
              </Tab>
              {!!!isEmbedded && (
                <a
                  className="btn btn--tertiary htmlrunner-link"
                  data-testid="html-runner-open-in-new-tab"
                  target="_blank"
                  href={`/${locale}/embed/viewer/${
                    project.identifier
                  }?browserPreview=true&page=${encodeURI(runningFile)}`}
                  onClick={cacheProjectForBrowserPreview}
                  rel="noreferrer"
                >
                  <span className="htmlrunner-link__text">
                    {t("output.newTab")}
                  </span>
                  <OpenInNewTabIcon />
                </a>
              )}
            </TabList>
            {!isEmbedded && isMobile ? <RunnerControls skinny /> : null}
          </div>
          <TabPanel>
            <iframe
              className="htmlrunner-iframe"
              data-testid="html-runner-iframe"
              id="output-frame"
              title={t("runners.HtmlOutput")}
              ref={output}
              src={`${process.env.HTML_RENDERER_URL}/html-renderer.html`}
              onLoad={() => {
                setExternalLink(null);
              }}
            />
          </TabPanel>
        </Tabs>
      ) : null}
    </div>
  );
}

export default HtmlRunner;