Merge pull request webdevcody#698 from scape76/fix-roomId-caching

fix: move generating roomId to wss server

Author: scape76

package-lock.json

@@ -77,7 +77,6 @@
     "tailwindcss": "3.3.2",
     "tailwindcss-animate": "^1.0.6",
     "unstyled-table": "^0.0.3-alpha-3",
-    "uuid": "^9.0.0",
     "zod": "^3.21.4"
   },
   "devDependencies": {

packages/app/package.json

@@ -1,7 +1,6 @@
 "use client";
 
 import * as React from "react";
-import { v4 as uuidv4 } from "uuid";
 
 import { useForm } from "react-hook-form";
 import * as z from "zod";
@@ -33,8 +32,6 @@ type CreateRoomForm = z.infer<typeof createRoomSchema>;
 export const CreateRoomForm = () => {
   const [isLoading, setIsLoading] = React.useState(false);
 
-  const roomId = uuidv4();
-
   const router = useRouter();
 
   const form = useForm<CreateRoomForm>({
@@ -47,7 +44,6 @@ export const CreateRoomForm = () => {
   function onSubmit({ language }: CreateRoomForm) {
     setIsLoading(true);
     socket.emit("UserCreateRoom", {
-      roomId,
       // TODO: make typescript happy
       language: language as Language,
     });
@@ -89,15 +85,6 @@ export const CreateRoomForm = () => {
           )}
         />
 
-        <div>
-          <p className="mb-2 text-sm font-medium">Room ID</p>
-
-          <div className="flex h-10 w-full items-center justify-between rounded-md border bg-background px-3 py-2 text-sm text-muted-foreground">
-            <span>{roomId}</span>
-            <CopyButton value={roomId} />
-          </div>
-        </div>
-
         <Button type="submit" className="mt-2 w-full">
           {isLoading ? (
             <Icons.spinner className="h-4 w-4 animate-spin" />

packages/app/src/app/race/_components/create-room-form.tsx

@@ -1,9 +1,8 @@
 import { z } from "zod";
 import { isValidUUID } from "@/lib/utils";
 
-
 export const createRoomSchema = z.object({
-  language: z.string(),
+  language: z.string().nonempty(),
 });
 
 export const joinRoomSchema = z.object({

packages/app/src/lib/validations/room.ts

@@ -15,7 +15,8 @@
   "dependencies": {
     "@code-racer/app": "file:../app",
     "express": "^4.18.2",
-    "socket.io": "^4.7.1"
+    "socket.io": "^4.7.1",
+    "uuid": "^9.0.0"
   },
   "devDependencies": {
     "@types/express": "^4.17.17",

packages/wss/package.json

@@ -27,7 +27,6 @@ export type UserGetRacePayload = {
 };
 
 export type UserCreateRoomPayload = {
-  roomId: string;
   language: Language;
 };
 

packages/wss/src/events/client-to-server.ts

@@ -12,7 +12,7 @@ import { type ServerToClientEvents } from "./events/server-to-client";
 import { createRace, raceMatchMaking } from "./match-making";
 import { RaceStatus, raceStatus } from "./types";
 import { getRandomSnippet } from "@code-racer/app/src/app/race/(play)/loaders";
-import { getRoomParticipantId } from "@code-racer/app/src/lib/wss-app-utils";
+import { v4 as uuidv4 } from "uuid";
 
 export type SocketId = string;
 type RaceId = string;
@@ -70,10 +70,12 @@ export class Game {
           return;
         }
 
+        const roomId = uuidv4();
+
         // race id is associated with the room id
-        const race = await createRace(snippet, payload.roomId);
+        const race = await createRace(snippet, roomId);
 
-        this.races.set(payload.roomId, {
+        this.races.set(roomId, {
           ...race,
           participants: [],
           status: "waiting",