state: add zustand for state management

Author: te-ce

package-lock.json

@@ -24,7 +24,8 @@
     "next": "16.0.8",
     "react": "19.2.1",
     "react-dom": "19.2.1",
-    "zod": "^4.1.13"
+    "zod": "^4.1.13",
+    "zustand": "^5.0.9"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",

package.json

@@ -1,5 +1,6 @@
 "use client";
 
+import { useRoomStore } from "@/app/store/roomStore";
 import { RoomHeader } from "@/components/room/roomHeader";
 import { RoomInput } from "@/components/room/roomInput";
 import { RoomMessages } from "@/components/room/roomMessages";
@@ -8,10 +9,12 @@ import { useParams } from "next/navigation";
 const Page = () => {
   const params = useParams();
   const roomId = params.roomId as string;
+  const setRoomId = useRoomStore((state) => state.setRoomId);
 
+  setRoomId(roomId);
   return (
     <main className="flex h-screen max-h-screen flex-col overflow-hidden">
-      <RoomHeader roomId={roomId} />
+      <RoomHeader />
       <RoomMessages />
       <RoomInput />
     </main>

src/app/room/[roomId]/page.tsx

@@ -0,0 +1,17 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+
+interface RoomStore {
+  roomId: string;
+  setRoomId: (roomId: string) => void;
+}
+
+export const useRoomStore = create<RoomStore>()(
+  persist(
+    (set) => ({
+      roomId: "",
+      setRoomId: (roomId: string) => set({ roomId }),
+    }),
+    { name: "room-store" },
+  ),
+);

src/app/store/roomStore.ts

@@ -1,11 +1,11 @@
 "use client";
 
 import { useCreateRoom } from "@/hooks/useCreateRoom";
-import { useUsername } from "@/hooks/useGetUsername";
+import { useGetUsername } from "@/hooks/useGetUsername";
 import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
 
 export const CreateRoom = ({ router }: { router: AppRouterInstance }) => {
-  const { username } = useUsername();
+  const { username } = useGetUsername();
   const { createRoom } = useCreateRoom(router);
 
   return (

src/components/createRoom.tsx

@@ -1,18 +1,16 @@
+import { useRoomStore } from "@/app/store/roomStore";
 import { useState } from "react";
 
-interface RoomHeaderProps {
-  roomId: string;
-}
-
 const formatTimeRemaining = (seconds: number) => {
   const mins = Math.floor(seconds / 60);
   const secs = seconds % 60;
   return `${mins}:${secs.toString().padStart(2, "0")}`;
 };
 
-export const RoomHeader = ({ roomId }: RoomHeaderProps) => {
+export const RoomHeader = () => {
   const [timeRemaining, setTimeRemaining] = useState<number>(23);
   const [copyStatus, setCopyStatus] = useState<"copy" | "copied">("copy");
+  const roomId = useRoomStore((state) => state.roomId);
 
   const copyLink = () => {
     navigator.clipboard.writeText(`${window.location.origin}/room/${roomId}`);

src/components/room/roomHeader.tsx

@@ -1,12 +1,15 @@
 import { useRef, useState } from "react";
+import { useSendMessage } from "@/hooks/useSendMessage";
+import { useRoomStore } from "@/app/store/roomStore";
+import { useGetUsername } from "@/hooks/useGetUsername";
 
 export const RoomInput = () => {
+  const { sendMessage, isPending } = useSendMessage();
   const [input, setInput] = useState("");
   const inputRef = useRef<HTMLInputElement>(null);
+  const roomId = useRoomStore((state) => state.roomId);
+  const { username } = useGetUsername();
 
-  const sendMessage = (message: { text: string }) => {
-    // TODO: Implement send message
-  };
   return (
     <div className="border-t border-zinc-800 bg-zinc-900/30 p-4">
       <div className="flex gap-4">
@@ -20,7 +23,7 @@ export const RoomInput = () => {
             value={input}
             onKeyDown={(e) => {
               if (e.key === "Enter" && input.trim()) {
-                sendMessage({ text: input });
+                sendMessage({ text: input, roomId, username });
                 inputRef.current?.focus();
               }
             }}
@@ -32,7 +35,7 @@ export const RoomInput = () => {
 
         <button
           onClick={() => {
-            sendMessage({ text: input });
+            sendMessage({ text: input, roomId, username });
             inputRef.current?.focus();
           }}
           disabled={!input.trim()}

src/components/room/roomInput.tsx

@@ -60,7 +60,7 @@ const generateUsername = () => {
   return `anonymous-${animal}-${id}`;
 };
 
-export const useUsername = () => {
+export const useGetUsername = () => {
   const [username, setUsername] = useState("");
 
   useEffect(() => {

src/hooks/useGetUsername.ts

@@ -0,0 +1,23 @@
+import { client } from "@/lib/client";
+import { useMutation } from "@tanstack/react-query";
+
+export const useSendMessage = () => {
+  const { mutate: sendMessage, isPending } = useMutation({
+    mutationFn: async ({
+      text,
+      roomId,
+      username,
+    }: {
+      text: string;
+      roomId: string;
+      username: string;
+    }) => {
+      await client.messages.post(
+        { sender: username, text },
+        { query: { roomId } },
+      );
+    },
+  });
+
+  return { sendMessage, isPending };
+};