137 lines
4.7 KiB
JavaScript
137 lines
4.7 KiB
JavaScript
import { useRouter } from "next/router";
|
|
import { useEffect, useState } from "react";
|
|
import { createRoom } from "../../requests/requests.room.js";
|
|
import styles from "../../styles/room/create.module.scss";
|
|
import { isBrowser, parseClassName } from "../../utils/utils.js";
|
|
import Layout from "../Layout.js";
|
|
import Input from "../Input.jsx";
|
|
import { useSessionContext } from "../../context/session.context.js";
|
|
import { isEmpty } from "rxjs";
|
|
export default function Create() {
|
|
const [infos, setInfos] = useState({
|
|
name: "",
|
|
nick: "",
|
|
private: true,
|
|
results: false,
|
|
});
|
|
const { authData} = useSessionContext();
|
|
useEffect(() => {
|
|
if (isBrowser && localStorage.getItem('token') !== null) {
|
|
if (authData) {
|
|
setInfos({ ...infos, nick: authData.username });
|
|
}
|
|
}
|
|
}, [isBrowser && localStorage.getItem('token') !== null]);
|
|
const [pseudoMode, setPseudoMode] = useState(false);
|
|
const [fade, setFade] = useState(false)
|
|
useEffect(() => {
|
|
setTimeout(() => {
|
|
setPseudoMode(fade)
|
|
}, 300)
|
|
}, [fade])
|
|
|
|
const router = useRouter();
|
|
return (
|
|
<Layout page="Créer une salle">
|
|
<div className={styles.main}>
|
|
{!pseudoMode && (
|
|
<div className={parseClassName([fade ? styles['swipe']:undefined, styles['form']])}>
|
|
<h1 className={styles.title}>Nouvelle salle</h1>
|
|
<Input
|
|
type="text"
|
|
placeholder="Nom de la salle..."
|
|
className="exo-input"
|
|
value={infos.name}
|
|
onChange={(e) => {
|
|
setInfos({ ...infos, name: e.target.value });
|
|
}}
|
|
/>
|
|
<div title="Défini si les participants doivent être autorisés pour entrer ou s'ils peuvent accéder à la salle librement">
|
|
<input
|
|
checked={infos.private}
|
|
onChange={(e) => {
|
|
setInfos({ ...infos, private: !infos.private });
|
|
}}
|
|
type="checkbox"
|
|
name=""
|
|
id="private"
|
|
/>
|
|
<label htmlFor="private">Privée</label>
|
|
</div>
|
|
<div title="Défini si les résultats sont accessible à tous les participants">
|
|
<input
|
|
checked={infos.results}
|
|
onChange={(e) => {
|
|
setInfos({ ...infos, results: !infos.results });
|
|
}}
|
|
type="checkbox"
|
|
name=""
|
|
id="results"
|
|
/>
|
|
<label htmlFor="results">Résultats publics</label>
|
|
</div>
|
|
<button
|
|
className="exo-btn"
|
|
onClick={() => {
|
|
if (isBrowser && localStorage.getItem('token') !== null) {
|
|
createRoom({ ...infos }).then((res) => {
|
|
sessionStorage.setItem("clientId", res.clientId);
|
|
router.push(
|
|
{ pathname: `/room/${res.id_code}` },
|
|
undefined,
|
|
{
|
|
shallow: true,
|
|
}
|
|
);
|
|
});
|
|
} else {
|
|
if (infos.name != "") {
|
|
setFade(true);
|
|
}
|
|
}
|
|
}}
|
|
>
|
|
{isBrowser && localStorage.getItem('token') !== null ? "Créer !" : "Suivant !"}
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{pseudoMode && (
|
|
<div className={styles.form}>
|
|
<h1 className={styles.title}>Entrez votre pseudo</h1>
|
|
<Input
|
|
type="text"
|
|
placeholder="Pseudo"
|
|
className="exo-input"
|
|
value={infos.nick}
|
|
disabled={isBrowser && localStorage.getItem('token') !== null}
|
|
onChange={(e) => {
|
|
if (isEmpty(authData)) {
|
|
setInfos({ ...infos, nick: e.target.value });
|
|
}
|
|
}}
|
|
/>
|
|
<button
|
|
className="exo-btn"
|
|
onClick={() => {
|
|
createRoom({ ...infos }).then((res) => {
|
|
sessionStorage.setItem("clientId", res.clientId);
|
|
router.push(
|
|
{ pathname: `/room/${res.id_code}` },
|
|
undefined,
|
|
{
|
|
shallow: true,
|
|
}
|
|
);
|
|
});
|
|
}}
|
|
>
|
|
Créer !
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</Layout>
|
|
);
|
|
}
|