Merge pull request #71 from hack4impact-upenn/vince/lesson-levels

Format lesson levels correctly

client/src/Admin/AdminBlockPage.tsx

@@ -16,6 +16,7 @@ import ScreenGrid from '../components/ScreenGrid';
 import LessonLevels from '../components/LessonLevels';
 import useAlert from '../util/hooks/useAlert';
 import AlertType from '../util/types/alert';
+import { getLessonStringFromLessonLevel } from '../util/lessonLevels';
 
 interface AdminDashboardRow {
   key: string;
@@ -317,10 +318,18 @@ function AdminBlockPage() {
                         onChange={(e: SelectChangeEvent) =>
                           updateLessonLevel(student.studentId, e.target.value)
                         }
+                        MenuProps={{
+                          PaperProps: {
+                            style: {
+                              maxHeight: 48 * 4.5 + 8,
+                              width: '20ch',
+                            },
+                          },
+                        }}
                       >
                         {[...Array(62)].map((__, i) => (
                           <MenuItem value={`${i + 1}`} id={student.id}>
-                            {i + 1}
+                            {getLessonStringFromLessonLevel(i + 1)}
                           </MenuItem>
                         ))}
                       </Select>

client/src/Lessons/LessonsPage.tsx

@@ -7,6 +7,7 @@ import LessonCard from './LessonCard';
 import { getData, postData, useData } from '../util/api';
 import { useAppSelector } from '../util/redux/hooks';
 import { selectUser } from '../util/redux/userSlice';
+import { getLessonStringFromLessonLevel } from '../util/lessonLevels';
 
 interface IResource {
   id: string;
@@ -109,7 +110,7 @@ function LessonsPage() {
             variant="h2"
             sx={{ fontWeight: theme.typography.fontWeightBold }}
           >
-            Lesson {lessonNumber}
+            Lesson {getLessonStringFromLessonLevel(Number(lessonNumber))}
           </Typography>
           <Box sx={{ marginTop: theme.spacing(-3) }}>
             <hr />

client/src/TeacherDashboard.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-underscore-dangle */
 import React, { useEffect, useState } from 'react';
 import Box from '@mui/material/Box';
 import Paper from '@mui/material/Paper';
@@ -9,13 +10,15 @@ import { styled } from '@mui/system';
 import { useNavigate, useParams } from 'react-router-dom';
 // eslint-disable-next-line
 import { Grid } from '@mui/material';
+import axios from 'axios';
 import { useData } from './util/api';
 import { useAppSelector } from './util/redux/hooks';
 import { selectUser } from './util/redux/userSlice';
 import { StudentCardFromID } from './Admin/StudentCard';
 import PageHeader from './components/PageHeader';
 import PhoneticsTable from './components/buttons/PhoneticsTable';
 import LessonLevels from './components/LessonLevels';
+import { getLessonStringFromLessonLevel } from './util/lessonLevels';
 
 const ScrollableBox = styled(Box)({
   overflowY: 'auto',
@@ -24,10 +27,12 @@ const ScrollableBox = styled(Box)({
 
 // eslint-disable-next-line
 function createData(data: any) {
-  return data.map((student: any) => {
-    /* eslint no-underscore-dangle: 0 */
-    return <StudentCardFromID studentID={student._id} lesson="Lesson 1" />;
-  });
+  return data.map((student: any) => (
+    <StudentCardFromID
+      studentID={student._id}
+      lesson={getLessonStringFromLessonLevel(student.lesson)}
+    />
+  ));
 }
 function StudentName(props: any) {
   const { id } = props;
@@ -77,8 +82,30 @@ function StudentConcernsCard(props: any) {
 
 function SplitGrid() {
   const self = useAppSelector(selectUser);
-  const students = useData(`student/students-by-teacher/${self.email}`);
-  const studentData = students?.data ?? [];
+  const [studentData, setStudentData] = useState<any[]>([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const res = await axios.get(
+        `http://localhost:4000/api/student/students-by-teacher/${self.email}`,
+      );
+      const { data } = res;
+      const newData = await Promise.all(
+        data.map(async (student: any) => {
+          const res2 = await axios.get(
+            `http://localhost:4000/api/lesson/${student.lesson_level}`,
+          );
+          return {
+            ...student,
+            lesson: res2.data.number,
+          };
+        }),
+      );
+      console.log(newData);
+      setStudentData(newData);
+    };
+    fetchData();
+  }, [self.email]);
 
   const academicFlags = studentData.filter(
     (student: any) => student.progressFlag,