StudentStats: прогресс бар загрузки

Author: DedSec256

hwproj.front/src/components/Courses/Course.tsx

@@ -88,7 +88,7 @@ const Course: React.FC = () => {
         studentSolutions: [],
         showQrCode: false
     })
-    const [studentSolutions, setStudentSolutions] = useState<StatisticsCourseMatesModel[]>([])
+    const [studentSolutions, setStudentSolutions] = useState<StatisticsCourseMatesModel[] | undefined>(undefined)
     const [courseFilesState, setCourseFilesState] = useState<ICourseFilesState>({
         processingFilesState: {},
         courseFiles: []
@@ -126,7 +126,7 @@ const Course: React.FC = () => {
             }
         }));
     }
-    
+
     const stopProcessing = (homeworkId: number) => {
         if (intervalsRef.current[homeworkId]) {
             const {interval, timeout} = intervalsRef.current[homeworkId];
@@ -312,7 +312,7 @@ const Course: React.FC = () => {
         ApiSingleton.statisticsApi.statisticsGetCourseStatistics(+courseId!)
             .then(res => setStudentSolutions(res))
     }, [courseId])
-    
+
     useEffect(() => changeTab(tab || "homeworks"), [tab, courseId, isFound])
 
     const joinCourse = async () => {
@@ -323,7 +323,7 @@ const Course: React.FC = () => {
     const {tabValue} = pageState
     const searchedHomeworkId = searchParams.get("homeworkId")
 
-    const unratedSolutionsCount = studentSolutions
+    const unratedSolutionsCount = (studentSolutions || [])
         .flatMap(x => x.homeworks)
         .flatMap(x => x!.tasks)
         .filter(t => t!.solution!.slice(-1)[0]?.state === 0) //last solution
@@ -492,7 +492,7 @@ const Course: React.FC = () => {
                         homeworks={courseHomeworks}
                         courseFilesInfo={courseFilesState.courseFiles}
                         isMentor={isCourseMentor}
-                        studentSolutions={studentSolutions}
+                        studentSolutions={studentSolutions || []}
                         isStudentAccepted={isAcceptedStudent}
                         selectedHomeworkId={searchedHomeworkId == null ? undefined : +searchedHomeworkId}
                         userId={userId!}

hwproj.front/src/components/Courses/StudentStats.tsx

@@ -1,7 +1,7 @@
 import React, {useEffect, useState} from "react";
 import {CourseViewModel, HomeworkViewModel, StatisticsCourseMatesModel} from "@/api";
 import {useNavigate, useParams} from 'react-router-dom';
-import {Table, TableBody, TableCell, TableContainer, TableHead, TableRow} from "@material-ui/core";
+import {LinearProgress, Table, TableBody, TableCell, TableContainer, TableHead, TableRow} from "@material-ui/core";
 import StudentStatsCell from "../Tasks/StudentStatsCell";
 import {Alert, Button, Chip, Typography} from "@mui/material";
 import {grey} from "@material-ui/core/colors";
@@ -15,7 +15,7 @@ interface IStudentStatsProps {
     homeworks: HomeworkViewModel[];
     isMentor: boolean;
     userId: string;
-    solutions: StatisticsCourseMatesModel[];
+    solutions: StatisticsCourseMatesModel[] | undefined;
 }
 
 interface IStudentStatsState {
@@ -55,7 +55,7 @@ const StudentStats: React.FC<IStudentStatsProps> = (props) => {
 
     const homeworks = props.homeworks.filter(h => h.tasks && h.tasks.length > 0)
     const solutions = searched
-        ? props.solutions.filter(cm => (cm.surname + " " + cm.name).toLowerCase().includes(searched.toLowerCase()))
+        ? props.solutions?.filter(cm => (cm.surname + " " + cm.name).toLowerCase().includes(searched.toLowerCase()))
         : props.solutions
 
     const borderStyle = `1px solid ${greyBorder}`
@@ -100,7 +100,8 @@ const StudentStats: React.FC<IStudentStatsProps> = (props) => {
 
     return (
         <div>
-            {solutions.length === 0 && <Alert severity="info">
+            {props.solutions === undefined && <LinearProgress/>}
+            {props.solutions && props.solutions.length === 0 && <Alert severity="info">
                 На курс пока ещё никто не записался
             </Alert>}
             {searched &&
@@ -146,7 +147,7 @@ const StudentStats: React.FC<IStudentStatsProps> = (props) => {
                         <TableRow>
                             <TableCell style={{zIndex: 10}}
                                        component="td">
-                                {solutions.length > 0 &&
+                                {solutions && solutions.length > 0 &&
                                     <Button startIcon={<ShowChartIcon/>} color="primary"
                                             style={{backgroundColor: 'transparent'}} size='medium'
                                             onClick={handleClick}>
@@ -190,7 +191,7 @@ const StudentStats: React.FC<IStudentStatsProps> = (props) => {
                         </TableRow>
                     </TableHead>
                     <TableBody>
-                        {solutions.map((cm, index) => {
+                        {solutions && solutions.map((cm, index) => {
                             const homeworksSum = notTests
                                 .flatMap(homework =>
                                     solutions