From 0fa5a335be33f82b484240c21c1cddba9d2380e3 Mon Sep 17 00:00:00 2001
From: Joe Winter <joewinter333@gmail.com>
Date: Wed, 16 Oct 2024 14:49:56 +0100
Subject: [PATCH] link is now created in the frontend

---
 api/app.js                             |  4 ++--
 frontend/src/App.jsx                   |  6 +++---
 frontend/src/pages/HomePage.jsx        |  7 +++----
 frontend/src/socket.js                 |  3 ++-
 frontend/tests/pages/HomePage.test.jsx | 14 +++++++-------
 5 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/api/app.js b/api/app.js
index 1633f90..f1062c7 100644
--- a/api/app.js
+++ b/api/app.js
@@ -55,8 +55,8 @@ io.on('connection', (socket) => {
 
   socket.on("create_room", () => {
     const roomId = crypto.randomBytes(3).toString('hex')
-    const link = `http://localhost:5173/join/${roomId}`
-    socket.emit('receive_link', link)
+    // const link = `http://localhost:5173/join/${roomId}`
+    socket.emit('receive_link', roomId)
   })
 })
 
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index ebc1424..72661df 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -14,7 +14,7 @@ import { RoundEnd } from "./pages/RoundEnd";
 function App() {
   
   const [isConnected, setIsConnected] = useState(socket.connected)
-  const [gameLink, setGameLink] = useState("")
+  const [gameRoom, setGameRoom] = useState("")
   
   useEffect(() => {
     const onConnect = () => {
@@ -24,7 +24,7 @@ function App() {
       setIsConnected(false)
     }
     const onReceiveLink = (data) => {
-      setGameLink(data)
+      setGameRoom(data)
     }
     
     socket.on('connect', onConnect)
@@ -41,7 +41,7 @@ function App() {
   const router = createBrowserRouter([
     {
       path: "/",
-      element: <HomePage gameLink={gameLink}/>,
+      element: <HomePage gameRoom={gameRoom}/>,
     },
     {
       path: "/in-game",
diff --git a/frontend/src/pages/HomePage.jsx b/frontend/src/pages/HomePage.jsx
index 78f3d3e..81fa1f5 100644
--- a/frontend/src/pages/HomePage.jsx
+++ b/frontend/src/pages/HomePage.jsx
@@ -5,8 +5,7 @@ import { socket } from "../socket";
 import { Button } from "../components/Button";
 
 // page function
-export function HomePage({gameLink}) {
-
+export function HomePage({ gameRoom }) {
   const handleClick = () => {
     socket.emit("create_room");
   };
@@ -22,8 +21,8 @@ export function HomePage({gameLink}) {
           </ul>
         </p>
         <Button handleClick={handleClick} buttonText="Create Game"></Button>
-        {gameLink && <div data-testid="game-link">Game Link: {gameLink}</div>}
+        {gameRoom && <div data-testid="game-link">Game Link: {`${window.location.href}join/${gameRoom}`}</div>}
       </div>
     </>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/src/socket.js b/frontend/src/socket.js
index 26daf2b..640a9fc 100644
--- a/frontend/src/socket.js
+++ b/frontend/src/socket.js
@@ -3,4 +3,5 @@ import { io } from "socket.io-client";
 const SOCKET_URL = import.meta.env.VITE_SOCKET_BACKEND_URL;
 console.log("SOCKET_URL",SOCKET_URL)
 
-export const socket = io(SOCKET_URL)
+// export const socket = io(SOCKET_URL)
+export const socket = io("http://localhost:3001")
diff --git a/frontend/tests/pages/HomePage.test.jsx b/frontend/tests/pages/HomePage.test.jsx
index cb4c5e4..449c78e 100644
--- a/frontend/tests/pages/HomePage.test.jsx
+++ b/frontend/tests/pages/HomePage.test.jsx
@@ -13,36 +13,36 @@ vi.mock("../../src/socket.js", () => {
 
 describe("Homepage tests", () => {
   test("name of the game", () => {
-    render(<HomePage gameLink={""} />);
+    render(<HomePage gameRoom={""} />);
     const heading = screen.getByTestId("game-name");
     expect(heading.textContent).toEqual("Guess the number!");
   });
   test("rules of the game", () => {
-    render(<HomePage gameLink={""} />);
+    render(<HomePage gameRoom={""} />);
     expect(screen.getByText("Rules of the game:")).toBeTruthy();
     expect(screen.getByText("Guess the number between 1 and 100")).toBeTruthy();
     expect(screen.getByText("2 to 6 players")).toBeTruthy();
   });
   test("create game button appears on page", () => {
-    render(<HomePage gameLink={""} />);
+    render(<HomePage gameRoom={""} />);
     const buttonEl = screen.getByRole("button");
     expect(buttonEl.textContent).toEqual("Create Game");
   });
   test('when a user clicks on the button the socket emits to "create_room"', async () => {
-    render(<HomePage gameLink={""} />);
+    render(<HomePage gameRoom={""} />);
     const buttonEl = screen.getByRole("button");
     const user = userEvent.setup();
     await user.click(buttonEl);
     expect(socket.emit).toHaveBeenCalledWith("create_room");
   });
   test("when no link is passed into the component it is not visible", () => {
-    render(<HomePage gameLink={""} />);
+    render(<HomePage gameRoom={""} />);
     const link = screen.queryByTestId("game-link");
     expect(link).toBeNull();
   });
   test("given a link passed into the components", () => {
-    render(<HomePage gameLink={"http://example.com"} />);
+    render(<HomePage gameRoom={"abc123"} />);
     const link = screen.getByTestId("game-link");
-    expect(link.textContent).toEqual("Game Link: http://example.com");
+    expect(link.textContent).toEqual("Game Link: http://localhost:3000/join/abc123");
   });
 });