Composição com RSC: server-only e client islands

// app/posts/page.tsx (Server)
import { db } from "@/lib/db";
import LikeButton from "@/components/LikeButton"; // client island

export default async function PostsPage() {
  const posts = await db.post.findMany();
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>
          {post.title}
          <LikeButton postId={post.id} initialCount={post.likes} />
        </li>
      ))}
    </ul>
  );
}

// components/Modal.tsx (Client)
"use client";
import { useState } from "react";

export function Modal({ children, title }: {
  children: React.ReactNode;
  title: string;
}) {
  const [open, setOpen] = useState(false);
  return (
    <>
      <button onClick={() => setOpen(true)}>Abrir {title}</button>
      {open && (
        <div className="modal-backdrop" onClick={() => setOpen(false)}>
          <div className="modal" onClick={(e) => e.stopPropagation()}>
            {children}
          </div>
        </div>
      )}
    </>
  );
}

// app/posts/page.tsx (Server)
import { db } from "@/lib/db";
import { Modal } from "@/components/Modal";
import PostDetails from "./PostDetails"; // Server Component

export default async function PostsPage() {
  const posts = await db.post.findMany();
  return (
    <div>
      {posts.map((post) => (
        <Modal key={post.id} title={post.title}>
          <PostDetails postId={post.id} /> {/* server, renderiza dentro do modal */}
        </Modal>
      ))}
    </div>
  );
}

┌─────────────────────────────────────────┐  ← tudo isso é server
│ Header (server)                         │
│                                         │
│ ┌─────────────┐  ┌──────────────────┐   │
│ │ Filtro      │  │ Lista de posts   │   │  ← Lista é server
│ │ (CLIENT     │  │ (server)         │   │
│ │  ISLAND)    │  │                  │   │
│ │  - state    │  │   ┌────────────┐ │   │
│ │  - onChange │  │   │ LikeButton │ │   │  ← LikeButton é client island
│ │             │  │   │ (CLIENT    │ │   │
│ └─────────────┘  │   │  ISLAND)   │ │   │
│                  │   └────────────┘ │   │
│                  └──────────────────┘   │
└─────────────────────────────────────────┘

// ❌ ERRO: Date vira string, perdendo métodos
<ClientCard createdAt={new Date()} />
// No client: createdAt é string ISO, não Date. createdAt.getMonth() quebra.

// ✅ Solução 1: serializar antes
<ClientCard createdAt={new Date().toISOString()} />
// No client: createdAt é string ISO. Use new Date(createdAt) se precisar.

// ✅ Solução 2: se o client precisa de Date, formate antes
<ClientCard createdAtLabel={formatDate(new Date())} /> // string já formatada

// ❌ ERRO: Map/Set não serializam
<ClientThing counts={new Map([["a", 1]])} />

// ✅ Solução: plain object
<ClientThing counts={{ a: 1 }} />

// ❌ ERRO: classe
<ClientThing data={new MyClass()} />

// ✅ Solução: plain object + reconstruir no client
<ClientThing data={JSON.parse(JSON.stringify(myClassInstance))} />

// Provider no layout (Client Component)
"use client";
import { createContext, useContext, useState } from "react";

type ThemeContext = { theme: "light" | "dark"; setTheme: (t: "light" | "dark") => void };
const Ctx = createContext<ThemeContext | null>(null);

export function ThemeProvider({ children }: { children: React.ReactNode }) {
  const [theme, setTheme] = useState<"light" | "dark">("light");
  return <Ctx.Provider value={{ theme, setTheme }}>{children}</Ctx.Provider>;
}

export function useTheme() {
  const ctx = useContext(Ctx);
  if (!ctx) throw new Error("useTheme must be inside ThemeProvider");
  return ctx;
}

// app/layout.tsx (Server)
import { ThemeProvider } from "./ThemeProvider";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="pt-BR">
      <body>
        <ThemeProvider>{children}</ThemeProvider>
      </body>
    </html>
  );
}

// app/posts/new/page.tsx (Server)
import { createPost } from "./actions";

export default function NewPostPage() {
  return (
    <form action={createPost}>
      <input name="title" required />
      <textarea name="body" required />
      <button type="submit">Criar</button>
    </form>
  );
}

// app/posts/new/actions.ts
"use server";

export async function createPost(formData: FormData) {
  const title = formData.get("title") as string;
  const body = formData.get("body") as string;
  await db.post.create({ data: { title, body } });
  revalidatePath("/posts");
  redirect("/posts");
}

"use client";
import { useFormStatus, useFormState } from "react-dom";

function SubmitButton() {
  const { pending } = useFormStatus();
  return <button type="submit" disabled={pending}>{pending ? "Enviando..." : "Enviar"}</button>;
}

const initialState = { error: null as string | null };
function Form() {
  const [state, formAction] = useFormState(createPost, initialState);
  return (
    <form action={formAction}>
      <input name="title" required />
      <SubmitButton />
      {state.error && <p className="error">{state.error}</p>}
    </form>
  );
}

// ❌ ERRADO: tentar compartilhar state entre dois clients
// sem um pai comum client
<LikeButton postId={post.id} />     // client
<ShareButton postId={post.id} />    // client
// Eles não se comunicam.

// ✅ CERTO: envolver num client pai que tem o state
<PostActions postId={post.id}>
  <LikeButton />
  <ShareButton />
</PostActions>

// PostActions.tsx (Client)
"use client";
export function PostActions({ postId, children }: { postId: string; children: React.ReactNode }) {
  const [liked, setLiked] = useState(false);
  return (
    <LikedContext.Provider value={{ liked, setLiked }}>
      {children}
    </LikedContext.Provider>
  );
}

// app/posts/page.tsx (Server)
import { deletePost } from "./actions";
import DeleteButton from "./DeleteButton";

export default async function PostsPage() {
  const posts = await db.post.findMany();
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>
          {post.title}
          <DeleteButton action={deletePost.bind(null, post.id)} />
        </li>
      ))}
    </ul>
  );
}

// PostListContainer.tsx (Server)
export default async function PostListContainer() {
  const posts = await fetchPosts();
  return <PostListView posts={posts} />;
}

// PostListView.tsx (Client ou Server - depende se tem interação)
"use client";
export function PostListView({ posts }: { posts: Post[] }) {
  const [filter, setFilter] = useState("");
  const filtered = posts.filter(p => p.title.includes(filter));
  return (
    <>
      <input value={filter} onChange={e => setFilter(e.target.value)} />
      <ul>{filtered.map(p => <li key={p.id}>{p.title}</li>)}</ul>
    </>
  );
}