Undo Fix eslint

bde-isima · Nov 6, 2021 · b0eee11 · b0eee11
1 parent 166de89
commit b0eee11
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 85 deletions.
diff --git a/app/components/hub/average/AverageModule.tsx b/app/components/hub/average/AverageModule.tsx
@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useEffect, useState } from 'react'
+import React, { createContext, useEffect, useRef, useState } from 'react'
 import { InputLabel, MenuItem, Select } from '@mui/material'
 
 import AverageData from 'constants/modules/average/AverageData'
@@ -48,17 +48,15 @@ export const AverageModuleContext = createContext<AverageModuleType>({
 function AverageModule() {
   const savedData = importData()
 
-  const [averageFormState, setAverageFormState] = useState<AverageModuleType>({
-    currentYear: savedData.currentYear,
-    currentSector: savedData.currentSector,
-  })
+  const currentYearIndexRef = useRef<number>(savedData.currentYear)
+  const currentSectorIndexRef = useRef<number | undefined>(savedData.currentSector)
 
   const [averageDataState, setAverageDataState] = useState<YearData[]>(savedData.averageData)
 
   const [mounted, setMounted] = useState(false)
 
   useEffect(() => {
-    saveData(averageDataState, averageFormState.currentYear, averageFormState.currentSector)
+    saveData(averageDataState, currentYearIndexRef.current, currentSectorIndexRef.current)
   }, [averageDataState])
 
   useEffect(() => {
@@ -69,31 +67,25 @@ function AverageModule() {
     let sector =
       averageDataState[event.target.value].semesters[0].sectors.length > 1 ? 1 : undefined
 
-    if (averageFormState.currentSector !== undefined && sector !== undefined) {
-      sector = averageFormState.currentSector
+    if (sector === undefined) {
+      currentSectorIndexRef.current = undefined
     }
 
-    setAverageFormState({
-      currentSector: sector,
-      currentYear: event.target.value,
-    })
+    currentYearIndexRef.current = event.target.value
 
     setMounted(false)
   }
 
   const handleSectorChange = (event) => {
-    setAverageFormState({
-      ...averageFormState,
-      currentSector: event.target.value,
-    })
+    currentSectorIndexRef.current = event.target.value
 
     setMounted(false)
   }
 
   const yearInput = (
     <FormControl className={'w-1/4 pr-2'}>
       <InputLabel shrink>Année</InputLabel>
-      <Select value={averageFormState.currentYear} onChange={handleYearChange}>
+      <Select value={currentYearIndexRef.current} onChange={handleYearChange}>
         {averageDataState.map((year, index) => {
           return (
             <MenuItem key={'avg-year-' + index} value={index}>
@@ -105,10 +97,10 @@ function AverageModule() {
     </FormControl>
   )
 
-  const currentYear = averageDataState[averageFormState.currentYear]
+  const currentYear = averageDataState[currentYearIndexRef.current]
 
   const sectorInput = (() => {
-    const sectors = averageDataState[averageFormState.currentYear].semesters[0].sectors
+    const sectors = averageDataState[currentYearIndexRef.current].semesters[0].sectors
 
     if (sectors.length === 1) {
       return <></>
@@ -118,11 +110,11 @@ function AverageModule() {
       <FormControl className={'w-1/4 pl-2'}>
         <InputLabel shrink>Filière</InputLabel>
         <Select
-          value={averageFormState.currentSector}
+          value={currentSectorIndexRef.current}
           onChange={handleSectorChange}
           disabled={!(sectors.length > 1)}
         >
-          {averageDataState[averageFormState.currentYear].semesters[0].sectors
+          {averageDataState[currentYearIndexRef.current].semesters[0].sectors
             .slice(1)
             .map((sector, index) => {
               return (
@@ -141,7 +133,12 @@ function AverageModule() {
   }
 
   return (
-    <AverageModuleContext.Provider value={averageFormState}>
+    <AverageModuleContext.Provider
+      value={{
+        currentYear: currentYearIndexRef.current,
+        currentSector: currentSectorIndexRef.current,
+      }}
+    >
       <div>
         {yearInput}
         {sectorInput}
@@ -151,7 +148,7 @@ function AverageModule() {
           setYearData={(yearData) => {
             const newAverageState = [...averageDataState]
 
-            newAverageState[averageFormState.currentYear] = yearData
+            newAverageState[currentYearIndexRef.current] = yearData
 
             setAverageDataState(newAverageState)
           }}

diff --git a/app/components/hub/average/SectorTable.tsx b/app/components/hub/average/SectorTable.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import Table from '@mui/material/Table'
 import TableBody from '@mui/material/TableBody'
 import TableCell from '@mui/material/TableCell'
@@ -18,7 +18,8 @@ interface SectorTablePropsType {
 
 export default function SectorTable({ sectorData, setSectorData }: SectorTablePropsType) {
   const [sectorState, setSectorState] = useState(sectorData)
-  const [averageState, setAverageState] = useState(sectorState.average)
+
+  const averageRef = useRef(sectorState.average)
 
   const computeSectorAverage = (ues: UEData[]): number | undefined => {
     let sectorAverage = 0
@@ -45,15 +46,13 @@ export default function SectorTable({ sectorData, setSectorData }: SectorTablePr
   }
 
   useEffect(() => {
+    averageRef.current = computeSectorAverage(sectorState.ues)
+
     setSectorData({
       ...sectorState,
-      average: averageState,
+      average: averageRef.current,
     })
-  }, [averageState])
-
-  useEffect(() => {
-    setAverageState(computeSectorAverage(sectorState.ues))
-  }, [sectorState])
+  }, [sectorState, setSectorData])
 
   return (
     <>
@@ -93,7 +92,7 @@ export default function SectorTable({ sectorData, setSectorData }: SectorTablePr
                 Moyenne
               </TableCell>
               <TableCell component="th" scope="row" align={'center'}>
-                {averageState ?? 'N/A'}
+                {averageRef.current ?? 'N/A'}
               </TableCell>
             </TableRow>
           </TableBody>

diff --git a/app/components/hub/average/Semester.tsx b/app/components/hub/average/Semester.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from 'react'
+import React, { useContext, useEffect, useRef, useState } from 'react'
 import Typography from '@mui/material/Typography'
 import SectorTable from './SectorTable'
 import { SectorData, SemesterData } from 'constants/modules/average/types'
@@ -14,20 +14,13 @@ const Semester = ({ semesterIndex, semesterData, setSemesterData }: SemesterProp
   const { currentSector } = useContext(AverageModuleContext)
 
   const [semesterState, setSemesterState] = useState<SemesterData>(semesterData)
-  const [averageState, setAverageState] = useState(semesterData.average)
 
-  useEffect(() => {
-    setSemesterData({
-      ...semesterState,
-      average: averageState,
-    })
-  }, [averageState])
-
-  useEffect(() => {
-    setAverageState(computeSemesterAverage(semesterState.sectors))
-  }, [semesterState])
+  const averageRef = useRef(semesterData.average)
 
-  const computeSemesterAverage = (sectors: SectorData[]): number | undefined => {
+  const computeSemesterAverage = (
+    sectors: SectorData[],
+    currentSector?: number
+  ): number | undefined => {
     let semesterAverage = 0
     let count = 0
 
@@ -55,6 +48,15 @@ const Semester = ({ semesterIndex, semesterData, setSemesterData }: SemesterProp
     return Math.round(semesterAverage * 1000) / 1000
   }
 
+  useEffect(() => {
+    averageRef.current = computeSemesterAverage(semesterState.sectors, currentSector)
+
+    setSemesterData({
+      ...semesterState,
+      average: averageRef.current,
+    })
+  }, [currentSector, semesterState, setSemesterData])
+
   return (
     <>
       <br />
@@ -100,7 +102,7 @@ const Semester = ({ semesterIndex, semesterData, setSemesterData }: SemesterProp
 
       <br />
       <Typography variant="h6" color="textPrimary">
-        Moyenne du semestre {semesterIndex + 1} : {averageState ?? 'N/A'}
+        Moyenne du semestre {semesterIndex + 1} : {averageRef.current ?? 'N/A'}
       </Typography>
     </>
   )

diff --git a/app/components/hub/average/Subject.tsx b/app/components/hub/average/Subject.tsx
@@ -16,10 +16,6 @@ function Subject({ subjectData, setSubjectData }: SubjectPropsType) {
     subjectState.mark ? subjectState.mark.toString() : ''
   )
 
-  useEffect(() => {
-    setSubjectData(subjectState)
-  }, [subjectState])
-
   useEffect(() => {
     const newSubjectState = {
       ...subjectState,
@@ -39,7 +35,8 @@ function Subject({ subjectData, setSubjectData }: SubjectPropsType) {
     }
 
     setSubjectState(newSubjectState)
-  }, [markState])
+    setSubjectData(newSubjectState)
+  }, [markState, setSubjectData, subjectState])
 
   return (
     <TableRow>

diff --git a/app/components/hub/average/UeTable.tsx b/app/components/hub/average/UeTable.tsx
@@ -1,5 +1,5 @@
 import { SubjectData, UEData } from '../../../../constants/modules/average/types'
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import TableRow from '@mui/material/TableRow'
 import TableCell from '@mui/material/TableCell'
 import IconButton from '@mui/material/IconButton'
@@ -19,21 +19,10 @@ interface UeTablePropsType {
 
 const UeTable = ({ ueData, setUeData }: UeTablePropsType) => {
   const [ueState, setUeState] = useState(ueData)
-  const [averageState, setAverageState] = useState(ueState.average)
+  const averageRef = useRef(ueData.average)
 
   const [open, setOpen] = React.useState(false)
 
-  useEffect(() => {
-    setUeData({
-      ...ueState,
-      average: averageState,
-    })
-  }, [averageState])
-
-  useEffect(() => {
-    setAverageState(computeAverage(ueState.subjects))
-  }, [ueState])
-
   const computeAverage = (subjects: SubjectData[]): number | undefined => {
     let average = 0
     let coefSum = 0
@@ -58,6 +47,15 @@ const UeTable = ({ ueData, setUeData }: UeTablePropsType) => {
     return Math.round(average * 1000) / 1000
   }
 
+  useEffect(() => {
+    averageRef.current = computeAverage(ueState.subjects)
+
+    setUeData({
+      ...ueState,
+      average: averageRef.current,
+    })
+  }, [setUeData, ueState])
+
   return (
     <>
       <TableRow>
@@ -69,7 +67,7 @@ const UeTable = ({ ueData, setUeData }: UeTablePropsType) => {
         <TableCell component="th" scope="row">
           {ueState.name}
         </TableCell>
-        <TableCell align={'center'}>{averageState ?? 'N/A'}</TableCell>
+        <TableCell align={'center'}>{averageRef.current ?? 'N/A'}</TableCell>
         <TableCell align="right">{ueState.ects}</TableCell>
       </TableRow>
       <TableRow>
@@ -105,7 +103,7 @@ const UeTable = ({ ueData, setUeData }: UeTablePropsType) => {
                       Moyenne
                     </TableCell>
                     <TableCell align="center" colSpan={2}>
-                      {averageState ?? 'N/A'}
+                      {averageRef.current ?? 'N/A'}
                     </TableCell>
                   </TableRow>
                 </TableBody>

diff --git a/app/components/hub/average/Year.tsx b/app/components/hub/average/Year.tsx
@@ -1,5 +1,5 @@
 import { YearData } from 'constants/modules/average/types'
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import Semester from './Semester'
 
 interface SemestersPropsType {
@@ -9,24 +9,7 @@ interface SemestersPropsType {
 
 const Year = ({ yearData, setYearData }: SemestersPropsType) => {
   const [yearState, setYearState] = useState(yearData)
-  const [averageState, setAverageState] = useState(yearData.average)
-
-  useEffect(() => {
-    if (yearData !== yearState) {
-      setYearState(yearData)
-    }
-  }, [yearData])
-
-  useEffect(() => {
-    setYearData({
-      ...yearState,
-      average: averageState,
-    })
-  }, [averageState])
-
-  useEffect(() => {
-    setAverageState(computeYearAverage(yearState))
-  }, [yearState])
+  const averageRef = useRef(yearData.average)
 
   const computeYearAverage = ({ semesters }: YearData): number | undefined => {
     let yearAverage = 0
@@ -52,6 +35,21 @@ const Year = ({ yearData, setYearData }: SemestersPropsType) => {
     return Math.round(yearAverage * 1000) / 1000
   }
 
+  useEffect(() => {
+    if (yearData !== yearState) {
+      setYearState(yearData)
+    }
+  }, [yearData, yearState])
+
+  useEffect(() => {
+    averageRef.current = computeYearAverage(yearState)
+
+    setYearData({
+      ...yearState,
+      average: averageRef.current,
+    })
+  }, [setYearData, yearState])
+
   return (
     <>
       {yearState.semesters.map((semester, semesterIndex) => (