From 18539e6a116200399e79e6b1f927c8bf7da07ffc Mon Sep 17 00:00:00 2001 From: Mathias Wagner <germannewsmaker@gmail.com> Date: Sun, 19 Nov 2023 00:20:29 +0100 Subject: [PATCH] Created the Code.jsx state --- client/src/pages/Join/states/Code/Code.jsx | 55 ++++++++++++++++++++++ 1 file changed, 55 insertions(+) create mode 100644 client/src/pages/Join/states/Code/Code.jsx diff --git a/client/src/pages/Join/states/Code/Code.jsx b/client/src/pages/Join/states/Code/Code.jsx new file mode 100644 index 0000000..10699c5 --- /dev/null +++ b/client/src/pages/Join/states/Code/Code.jsx @@ -0,0 +1,55 @@ +import Button from "@/common/components/Button"; +import {faRightToBracket, faWarning} from "@fortawesome/free-solid-svg-icons"; +import {useEffect, useState} from "react"; +import {socket} from "@/common/utils/socket.js"; +import "./styles.sass"; +import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"; +import {useParams} from "react-router"; + +export const Code = ({setState}) => { + + const params = useParams(); + + const [code, setCode] = useState(params.code || ""); + const [company, setCompany] = useState(""); + + const [error, setError] = useState(""); + + const joinRoom = () => { + socket.emit("JOIN_ROOM", {code, name: company}, (data) => { + if (data) { + setState("waiting"); + } else { + setError("Raum nicht gefunden"); + } + }); + } + + useEffect(() => { + const timeout = setTimeout(() => { + setError(""); + }, 30000); + + return () => clearTimeout(timeout); + }, [error]); + + return ( + <> + {error && <div className="error"> + <FontAwesomeIcon icon={faWarning} /> + <p>{error}</p> + </div>} + <div className="input-area"> + <h3>Raum-Code</h3> + <input type="text" placeholder="Raum-Code" className="glassy" + onChange={(e) => setCode(e.target.value)} value={code}/> + </div> + <div className="input-area"> + <h3>Name des Unternehmens</h3> + <input type="text" placeholder="Name des Unternehmens" className="glassy" + onChange={(e) => setCompany(e.target.value)} value={company}/> + </div> + <Button text="Beitreten" onClick={joinRoom} icon={faRightToBracket} /> + </> + ) +} \ No newline at end of file