Source

// Book's entry. "/" keeps the static landing and mounts the page maker and "Your pages" into it.
// "/<handle>" is a public booking page, "/e/<handle>" its owner's dashboard ("#k=<key>" claims it),
// and "/b/<handle>/<bookingId>" one booking ("#c=<key>" opens it on any device).
import { createRoot } from "react-dom/client";
import { usePath } from "./lib/router";
import { Toaster } from "./ui";
import { PageForm } from "./PageForm";
import { YourPages } from "./Home";
import { BookingPage } from "./BookingPage";
import { Dashboard } from "./Dashboard";
import { Manage } from "./Manage";
import { handleProblem } from "../functions/lib/book";
import "./styles.css";

function route(path: string): JSX.Element | null {
  const edit = path.match(/^\/e\/([A-Za-z0-9-]{3,32})\/?$/);
  if (edit) return <Dashboard key={edit[1].toLowerCase()} handle={edit[1].toLowerCase()} />;
  const booking = path.match(/^\/b\/([A-Za-z0-9-]{3,32})\/([A-Za-z0-9]{8,32})\/?$/);
  if (booking) return <Manage key={booking[2]} handle={booking[1].toLowerCase()} bookingId={booking[2]} />;
  const page = path.match(/^\/([A-Za-z0-9-]{3,32})\/?$/);
  if (page && !handleProblem(page[1].toLowerCase())) return <BookingPage key={page[1].toLowerCase()} handle={page[1].toLowerCase()} />;
  return null;
}

function App() {
  const view = route(usePath());
  document.body.classList.toggle("app-mode", Boolean(view));
  return (
    <>
      {view}
      <Toaster />
    </>
  );
}

createRoot(document.getElementById("app")!).render(<App />);
const createSlot = document.getElementById("create");
if (createSlot) createRoot(createSlot).render(<PageForm mode="create" />);
const pagesSlot = document.getElementById("your-pages");
if (pagesSlot) createRoot(pagesSlot).render(<YourPages />);