[Class statistics] Add loading indicator to modules tab if no data, p…

…revent page crash
UniversityOfHelsinkiCS · Feb 21, 2025 · 921fa2d · 921fa2d
1 parent c4724f8
commit 921fa2d
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 9 deletions.
diff --git a/services/frontend/src/components/PopulationStudents/StudentTable/ModulesTab/ModulesTable.tsx b/services/frontend/src/components/PopulationStudents/StudentTable/ModulesTab/ModulesTable.tsx
@@ -1,5 +1,5 @@
 import { CropSquare as CropSquareIcon } from '@mui/icons-material'
-import Box from '@mui/material/Box'
+import { Box } from '@mui/material'
 import { grey } from '@mui/material/colors'
 import {
   type MRT_ColumnDef,
@@ -18,15 +18,16 @@ import { getDefaultMRTOptions } from '@/util/getDefaultMRTOptions'
 
 import type { FormattedModules, FormattedStudent } from '.'
 
-interface ModuleProps {
-  formattedModules: FormattedModules
-  formattedStudents: FormattedStudent[]
-}
-
 const hasModuleInHOPS = (student: FormattedStudent, moduleCode: string) =>
   student.modulesInHOPS?.includes(moduleCode) ?? false
 
-export const ModulesTab: React.FC<ModuleProps> = ({ formattedModules, formattedStudents }) => {
+export const ModulesTab = ({
+  formattedModules,
+  formattedStudents,
+}: {
+  formattedModules: FormattedModules
+  formattedStudents: FormattedStudent[]
+}) => {
   const { getTextIn, language } = useLanguage()
   const { visible: namesVisible } = useStudentNameVisibility()
   const [exportModalOpen, setExportModalOpen] = useState(false)
@@ -44,6 +45,8 @@ export const ModulesTab: React.FC<ModuleProps> = ({ formattedModules, formattedS
     })
   }, [namesVisible])
 
+  const isLoading = Object.keys(formattedModules).length === 0
+
   const staticColumns = useMemo<MRT_ColumnDef<any>[]>(
     () => [
       {
@@ -98,6 +101,7 @@ export const ModulesTab: React.FC<ModuleProps> = ({ formattedModules, formattedS
     data: formattedStudents ?? [],
     state: {
       columnVisibility,
+      isLoading,
     },
     onColumnVisibilityChange: setColumnVisibility,
   })

diff --git a/services/frontend/src/components/PopulationStudents/StudentTable/ModulesTab/index.ts b/services/frontend/src/components/PopulationStudents/StudentTable/ModulesTab/index.ts
@@ -59,11 +59,11 @@ const getDegreeProgrammeCodes = (curriculumModules): string[] => {
 
 export const ModulesTabContainer = ({ curriculum, students }) => {
   const curriculumModules = useMemo(
-    () => [...curriculum.defaultProgrammeModules, ...curriculum.secondProgrammeModules],
+    () => (curriculum ? [...curriculum.defaultProgrammeModules, ...curriculum.secondProgrammeModules] : []),
     [curriculum]
   )
   const curriculumCourses = useMemo(
-    () => [...curriculum.defaultProgrammeCourses, ...curriculum.secondProgrammeCourses],
+    () => (curriculum ? [...curriculum.defaultProgrammeCourses, ...curriculum.secondProgrammeCourses] : []),
     [curriculum]
   )