Added client-side-actions page

src/app/client-side-actions/_components/create-post.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { useState } from "react";
+import { createPostAction } from "../actions";
+
+export function CreatePost() {
+  const [name, setName] = useState("");
+
+  return (
+    <form
+      onSubmit={async (e) => {
+        e.preventDefault();
+        await createPostAction({ name }).then(() => {
+          setName("");
+        });
+      }}
+      className="flex flex-col gap-2"
+    >
+      <input
+        type="text"
+        placeholder="Title"
+        value={name}
+        onChange={(e) => setName(e.target.value)}
+        className="w-full rounded-full px-4 py-2 text-black"
+      />
+      <button
+        type="submit"
+        className="rounded-full bg-white/10 px-10 py-3 font-semibold transition hover:bg-white/20"
+      >
+        Submit
+      </button>
+    </form>
+  );
+}

src/app/client-side-actions/_components/delete-post.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { deletePostAction } from "../actions";
+
+export const DeleteButton = (post: { id: number }) => {
+  return (
+    <button
+      className="border p-2 font-bold text-red-300"
+      onClick={async () => {
+        await deletePostAction(post);
+      }}
+    >
+      Delete
+    </button>
+  );
+};

src/app/client-side-actions/actions.ts

@@ -0,0 +1,14 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+import { api } from "~/trpc/server";
+
+export async function createPostAction(input: { name: string }) {
+  await api.post.create({ name: input.name });
+  revalidatePath("/client-side-action");
+}
+
+export async function deletePostAction(post: { id: number }) {
+  await api.post.delete({ id: post.id });
+  revalidatePath("/client-side-action");
+}

src/app/client-side-actions/page.tsx

@@ -0,0 +1,41 @@
+import { api } from "~/trpc/server";
+import type { inferAsyncReturnType } from "@trpc/server";
+import { DeleteButton } from "./_components/delete-post";
+import { CreatePost } from "./_components/create-post";
+
+export default async function Home() {
+  const posts = await api.post.getPosts();
+
+  return (
+    <div className="container flex max-w-2xl flex-col gap-24 px-4 py-16">
+      <div className="flex flex-col text-xl">
+        <h1 className="text-2xl font-bold">Posts</h1>
+        {posts.map((post) => (
+          <PostView post={post} key={post.id} />
+        ))}
+      </div>
+
+      <div className="flex flex-col gap-4">
+        <h1 className="text-2xl font-bold">Create a new post</h1>
+
+        {/* Note: CreatePost HAS to be imported, since it's using
+          client side JS */}
+        <CreatePost />
+      </div>
+    </div>
+  );
+}
+
+type PostType = NonNullable<
+  inferAsyncReturnType<typeof api.post.getPosts>
+>[number];
+
+function PostView({ post }: { post: PostType }) {
+  return (
+    <div className="flex justify-between p-2 hover:bg-gray-800/80">
+      {post.name}
+      {/* Note: DeleteButton HAS to be imported, since it's using client side JS */}
+      <DeleteButton id={post.id} />
+    </div>
+  );
+}

src/app/page.tsx

@@ -31,6 +31,12 @@ export default function Home() {
       >
         RSC + tRPC + Server Actions
       </Link>
+      <Link
+        href="/client-side-actions"
+        className="text-xl text-blue-300 underline hover:text-blue-500"
+      >
+        RSC + tRPC + (Client side) Server Actions
+      </Link>
     </div>
   );
 }