Source

// Invoice's entry. "/" keeps the static landing and mounts the editor and "Your invoices" into it;
// "/i/<id>" (the client's view) and "/i/<id>/admin" (the owner's) hide the landing. The invoice page
// and the Bounded client load only on those routes, so the landing stays light.
import { lazy, Suspense, useEffect, type ReactNode } from "react";
import { createRoot } from "react-dom/client";
import { usePath } from "./lib/router";
import { Toaster } from "./ui";
import { NewInvoice } from "./NewInvoice";
import { YourInvoices } from "./Mine";
import { PageSkeleton } from "./Skeleton";
import "./styles.css";

const InvoicePage = lazy(() => import("./InvoicePage").then((m) => ({ default: m.InvoicePage })));
const LANDING_TITLE = document.title;
const invoiceRoute = (path: string) => path.match(/^\/i\/([A-Za-z0-9]{8,32})(\/admin)?\/?$/);

/** Landing pieces render only on the landing, so an invoice page does not load the editor behind it. */
function OnLanding({ children }: { children: ReactNode }) {
  return invoiceRoute(usePath()) ? null : <>{children}</>;
}

function App() {
  const path = usePath();
  const inv = invoiceRoute(path);
  document.body.classList.toggle("app-mode", Boolean(inv));
  useEffect(() => { if (!inv) document.title = LANDING_TITLE; }, [Boolean(inv)]);
  return (
    <>
      {inv ? (
        <Suspense fallback={<PageSkeleton />}>
          <InvoicePage key={path} id={inv[1]} admin={Boolean(inv[2])} />
        </Suspense>
      ) : null}
      <Toaster />
    </>
  );
}

createRoot(document.getElementById("app")!).render(<App />);
const editorSlot = document.getElementById("editor");
if (editorSlot) createRoot(editorSlot).render(<OnLanding><NewInvoice /></OnLanding>);
const mineSlot = document.getElementById("mine");
if (mineSlot) createRoot(mineSlot).render(<OnLanding><YourInvoices /></OnLanding>);