From 52da8cd52894839e768dbea8a3dfc22f5efa115e Mon Sep 17 00:00:00 2001
From: Mathias Wagner <germannewsmaker@gmail.com>
Date: Sun, 19 Nov 2023 00:21:39 +0100
Subject: [PATCH] Created the Join.jsx page

---
 client/src/pages/Join/Join.jsx | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/client/src/pages/Join/Join.jsx b/client/src/pages/Join/Join.jsx
index edc8599..ee7f4ac 100644
--- a/client/src/pages/Join/Join.jsx
+++ b/client/src/pages/Join/Join.jsx
@@ -1,8 +1,41 @@
 import "./styles.sass";
+import {useEffect, useState} from "react";
+import Code from "@/pages/Join/states/Code";
+import {socket} from "@/common/utils/socket.js";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faHourglassHalf} from "@fortawesome/free-solid-svg-icons";
+import Input from "@/pages/Join/states/Input/index.js";
 
 export const Join = () => {
+    const [state, setState] = useState("join");
+
+    const handleEnd = () => {
+        setState("end");
+    }
+
+    const onSubmissionReady = () => {
+        setState("input");
+    }
+
+    useEffect(() => {
+        socket.on("disconnect", handleEnd);
+        socket.on("SUBMISSION_READY", onSubmissionReady);
+
+        return () => {
+            socket.off("disconnect", handleEnd);
+            socket.off("SUBMISSION_READY", onSubmissionReady);
+        }
+    }, []);
+
     return (
         <div className="join-page">
+            {state === "join" && <Code setState={setState}/>}
+            {state === "waiting" && <FontAwesomeIcon icon={faHourglassHalf} bounce className="waiting-icon" /> }
+            {state === "input" && <Input setState={setState}/>}
+            {state === "end" && <div className="game-end">
+                <h1>Ende</h1>
+                <p>Das Spiel ist vorbei!</p>
+            </div>}
 
         </div>
     );