Example: Update avatars/cursors to use high-level components (liveblocks#3145)

Author: CTNicholas

.github/assets/examples/comments-table.png

@@ -9,12 +9,27 @@
 
 # AG Grid commenting
 
+<p>
+  <a href="https://liveblocks.io/examples/ag-grid-comments/nextjs-comments-ag-grid/preview">
+    <img src="https://img.shields.io/badge/live%20preview-message?style=flat&logo=data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE2Ljg0OSA0Ljc1SDBsNC44NDggNS4wNzV2Ny4wMDhsMTItMTIuMDgzWk03LjE1IDE5LjI1SDI0bC00Ljg0OS01LjA3NVY3LjE2N2wtMTIgMTIuMDgzWiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==&color=333" alt="Live Preview" />
+  </a>
+  <a href="https://codesandbox.io/s/github/liveblocks/liveblocks/tree/main/examples/nextjs-comments-ag-grid">
+    <img src="https://img.shields.io/badge/open%20in%20codesandbox-message?style=flat&logo=codesandbox&color=333&logoColor=fff" alt="Open in CodeSandbox" />
+  </a>
+  <img src="https://img.shields.io/badge/react-message?style=flat&logo=react&color=0bd&logoColor=fff" alt="React" />
+  <img src="https://img.shields.io/badge/next.js-message?style=flat&logo=next.js&color=07f&logoColor=fff" alt="Next.js" />
+</p>
+
 <p>
   <img src="https://img.shields.io/badge/react-message?style=flat&logo=react&color=0bd&logoColor=fff" alt="React" />
   <img src="https://img.shields.io/badge/next.js-message?style=flat&logo=next.js&color=07f&logoColor=fff" alt="Next.js" />
 </p>
 
-This example shows how to build AG Grid commenting with [Liveblocks](https://liveblocks.io), [AG Grid](https://www.ag-grid.com/), and [Next.js](https://nextjs.org/).
+This example shows how to build commenting to your
+[AG Grid](https://www.ag-grid.com/) table with
+[Liveblocks](https://liveblocks.io) and [Next.js](https://nextjs.org/).
+
+<img src="https://raw.githubusercontent.com/liveblocks/liveblocks/main/.github/assets/examples/comments-table.png" width="536" alt="Collaborative Text Editor" />
 
 ## Getting started
 
@@ -24,7 +39,9 @@ Run the following command to try this example locally:
 npx create-liveblocks-app@latest --example nextjs-comments-ag-grid --api-key
 ```
 
-This will download the example and ask permission to open your browser, enabling you to automatically get your API key from your [liveblocks.io](https://liveblocks.io) account.
+This will download the example and ask permission to open your browser, enabling
+you to automatically get your API key from your
+[liveblocks.io](https://liveblocks.io) account.
 
 ### Manual setup
 
@@ -36,8 +53,10 @@ Alternatively, you can set up your project manually:
 
 - Install all dependencies with `npm install`
 - Create an account on [liveblocks.io](https://liveblocks.io/dashboard)
-- Copy your **secret** key from the [dashboard](https://liveblocks.io/dashboard/apikeys)
-- Create an `.env.local` file and add your **secret** key as the `LIVEBLOCKS_SECRET_KEY` environment variable
+- Copy your **secret** key from the
+  [dashboard](https://liveblocks.io/dashboard/apikeys)
+- Create an `.env.local` file and add your **secret** key as the
+  `LIVEBLOCKS_SECRET_KEY` environment variable
 - Run `npm run dev` and go to [http://localhost:3000](http://localhost:3000)
 
 </details>

examples/nextjs-comments-ag-grid/README.md

@@ -0,0 +1,27 @@
+"use client";
+
+import { LiveblocksProvider } from "@liveblocks/react";
+import { PropsWithChildren } from "react";
+
+export function Providers({ children }: PropsWithChildren) {
+  return (
+    <LiveblocksProvider
+      authEndpoint="/api/liveblocks-auth"
+      resolveUsers={async ({ userIds }) => {
+        const searchParams = new URLSearchParams(
+          userIds.map((userId) => ["userIds", userId])
+        );
+        const response = await fetch(`/api/users?${searchParams}`);
+
+        if (!response.ok) {
+          throw new Error("Problem resolving users");
+        }
+
+        const users = await response.json();
+        return users;
+      }}
+    >
+      {children}
+    </LiveblocksProvider>
+  );
+}

examples/nextjs-live-avatars/app/Providers.tsx

@@ -0,0 +1,32 @@
+import { Liveblocks } from "@liveblocks/node";
+import { NextRequest } from "next/server";
+
+import { getRandomUser, getUser } from "../../../database";
+
+/**
+ * Authenticating your Liveblocks application
+ * https://liveblocks.io/docs/authentication
+ */
+
+const liveblocks = new Liveblocks({
+  secret: process.env.LIVEBLOCKS_SECRET_KEY!,
+});
+
+export async function POST(request: NextRequest) {
+  const body = await request.json().catch(() => ({}));
+  const userId = body.userId as string | undefined;
+  const user = userId ? getUser(userId) : getRandomUser();
+
+  if (!user) {
+    return new Response(null, { status: 401 });
+  }
+
+  const session = liveblocks.prepareSession(user.id, {
+    userInfo: user.info,
+  });
+
+  session.allow(`liveblocks:examples:*`, session.FULL_ACCESS);
+
+  const { status, body: responseBody } = await session.authorize();
+  return new Response(responseBody, { status });
+}

examples/nextjs-live-avatars/app/api/liveblocks-auth/route.ts

@@ -0,0 +1,19 @@
+import { NextRequest, NextResponse } from "next/server";
+
+import { getUser } from "../../../database";
+
+export async function GET(request: NextRequest) {
+  const { searchParams } = new URL(request.url);
+  const userIds = searchParams.getAll("userIds");
+
+  if (!userIds.length) {
+    return NextResponse.json(
+      { error: "Missing or invalid userIds" },
+      { status: 400 }
+    );
+  }
+
+  return NextResponse.json(
+    userIds.map((userId) => getUser(userId)?.info ?? null)
+  );
+}

examples/nextjs-live-avatars/app/api/users/route.ts

@@ -0,0 +1,37 @@
+import "../styles/globals.css";
+import { Providers } from "./Providers";
+import "@liveblocks/react-ui/styles.css";
+import { Suspense } from "react";
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <head>
+        <title>Liveblocks</title>
+        <meta name="robots" content="noindex" />
+        <meta name="viewport" content="width=device-width, user-scalable=no" />
+        <link
+          href="https://liveblocks.io/favicon-32x32.png"
+          rel="icon"
+          sizes="32x32"
+          type="image/png"
+        />
+        <link
+          href="https://liveblocks.io/favicon-16x16.png"
+          rel="icon"
+          sizes="16x16"
+          type="image/png"
+        />
+      </head>
+      <body>
+        <Suspense>
+          <Providers>{children}</Providers>
+        </Suspense>
+      </body>
+    </html>
+  );
+}

examples/nextjs-live-avatars/app/layout.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { useMemo } from "react";
+import { useSearchParams } from "next/navigation";
+import { RoomProvider } from "@liveblocks/react";
+import { AvatarStack } from "@liveblocks/react-ui";
+
+function Example() {
+  return (
+    <main
+      style={{
+        display: "flex",
+        height: "100vh",
+        width: "100vw",
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <AvatarStack max={5} size={48} />
+    </main>
+  );
+}
+
+export default function Page() {
+  const roomId = useExampleRoomId("liveblocks:examples:nextjs-live-avatars");
+
+  return (
+    <RoomProvider id={roomId}>
+      <Example />
+    </RoomProvider>
+  );
+}
+
+/**
+ * This function is used when deploying an example on liveblocks.io.
+ * You can ignore it completely if you run the example locally.
+ */
+function useExampleRoomId(roomId: string) {
+  const searchParams = useSearchParams();
+  const exampleId = searchParams?.get("exampleId");
+
+  const exampleRoomId = useMemo(() => {
+    return exampleId ? `${roomId}-${exampleId}` : roomId;
+  }, [roomId, exampleId]);
+
+  return exampleRoomId;
+}

examples/nextjs-live-avatars/app/page.tsx

@@ -0,0 +1,78 @@
+const USER_INFO: Liveblocks["UserMeta"][] = [
+  {
+    id: "charlie.layne@example.com",
+    info: {
+      name: "Charlie Layne",
+      color: "#D583F0",
+      avatar: "https://liveblocks.io/avatars/avatar-1.png",
+    },
+  },
+  {
+    id: "mislav.abha@example.com",
+    info: {
+      name: "Mislav Abha",
+      color: "#F08385",
+      avatar: "https://liveblocks.io/avatars/avatar-2.png",
+    },
+  },
+  {
+    id: "tatum.paolo@example.com",
+    info: {
+      name: "Tatum Paolo",
+      color: "#F0D885",
+      avatar: "https://liveblocks.io/avatars/avatar-3.png",
+    },
+  },
+  {
+    id: "anjali.wanda@example.com",
+    info: {
+      name: "Anjali Wanda",
+      color: "#85EED6",
+      avatar: "https://liveblocks.io/avatars/avatar-4.png",
+    },
+  },
+  {
+    id: "jody.hekla@example.com",
+    info: {
+      name: "Jody Hekla",
+      color: "#85BBF0",
+      avatar: "https://liveblocks.io/avatars/avatar-5.png",
+    },
+  },
+  {
+    id: "emil.joyce@example.com",
+    info: {
+      name: "Emil Joyce",
+      color: "#8594F0",
+      avatar: "https://liveblocks.io/avatars/avatar-6.png",
+    },
+  },
+  {
+    id: "jory.quispe@example.com",
+    info: {
+      name: "Jory Quispe",
+      color: "#85DBF0",
+      avatar: "https://liveblocks.io/avatars/avatar-7.png",
+    },
+  },
+  {
+    id: "quinn.elton@example.com",
+    info: {
+      name: "Quinn Elton",
+      color: "#87EE85",
+      avatar: "https://liveblocks.io/avatars/avatar-8.png",
+    },
+  },
+];
+
+export function getRandomUser() {
+  return USER_INFO[Math.floor(Math.random() * 10) % USER_INFO.length];
+}
+
+export function getUser(id: string) {
+  return USER_INFO.find((u) => u.id === id) || null;
+}
+
+export function getUsers() {
+  return USER_INFO;
+}