Add functionality to "Join Lobby" button

interface/client-events/JoinLobbyEvent.ts

@@ -1,4 +1,11 @@
+import { Socket } from "socket.io-client";
+import { ClientEvent } from "./ClientEvent";
+
 export type JoinLobbyEvent = {
   userName: string;
   lobbyId: string;
 };
+
+export function handleJoinLobby(socket: Socket, payload: JoinLobbyEvent): void {
+  socket.emit(ClientEvent.JOIN_LOBBY, payload);
+}

web/src/pages/landing/LandingPage.tsx

@@ -1,4 +1,9 @@
-import { CreateLobbyEvent, handleCreateLobby } from "interface";
+import {
+  CreateLobbyEvent,
+  handleCreateLobby,
+  handleJoinLobby,
+  JoinLobbyEvent,
+} from "interface";
 import React, { ChangeEvent } from "react";
 import { Socket } from "socket.io-client";
 
@@ -6,8 +11,13 @@ const LandingPage = (props: { socket: Socket }) => {
   const socket = props.socket;
 
   const createLobbyPayload: CreateLobbyEvent = { userName: "" };
-  const registerUsername = (event: ChangeEvent<HTMLInputElement>) =>
-    (createLobbyPayload.userName = event.target.value);
+  const joinLobbyPayload: JoinLobbyEvent = { userName: "", lobbyId: "" };
+  const registerUsername = (event: ChangeEvent<HTMLInputElement>) => {
+    createLobbyPayload.userName = event.target.value;
+    joinLobbyPayload.userName = event.target.value;
+  };
+  const registerLobbyId = (event: ChangeEvent<HTMLInputElement>) =>
+    (joinLobbyPayload.lobbyId = event.target.value);
 
   return (
     <React.Fragment>
@@ -23,8 +33,17 @@ const LandingPage = (props: { socket: Socket }) => {
         </button>
       </div>
       <div className="JoinLobby">
-        <input className="LobbyIdInput" placeholder="Enter Lobby Id"></input>
-        <button className="JoinLobbyButton secondary">Join Lobby</button>
+        <input
+          className="LobbyIdInput"
+          placeholder="Enter Lobby Id"
+          onChange={registerLobbyId}
+        ></input>
+        <button
+          className="JoinLobbyButton secondary"
+          onClick={() => handleJoinLobby(socket, joinLobbyPayload)}
+        >
+          Join Lobby
+        </button>
       </div>
     </React.Fragment>
   );