Merge pull request #239 from SchoodEIP/last-fix

Last fix
SchoodEIP · May 30, 2024 · c12a8a6 · c12a8a6
2 parents 6d21e47 + 889989c
commit c12a8a6
Show file tree

Hide file tree

Showing 9 changed files with 594 additions and 479 deletions.
diff --git a/package.json b/package.json
@@ -11,14 +11,14 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@ramonak/react-progress-bar": "^5.2.0",
     "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^14.2.1",
+    "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.5.2",
     "axios": "^1.6.8",
     "bootstrap-switch": "^3.4.0",
     "canvas": "^2.11.2",
-    "chart.js": "^3.9.1",
+    "chart.js": "^4.4.3",
     "enzyme": "^3.11.0",
-    "eslint-plugin-cypress": "^2.15.1",
+    "eslint-plugin-cypress": "^3.2.0",
     "history": "^5.3.0",
     "moment": "^2.30.1",
     "prop-types": "^15.8.1",
@@ -38,7 +38,7 @@
     "sass": "^1.71.1",
     "standard": "^17.1.0",
     "styled-components": "^6.1.6",
-    "web-vitals": "^3.5.2"
+    "web-vitals": "^4.0.1"
   },
   "jest": {
     "coverageThreshold": {

diff --git a/src/Components/Popup/singleAccountCreation.jsx b/src/Components/Popup/singleAccountCreation.jsx
@@ -46,12 +46,10 @@ const SingleAccountCreationPopupContent = () => {
   }
 
   const handleClasseChange = (selected) => {
-    console.log(rolesList.filter(role => role.name === 'student')[0])
     if (role === (rolesList.filter(role => role.name === 'student')[0]._id)) {
       setClasses([selected])
     } else {
       setClasses(selected)
-      console.log(selected)
     }
   }
 

diff --git a/src/Users/SchoolAdmin/reportChecking.jsx b/src/Users/SchoolAdmin/reportChecking.jsx
@@ -28,7 +28,6 @@ const ReportChecking = () => {
         disconnect()
       }
       const data = await response.json()
-      console.log(data[data.length - 1])
       setReports(data)
       setCurrentReport(data[data.length - 1])
       if (data[data.length - 1].conversation) {

diff --git a/src/Users/Student/feelingsStudentPage.jsx b/src/Users/Student/feelingsStudentPage.jsx
@@ -270,6 +270,7 @@ const FeelingsStudentPage = () => {
             </div>
           )}
         </Popup>
+        <div id='feelings-container' />
       </div>
     </div>
   )

diff --git a/src/Users/Student/statisticsStudent.jsx b/src/Users/Student/statisticsStudent.jsx
@@ -18,45 +18,150 @@ const StudentStatPage = () => {
   const [chart, setChart] = useState(null)
 
   useEffect(() => {
+    const fetchData = async () => {
+      const moodUrl = process.env.REACT_APP_BACKEND_URL + '/student/statistics/dailyMoods'
+      try {
+        const response = await fetch(moodUrl, {
+          method: 'POST',
+          headers: {
+            'x-auth-token': sessionStorage.getItem('token'),
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({
+            fromDate: calculateStartDate(selectedDate, activeFilter),
+            toDate: calculateEndDate(selectedDate, activeFilter)
+          })
+        })
+        if (response.status === 401) {
+          disconnect()
+        }
+        const moodData = await response.json()
+        setMoodData(moodData)
+        if (moodData && moodData.averagePercentage) {
+          setAveragePercentage(moodData.averagePercentage)
+        }
+      } catch (error) {
+        console.error('Error fetching mood data:', error)
+      }
+    }
     fetchData()
   }, [selectedDate, activeFilter]) // Fetch data when selectedDate or activeFilter changes
 
   useEffect(() => {
+    const createChart = () => {
+      const ctx = document.getElementById('moodChart')
+      const newChart = new Chart(ctx, {
+        type: 'line',
+        data: {
+          labels: Object.keys(moodData).filter(key => key !== 'averagePercentage'),
+          datasets: [{
+            label: 'Humeur',
+            data: Object.values(moodData).filter(val => typeof val === 'number'),
+            borderColor: 'white', // Couleur de la courbe
+            pointBackgroundColor: 'white', // Couleur des points
+            pointBorderColor: 'white', // Couleur de la bordure des points
+            pointHoverBackgroundColor: 'white', // Couleur des points au survol
+            pointHoverBorderColor: 'white', // Couleur de la bordure des points au survol
+            tension: 0.1
+          }]
+        },
+        options: {
+          scales: {
+            x: {
+              ticks: {
+                color: 'white', // Couleur de l'axe des abscisses
+                fontFamily: '"Font Awesome 5 Free"'
+              },
+              grid: {
+                color: 'rgba(255, 255, 255, 0.1)' // Couleur des lignes de la grille de l'axe des abscisses
+              }
+            },
+            y: {
+              ticks: {
+                callback: value => {
+                  switch (value) {
+                    case 0:
+                      return '\u{1F622}'
+                    case 1:
+                      return '\u{1f641}'
+                    case 2:
+                      return '\u{1F610}'
+                    case 3:
+                      return '\u{1F603}'
+                    case 4:
+                      return '\u{1F604}'
+                    default:
+                      return ''
+                  }
+                },
+                color: 'white', // Couleur de l'axe des ordonnées
+                fontFamily: '"Font Awesome 5 Free"'
+              },
+              grid: {
+                color: 'rgba(255, 255, 255, 0.1)' // Couleur des lignes de la grille de l'axe des ordonnées
+              }
+            }
+          },
+          plugins: {
+            legend: {
+              labels: {
+                color: 'white' // Couleur de la légende
+              }
+            },
+            tooltip: {
+              callbacks: {
+                label: function (context) {
+                  const moodValue = context.raw.y
+                  switch (moodValue) {
+                    case 0:
+                      return 'Très mal'
+                    case 1:
+                      return 'Mal'
+                    case 2:
+                      return 'Neutre'
+                    case 3:
+                      return 'Bien'
+                    case 4:
+                      return 'Très bien'
+                    default:
+                      return ''
+                  }
+                }
+              }
+            }
+          }
+        }
+      })
+      setChart(newChart)
+    }
+
+    const updateChart = () => {
+      if (moodData) {
+        const dates = Object.keys(moodData).filter(key => key !== 'averagePercentage')
+        // const moods = Object.values(moodData).filter(val => typeof val === 'number')
+
+        const data = dates.map(date => {
+          return {
+            x: date,
+            y: moodData[date],
+            r: 10 // Taille du point
+          }
+        })
+
+        if (chart.data !== undefined) {
+          chart.data.datasets[0].data = data
+          chart.update()
+        }
+      }
+    }
+
     if (chart) {
       updateChart()
     } else {
       createChart()
     }
   }, [moodData])
 
-  const fetchData = async () => {
-    const moodUrl = process.env.REACT_APP_BACKEND_URL + '/student/statistics/dailyMoods'
-    try {
-      const response = await fetch(moodUrl, {
-        method: 'POST',
-        headers: {
-          'x-auth-token': sessionStorage.getItem('token'),
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({
-          fromDate: calculateStartDate(selectedDate, activeFilter),
-          toDate: calculateEndDate(selectedDate, activeFilter)
-        })
-      })
-      if (response.status === 401) {
-        disconnect()
-      }
-      const moodData = await response.json()
-      setMoodData(moodData)
-      console.log(moodData)
-      if (moodData && moodData.averagePercentage) {
-        setAveragePercentage(moodData.averagePercentage)
-      }
-    } catch (error) {
-      console.error('Error fetching mood data:', error)
-    }
-  }
-
   const calculateStartDate = (date, filter) => {
     const selectedDate = new Date(date)
     switch (filter) {
@@ -110,111 +215,6 @@ const StudentStatPage = () => {
     }
   }
 
-  const createChart = () => {
-    const ctx = document.getElementById('moodChart')
-    const newChart = new Chart(ctx, {
-      type: 'line',
-      data: {
-        labels: Object.keys(moodData).filter(key => key !== 'averagePercentage'),
-        datasets: [{
-          label: 'Humeur',
-          data: Object.values(moodData).filter(val => typeof val === 'number'),
-          borderColor: 'white', // Couleur de la courbe
-          pointBackgroundColor: 'white', // Couleur des points
-          pointBorderColor: 'white', // Couleur de la bordure des points
-          pointHoverBackgroundColor: 'white', // Couleur des points au survol
-          pointHoverBorderColor: 'white', // Couleur de la bordure des points au survol
-          tension: 0.1
-        }]
-      },
-      options: {
-        scales: {
-          x: {
-            ticks: {
-              color: 'white', // Couleur de l'axe des abscisses
-              fontFamily: '"Font Awesome 5 Free"'
-            },
-            grid: {
-              color: 'rgba(255, 255, 255, 0.1)' // Couleur des lignes de la grille de l'axe des abscisses
-            }
-          },
-          y: {
-            ticks: {
-              callback: value => {
-                switch (value) {
-                  case 0:
-                    return '\u{1F622}'
-                  case 1:
-                    return '\u{1f641}'
-                  case 2:
-                    return '\u{1F610}'
-                  case 3:
-                    return '\u{1F603}'
-                  case 4:
-                    return '\u{1F604}'
-                  default:
-                    return ''
-                }
-              },
-              color: 'white', // Couleur de l'axe des ordonnées
-              fontFamily: '"Font Awesome 5 Free"'
-            },
-            grid: {
-              color: 'rgba(255, 255, 255, 0.1)' // Couleur des lignes de la grille de l'axe des ordonnées
-            }
-          }
-        },
-        plugins: {
-          legend: {
-            labels: {
-              color: 'white' // Couleur de la légende
-            }
-          },
-          tooltip: {
-            callbacks: {
-              label: function (context) {
-                const moodValue = context.raw.y
-                switch (moodValue) {
-                  case 0:
-                    return 'Très mal'
-                  case 1:
-                    return 'Mal'
-                  case 2:
-                    return 'Neutre'
-                  case 3:
-                    return 'Bien'
-                  case 4:
-                    return 'Très bien'
-                  default:
-                    return ''
-                }
-              }
-            }
-          }
-        }
-      }
-    })
-    setChart(newChart)
-  }
-
-  const updateChart = () => {
-    if (moodData) {
-      const dates = Object.keys(moodData).filter(key => key !== 'averagePercentage')
-      // const moods = Object.values(moodData).filter(val => typeof val === 'number')
-
-      const data = dates.map(date => {
-        return {
-          x: date,
-          y: moodData[date],
-          r: 10 // Taille du point
-        }
-      })
-
-      chart.data.datasets[0].data = data
-      chart.update()
-    }
-  }
-
   const handleDateChange = (event) => {
     setSelectedDate(event.target.value)
   }
@@ -270,17 +270,21 @@ const StudentStatPage = () => {
             </div>
           </div>
           <h1>Evolution de mon humeur</h1>
-          <div>
+          <div style={{ display: 'flex', flexDirection: 'row' }}>
             <canvas id='moodChart' width='400' height='400' />
-            <div>
-              <FontAwesomeIcon icon={faSmile} size='2x' style={{ marginRight: '10px' }} />
-              <progress className='progress' value={averagePercentage} max='100' />
-              {averagePercentage !== null && (
-                <div className='average-rectangle'>
-                  <p>Vous êtes {averagePercentage}% plus heureux {filterText} que {filterTextSec}</p>
+            {
+              averagePercentage >= 0 && (
+                <div style={{ display: 'block', width: '40px', height: '10px' }}>
+                  <FontAwesomeIcon icon={faSmile} size='2x' style={{ marginRight: '10px' }} />
+                  <progress className='progress' value={averagePercentage} max='100' />
+                  {averagePercentage !== null && (
+                    <div className='average-rectangle'>
+                      <p data-testid='average-happiness-percentage'>Vous êtes {averagePercentage}% plus heureux {filterText} que {filterTextSec}</p>
+                    </div>
+                  )}
                 </div>
-              )}
-            </div>
+              )
+            }
 
           </div>
         </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -270,6 +270,7 @@ const FeelingsStudentPage = () => { @@
                 </div>
               )}
             </Popup>
+            <div id='feelings-container' />
           </div>
         </div>
       )
@@ Expand Down @@