From 3d24ba91b1bfb348a4c0de2af49918367b6316ff Mon Sep 17 00:00:00 2001 From: "youssef.el-mkhantar" Date: Tue, 26 Mar 2024 16:31:36 +0100 Subject: [PATCH 1/2] fix(pencil): refactoring du code, fix de l'envoi de stats, ajout du submit button --- src/App.tsx | 2 + src/pages/home/AuthModal.tsx | 68 ++++++++---------------------- src/pages/home/Home.tsx | 2 + src/pages/home/HomeForm.tsx | 81 +++++++++++++++++++++++++++++++++--- 4 files changed, 98 insertions(+), 55 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 529ad2b..9fa0e6e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -302,6 +302,8 @@ function App() { sendEmail={sendEmail} joinConference={joinConference} authenticated={authenticated} + conferenceNumber={conferenceNumber} + participantNumber={participantsNumber} /> } /> diff --git a/src/pages/home/AuthModal.tsx b/src/pages/home/AuthModal.tsx index 49bc896..23ebd9e 100644 --- a/src/pages/home/AuthModal.tsx +++ b/src/pages/home/AuthModal.tsx @@ -4,10 +4,8 @@ import { Input } from '@codegouvfr/react-dsfr/Input'; import { Checkbox } from '@codegouvfr/react-dsfr/Checkbox'; import { Badge } from '@codegouvfr/react-dsfr/Badge'; import CalendarModalComponent from './CalendarModal'; -import api from '../../axios/axios'; import { useState, useEffect } from 'react'; -import { redirect, useNavigate } from 'react-router-dom'; import styles from './AuthModal.module.css'; @@ -28,6 +26,7 @@ interface AuthModalProps { authenticated: boolean | null; setOpen: (e: boolean) => void; buttons: boolean; + openModal: boolean; } function roomNameConstraintOk(roomName: string) { @@ -54,50 +53,9 @@ export default function AuthModal(props: AuthModalProps) { props.setOpen(true); }; - const navigate = useNavigate(); - - function handle() { - if (!props.roomName) { - const room = generateRoomName(); - props.setRoomName(room); - if (roomNameConstraintOk(room)) { - api.get('/authentication/whereami').then(res => { - if (res.data.toLowerCase() == 'internet') { - if (!props.authenticated) { - modal.open(); - } - if (props.authenticated) { - props.joinConference(room); - } - } - if (res.data.toLowerCase() !== 'internet') { - props.joinConference(room); - } - }); - } - } else if (roomNameConstraintOk(props.roomName)) { - api - .get('/roomExists/' + props.roomName) - .then(res => { - return navigate('/' + props.roomName); - }) - .catch(err => { - api.get('/authentication/whereami').then(res => { - if (res.data.toLowerCase() == 'internet') { - if (!props.authenticated) { - return modal.open(); - } - if (props.authenticated) { - return props.joinConference(props.roomName); - } - } - if (res.data.toLowerCase() !== 'internet') { - return props.joinConference(props.roomName); - } - }); - }); - } - } + useEffect(() => { + props.openModal ? modal.open() : null; + }, [props.openModal]); useEffect(() => { props.setIsWhitelisted(null); @@ -118,9 +76,14 @@ export default function AuthModal(props: AuthModalProps) { }, []); const agentConnect = (room: string) => { - fetch(`${import.meta.env.VITE_BASE_URL}/authentication/login_authorize?room=${room}`, { - redirect: 'manual', - }).then(res => { + fetch( + `${ + import.meta.env.VITE_BASE_URL + }/authentication/login_authorize?room=${room}`, + { + redirect: 'manual', + } + ).then(res => { if (res.type === 'opaqueredirect') { window.location.href = res.url; } else { @@ -222,7 +185,12 @@ export default function AuthModal(props: AuthModalProps) { ) : null}
-
diff --git a/src/pages/home/Home.tsx b/src/pages/home/Home.tsx index 86160d6..e526c9a 100644 --- a/src/pages/home/Home.tsx +++ b/src/pages/home/Home.tsx @@ -13,6 +13,8 @@ interface AuthModalProps { setRoomName: (e: any) => void; joinConference: (e: any) => void; authenticated: boolean | null; + conferenceNumber: number; + participantNumber: number; } function Home(props: AuthModalProps) { diff --git a/src/pages/home/HomeForm.tsx b/src/pages/home/HomeForm.tsx index 7f69c81..01cccbe 100644 --- a/src/pages/home/HomeForm.tsx +++ b/src/pages/home/HomeForm.tsx @@ -9,6 +9,8 @@ import { Alert } from '@codegouvfr/react-dsfr/Alert'; import MuiAlert from '@mui/material/Alert'; import Snackbar, { SnackbarCloseReason } from '@mui/material/Snackbar'; import ShuffleIcon from '@mui/icons-material/Shuffle'; +import api from '../../axios/axios'; +import { redirect, useNavigate } from 'react-router-dom'; import { fr } from '@codegouvfr/react-dsfr'; interface AuthModalProps { @@ -23,12 +25,67 @@ interface AuthModalProps { authenticated: boolean | null; setButtons: (a: boolean) => void; buttons: boolean; + conferenceNumber: number; + participantNumber: number; } function HomeForm(props: AuthModalProps) { const [message, setMessage] = useState(<>); const [messageType, setMessageType] = useState(''); const [open, setOpen] = useState(false); + const [openModal, setOpenModal] = useState(false); + + const navigate = useNavigate(); + + function handle() { + function roomNameConstraintOk(roomName: string) { + const regex = new RegExp( + '^(?=(?:[a-zA-Z0-9]*[a-zA-Z]))(?=(?:[a-zA-Z0-9]*[0-9]){3})[a-zA-Z0-9]{10,}$' + ); + return regex.test(roomName); + } + if (!props.roomName) { + const room = generateRoomName(); + props.setRoomName(room); + if (roomNameConstraintOk(room)) { + api.get('/authentication/whereami').then(res => { + if (res.data.toLowerCase() == 'internet') { + if (!props.authenticated) { + // modal.open(); + setOpenModal(true); + } + if (props.authenticated) { + props.joinConference(room); + } + } + if (res.data.toLowerCase() !== 'internet') { + props.joinConference(room); + } + }); + } + } else if (roomNameConstraintOk(props.roomName)) { + api + .get('/roomExists/' + props.roomName) + .then(res => { + return navigate('/' + props.roomName); + }) + .catch(err => { + api.get('/authentication/whereami').then(res => { + if (res.data.toLowerCase() == 'internet') { + if (!props.authenticated) { + return setOpenModal(true); + } + if (props.authenticated) { + return props.joinConference(props.roomName); + } + } + if (res.data.toLowerCase() !== 'internet') { + return props.joinConference(props.roomName); + } + }); + }); + } + } const change = (e: string) => { verifyAndSetVAlue(e); @@ -171,7 +228,13 @@ function HomeForm(props: AuthModalProps) {

La WebConférence de l'État pour tous les agents publics

Audio, vidéo, chat, partage d'écran et de documents

-
+
{ + e.preventDefault(); + handle(); + }} + >
change(e.target.value), }} /> +
- +
-
+

{message}

- Actuellement, il y a 0 conférences et 0 participants. + Actuellement, il y a {props.conferenceNumber} conférences et{' '} + {props.participantNumber} participants.
Date: Tue, 26 Mar 2024 17:23:39 +0100 Subject: [PATCH 2/2] fix(pencil): onSubmit fix --- src/pages/home/AuthModal.tsx | 57 ++---------------------------------- src/pages/home/HomeForm.tsx | 4 ++- 2 files changed, 5 insertions(+), 56 deletions(-) diff --git a/src/pages/home/AuthModal.tsx b/src/pages/home/AuthModal.tsx index afe36e5..ccdd36f 100644 --- a/src/pages/home/AuthModal.tsx +++ b/src/pages/home/AuthModal.tsx @@ -53,57 +53,9 @@ export default function AuthModal(props: AuthModalProps) { props.setOpen(true); }; -<<<<<<< HEAD useEffect(() => { props.openModal ? modal.open() : null; }, [props.openModal]); -======= - const navigate = useNavigate(); - - function handle(e: any) { - e.preventDefault(); - if (!props.roomName) { - const room = generateRoomName(); - props.setRoomName(room); - if (roomNameConstraintOk(room)) { - api.get('/authentication/whereami').then(res => { - if (res.data.toLowerCase() == 'internet') { - if (!props.authenticated) { - modal.open(); - } - if (props.authenticated) { - props.joinConference(room); - } - } - if (res.data.toLowerCase() !== 'internet') { - props.joinConference(room); - } - }); - } - } else if (roomNameConstraintOk(props.roomName)) { - api - .get('/roomExists/' + props.roomName) - .then(res => { - return navigate('/' + props.roomName); - }) - .catch(err => { - api.get('/authentication/whereami').then(res => { - if (res.data.toLowerCase() == 'internet') { - if (!props.authenticated) { - return modal.open(); - } - if (props.authenticated) { - return props.joinConference(props.roomName); - } - } - if (res.data.toLowerCase() !== 'internet') { - return props.joinConference(props.roomName); - } - }); - }); - } - } ->>>>>>> a306054b2c0e02f9d605371837dbce6a817ff84f useEffect(() => { props.setIsWhitelisted(null); @@ -211,6 +163,7 @@ export default function AuthModal(props: AuthModalProps) { @@ -256,6 +202,7 @@ export default function AuthModal(props: AuthModalProps) { className={styles.button} nativeButtonProps={{ id: 'copyButton' }} onClick={copyLink} + type="button" > Copier le lien diff --git a/src/pages/home/HomeForm.tsx b/src/pages/home/HomeForm.tsx index 5ff4cdb..a95102e 100644 --- a/src/pages/home/HomeForm.tsx +++ b/src/pages/home/HomeForm.tsx @@ -73,7 +73,7 @@ function HomeForm(props: AuthModalProps) { api.get('/authentication/whereami').then(res => { if (res.data.toLowerCase() == 'internet') { if (!props.authenticated) { - return setOpenModal(true); + setOpenModal(true); } if (props.authenticated) { return props.joinConference(props.roomName); @@ -85,6 +85,7 @@ function HomeForm(props: AuthModalProps) { }); }); } + setOpenModal(false); } const change = (e: string) => { @@ -274,6 +275,7 @@ function HomeForm(props: AuthModalProps) { className={styles.plusButton} onClick={() => props.setButtons(!props.buttons)} nativeButtonProps={{ id: 'plusButton' }} + type="button" > {props.buttons ? down : up}