Source

// Forms' entry. "/" keeps the static landing; "/new", "/f/<id>" and the owner pages hide it and show the app.
// The public form needs no account library, so the builder and owner pages load only when opened.
import { lazy, Suspense } from "react";
import { createRoot } from "react-dom/client";
import { usePath } from "./lib/router";
import { Overlays } from "./ui";
import { Respond, PageSkeleton } from "./Respond";
import { YourForms } from "./YourForms";
import type { Tab } from "./Owner";
import "./styles.css";

const NewForm = lazy(() => import("./Builder").then((m) => ({ default: m.NewForm })));
const Owner = lazy(() => import("./Owner").then((m) => ({ default: m.Owner })));

const LANDING_TITLE = document.title;

function App() {
  const path = usePath();
  const isNew = /^\/new\/?$/.test(path);
  const form = path.match(/^\/f\/([A-Za-z0-9]{8,32})(?:\/(results|responses|edit|share))?\/?$/);
  document.body.classList.toggle("app-mode", isNew || Boolean(form));
  // The public form shows only the form: no site menu or footer for the people filling it in.
  document.body.classList.toggle("form-mode", Boolean(form && !form[2]));
  if (!isNew && !form) document.title = LANDING_TITLE;
  return (
    <>
      <Suspense fallback={<PageSkeleton />}>
        {isNew ? <NewForm /> : form ? (form[2] ? <Owner formId={form[1]} tab={form[2] as Tab} key={form[1]} /> : <Respond formId={form[1]} key={form[1]} />) : null}
      </Suspense>
      <Overlays />
    </>
  );
}

createRoot(document.getElementById("app")!).render(<App />);
const mineSlot = document.getElementById("your-forms");
if (mineSlot) createRoot(mineSlot).render(<YourForms />);