From 3d0882592fa535ca3e40bc08cc9efeb8067db66a Mon Sep 17 00:00:00 2001 From: Mathias Wagner <germannewsmaker@gmail.com> Date: Sat, 18 Nov 2023 19:33:51 +0100 Subject: [PATCH] Created the Create.jsx page --- client/src/pages/Create/Create.jsx | 33 +++++++++++++++++++++++++++++- 1 file changed, 32 insertions(+), 1 deletion(-) diff --git a/client/src/pages/Create/Create.jsx b/client/src/pages/Create/Create.jsx index 0397cf9..c8a04f9 100644 --- a/client/src/pages/Create/Create.jsx +++ b/client/src/pages/Create/Create.jsx @@ -1,9 +1,40 @@ import "./styles.sass"; +import {useContext, useEffect, useState} from "react"; +import {socket} from "@/common/utils/socket.js"; +import {QRCodeSVG} from "qrcode.react"; +import Button from "@/common/components/Button"; +import {faPlay} from "@fortawesome/free-solid-svg-icons"; +import {GroupContext} from "@/common/contexts/GroupContext.jsx"; + +export const DOMAIN = "pmg.gnmyt.dev"; +export const BASE_URL = `https://${DOMAIN}/join?code=`; export const Create = () => { + const [code, setCode] = useState("LOADING"); + + const {groups} = useContext(GroupContext); + + const getRoomCode = () => { + socket.emit("CREATE_ROOM", undefined, (data) => { + setCode(code => code !== "LOADING" ? code : data.code); + }); + } + + useEffect(() => { + const timeout = setTimeout(() => getRoomCode(), 1000); + + return () => clearTimeout(timeout); + }, []); + return ( <div className="create-page"> - + <div className="info-area"> + <h2>Geht auf <span>{DOMAIN}</span> und gibt den Code <span>{code}</span> ein.</h2> + {groups.length > 1 && <Button text={`Mit ${groups.length} Gruppen starten`} icon={faPlay} />} + </div> + <div className="qr-area"> + <QRCodeSVG value={BASE_URL + code} /> + </div> </div> ) } \ No newline at end of file