fix(pencil): refactoring du code, fix de l'envoi de stats, ajout du s…

…ubmit button
DISIC · Mar 26, 2024 · 3d24ba9 · 3d24ba9
1 parent 52bc11d
commit 3d24ba9
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 55 deletions.
diff --git 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
@@ -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}
       </modal.Component>
       <div className={styles.buttons}>
-        <Button onClick={handle} className={styles.button}>
+        <Button
+          // onClick={handle}
+          type="submit"
+          className={styles.button}
+          disabled={!roomNameConstraintOk(props.roomName)}
+        >
           Rejoindre ou créer
         </Button>
         <br />

diff --git 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
@@ -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<JSX.Element | string>(<></>);
   const [messageType, setMessageType] = useState<string>('');
   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) {
     <div className={styles.HomeForm}>
       <h3>La WebConférence de l'État pour tous les agents publics</h3>
       <p>Audio, vidéo, chat, partage d'écran et de documents</p>
-      <div className={styles.form}>
+      <form
+        className={styles.form}
+        onSubmit={e => {
+          e.preventDefault();
+          handle();
+        }}
+      >
         <div className={styles.confButtons}>
           <Input
             style={{ width: '100%' }}
@@ -188,17 +251,24 @@ function HomeForm(props: AuthModalProps) {
               onChange: (e: any) => change(e.target.value),
             }}
           />
+
           <Button
             className={styles.plusButton}
             onClick={() => {
               verifyAndSetVAlue(generateRoomName());
             }}
+            type="button"
           >
             <ShuffleIcon />
           </Button>
         </div>
         <div className={styles.confButtons}>
-          <AuthModal {...props} setOpen={setOpen} buttons={props.buttons} />
+          <AuthModal
+            {...props}
+            setOpen={setOpen}
+            buttons={props.buttons}
+            openModal={openModal}
+          />
           <Button
             className={styles.plusButton}
             onClick={() => props.setButtons(!props.buttons)}
@@ -207,10 +277,11 @@ function HomeForm(props: AuthModalProps) {
             {props.buttons ? down : up}
           </Button>
         </div>
-      </div>
+      </form>
       <p>{message}</p>
       <Badge severity="info">
-        Actuellement, il y a 0 conférences et 0 participants.
+        Actuellement, il y a {props.conferenceNumber} conférences et{' '}
+        {props.participantNumber} participants.
       </Badge>
       <hr />
       <Alert
@@ -271,4 +342,4 @@ function generateRoomName() {
     Math.floor(Math.random() * 10) +
     Math.floor(Math.random() * 10)
   );
-}
+}