Remove duplicate socket connection

web/src/App.tsx

@@ -1,15 +1,17 @@
 import React from "react";
-import { io } from "socket.io-client";
+import { Socket } from "socket.io-client";
 import LandingPage from "./pages/landing/LandingPage";
 
-function App() {
-  const socket = io("http://localhost:3010");
-
-  return (
-    <div className="App">
-      <LandingPage socket={socket} />
-    </div>
-  );
+export interface AppProps {
+  socket: Socket;
 }
 
+const App = (props: AppProps) => {
+  return (
+    <div className="app">
+      <LandingPage {...props} />
+    </div>
+  );
+};
+
 export default App;

web/src/index.tsx

@@ -2,12 +2,14 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App";
 import "./App.scss";
+import { io } from "socket.io-client";
 
 const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement,
 );
+const socket = io("http://localhost:3010");
 root.render(
   <React.StrictMode>
-    <App />
+    <App socket={socket} />
   </React.StrictMode>,
 );

web/src/pages/landing/LandingPage.tsx

@@ -7,8 +7,12 @@ import {
 import React, { ChangeEvent } from "react";
 import { Socket } from "socket.io-client";
 
-const LandingPage = (props: { socket: Socket }) => {
-  const socket = props.socket;
+export interface LandingPageProps {
+  socket: Socket;
+}
+
+const LandingPage = (props: LandingPageProps) => {
+  const { socket } = props;
 
   const createLobbyPayload: CreateLobbyEvent = { userName: "" };
   const joinLobbyPayload: JoinLobbyEvent = { userName: "", lobbyId: "" };
@@ -21,25 +25,25 @@ const LandingPage = (props: { socket: Socket }) => {
 
   return (
     <React.Fragment>
-      <div className="LandingPageTitle">
+      <div className="landing-page-title">
         <h1>Trains And Roads</h1>
       </div>
-      <div className="UserNameImput">
+      <div className="user-name-input">
         <input placeholder="Enter username" onChange={registerUsername}></input>
       </div>
-      <div className="CreateLobbyButton">
+      <div className="create-lobby-button">
         <button onClick={() => handleCreateLobby(socket, createLobbyPayload)}>
           Create Lobby
         </button>
       </div>
-      <div className="JoinLobby">
+      <div className="join-lobby">
         <input
-          className="LobbyIdInput"
+          className="lobby-id-input"
           placeholder="Enter Lobby Id"
           onChange={registerLobbyId}
         ></input>
         <button
-          className="JoinLobbyButton secondary"
+          className="join-lobby-button secondary"
           onClick={() => handleJoinLobby(socket, joinLobbyPayload)}
         >
           Join Lobby