@nualang/nualang-ui-components 0.1.1399 → 0.2.0

package/dist/Tables/Progress/ProgressList.js

@@ -1,905 +0,0 @@
-import { useState, useMemo } from "react";
-import PropTypes from "prop-types";
-import { Link as RouterLink } from "react-router";
-import { ReactQuery } from "@nualang/nualang-api-and-queries/Queries";
-import TimelineIcon from "@mui/icons-material/Timeline";
-import ArrowBackIcon from "@mui/icons-material/ArrowBack";
-import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
-import Avatar from "@mui/material/Avatar";
-import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
-import IconButton from "@mui/material/IconButton";
-import { green, red } from "@mui/material/colors";
-import ListSubheader from "@mui/material/ListSubheader";
-import List from "@mui/material/List";
-import ListItem from "@mui/material/ListItem";
-import ListItemAvatar from "@mui/material/ListItemAvatar";
-import ListItemText from "@mui/material/ListItemText";
-import Collapse from "@mui/material/Collapse";
-import LinearProgress from "@mui/material/LinearProgress";
-import ExpandLess from "@mui/icons-material/ExpandLess";
-import ExpandMore from "@mui/icons-material/ExpandMore";
-import DefaultButton from "../../Misc/DefaultColourButton/DefaultColourButton";
-import { formatMemberCourseCompletions } from "./utils";
-import { getCellDataForFilter, getColorForPercentage, getTopicData } from "./helpers";
-import { exercises, roleplayGames, exerciseDisplayLabels } from "./constants";
-import { Badge, Grid, ListItemIcon, ListItemButton } from "@mui/material";
-import DoneIcon from "@mui/icons-material/Done";
-import CloseIcon from "@mui/icons-material/Close";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const {
-  useQuery
-} = ReactQuery;
-function LinearProgressWithLabel(props) {
-  return /*#__PURE__*/_jsxs(Box, {
-    sx: {
-      display: "flex",
-      alignItems: "center"
-    },
-    children: [/*#__PURE__*/_jsx(Box, {
-      sx: {
-        width: "100%",
-        mr: 1
-      },
-      children: /*#__PURE__*/_jsx(LinearProgress, {
-        variant: "determinate",
-        ...props
-      })
-    }), /*#__PURE__*/_jsx(Box, {
-      sx: {
-        minWidth: 35
-      },
-      children: /*#__PURE__*/_jsx(Typography, {
-        variant: "body2",
-        sx: {
-          color: 'text.primary'
-        },
-        children: `${Math.round(props.value)}%`
-      })
-    })]
-  });
-}
-LinearProgressWithLabel.propTypes = {
-  /**
-   * The value of the progress indicator for the determinate and buffer variants.
-   * Value between 0 and 100.
-   */
-  value: PropTypes.number.isRequired
-};
-function ListData({
-  data,
-  backgroundColor
-}) {
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: /*#__PURE__*/_jsx(Box, {
-      sx: {
-        width: "90%"
-      },
-      children: /*#__PURE__*/_jsx(LinearProgressWithLabel, {
-        sx: theme => ({
-          backgroundColor: theme.palette.divider,
-          height: 6,
-          borderRadius: 4,
-          "& .MuiLinearProgress-bar": {
-            backgroundColor: backgroundColor || theme.palette.divider
-          }
-        }),
-        value: data
-      })
-    })
-  });
-}
-function ListDataContainer({
-  t,
-  isLoading,
-  error,
-  data,
-  memberActivityLink
-}) {
-  if (isLoading) {
-    return /*#__PURE__*/_jsx(ListData, {
-      t: t,
-      data: 0
-    });
-  } else if (error) {
-    return /*#__PURE__*/_jsx(ListData, {
-      t: t,
-      data: 0
-    });
-  } else if (data === null || data === undefined || data.percentage === null || data.percentage === undefined || isNaN(data.percentage)) {
-    return /*#__PURE__*/_jsx(ListData, {
-      t: t,
-      backgroundColor: getColorForPercentage(data && data.percentage),
-      data: 0,
-      completed: data && data.completed ? data.completed : 0,
-      total: data && data.total ? data.total : 0,
-      memberActivityLink: memberActivityLink
-    });
-  } else if (data.percentage >= 80) {
-    return /*#__PURE__*/_jsx(ListData, {
-      t: t,
-      backgroundColor: getColorForPercentage(data.percentage),
-      data: data.percentage,
-      completed: data.completed,
-      total: data.total,
-      memberActivityLink: memberActivityLink
-    });
-  } else if (data.percentage >= 60) {
-    return /*#__PURE__*/_jsx(ListData, {
-      t: t,
-      backgroundColor: getColorForPercentage(data.percentage),
-      data: data.percentage,
-      completed: data.completed,
-      total: data.total,
-      memberActivityLink: memberActivityLink
-    });
-  } else if (data.percentage >= 40) {
-    return /*#__PURE__*/_jsx(ListData, {
-      t: t,
-      backgroundColor: getColorForPercentage(data.percentage),
-      data: data.percentage,
-      completed: data.completed,
-      total: data.total,
-      memberActivityLink: memberActivityLink
-    });
-  } else if (data.percentage >= 20) {
-    return /*#__PURE__*/_jsx(ListData, {
-      t: t,
-      backgroundColor: getColorForPercentage(data.percentage),
-      data: data.percentage,
-      completed: data.completed,
-      total: data.total,
-      memberActivityLink: memberActivityLink
-    });
-  } else if (data.percentage >= 0) {
-    return /*#__PURE__*/_jsx(ListData, {
-      t: t,
-      backgroundColor: getColorForPercentage(data.percentage),
-      data: data.percentage,
-      completed: data.completed,
-      total: data.total,
-      memberActivityLink: memberActivityLink
-    });
-  } else if (data.percentage === -1) {
-    return /*#__PURE__*/_jsx(ListData, {
-      t: t,
-      backgroundColor: getColorForPercentage(data.percentage),
-      data: "N/A",
-      memberActivityLink: memberActivityLink
-    });
-  }
-  return /*#__PURE__*/_jsx(ListData, {
-    t: t,
-    backgroundColor: getColorForPercentage(data.percentage),
-    data: data.percentage,
-    completed: data.completed,
-    total: data.total,
-    memberActivityLink: memberActivityLink
-  });
-}
-function CourseListItem({
-  t,
-  course,
-  data,
-  isLoading,
-  error,
-  memberActivityLink,
-  setSelectedCourse,
-  filter
-}) {
-  let cellData = null;
-  cellData = getCellDataForFilter(data[course.courseId], filter);
-  return /*#__PURE__*/_jsx(ListItem, {
-    sx: {
-      pl: 4
-    },
-    secondaryAction: /*#__PURE__*/_jsx(IconButton, {
-      onClick: () => setSelectedCourse(course),
-      edge: "end",
-      "aria-label": "Select",
-      children: /*#__PURE__*/_jsx(ArrowForwardIcon, {})
-    }),
-    children: /*#__PURE__*/_jsx(ListItemText, {
-      primary: /*#__PURE__*/_jsx(Typography, {
-        variant: "subtitle1",
-        gutterBottom: true,
-        children: course.courseName
-      }),
-      secondary: /*#__PURE__*/_jsx(ListDataContainer, {
-        t: t,
-        data: cellData,
-        isLoading: isLoading,
-        error: error,
-        memberActivityLink: memberActivityLink
-      })
-    })
-  });
-}
-function SectionListItem({
-  t,
-  course,
-  section,
-  data,
-  isLoading,
-  error,
-  memberActivityLink,
-  setSelectedSection,
-  filter
-}) {
-  let cellData = null;
-  cellData = getCellDataForFilter(data[course.courseId]?.sections?.[section.sectionId], filter);
-  return /*#__PURE__*/_jsx(ListItem, {
-    sx: {
-      pl: 4
-    },
-    secondaryAction: /*#__PURE__*/_jsx(IconButton, {
-      onClick: () => setSelectedSection(section),
-      edge: "end",
-      "aria-label": "Select",
-      children: /*#__PURE__*/_jsx(ArrowForwardIcon, {})
-    }),
-    children: /*#__PURE__*/_jsx(ListItemText, {
-      primary: /*#__PURE__*/_jsx(Typography, {
-        variant: "subtitle1",
-        gutterBottom: true,
-        children: section.sectionName
-      }),
-      secondary: /*#__PURE__*/_jsx(ListDataContainer, {
-        t: t,
-        data: cellData,
-        isLoading: isLoading,
-        error: error,
-        memberActivityLink: memberActivityLink
-      })
-    })
-  });
-}
-function TopicListItem({
-  t,
-  course,
-  section,
-  topic,
-  filter,
-  data,
-  isLoading,
-  error,
-  memberActivityLink,
-  setSelectedTopic
-}) {
-  let cellData = null;
-  cellData = getCellDataForFilter(data[course.courseId]?.sections?.[section.sectionId]?.topics?.[topic.topicId], filter);
-  return /*#__PURE__*/_jsx(ListItem, {
-    sx: {
-      pl: 4
-    },
-    secondaryAction: /*#__PURE__*/_jsx(IconButton, {
-      onClick: () => setSelectedTopic(topic),
-      edge: "end",
-      "aria-label": "Select",
-      children: /*#__PURE__*/_jsx(ArrowForwardIcon, {})
-    }),
-    children: /*#__PURE__*/_jsx(ListItemText, {
-      primary: /*#__PURE__*/_jsx(Typography, {
-        variant: "subtitle1",
-        gutterBottom: true,
-        children: topic.topicName
-      }),
-      secondary: /*#__PURE__*/_jsx(ListDataContainer, {
-        t: t,
-        data: cellData,
-        isLoading: isLoading,
-        error: error,
-        memberActivityLink: memberActivityLink
-      })
-    })
-  });
-}
-function ExerciseListItem({
-  t,
-  exercise,
-  data,
-  isLoading,
-  roleplay,
-  bot,
-  phraseListId,
-  setSelectedRoleplay
-}) {
-  if (isLoading) {
-    return /*#__PURE__*/_jsx(ListItemIcon, {});
-  }
-  let icon = null;
-  let completions = exercise === "roleplays" ? data?.completions.map(completion => completion.exercise.startsWith("roleplay") && completion.roleplayId === roleplay.roleplayId) : phraseListId ? data?.completions.map(completion => completion.exercise === exercise && (completion.phraseListId === phraseListId || !completion.phraseListId && phraseListId?.startsWith('leg-'))) : data?.completions.map(completion => completion.exercise === exercise);
-  if (exercise === "roleplays" && roleplay?.roleplayId && completions.length > 0) {
-    icon = /*#__PURE__*/_jsx(Badge, {
-      badgeContent: completions.length,
-      color: "default",
-      children: /*#__PURE__*/_jsx(DoneIcon, {
-        sx: {
-          color: green[400]
-        }
-      })
-    });
-  } else if (exercise === "bots" && data.percentComplete[exercise]?.completed) {
-    if (data.percentComplete[exercise].completed > 0) {
-      icon = /*#__PURE__*/_jsx(DoneIcon, {
-        sx: {
-          color: green[400]
-        }
-      });
-    } else {
-      icon = /*#__PURE__*/_jsx(CloseIcon, {
-        sx: {
-          color: red[400]
-        }
-      });
-    }
-  } else if (data?.percentComplete[exercise]?.completedCount > 0) {
-    icon = /*#__PURE__*/_jsx(DoneIcon, {
-      sx: {
-        color: green[400]
-      }
-    });
-  } else {
-    icon = /*#__PURE__*/_jsx(CloseIcon, {
-      sx: {
-        color: red[400]
-      }
-    });
-  }
-  return /*#__PURE__*/_jsx(ListItemButton, {
-    sx: {
-      pl: 1
-    },
-    onClick: () => roleplay && exercise === "roleplays" ? setSelectedRoleplay(roleplay) : null,
-    children: /*#__PURE__*/_jsxs(Grid, {
-      container: true,
-      sx: {
-        width: "100%"
-      },
-      children: [/*#__PURE__*/_jsxs(Grid, {
-        size: 11,
-        children: [exercise === "roleplays" && roleplay && /*#__PURE__*/_jsx(Typography, {
-          sx: {
-            pr: 2
-          },
-          children: roleplay.roleplayName
-        }), exercise === "bots" && bot && /*#__PURE__*/_jsx(Typography, {
-          sx: {
-            pr: 2
-          },
-          children: bot.botName
-        }), exercise !== "bots" && exercise !== "roleplays" && /*#__PURE__*/_jsx(Typography, {
-          sx: {
-            pr: 2
-          },
-          children: exerciseDisplayLabels[exercise] || t(exercise)
-        })]
-      }), /*#__PURE__*/_jsx(Grid, {
-        size: 1,
-        children: /*#__PURE__*/_jsx(ListItemIcon, {
-          children: icon
-        })
-      })]
-    })
-  });
-}
-function RoleplayListItem({
-  t,
-  roleplayCompletion,
-  isLoading,
-  game
-}) {
-  if (isLoading) {
-    /*#__PURE__*/_jsx(ListItemIcon, {});
-  } else {
-    let icon = null;
-    if (roleplayCompletion) {
-      icon = /*#__PURE__*/_jsx(DoneIcon, {
-        sx: {
-          color: green[400]
-        }
-      });
-    } else {
-      icon = /*#__PURE__*/_jsx(CloseIcon, {
-        sx: {
-          color: red[400]
-        }
-      });
-    }
-    return /*#__PURE__*/_jsx(ListItem, {
-      sx: {
-        pl: 1
-      },
-      children: /*#__PURE__*/_jsxs(Grid, {
-        container: true,
-        sx: {
-          width: "100%"
-        },
-        children: [/*#__PURE__*/_jsx(Grid, {
-          size: 11,
-          children: /*#__PURE__*/_jsx(Typography, {
-            children: game === "fill-in-the-blanks" ? t("fill_in_blanks") : t(game.replaceAll("-", "_"))
-          })
-        }), /*#__PURE__*/_jsx(Grid, {
-          size: 1,
-          children: /*#__PURE__*/_jsx(ListItemIcon, {
-            children: icon
-          })
-        })]
-      })
-    });
-  }
-}
-function MemberListItem({
-  t,
-  classroomId,
-  member,
-  courses,
-  selectedCourse,
-  selectedSection,
-  selectedTopic,
-  currentView,
-  fetchMemberCourseCompletions,
-  setSelectedCourse,
-  setSelectedSection,
-  setSelectedTopic,
-  filter,
-  roleplays,
-  bots,
-  selectedRoleplay,
-  setSelectedRoleplay,
-  selectedPhraseList,
-  setSelectedPhraseList
-}) {
-  const phraseLists = selectedTopic?.phraseLists ?? [];
-  const {
-    memberId
-  } = member;
-  const courseIds = courses.map(c => c.courseId).toString();
-  const memberCourseCompletionsQuery = useQuery({
-    queryKey: ["memberCourseProgress", memberId, courseIds],
-    queryFn: async () => {
-      return fetchMemberCourseCompletions(memberId, courseIds);
-    },
-    staleTime: 500000
-  });
-  const {
-    error,
-    isLoading
-  } = memberCourseCompletionsQuery;
-  const data = useMemo(() => memberCourseCompletionsQuery.isSuccess && Array.isArray(memberCourseCompletionsQuery.data?.Items) ? formatMemberCourseCompletions(courses, memberCourseCompletionsQuery.data.Items, null, false, null, "course", false) : {}, [memberCourseCompletionsQuery.data, memberCourseCompletionsQuery.isSuccess, courses]);
-  let memberActivityLink = `/classrooms/${classroomId}/activity/member/${member.memberId}`;
-  if (currentView === "course") {
-    memberActivityLink = `${memberActivityLink}/${selectedCourse.courseId}`;
-  } else if (currentView === "section") {
-    memberActivityLink = `${memberActivityLink}/${selectedCourse.courseId}/${selectedSection.sectionId}`;
-  } else if (currentView === "topic") {
-    memberActivityLink = `${memberActivityLink}/${selectedCourse.courseId}/${selectedSection.sectionId}/${selectedTopic.topicId}`;
-  }
-  const [open, setOpen] = useState(false);
-  const handleClick = () => {
-    setOpen(!open);
-  };
-  const hasMeaningForSelectedPhraseList = selectedPhraseList?.phrases?.some(p => p.definitions?.length > 0) && !selectedPhraseList?.hiddenPhraseGroupGames?.meaning;
-  const exercisesArray = [...exercises, ...(hasMeaningForSelectedPhraseList ? ["meaning", "meaning-listen-and-speak", "meaning-read-and-write"] : [])];
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsxs(ListItem, {
-      secondaryAction: /*#__PURE__*/_jsx(IconButton, {
-        onClick: handleClick,
-        edge: "end",
-        "aria-label": open ? `Close activity for ${member.username}` : `View activity for ${member.username}`,
-        "aria-expanded": Boolean(open),
-        children: open ? /*#__PURE__*/_jsx(ExpandLess, {}) : /*#__PURE__*/_jsx(ExpandMore, {})
-      }),
-      children: [/*#__PURE__*/_jsx(ListItemAvatar, {
-        children: /*#__PURE__*/_jsx(Avatar, {
-          src: member.userImage,
-          alt: ""
-        })
-      }), /*#__PURE__*/_jsx(ListItemText, {
-        primary: /*#__PURE__*/_jsx(Typography, {
-          variant: "subtitle1",
-          sx: {
-            fontWeight: "bold"
-          },
-          children: member.username
-        }),
-        secondary: /*#__PURE__*/_jsx(DefaultButton, {
-          startIcon: /*#__PURE__*/_jsx(TimelineIcon, {}),
-          size: "small",
-          sx: {
-            fontSize: "0.75rem",
-            fontWeight: "normal"
-          },
-          component: memberActivityLink ? RouterLink : null,
-          to: memberActivityLink ? memberActivityLink : null,
-          children: t("view_activity")
-        })
-      })]
-    }), /*#__PURE__*/_jsxs(Collapse, {
-      in: open,
-      timeout: "auto",
-      unmountOnExit: true,
-      children: [/*#__PURE__*/_jsx(List, {
-        component: "div",
-        disablePadding: true,
-        children: currentView === "all_courses" && courses.map((c, i) => {
-          return /*#__PURE__*/_jsx(CourseListItem, {
-            t: t,
-            data: data,
-            isLoading: isLoading,
-            error: error,
-            memberActivityLink: `${memberActivityLink}/${c.courseId}`,
-            course: c,
-            setSelectedCourse: setSelectedCourse,
-            filter: filter
-          }, `student-progress-data-cell-${i}`);
-        })
-      }), currentView === "course" && selectedCourse.sections.map((s, i) => {
-        return /*#__PURE__*/_jsx(SectionListItem, {
-          t: t,
-          data: data,
-          isLoading: isLoading,
-          error: error,
-          memberActivityLink: `${memberActivityLink}/${s.sectionId}`,
-          course: selectedCourse,
-          section: s,
-          setSelectedSection: setSelectedSection,
-          filter: filter
-        }, `student-progress-data-cell-${i}`);
-      }), currentView === "section" && selectedCourse?.sections[selectedCourse?.sections.findIndex(s => s.sectionId === selectedSection.sectionId)]?.topics.map((tpc, i) => {
-        return /*#__PURE__*/_jsx(TopicListItem, {
-          t: t,
-          data: data,
-          isLoading: isLoading,
-          error: error,
-          memberActivityLink: `${memberActivityLink}/${tpc.topicId}`,
-          course: selectedCourse,
-          section: selectedSection,
-          topic: tpc,
-          filter: filter,
-          setSelectedTopic: setSelectedTopic
-        }, `student-progress-data-cell-${i}`);
-      }), currentView === "topic" && phraseLists.map((phraseList, i) => {
-        const topicData = getTopicData(data, selectedTopic, selectedCourse, selectedSection);
-        const hasMeaning = phraseList?.phrases?.some(p => p.definitions?.length > 0) && !phraseList?.hiddenPhraseGroupGames?.meaning;
-        const phraseListExercises = ["translation", "listening", "pronunciation", ...(hasMeaning ? ["meaning", "meaning-listen-and-speak", "meaning-read-and-write"] : [])];
-        const completedCount = phraseListExercises.filter(exercise => topicData?.completions?.some(c => c.exercise === exercise && (c.phraseListId === phraseList.phraseListId || !c.phraseListId && phraseList.phraseListId?.startsWith('leg-')))).length;
-        return /*#__PURE__*/_jsx(ListItemButton, {
-          sx: {
-            pl: 1
-          },
-          onClick: () => setSelectedPhraseList(phraseList),
-          children: /*#__PURE__*/_jsxs(Grid, {
-            container: true,
-            sx: {
-              width: "100%"
-            },
-            children: [/*#__PURE__*/_jsx(Grid, {
-              size: 10,
-              children: /*#__PURE__*/_jsx(Typography, {
-                sx: {
-                  pr: 2
-                },
-                children: phraseList.phraseListName
-              })
-            }), /*#__PURE__*/_jsx(Grid, {
-              size: 1,
-              children: /*#__PURE__*/_jsx(Typography, {
-                variant: "body2",
-                children: `${completedCount} / ${phraseListExercises.length}`
-              })
-            }), /*#__PURE__*/_jsx(Grid, {
-              size: 1,
-              children: /*#__PURE__*/_jsx(ArrowForwardIcon, {
-                fontSize: "small"
-              })
-            })]
-          })
-        }, `student-progress-phrase-list-${i}`);
-      }), currentView === "phrase-list" && exercisesArray.map((exercise, i) => {
-        return /*#__PURE__*/_jsx(ExerciseListItem, {
-          t: t,
-          data: getTopicData(data, selectedTopic, selectedCourse, selectedSection),
-          isLoading: isLoading,
-          error: error,
-          exercise: exercise,
-          phraseListId: selectedPhraseList?.phraseListId
-        }, `student-progress-data-cell-${i}`);
-      }), currentView === "topic" && roleplays.map((roleplay, i) => {
-        return /*#__PURE__*/_jsx(ExerciseListItem, {
-          t: t,
-          data: getTopicData(data, selectedTopic, selectedCourse, selectedSection),
-          isLoading: isLoading,
-          exercise: "roleplays",
-          roleplay: roleplay,
-          setSelectedRoleplay: setSelectedRoleplay
-        }, `student-progress-data-cell-${i}`);
-      }), currentView === "topic" && bots.map((bot, i) => {
-        return /*#__PURE__*/_jsx(ExerciseListItem, {
-          t: t,
-          data: getTopicData(data, selectedTopic, selectedCourse, selectedSection),
-          isLoading: isLoading,
-          exercise: "bots",
-          bot: bot
-        }, `student-progress-data-cell-${i}`);
-      }), currentView === "roleplay" && roleplayGames.map(roleplay => {
-        const topicData = getTopicData(data, selectedTopic, selectedCourse, selectedSection);
-        return /*#__PURE__*/_jsx(RoleplayListItem, {
-          t: t,
-          isLoading: isLoading,
-          game: roleplay,
-          roleplayCompletion: topicData?.completions?.filter(completion => completion.roleplayId === selectedRoleplay?.roleplayId && completion.exercise.replace("roleplay-", "") === roleplay)[0]
-        });
-      })]
-    })]
-  });
-}
-function ProgressList({
-  t = text => text,
-  classroomId,
-  courses = [],
-  members = [],
-  fetchMemberCourseCompletions = () => {},
-  currentView,
-  filter,
-  selectedCourse,
-  setSelectedCourse,
-  selectedSection,
-  setSelectedSection,
-  selectedTopic,
-  setSelectedTopic,
-  selectedRoleplay,
-  setSelectedRoleplay,
-  selectedPhraseList,
-  setSelectedPhraseList,
-  roleplays,
-  bots,
-  deleteCourseId
-}) {
-  return /*#__PURE__*/_jsx(List, {
-    sx: {
-      width: "100%",
-      bgcolor: "background.paper"
-    },
-    component: "nav",
-    "aria-label": "nested-list-subheader",
-    subheader: /*#__PURE__*/_jsxs(_Fragment, {
-      children: [currentView === "all_courses" && /*#__PURE__*/_jsx(ListSubheader, {
-        component: "div",
-        sx: theme => ({
-          padding: theme.spacing(1, 2)
-        }),
-        children: /*#__PURE__*/_jsx(Typography, {
-          variant: "subtitle1",
-          sx: () => ({
-            fontWeight: "bold"
-          }),
-          children: t("courses")
-        })
-      }), currentView === "course" && /*#__PURE__*/_jsx(ListSubheader, {
-        component: "div",
-        sx: theme => ({
-          padding: theme.spacing(1, 2)
-        }),
-        children: /*#__PURE__*/_jsxs(Box, {
-          sx: () => ({
-            display: "flex",
-            textAlign: "left",
-            alignItems: "center"
-          }),
-          children: [/*#__PURE__*/_jsx(Box, {
-            sx: {
-              minWidth: 56
-            },
-            children: /*#__PURE__*/_jsx(IconButton, {
-              onClick: () => deleteCourseId(),
-              "aria-label": "Back",
-              children: /*#__PURE__*/_jsx(ArrowBackIcon, {})
-            })
-          }), /*#__PURE__*/_jsxs(Box, {
-            sx: {
-              flex: "1 1 auto",
-              textAlign: "left"
-            },
-            children: [/*#__PURE__*/_jsx(Typography, {
-              variant: selectedCourse ? "caption" : "subtitle1",
-              sx: {
-                fontWeight: "bold"
-              },
-              children: t("courses")
-            }), /*#__PURE__*/_jsx(Typography, {
-              variant: "subtitle1",
-              sx: {
-                fontWeight: "bold"
-              },
-              children: selectedCourse.courseName
-            })]
-          })]
-        })
-      }), currentView === "section" && /*#__PURE__*/_jsx(ListSubheader, {
-        sx: theme => ({
-          padding: theme.spacing(1, 2)
-        }),
-        component: "div",
-        children: /*#__PURE__*/_jsxs(Box, {
-          sx: () => ({
-            display: "flex",
-            textAlign: "left",
-            alignItems: "center"
-          }),
-          children: [/*#__PURE__*/_jsx(Box, {
-            sx: {
-              minWidth: 56
-            },
-            children: /*#__PURE__*/_jsx(IconButton, {
-              onClick: () => setSelectedSection(null),
-              label: "Back",
-              children: /*#__PURE__*/_jsx(ArrowBackIcon, {})
-            })
-          }), /*#__PURE__*/_jsxs(Box, {
-            sx: {
-              flex: "1 1 auto",
-              textAlign: "left"
-            },
-            children: [/*#__PURE__*/_jsxs(Typography, {
-              variant: "caption",
-              sx: {
-                fontWeight: "bold"
-              },
-              children: [t("courses"), " | ", selectedCourse.courseName]
-            }), /*#__PURE__*/_jsx(Typography, {
-              variant: "subtitle1",
-              sx: {
-                fontWeight: "bold"
-              },
-              children: selectedSection.sectionName
-            })]
-          })]
-        })
-      }), currentView === "topic" && /*#__PURE__*/_jsx(ListSubheader, {
-        sx: theme => ({
-          padding: theme.spacing(1, 2)
-        }),
-        component: "div",
-        children: /*#__PURE__*/_jsxs(Box, {
-          sx: () => ({
-            display: "flex",
-            textAlign: "left",
-            alignItems: "center"
-          }),
-          children: [/*#__PURE__*/_jsx(Box, {
-            sx: {
-              minWidth: 56
-            },
-            children: /*#__PURE__*/_jsx(IconButton, {
-              onClick: () => setSelectedTopic(null),
-              label: "Back",
-              children: /*#__PURE__*/_jsx(ArrowBackIcon, {})
-            })
-          }), /*#__PURE__*/_jsxs(Box, {
-            sx: {
-              flex: "1 1 auto",
-              textAlign: "left"
-            },
-            children: [/*#__PURE__*/_jsxs(Typography, {
-              variant: "caption",
-              sx: {
-                fontWeight: "bold"
-              },
-              children: [t("courses"), " | ", selectedCourse.courseName]
-            }), /*#__PURE__*/_jsxs(Typography, {
-              variant: "subtitle1",
-              sx: {
-                fontWeight: "bold"
-              },
-              children: [selectedSection.sectionName, " | ", selectedTopic.topicName]
-            })]
-          })]
-        })
-      }), currentView === "phrase-list" && /*#__PURE__*/_jsx(ListSubheader, {
-        sx: theme => ({
-          padding: theme.spacing(1, 2)
-        }),
-        component: "div",
-        children: /*#__PURE__*/_jsxs(Box, {
-          sx: () => ({
-            display: "flex",
-            textAlign: "left",
-            alignItems: "center"
-          }),
-          children: [/*#__PURE__*/_jsx(Box, {
-            sx: {
-              minWidth: 56
-            },
-            children: /*#__PURE__*/_jsx(IconButton, {
-              onClick: () => setSelectedPhraseList(null),
-              label: "Back",
-              children: /*#__PURE__*/_jsx(ArrowBackIcon, {})
-            })
-          }), /*#__PURE__*/_jsxs(Box, {
-            sx: {
-              flex: "1 1 auto",
-              textAlign: "left"
-            },
-            children: [/*#__PURE__*/_jsxs(Typography, {
-              variant: "caption",
-              sx: {
-                fontWeight: "bold"
-              },
-              children: [selectedCourse.courseName, " | ", selectedSection.sectionName]
-            }), /*#__PURE__*/_jsxs(Typography, {
-              variant: "subtitle1",
-              sx: {
-                fontWeight: "bold"
-              },
-              children: [selectedTopic.topicName, " | ", selectedPhraseList?.phraseListName]
-            })]
-          })]
-        })
-      }), currentView === "roleplay" && /*#__PURE__*/_jsx(ListSubheader, {
-        sx: theme => ({
-          padding: theme.spacing(1, 2)
-        }),
-        component: "div",
-        children: /*#__PURE__*/_jsxs(Box, {
-          sx: () => ({
-            display: "flex",
-            textAlign: "left",
-            alignItems: "center"
-          }),
-          children: [/*#__PURE__*/_jsx(Box, {
-            sx: {
-              minWidth: 56
-            },
-            children: /*#__PURE__*/_jsx(IconButton, {
-              onClick: () => setSelectedRoleplay(null),
-              label: "Back",
-              children: /*#__PURE__*/_jsx(ArrowBackIcon, {})
-            })
-          }), /*#__PURE__*/_jsxs(Box, {
-            sx: {
-              flex: "1 1 auto",
-              textAlign: "left"
-            },
-            children: [/*#__PURE__*/_jsxs(Typography, {
-              variant: "caption",
-              sx: {
-                fontWeight: "bold"
-              },
-              children: [selectedCourse.courseName, " | ", selectedSection.sectionName]
-            }), /*#__PURE__*/_jsxs(Typography, {
-              variant: "subtitle1",
-              sx: {
-                fontWeight: "bold"
-              },
-              children: [selectedTopic.topicName, " | ", selectedRoleplay.roleplayName]
-            })]
-          })]
-        })
-      })]
-    }),
-    children: members.map((member, i) => /*#__PURE__*/_jsx(MemberListItem, {
-      t: t,
-      classroomId: classroomId,
-      member: member,
-      courses: courses,
-      selectedCourse: selectedCourse,
-      selectedSection: selectedSection,
-      selectedTopic: selectedTopic,
-      fetchMemberCourseCompletions: fetchMemberCourseCompletions,
-      currentView: currentView,
-      setSelectedCourse: setSelectedCourse,
-      setSelectedSection: setSelectedSection,
-      setSelectedTopic: setSelectedTopic,
-      filter: filter,
-      roleplays: roleplays,
-      bots: bots,
-      selectedRoleplay: selectedRoleplay,
-      setSelectedRoleplay: setSelectedRoleplay,
-      selectedPhraseList: selectedPhraseList,
-      setSelectedPhraseList: setSelectedPhraseList
-    }, `student-progress-list-item-${i}`))
-  });
-}
-export default ProgressList;