Source

// Links' entry. "/" keeps the static landing and mounts the shortener and "Your links" into it;
// "/e/<code>" hides the landing and shows the edit page. Short links ("/<code>") are opened by the
// inline script at the top of index.html, which marks <html class="go">; then nothing mounts here.
import { lazy, Suspense } from "react";
import { createRoot } from "react-dom/client";
import { usePath } from "./lib/router";
import { importFromHash } from "./lib/mine";
import { Toaster, toast } from "./ui";
import { CreateLink, YourLinks } from "./Home";
import "./styles.css";

// The edit page carries the live data client, so it loads only when someone opens one.
const EditPage = lazy(() => import("./Edit").then((m) => ({ default: m.EditPage })));

function App() {
  const path = usePath();
  const edit = path.match(/^\/e\/([A-Za-z0-9_-]{3,32})\/?$/);
  document.body.classList.toggle("app-mode", Boolean(edit));
  return (
    <>
      {edit ? <Suspense fallback={<div className="edit-wait" aria-busy="true" aria-label="Opening your link" />}><EditPage key={edit[1]} code={edit[1]} /></Suspense> : null}
      <Toaster />
    </>
  );
}

/** A "link for another device" (/#links=...) adds its links here, then drops the keys from the address bar. */
function importMoved() {
  if (location.pathname !== "/" || !location.hash.startsWith("#links=")) return;
  const { found, added } = importFromHash(location.hash);
  history.replaceState(null, "", "/#mine");
  setTimeout(() => {
    toast(!found ? "That address carries no links. Copy it again on your other device."
      : added ? `Added ${added} ${added === 1 ? "link" : "links"} to this browser.` : "These links are already in this browser.");
    document.getElementById("mine")?.scrollIntoView({ block: "start" });
  }, 300);
}

if (!document.documentElement.classList.contains("go")) {
  importMoved();
  createRoot(document.getElementById("app")!).render(<App />);
  createRoot(document.getElementById("create")!).render(<CreateLink />);
  createRoot(document.getElementById("mine")!).render(<YourLinks />);
  // Pasting the link into a tab that already shows Links changes only the #fragment, so the page does not reload.
  window.addEventListener("hashchange", importMoved);
}