feat: roomIDs on URL (#30)

examples/tiptap/src/app/page.tsx

@@ -1,9 +1,8 @@
-import { TextEditor } from "@/components/TextEditor";
+import { nanoid } from "nanoid";
+import { redirect } from "next/navigation";
 
-export default function Home() {
-  return (
-    <main>
-      <TextEditor />
-    </main>
-  );
+function Page() {
+  redirect("/r/" + nanoid(6));
 }
+
+export default Page;

examples/tiptap/src/app/r/[id]/page.tsx

@@ -0,0 +1,12 @@
+"use client";
+import { TextEditor } from "@/components/TextEditor";
+
+export default function Home() {
+  const [, , roomID] = location.pathname.split("/");
+
+  return (
+    <main>
+      <TextEditor roomID={roomID} />
+    </main>
+  );
+}

examples/tiptap/src/components/TextEditor.tsx

@@ -23,8 +23,8 @@ import { Provider, mutators as yjsMutators } from "@rocicorp/reflect-yjs";
 import { Reflect } from "@rocicorp/reflect/client";
 import { nanoid } from "nanoid";
 
-export function TextEditor() {
-  return <Editor />;
+export function TextEditor({ roomID }: { roomID: string }) {
+  return <Editor roomID={roomID} />;
 }
 
 const USER_INFO = [
@@ -86,17 +86,14 @@ if (!server) {
 }
 
 // Collaborative text editor with simple rich text and live cursors
-export function Editor() {
+export function Editor({ roomID }: { roomID: string }) {
   const [doc, setDoc] = useState<Y.Doc>();
   const [provider, setProvider] = useState<Provider>();
 
   useEffect(() => {
     console.log("creating new reflect instance");
 
     const userID = nanoid();
-    const roomID =
-      new URLSearchParams(location.search).get("roomID") ??
-      `r-${Math.floor(new Date().getTime() / (1000 * 60 * 60))}`;
 
     const reflect = new Reflect({
       server,