pupilfirst/pupilfirst

View on GitHub
app/frontend/shared/reComponentLoader.js

Summary

Maintainability
A
0 mins
Test Coverage
import * as React from "react";
import * as ReactDom from "react-dom";

import { makeFromJson as Avatar } from "~/shared/Avatar.bs.js";
import { makeFromJson as SimpleDropdownFilter } from "~/shared/components/SimpleDropdownFilter.bs.js";
import { makeFromJson as CalendarsIndex__DatePicker } from "~/admin/courses/calendars_index/CalendarsIndex__DatePicker.bs.js";
import { makeFromJson as MarkdownBlock } from "~/shared/components/MarkdownBlock.bs.js";
import { makeFromJson as SimpleMarkdownEditor } from "~/shared/components/SimpleMarkdownEditor.bs.js";
import { makeFromJson as SelectLink } from "~/shared/components/SelectLink.bs.js";
import { makeFromJson as SimpleMultiSelectInline } from "~/shared/components/SimpleMultiSelectInline.bs.js";
import { makeFromJson as HelpIcon } from "~/shared/components/HelpIcon.bs.js";

const selectComponent = (name) => {
  switch (name) {
    case "Avatar":
      return Avatar;
    case "SimpleDropdownFilter":
      return SimpleDropdownFilter;
    case "CalendarsIndex__DatePicker":
      return CalendarsIndex__DatePicker;
    case "MarkdownBlock":
      return MarkdownBlock;
    case "SimpleMarkdownEditor":
      return SimpleMarkdownEditor;
    case "SimpleMultiSelectInline":
      return SimpleMultiSelectInline;
    case "SelectLink":
      return SelectLink;
    case "HelpIcon":
      return HelpIcon;
    default:
      throw new Error(`Unknown component name: ${name}`);
  }
};

window.onload = function () {
  const schoolRouterInnerPageData = document.getElementById(
    "schoolrouter-innerpage-data"
  );
  if (schoolRouterInnerPageData) {
    document.getElementById("schoolrouter-innerpage").innerHTML =
      schoolRouterInnerPageData.innerHTML;
    schoolRouterInnerPageData.remove();
  }

  document.querySelectorAll("[data-re-component]").forEach(function (el) {
    const component = selectComponent(el.dataset.reComponent);
    const props = JSON.parse(el.dataset.reJson);

    ReactDom.render(React.createElement(component, props), el);
  });
};