Merge pull request #298 from SchoodEIP/final_debug_fixes

Final debug fixes

src/Components/Accounts/Adm/admAccountsTable.js

@@ -9,7 +9,7 @@ import deleteButton from '../../../assets/deleteIcon.png'
 import suspendButton from '../../../assets/suspendIcon.png'
 import restoreButton from '../../../assets/restoreIcon.png'
 
-export default function AdmAccountsTable () {
+export default function AdmAccountsTable ({ handleUpdateContent, isUpdated }) {
   const [accountList, setAccountList] = useState([]) // list of accounts
   const [isPopupOpen, setIsPopupOpen] = useState(false)
   const [userId, setUserId] = useState('')
@@ -35,6 +35,13 @@ export default function AdmAccountsTable () {
     }
   }
 
+  useEffect(() => {
+    if (isUpdated) {
+      getAccountList()
+      handleUpdateContent()
+    }
+  }, [isUpdated])
+
   async function getSuspendedAccountList (list) {
     const baseUrl = process.env.REACT_APP_BACKEND_URL + '/user/getDisabled'
     const token = sessionStorage.getItem('token')

src/Components/Accounts/SchoolAdm/schoolAccountsTable.js

@@ -11,7 +11,7 @@ import suspendButton from '../../../assets/suspendIcon.png'
 import restoreButton from '../../../assets/restoreIcon.png'
 import Select from 'react-select'
 
-export default function SchoolAccountsTable ({ status }) {
+export default function SchoolAccountsTable ({ isUpdated, handleUpdateContent, status }) {
   const [teacherList, setTeacherList] = useState([])
   const [studentList, setStudentList] = useState([])
   const [selectedUser, setSelectedUser] = useState(null)
@@ -47,12 +47,15 @@ export default function SchoolAccountsTable ({ status }) {
       disconnect()
     } else {
       const data = await resp.json()
-      const array = [...accounts, ...data]
 
-      const teacherAccounts = array.filter(account => account.role.name === 'teacher')
-      const studentAccounts = array.filter(account => account.role.name === 'student')
-      setTeacherList(teacherAccounts)
-      setStudentList(studentAccounts)
+      if (data.message !== 'Access Forbidden') {
+        const array = [...accounts, ...data]
+
+        const teacherAccounts = array.filter(account => account.role.name === 'teacher')
+        const studentAccounts = array.filter(account => account.role.name === 'student')
+        setTeacherList(teacherAccounts)
+        setStudentList(studentAccounts)
+      }
     }
   }
 
@@ -100,6 +103,13 @@ export default function SchoolAccountsTable ({ status }) {
       })
   }
 
+  useEffect(() => {
+    if (isUpdated) {
+      getAccountList()
+      handleUpdateContent()
+    }
+  }, [isUpdated])
+
   const showClasses = (classes) => {
     if (!Array.isArray(classes)) {
       return ''
@@ -195,7 +205,11 @@ export default function SchoolAccountsTable ({ status }) {
 
       studentClass.map(classe => { return callAction(classe, '/updateStudent') })
     }
-    if (!classError) { toast.success('Le profil a été mis à jour avec succès.') }
+    if (!classError) {
+      toast.success('Le profil a été mis à jour avec succès.')
+      handleUpdateContent()
+      openEditing()
+    }
   }
 
   const handleUpdate = async (e) => {
@@ -315,7 +329,7 @@ export default function SchoolAccountsTable ({ status }) {
           <div className='popup-modal-container' style={{ alignItems: 'center' }}>
             <button className='close-btn' onClick={close}><img src={cross} alt='Close' /></button>
             <div className='editProfileForm'>
-              <h2>Modifier Profil</h2>
+              <h2>Modifier le profil</h2>
               <form className='form-profile-modif' onSubmit={handleUpdate}>
                 <div>
                   <label className='input-label' htmlFor='firstname'>Prénom:
@@ -407,7 +421,7 @@ export default function SchoolAccountsTable ({ status }) {
                     <td title={`${data.firstname} ${data.lastname}`}>{data.lastname}</td>
                     <td title={`${data.email}`}>{data.email}</td>
                     <td>{showClasses(data.classes)}</td>
-                    {status && <td><button style={{ fontFamily: 'Inter' }} onClick={(e) => { e.stopPropagation(); handleEditClick(data) }} title='Modifier le profil'>Modifier</button></td>}
+                    {status && <td>{data.active && <button style={{ fontFamily: 'Inter' }} onClick={(e) => { e.stopPropagation(); handleEditClick(data) }} title='Modifier le profil'>Modifier</button>}</td>}
                     {status &&
                       <td>
                         {
@@ -451,7 +465,7 @@ export default function SchoolAccountsTable ({ status }) {
                     <td title={`${data.firstname} ${data.lastname}`}>{data.lastname}</td>
                     <td title={`${data.email}`}>{data.email}</td>
                     <td>{showClasses(data.classes)}</td>
-                    {status && <td><button style={{ fontFamily: 'Inter' }} onClick={(e) => { e.stopPropagation(); handleEditClick(data) }} title='Modifier le Profil'>Modifier</button></td>}
+                    {status && <td>{data.active && <button style={{ fontFamily: 'Inter' }} onClick={(e) => { e.stopPropagation(); handleEditClick(data) }} title='Modifier le profil'>Modifier</button>}</td>}
                     {status &&
                       <td>
                         {

src/Components/Aides/aides.jsx

@@ -5,7 +5,7 @@ import phoneIcon from '../../assets/phoneIcon.png'
 import mailIcon from '../../assets/mailIcon.png'
 import { toast } from 'react-toastify'
 
-export default function AidePage () {
+export default function AidePage ({ updateContent, handleUpdateContent }) {
   const [categories, setCategories] = useState([])
   const [contacts, setContacts] = useState([])
   const [chosenContact, setChosenContact] = useState([])
@@ -18,49 +18,51 @@ export default function AidePage () {
   useEffect(() => {
     const categoryUrl = process.env.REACT_APP_BACKEND_URL + '/user/helpNumbersCategories'
     const helpNumbersUrl = process.env.REACT_APP_BACKEND_URL + '/user/helpNumbers'
-
-    fetch(categoryUrl, {
-      method: 'GET',
-      headers: {
-        'x-auth-token': sessionStorage.getItem('token'),
-        'Content-Type': 'application/json'
-      }
-    }).then(response => {
-      if (response.status === 401) {
-        disconnect()
-      }
-      return response.json()
-    })
-      .then(data => {
-        setCategories(data)
-        const filterID = data.filter((category) => category.name === 'Autres')
-        if (filterID.length !== 0) {
-          setDefaultID(filterID[0]._id)
-          setSelectedCat(filterID[0]._id)
+    if (updateContent) {
+      fetch(categoryUrl, {
+        method: 'GET',
+        headers: {
+          'x-auth-token': sessionStorage.getItem('token'),
+          'Content-Type': 'application/json'
+        }
+      }).then(response => {
+        if (response.status === 401) {
+          disconnect()
         }
+        return response.json()
       })
-      .catch(error => toast.error(error.message))
+        .then(data => {
+          setCategories(data)
+          const filterID = data.filter((category) => category.name === 'Autres')
+          if (filterID.length !== 0) {
+            setDefaultID(filterID[0]._id)
+            setSelectedCat(filterID[0]._id)
+          }
+        })
+        .catch(error => toast.error(error.message))
 
-    fetch(helpNumbersUrl, {
-      method: 'GET',
-      headers: {
-        'x-auth-token': sessionStorage.getItem('token'),
-        'Content-Type': 'application/json'
-      }
-    }).then(response => {
-      if (response.status === 401) {
-        disconnect()
-      }
-      return response.json()
-    })
-      .then(data => {
-        setContacts(data)
-        setFilteredContacts(data)
-        setChosenContact(data[0])
-        setSelectedContact(data[0]._id)
+      fetch(helpNumbersUrl, {
+        method: 'GET',
+        headers: {
+          'x-auth-token': sessionStorage.getItem('token'),
+          'Content-Type': 'application/json'
+        }
+      }).then(response => {
+        if (response.status === 401) {
+          disconnect()
+        }
+        return response.json()
       })
-      .catch(error => toast.error('Erreur ' + error.status + ': ' + error.message))
-  }, [])
+        .then(data => {
+          setContacts(data)
+          setFilteredContacts(data)
+          setChosenContact(data[0])
+          setSelectedContact(data[0]._id)
+        })
+        .catch(error => toast.error('Erreur ' + error.status + ': ' + error.message))
+      handleUpdateContent()
+    }
+  }, [updateContent])
 
   const filterContactsByCategory = (category) => {
     const filtered = contacts.filter((contact) => category !== defaultID ? contact.helpNumbersCategory === category : contact)

src/Components/ChatRoom/chatRoom.jsx

@@ -11,11 +11,11 @@ import '../../css/Components/Popup/popup.scss'
 import cross from '../../assets/Cross.png'
 import { disconnect } from '../../functions/disconnect'
 import UserProfile from '../../Components/userProfile/userProfile'
+import { toast } from 'react-toastify'
 
 const Messages = () => {
   const [conversations, setConversations] = useState([])
   const [currentConversation, setCurrentConversation] = useState('')
-  const [notification, setNotification] = useState({ visible: false, message: '', type: '' })
   const { send, chats } = useContext(WebsocketContext) // eslint-disable-line
   const inputFile = useRef(null)
 
@@ -143,13 +143,6 @@ const Messages = () => {
     return () => clearInterval(intervalId)
   }, [currentConversation])
 
-  const openNotification = (message, type) => {
-    setNotification({ visible: true, message, type })
-    setTimeout(() => {
-      setNotification({ visible: false, message: '', type: '' })
-    }, 3000) // La notification sera visible pendant 3 secondes
-  }
-
   const sendMessage = async () => {
     if (newMessage.trim() === '' && !file) {
       return
@@ -291,10 +284,10 @@ const Messages = () => {
       }
 
       send('createChat', { ids: selectedContacts.filter((id) => id !== userId) })
-      openNotification('Une nouvelle conversation a été créée avec succès', 'success')
+      toast.success('Une nouvelle conversation a été créée avec succès')
       fetchConversations()
     } catch (error) /* istanbul ignore next */ {
-      openNotification('Erreur lors de la création de la conversation', 'error')
+      toast.error('Erreur lors de la création de la conversation')
       setError('Erreur lors de la création de la conversation')
     }
   }
@@ -322,11 +315,11 @@ const Messages = () => {
         throw new Error('Erreur lors de l\'ajout des participants.')
       }
 
-      openNotification('Participants ajoutés avec succès', 'success')
+      toast.success('Participants ajoutés avec succès')
       fetchConversations() // Met à jour les conversations
     } catch (error) {
       console.error('Erreur lors de l\'ajout des participants :', error)
-      openNotification('Erreur lors de l\'ajout des participants', 'error')
+      toast.error('Erreur lors de l\'ajout des participants')
     } finally {
       setShowAddParticipantsPopup(false) // Ferme la popup après l'ajout
     }
@@ -351,12 +344,12 @@ const Messages = () => {
         throw new Error('Erreur lors du départ de la conversation.')
       }
 
-      openNotification('Vous avez quitté la conversation.', 'success')
+      toast.success('Vous avez quitté la conversation.')
       setCurrentConversation('') // Réinitialiser la conversation actuelle
       fetchConversations() // Mettre à jour la liste des conversations après avoir quitté
     } catch (error) {
       console.error('Erreur lors du départ de la conversation :', error)
-      openNotification('Erreur lors du départ de la conversation.', 'error')
+      toast.error('Erreur lors du départ de la conversation.')
     } finally {
       // clearNotification() // Efface la notification après un certain temps
       setShowLeaveConversationPopup(false) // Ferme la popup après avoir quitté
@@ -404,10 +397,6 @@ const Messages = () => {
         openCreateConversationPopup={openCreateConversationPopup}
       />
       <div className='chat'>
-        {notification.visible &&
-          <div className={`notification ${notification.type}`}>
-            {notification.message}
-          </div>}
         {currentConversation
           ? (
             <div className='chat-content'>
@@ -492,7 +481,7 @@ const Messages = () => {
             </div>
             )
           : (
-            <div>Aucune conversation sélectionnée.</div>
+            <div style={{ marginTop: '20px', marginLeft: '20px' }}>Aucune conversation sélectionnée.</div>
             )}
       </div>
       <Popup open={showCreateConversationPopup} onClose={openCreateConversationPopup} modal contentStyle={{ width: '400px' }}>

src/Components/Popup/alertCreation.jsx

@@ -147,7 +147,7 @@ const AlertCreationPopupContent = () => {
   }
 
   return (
-    <>
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '10px', alignSelf: 'center' }}>
       {
             roleProfile === 'teacher'
               ? null
@@ -211,8 +211,8 @@ const AlertCreationPopupContent = () => {
         <span className='label-content'>Fichier joint</span>
         <input style={{ fontFamily: 'Inter' }} id='file-input' data-testid='alert-file-input' type='file' onChange={(e) => setFile(e.target.files[0])} />
       </label>
-      <button className='popup-btn' onClick={handleAlertSubmit}>Créer l'Alerte</button>
-    </>
+      <button style={{ alignSelf: 'center' }} className='popup-btn' onClick={handleAlertSubmit}>Créer l'Alerte</button>
+    </div>
   )
 }
 

src/Components/Popup/alertDeletion.jsx

@@ -4,11 +4,12 @@ import '../../css/pages/createAlerts.scss'
 
 const AlertDeletionPopupContent = ({ onClose, chosenAlert, handleDeleteAlert }) => {
   return (
-    <>
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '10px', alignSelf: 'center' }}>
+      <h3 style={{ alignSelf: 'center' }}>Supprimer l'alerte</h3>
       <p>Êtes-vous certain(e) de vouloir supprimer cette alerte ?</p>
       <p>Cette action sera irréversible.</p>
-      <button className='popup-btn' onClick={() => handleDeleteAlert(chosenAlert.id, onClose)}>Supprimer l'Alerte</button>
-    </>
+      <button style={{ alignSelf: 'center' }} className='popup-btn' onClick={() => handleDeleteAlert(chosenAlert.id, onClose)}>Supprimer l'Alerte</button>
+    </div>
   )
 }
 

src/Components/Popup/alertModification.jsx

@@ -4,7 +4,7 @@ import '../../css/pages/createAlerts.scss'
 import { toast } from 'react-toastify'
 import { disconnect } from '../../functions/disconnect'
 
-const AlertModificationPopupContent = ({ onClose, chosenAlert, handleEditAlert }) => {
+const AlertModificationPopupContent = ({ onClose, chosenAlert, handleEditAlert, handleUpdateContent }) => {
   const [editedAlert, setEditedAlert] = useState(chosenAlert)
   const [file, setFile] = useState(null)
 
@@ -31,6 +31,7 @@ const AlertModificationPopupContent = ({ onClose, chosenAlert, handleEditAlert }
         if (response.status === 401) {
           disconnect()
         }
+        handleUpdateContent()
         toast.success('Fichier envoyé avec l\'alerte avec succès')
       })
       .catch((error) => /* istanbul ignore next */ {
@@ -44,7 +45,8 @@ const AlertModificationPopupContent = ({ onClose, chosenAlert, handleEditAlert }
   }
 
   return (
-    <>
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '10px', alignSelf: 'center' }}>
+      <h3 style={{ alignSelf: 'center' }}>Modifier l'alerte</h3>
       <label className='input-label'>
         <span className='label-content'>Titre <span style={{ color: 'red' }}>*</span></span>
         <input type='text' name='title' placeholder='Titre' value={editedAlert.title} onChange={handleEditChange} />
@@ -57,8 +59,8 @@ const AlertModificationPopupContent = ({ onClose, chosenAlert, handleEditAlert }
         <span className='label-content'>Fichier joint</span>
         <input id='file-input' data-testid='alert-file-input' type='file' onChange={(e) => setFile(e.target.files[0])} />
       </label>
-      <button className='popup-btn' onClick={() => editAlert()}>Modifier l'Alerte</button>
-    </>
+      <button style={{ alignSelf: 'center' }} className='popup-btn' onClick={() => editAlert()}>Modifier l'Alerte</button>
+    </div>
   )
 }