@nualang/nualang-ui-components 0.1.1399 → 0.2.0

package/dist/Lists/CourseOutline/CourseOutline.js

@@ -1,1365 +0,0 @@
-import { useEffect, useState, useCallback, useRef } from "react";
-import { Link as RouterLink, useNavigate, useParams } from "react-router";
-import { ListSubheader, List, ListItem, ListItemIcon, ListItemText, ListItemAvatar, ListItemSecondaryAction, IconButton, Button, Collapse, Typography, Box, Tooltip, Menu, MenuItem, Avatar } from "@mui/material";
-import { useTheme } from "@mui/material/styles";
-import { makeStyles } from "tss-react/mui";
-import CheckBox from "@mui/icons-material/CheckBox";
-import CheckBoxOutlineBlank from "@mui/icons-material/CheckBoxOutlineBlank";
-import AddCircle from "@mui/icons-material/AddCircle";
-import ArrowForward from "@mui/icons-material/ArrowForward";
-import DragHandle from "@mui/icons-material/DragHandle";
-import Add from "@mui/icons-material/Add";
-import Delete from "@mui/icons-material/Delete";
-import Update from "@mui/icons-material/Create";
-import Show from "@mui/icons-material/Visibility";
-import Hidden from "@mui/icons-material/VisibilityOff";
-import PictureAsPdfIcon from "@mui/icons-material/PictureAsPdf";
-import { useDrag, useDrop } from "react-dnd";
-import update from "immutability-helper";
-import UpdateSectionDialog from "../../Dialogs/CreateSection/CreateSection";
-import MoreVertIcon from "@mui/icons-material/MoreVert";
-import TimelineIcon from "@mui/icons-material/Timeline";
-import useMediaQuery from "@mui/material/useMediaQuery";
-import CopyIcon from "@mui/icons-material/FileCopy";
-import ImageSearchIcon from "@mui/icons-material/ImageSearch";
-import Skeleton from "@mui/material/Skeleton";
-import OndemandVideoIcon from "@mui/icons-material/OndemandVideo";
-import ColorLinearProgress from "../../Misc/ColorLinearProgress/ColorLinearProgress";
-import { calcCompletions, calcPercentageCompletion } from "../../utils/index";
-import SelectClassroom from "../../Dialogs/SelectClassroom/SelectClassroom";
-import { CardInfoSectionItem } from "../../Cards/CardElements";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const useStyles = makeStyles()(theme => ({
-  root: {
-    width: "100%"
-  },
-  nested: {
-    paddingLeft: theme.spacing(4)
-  },
-  completed: {
-    color: theme.palette.success.main
-  },
-  greenColor: {
-    color: theme.palette.success ? theme.palette.success.main : ""
-  }
-}));
-function OverflowMenu({
-  children,
-  anchorEl,
-  handleClose
-}) {
-  return /*#__PURE__*/_jsx(Menu, {
-    anchorEl: anchorEl,
-    keepMounted: true,
-    open: Boolean(anchorEl),
-    onClose: handleClose,
-    children: children
-  });
-}
-function ProgressIcon({
-  completedCount
-}) {
-  const {
-    classes
-  } = useStyles();
-  return completedCount > 0 ? /*#__PURE__*/_jsx(Tooltip, {
-    title: `Completed ${completedCount} ${completedCount === 1 ? "time" : "times"}`,
-    children: /*#__PURE__*/_jsx(CheckBox, {
-      className: classes.completed
-    })
-  }) : /*#__PURE__*/_jsx(CheckBoxOutlineBlank, {});
-}
-function Exercise({
-  t,
-  name,
-  completedCount,
-  courseId,
-  sectionId,
-  topicId,
-  isMember,
-  handleViewCourseTopic,
-  classroomId
-}) {
-  const {
-    classes,
-    cx
-  } = useStyles();
-  return /*#__PURE__*/_jsxs(ListItem, {
-    button: true,
-    className: classes.nested,
-    onClick: () => handleViewCourseTopic(courseId, sectionId, topicId, classroomId),
-    children: [isMember && /*#__PURE__*/_jsx(ListItemIcon, {
-      children: /*#__PURE__*/_jsx(ProgressIcon, {
-        completedCount: completedCount
-      })
-    }), /*#__PURE__*/_jsx(ListItemText, {
-      primary: t(name),
-      className: cx({
-        [classes.nested]: !isMember
-      })
-    })]
-  });
-}
-function ExerciseList({
-  t,
-  exercises = [],
-  completion,
-  isMember,
-  classroomId,
-  ...otherProps
-}) {
-  const {
-    classes,
-    cx
-  } = useStyles();
-  const completedExerciseCount = exercises.reduce((acc, e) => {
-    if (e.completedCount > 0) {
-      acc += 1;
-    }
-    return acc;
-  }, 0);
-  return /*#__PURE__*/_jsx(List, {
-    component: "div",
-    disablePadding: true,
-    subheader: /*#__PURE__*/_jsx(ListSubheader, {
-      disableSticky: true,
-      className: classes.nested,
-      component: "div",
-      id: "roleplay-list-subheader",
-      children: /*#__PURE__*/_jsxs(Box, {
-        sx: {
-          display: "flex"
-        },
-        children: [/*#__PURE__*/_jsx(Box, {
-          children: t("exercises")
-        }), /*#__PURE__*/_jsx(Box, {
-          sx: {
-            flexGrow: 1
-          }
-        }), isMember && /*#__PURE__*/_jsxs(Box, {
-          className: cx({
-            [classes.completed]: completedExerciseCount === exercises.length
-          }),
-          children: [completedExerciseCount, " / ", exercises.length]
-        })]
-      })
-    }),
-    children: exercises.map((exercise, i) => {
-      const keyId = `exerc_${exercise.name}${i}`;
-      return /*#__PURE__*/_jsx(Exercise, {
-        t: t,
-        ...exercise,
-        isMember: isMember,
-        classroomId: classroomId,
-        ...otherProps
-      }, keyId);
-    })
-  });
-}
-function Roleplay({
-  courseId,
-  sectionId,
-  topicId,
-  roleplayName,
-  isMember,
-  completedCount,
-  handleViewCourseTopic,
-  classroomId
-}) {
-  const {
-    classes,
-    cx
-  } = useStyles();
-  return /*#__PURE__*/_jsxs(ListItem, {
-    button: true,
-    className: classes.nested,
-    onClick: () => handleViewCourseTopic(courseId, sectionId, topicId, classroomId),
-    children: [isMember && /*#__PURE__*/_jsx(ListItemIcon, {
-      children: /*#__PURE__*/_jsx(ProgressIcon, {
-        completedCount: completedCount
-      })
-    }), /*#__PURE__*/_jsx(ListItemText, {
-      primary: roleplayName,
-      className: cx({
-        [classes.nested]: !isMember
-      })
-    })]
-  });
-}
-function RoleplayList({
-  roleplays = [],
-  completion = {},
-  isMember,
-  classroomId,
-  ...otherProps
-}) {
-  const {
-    classes,
-    cx
-  } = useStyles();
-  return /*#__PURE__*/_jsx(List, {
-    component: "div",
-    disablePadding: true,
-    subheader: /*#__PURE__*/_jsx(ListSubheader, {
-      disableSticky: true,
-      className: classes.nested,
-      component: "div",
-      id: "roleplay-list-subheader",
-      children: /*#__PURE__*/_jsxs(Box, {
-        sx: {
-          display: "flex"
-        },
-        children: [/*#__PURE__*/_jsx(Box, {
-          children: "Roleplays"
-        }), /*#__PURE__*/_jsx(Box, {
-          sx: {
-            flexGrow: 1
-          }
-        }), isMember && /*#__PURE__*/_jsxs(Box, {
-          className: cx({
-            [classes.completed]: completion.completed === completion.total
-          }),
-          children: [completion.completed, " / ", completion.total]
-        })]
-      })
-    }),
-    children: roleplays.map((roleplay, i) => {
-      return /*#__PURE__*/_jsx(Roleplay, {
-        ...roleplay,
-        isMember: isMember,
-        classroomId: classroomId,
-        ...otherProps
-      }, roleplay.roleplayId);
-    })
-  });
-}
-function Bot({
-  courseId,
-  sectionId,
-  topicId,
-  botName,
-  isMember,
-  completedCount,
-  handleViewCourseTopic,
-  classroomId
-}) {
-  const {
-    classes,
-    cx
-  } = useStyles();
-  return /*#__PURE__*/_jsxs(ListItem, {
-    button: true,
-    className: classes.nested,
-    onClick: () => handleViewCourseTopic(courseId, sectionId, topicId, classroomId),
-    children: [isMember && /*#__PURE__*/_jsx(ListItemIcon, {
-      children: /*#__PURE__*/_jsx(ProgressIcon, {
-        completedCount: completedCount
-      })
-    }), /*#__PURE__*/_jsx(ListItemText, {
-      primary: botName,
-      className: cx({
-        [classes.nested]: !isMember
-      })
-    })]
-  });
-}
-function BotList({
-  bots = [],
-  completion = {},
-  isMember,
-  classroomId,
-  ...otherProps
-}) {
-  const {
-    classes,
-    cx
-  } = useStyles();
-  return /*#__PURE__*/_jsx(List, {
-    component: "div",
-    disablePadding: true,
-    subheader: /*#__PURE__*/_jsx(ListSubheader, {
-      disableSticky: true,
-      className: classes.nested,
-      component: "div",
-      id: "bot-list-subheader",
-      children: /*#__PURE__*/_jsxs(Box, {
-        sx: {
-          display: "flex"
-        },
-        children: [/*#__PURE__*/_jsx(Box, {
-          children: "Bots"
-        }), /*#__PURE__*/_jsx(Box, {
-          sx: {
-            flexGrow: 1
-          }
-        }), isMember && /*#__PURE__*/_jsxs(Box, {
-          className: cx({
-            [classes.completed]: completion.completed === completion.total
-          }),
-          children: [completion.completed, " / ", completion.total]
-        })]
-      })
-    }),
-    children: bots.map((bot, i) => {
-      return /*#__PURE__*/_jsx(Bot, {
-        ...bot,
-        isMember: isMember,
-        ...otherProps,
-        classroomId: classroomId
-      }, bot.botId);
-    })
-  });
-}
-function Topic({
-  t,
-  topic,
-  courseId,
-  sectionId,
-  topicId,
-  topicName,
-  description,
-  picture,
-  roleplays = [],
-  bots = [],
-  completions = [],
-  isCreator,
-  isMember,
-  handleViewCourseTopic,
-  handleUpdateSectionTopic,
-  handleDuplicateTopic,
-  handleDeleteCourseSectionTopic,
-  isTopicHidden,
-  completion = {},
-  sectionIndex,
-  index,
-  moveTopic,
-  onDropSection,
-  disableDrag,
-  classroomId,
-  courseSettings,
-  showViewTopicButton,
-  isClassroomArchived = false,
-  ...otherProps
-}) {
-  const theme = useTheme();
-  const isLargeScreen = useMediaQuery(theme.breakpoints.up("sm"));
-  const [open] = useState(false);
-  const [anchorEl, setAnchorEl] = useState(null);
-  const handleClickMenu = event => {
-    setAnchorEl(event.currentTarget);
-  };
-  const handleCloseMenu = () => {
-    setAnchorEl(null);
-  };
-  const handleTopicVisibility = async () => {
-    await handleUpdateSectionTopic(courseId, sectionId, topicId, {
-      isTopicHidden: !isTopicHidden
-    });
-  };
-  const handleClick = () => {
-    handleViewCourseTopic(courseId, sectionId, topicId, classroomId);
-  };
-  const exercises = [{
-    name: "pronunciation",
-    completedCount: completion && completion.pronunciation ? completion.pronunciation.completedCount : 0
-  }, {
-    name: "translation",
-    completedCount: completion && completion.translation ? completion.translation.completedCount : 0
-  }, {
-    name: "listening",
-    completedCount: completion && completion.listening ? completion.listening.completedCount : 0
-  }];
-  const ref = useRef(null);
-  const [{
-    handlerId
-  }, drop] = useDrop({
-    type: `${sectionId}-topic`,
-    accept: `${sectionId}-topic`,
-    hover(item, monitor) {
-      if (!ref.current) {
-        return;
-      }
-      const dragIndex = item.index;
-      const hoverIndex = index;
-      // Don't replace items with themselves
-      if (dragIndex === hoverIndex) {
-        return;
-      }
-      // Determine rectangle on screen
-      const hoverBoundingRect = ref.current.getBoundingClientRect();
-      // Get vertical middle
-      const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
-      // Determine mouse position
-      const clientOffset = monitor.getClientOffset();
-      // Get pixels to the top
-      const hoverClientY = clientOffset.y - hoverBoundingRect.top;
-      // Only perform the move when the mouse has crossed half of the items height
-      // When dragging downwards, only move when the cursor is below 50%
-      // When dragging upwards, only move when the cursor is above 50%
-      // Dragging downwards
-      if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
-        return;
-      }
-      // Dragging upwards
-      if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
-        return;
-      }
-      // Time to actually perform the action
-      moveTopic(sectionIndex, dragIndex, hoverIndex);
-      // Note: we're mutating the monitor item here!
-      // Generally it's better to avoid mutations,
-      // but it's good here for the sake of performance
-      // to avoid expensive index searches.
-      item.index = hoverIndex;
-    }
-  });
-  const [{
-    isDragging
-  }, drag] = useDrag({
-    type: `${sectionId}-topic`,
-    canDrag: isCreator && isLargeScreen && !disableDrag ? true : false,
-    item: {
-      topicId,
-      index,
-      primary: topicName,
-      secondary: description,
-      image: picture
-    },
-    collect: monitor => ({
-      isDragging: monitor.isDragging()
-    }),
-    end: (dropResult, monitor) => {
-      onDropSection();
-    }
-  });
-  const opacity = isDragging ? 0 : 1;
-  drag(drop(ref));
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [(!isTopicHidden || isCreator) && /*#__PURE__*/_jsxs(ListItem, {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "space-between",
-      ref: ref,
-      style: {
-        opacity,
-        cursor: handleClick ? "pointer" : "default"
-      },
-      button: true,
-      onClick: isClassroomArchived ? null : handleClick,
-      "data-cy": "topic-list-item",
-      children: [isLargeScreen && /*#__PURE__*/_jsx(ListItemAvatar, {
-        children: picture ? /*#__PURE__*/_jsx(Avatar, {
-          src: picture,
-          alt: ""
-        }) : /*#__PURE__*/_jsx(Avatar, {
-          alt: "",
-          children: /*#__PURE__*/_jsx(ImageSearchIcon, {})
-        })
-      }), /*#__PURE__*/_jsx(Box, {
-        sx: {
-          fontWeight: "fontWeightBold",
-          width: "100%"
-        },
-        children: /*#__PURE__*/_jsx(ListItemText, {
-          primary: isLargeScreen ? topicName || "" : /*#__PURE__*/_jsxs(_Fragment, {
-            children: [/*#__PURE__*/_jsx(Box, {
-              sx: {
-                mb: 1
-              },
-              children: picture ? /*#__PURE__*/_jsx(Avatar, {
-                src: picture,
-                alt: ""
-              }) : /*#__PURE__*/_jsx(Avatar, {
-                alt: "",
-                children: /*#__PURE__*/_jsx(ImageSearchIcon, {})
-              })
-            }), /*#__PURE__*/_jsx(Typography, {
-              variant: "body1",
-              children: topicName || ""
-            })]
-          }),
-          secondary: /*#__PURE__*/_jsxs(_Fragment, {
-            children: [/*#__PURE__*/_jsx(Typography, {
-              sx: theme => ({
-                maxWidth: "85%",
-                [theme.breakpoints.down("sm")]: {
-                  maxWidth: "70%"
-                },
-                [theme.breakpoints.down("md")]: {
-                  maxWidth: "50%"
-                },
-                [theme.breakpoints.down("lg")]: {
-                  maxWidth: isLargeScreen ? "40%" : "80%"
-                }
-              }),
-              variant: "body2",
-              component: "p",
-              color: "textSecondary",
-              children: description
-            }), /*#__PURE__*/_jsxs(Box, {
-              sx: {
-                display: "flex",
-                alignItems: "center",
-                mt: 1
-              },
-              children: [topic?.pdf && /*#__PURE__*/_jsx(Box, {
-                sx: {
-                  display: "flex",
-                  alignItems: "center"
-                },
-                children: /*#__PURE__*/_jsxs(CardInfoSectionItem, {
-                  variant: "body2",
-                  component: "span",
-                  children: [/*#__PURE__*/_jsx(PictureAsPdfIcon, {}), /*#__PURE__*/_jsx(Typography, {
-                    variant: "caption",
-                    sx: {
-                      ml: 0.5,
-                      color: theme => theme.palette.text.primary
-                    },
-                    children: t("story_included")
-                  })]
-                })
-              }), topic?.videoUrl && /*#__PURE__*/_jsx(Box, {
-                sx: {
-                  display: "flex",
-                  alignItems: "center",
-                  ml: 1
-                },
-                children: /*#__PURE__*/_jsxs(CardInfoSectionItem, {
-                  variant: "body2",
-                  component: "span",
-                  children: [/*#__PURE__*/_jsx(OndemandVideoIcon, {}), /*#__PURE__*/_jsx(Typography, {
-                    variant: "caption",
-                    sx: {
-                      ml: 0.5,
-                      color: theme => theme.palette.text.primary
-                    },
-                    children: t("video_included")
-                  })]
-                })
-              })]
-            }), isMember && !isCreator && /*#__PURE__*/_jsxs(Box, {
-              sx: {
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "space-between",
-                mt: 1,
-                width: isLargeScreen ? "40%" : "100%"
-              },
-              children: [/*#__PURE__*/_jsx(Box, {
-                sx: {
-                  display: "inline",
-                  flexGrow: 1
-                },
-                children: /*#__PURE__*/_jsx(Tooltip, {
-                  title: `Completed ${completion.completed} / ${completion.total} exercises`,
-                  children: /*#__PURE__*/_jsx(ColorLinearProgress, {
-                    variant: "determinate",
-                    value: completion.percentage
-                  })
-                })
-              }), /*#__PURE__*/_jsxs(Box, {
-                sx: {
-                  ml: 1,
-                  fontSize: 14,
-                  minWidth: 35
-                },
-                children: [completion && completion.percentage ? completion.percentage.toFixed(0) : 0, "%"]
-              })]
-            })]
-          })
-        })
-      }), /*#__PURE__*/_jsxs(ListItemSecondaryAction, {
-        children: [isMember && !isCreator && showViewTopicButton && /*#__PURE__*/_jsx(IconButton, {
-          onClick: handleClick,
-          "aria-label": "View topic",
-          tabIndex: "-1",
-          children: /*#__PURE__*/_jsx(ArrowForward, {})
-        }), isCreator && isLargeScreen && /*#__PURE__*/_jsx(Tooltip, {
-          title: t("duplicate_topic"),
-          children: /*#__PURE__*/_jsx("span", {
-            children: /*#__PURE__*/_jsx(IconButton, {
-              onClick: () => handleDuplicateTopic(courseId, sectionId, topicId),
-              "aria-label": "Duplicate topic",
-              disabled: isCreator ? false : true,
-              children: /*#__PURE__*/_jsx(CopyIcon, {})
-            })
-          })
-        }), isCreator && isLargeScreen && /*#__PURE__*/_jsx(Tooltip, {
-          title: t("delete_topic"),
-          children: /*#__PURE__*/_jsx("span", {
-            children: /*#__PURE__*/_jsx(IconButton, {
-              onClick: () => handleDeleteCourseSectionTopic(courseId, sectionId, topicId),
-              "aria-label": "Remove topic",
-              disabled: isCreator ? false : true,
-              children: /*#__PURE__*/_jsx(Delete, {})
-            })
-          })
-        }), isCreator && isLargeScreen && /*#__PURE__*/_jsx(Tooltip, {
-          title: isTopicHidden ? t("show_topic") : t("hide_topic"),
-          children: /*#__PURE__*/_jsx("span", {
-            children: /*#__PURE__*/_jsx(IconButton, {
-              onClick: handleTopicVisibility,
-              "aria-label": "Toggle Topic Visibility",
-              disabled: isCreator ? false : true,
-              children: isTopicHidden ? /*#__PURE__*/_jsx(Hidden, {}) : /*#__PURE__*/_jsx(Show, {})
-            })
-          })
-        }), isCreator && !isLargeScreen && /*#__PURE__*/_jsx(Tooltip, {
-          title: t("more_options"),
-          children: /*#__PURE__*/_jsx("span", {
-            children: /*#__PURE__*/_jsx(IconButton, {
-              "aria-label": t("more_options"),
-              disabled: isCreator ? false : true,
-              onClick: handleClickMenu,
-              "aria-expanded": Boolean(anchorEl),
-              children: /*#__PURE__*/_jsx(MoreVertIcon, {})
-            })
-          })
-        }), isCreator && /*#__PURE__*/_jsx(Tooltip, {
-          title: t("move_topic"),
-          children: /*#__PURE__*/_jsx(IconButton, {
-            "data-handler-id": handlerId,
-            style: {
-              cursor: "move"
-            },
-            "aria-label": "Move Topic",
-            disabled: isCreator ? false : true,
-            children: /*#__PURE__*/_jsx(DragHandle, {})
-          })
-        })]
-      })]
-    }), /*#__PURE__*/_jsxs(Collapse, {
-      in: open,
-      timeout: "auto",
-      unmountOnExit: true,
-      children: [/*#__PURE__*/_jsx(ExerciseList, {
-        t: t,
-        topicInfo: {
-          topicName,
-          description
-        },
-        exercises: exercises,
-        isMember: isMember,
-        completion: completion,
-        courseId: courseId,
-        sectionId: sectionId,
-        topicId: topicId,
-        handleViewCourseTopic: handleViewCourseTopic,
-        classroomId: classroomId,
-        courseSettings: courseSettings,
-        ...otherProps
-      }), /*#__PURE__*/_jsx(RoleplayList, {
-        t: t,
-        roleplays: roleplays,
-        isMember: isMember,
-        completion: completion ? completion.roleplays : {},
-        courseId: courseId,
-        sectionId: sectionId,
-        topicId: topicId,
-        handleViewCourseTopic: handleViewCourseTopic,
-        classroomId: classroomId,
-        ...otherProps
-      }), /*#__PURE__*/_jsx(BotList, {
-        t: t,
-        bots: bots,
-        isMember: isMember,
-        completion: completion ? completion.bots : {},
-        courseId: courseId,
-        sectionId: sectionId,
-        topicId: topicId,
-        handleViewCourseTopic: handleViewCourseTopic,
-        classroomId: classroomId,
-        ...otherProps
-      })]
-    }), /*#__PURE__*/_jsxs(OverflowMenu, {
-      anchorEl: anchorEl,
-      handleClose: handleCloseMenu,
-      children: [/*#__PURE__*/_jsxs(MenuItem, {
-        onClick: handleTopicVisibility,
-        "aria-label": "topic_visibility",
-        disabled: isCreator ? false : true,
-        children: [/*#__PURE__*/_jsx(ListItemIcon, {
-          children: isTopicHidden ? /*#__PURE__*/_jsx(Hidden, {}) : /*#__PURE__*/_jsx(Show, {})
-        }), /*#__PURE__*/_jsx(ListItemText, {
-          primary: isTopicHidden ? t("show_topic") : t("hide_topic")
-        })]
-      }), /*#__PURE__*/_jsxs(MenuItem, {
-        onClick: () => handleDeleteCourseSectionTopic(courseId, sectionId, topicId),
-        "aria-label": "Remove topic",
-        disabled: isCreator ? false : true,
-        children: [/*#__PURE__*/_jsx(ListItemIcon, {
-          children: /*#__PURE__*/_jsx(Delete, {})
-        }), /*#__PURE__*/_jsx(ListItemText, {
-          primary: t("delete_topic")
-        })]
-      })]
-    })]
-  });
-}
-function TopicList({
-  topics = [],
-  handleUpdateTopics,
-  sectionId,
-  handleDuplicateTopic,
-  handleUpdateSectionTopic,
-  isCreator,
-  disableDrag,
-  classroomId,
-  courseSettings,
-  showViewTopicButton,
-  loading,
-  isClassroomArchived = false,
-  ...otherProps
-}) {
-  const onDropSection = () => {
-    handleUpdateTopics(sectionId, topics);
-  };
-  const duplicateTopic = (courseId, sectionId, topicId) => {
-    const foundTopic = topics.find(t => t.topicId === topicId);
-    handleDuplicateTopic(courseId, sectionId, topicId, foundTopic);
-  };
-  topics.sort((a, b) => a.idx - b.idx);
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: topics.map((topic, i) => {
-      return /*#__PURE__*/_jsx(Topic, {
-        index: i,
-        topics: topics,
-        topicLength: topics.length,
-        onDropSection: onDropSection,
-        handleUpdateSectionTopic: handleUpdateSectionTopic,
-        handleDuplicateTopic: duplicateTopic,
-        sectionId: sectionId,
-        disableDrag: disableDrag,
-        ...topic,
-        ...otherProps,
-        picture: topic.picture,
-        isCreator: isCreator,
-        completion: topic.completion,
-        classroomId: classroomId,
-        courseSettings: courseSettings,
-        showViewTopicButton: showViewTopicButton,
-        videoUrl: topic?.videoUrl,
-        loading: loading,
-        topic: topic,
-        isClassroomArchived: isClassroomArchived
-      }, `${sectionId}-${topic.topicId}`);
-    })
-  });
-}
-function Section({
-  t,
-  courseId,
-  sectionId,
-  isCreator,
-  sectionName,
-  isHidden,
-  isMember,
-  topics = [],
-  handleDeleteCourseSection,
-  handleUpdateCourseSection,
-  handleUpdateSectionTopic,
-  handleDuplicateTopic,
-  handleCreateCourseSectionTopic,
-  moveSection,
-  moveTopic,
-  index,
-  onDropSection,
-  teachClassrooms,
-  disableDrag,
-  courseSettings,
-  showViewTopicButton,
-  isClassroomArchived = false,
-  ...otherProps
-}) {
-  const {
-    classes
-  } = useStyles();
-  const theme = useTheme();
-  const isLargeScreen = useMediaQuery(theme.breakpoints.up("sm"));
-  const initialSectionState = {
-    sectionName: sectionName
-  };
-  const [section, setSection] = useState(initialSectionState);
-  const [isSelectClassroomDialogOpen, setIsSelectClassroomDialogOpen] = useState(false);
-  const params = useParams();
-  const {
-    classroomId
-  } = params;
-  const handleOpenSelectClassroomDialog = () => {
-    setIsSelectClassroomDialogOpen(true);
-  };
-  const handleCloseSelectClassroomDialog = () => {
-    setIsSelectClassroomDialogOpen(false);
-  };
-  const handleSectionChange = event => {
-    const value = event.target.value;
-    const name = event.target.name;
-    setSection(prevSection => ({
-      ...prevSection,
-      [name]: value
-    }));
-  };
-  const handleUpdateSection = async () => {
-    await handleUpdateCourseSection(sectionId, section);
-    handleCloseUpdateSection();
-  };
-  const handleSectionVisibility = async () => {
-    await handleUpdateCourseSection(sectionId, {
-      isHidden: !isHidden
-    });
-  };
-  const [isUpdateSectionOpen, setIsUpdateSectionOpen] = useState(false);
-  const handleClickOpenUpdateSection = () => {
-    setIsUpdateSectionOpen(true);
-  };
-  const handleCloseUpdateSection = () => {
-    setIsUpdateSectionOpen(false);
-  };
-  const handleCreateTopic = () => handleCreateCourseSectionTopic(sectionId);
-  const ref = useRef(null);
-  const [{
-    handlerId
-  }, drop] = useDrop({
-    accept: "section",
-    hover(item, monitor) {
-      if (!ref.current) {
-        return;
-      }
-      const dragIndex = item.index;
-      const hoverIndex = index;
-      // Don't replace items with themselves
-      if (dragIndex === hoverIndex) {
-        return;
-      }
-      // Determine rectangle on screen
-      const hoverBoundingRect = ref.current.getBoundingClientRect();
-      // Get vertical middle
-      const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
-      // Determine mouse position
-      const clientOffset = monitor.getClientOffset();
-      // Get pixels to the top
-      const hoverClientY = clientOffset.y - hoverBoundingRect.top;
-      // Only perform the move when the mouse has crossed half of the items height
-      // When dragging downwards, only move when the cursor is below 50%
-      // When dragging upwards, only move when the cursor is above 50%
-      // Dragging downwards
-      if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
-        return;
-      }
-      // Dragging upwards
-      if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
-        return;
-      }
-      // Time to actually perform the action
-      moveSection(dragIndex, hoverIndex);
-      // Note: we're mutating the monitor item here!
-      // Generally it's better to avoid mutations,
-      // but it's good here for the sake of performance
-      // to avoid expensive index searches.
-      item.index = hoverIndex;
-    }
-  });
-  const [{
-    isDragging
-  }, drag] = useDrag({
-    type: "section",
-    canDrag: isCreator && isLargeScreen && !disableDrag ? true : false,
-    item: {
-      sectionId,
-      index,
-      primary: sectionName
-    },
-    collect: monitor => ({
-      isDragging: monitor.isDragging()
-    }),
-    end: () => {
-      onDropSection();
-    }
-  });
-  const opacity = isDragging ? 0 : 1;
-  drag(drop(ref));
-  const [anchorEl, setAnchorEl] = useState(null);
-  const handleClickMenu = event => {
-    setAnchorEl(event.currentTarget);
-  };
-  const handleCloseMenu = () => {
-    setAnchorEl(null);
-  };
-  const navigate = useNavigate();
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [(!isHidden || isCreator) && /*#__PURE__*/_jsxs(List, {
-      ref: ref,
-      style: {
-        opacity
-      },
-      component: "nav",
-      "aria-labelledby": "section-list-subheader",
-      subheader: /*#__PURE__*/_jsx(ListSubheader, {
-        disableSticky: true,
-        component: "div",
-        id: "section-list-subheader",
-        children: /*#__PURE__*/_jsxs(Box, {
-          sx: {
-            display: "flex"
-          },
-          children: [/*#__PURE__*/_jsx(Box, {
-            sx: {
-              fontWeight: "fontWeightBold",
-              flexGrow: 1
-            },
-            children: sectionName
-          }), !isLargeScreen ? /*#__PURE__*/_jsxs(_Fragment, {
-            children: [/*#__PURE__*/_jsx(Box, {
-              children: isCreator ? /*#__PURE__*/_jsx(Tooltip, {
-                title: t("more_options"),
-                children: /*#__PURE__*/_jsx("span", {
-                  children: /*#__PURE__*/_jsx(IconButton, {
-                    "aria-label": t("more_options"),
-                    disabled: isCreator ? false : true,
-                    onClick: handleClickMenu,
-                    "aria-expanded": Boolean(anchorEl),
-                    children: /*#__PURE__*/_jsx(MoreVertIcon, {})
-                  })
-                })
-              }) : null
-            }), /*#__PURE__*/_jsxs(OverflowMenu, {
-              anchorEl: anchorEl,
-              handleClose: handleCloseMenu,
-              children: [/*#__PURE__*/_jsxs(MenuItem, {
-                onClick: handleCreateTopic,
-                "aria-label": t("add_topic"),
-                disabled: isCreator ? false : true,
-                children: [/*#__PURE__*/_jsx(ListItemIcon, {
-                  children: /*#__PURE__*/_jsx(AddCircle, {})
-                }), /*#__PURE__*/_jsx(ListItemText, {
-                  primary: t("add_topic")
-                })]
-              }), /*#__PURE__*/_jsxs(MenuItem, {
-                component: RouterLink,
-                to: `/courses/${courseId}/${sectionId}/activity`,
-                "aria-label": t("view_activity"),
-                disabled: isCreator ? false : true,
-                children: [/*#__PURE__*/_jsx(ListItemIcon, {
-                  children: /*#__PURE__*/_jsx(TimelineIcon, {})
-                }), /*#__PURE__*/_jsx(ListItemText, {
-                  primary: t("view_activity")
-                })]
-              }), /*#__PURE__*/_jsxs(MenuItem, {
-                onClick: handleClickOpenUpdateSection,
-                "aria-label": t("update_section"),
-                disabled: isCreator ? false : true,
-                children: [/*#__PURE__*/_jsx(ListItemIcon, {
-                  children: /*#__PURE__*/_jsx(Update, {})
-                }), /*#__PURE__*/_jsx(ListItemText, {
-                  primary: t("update_section")
-                })]
-              }), /*#__PURE__*/_jsxs(MenuItem, {
-                onClick: () => handleDeleteCourseSection(courseId, sectionId),
-                "aria-label": t("delete_section"),
-                disabled: isCreator ? false : true,
-                children: [/*#__PURE__*/_jsx(ListItemIcon, {
-                  children: /*#__PURE__*/_jsx(Delete, {})
-                }), /*#__PURE__*/_jsx(ListItemText, {
-                  primary: t("delete_section")
-                })]
-              }), /*#__PURE__*/_jsxs(MenuItem, {
-                onClick: handleSectionVisibility,
-                "aria-label": t("section_visibility"),
-                disabled: isCreator ? false : true,
-                children: [/*#__PURE__*/_jsx(ListItemIcon, {
-                  children: isHidden ? /*#__PURE__*/_jsx(Hidden, {}) : /*#__PURE__*/_jsx(Show, {})
-                }), /*#__PURE__*/_jsx(ListItemText, {
-                  primary: t("section_visibility")
-                })]
-              })]
-            }), /*#__PURE__*/_jsx(Box, {
-              children: isCreator ? /*#__PURE__*/_jsx(Tooltip, {
-                title: t("move_section"),
-                children: /*#__PURE__*/_jsx(IconButton, {
-                  "data-handler-id": handlerId,
-                  style: {
-                    cursor: "move"
-                  },
-                  "aria-label": "Move Section",
-                  disabled: isCreator ? false : true,
-                  children: /*#__PURE__*/_jsx(DragHandle, {})
-                })
-              }) : null
-            })]
-          }) : /*#__PURE__*/_jsxs(_Fragment, {
-            children: [/*#__PURE__*/_jsx(Box, {
-              children: /*#__PURE__*/_jsx(Tooltip, {
-                title: t("view_activity"),
-                children: (isCreator || isMember && classroomId) && /*#__PURE__*/_jsx(IconButton, {
-                  "data-cy": "section-view-activity",
-                  onClick: () => {
-                    if (isCreator) {
-                      handleOpenSelectClassroomDialog();
-                    } else if (isMember && classroomId) {
-                      navigate(`/classrooms/${classroomId}?courseId=${courseId}#Progress`);
-                    }
-                  },
-                  "aria-label": t("view_activity"),
-                  children: /*#__PURE__*/_jsx(TimelineIcon, {})
-                })
-              })
-            }), /*#__PURE__*/_jsx(Box, {
-              children: isCreator ? /*#__PURE__*/_jsx(Tooltip, {
-                title: t("update_section"),
-                children: /*#__PURE__*/_jsx("span", {
-                  children: /*#__PURE__*/_jsx(IconButton, {
-                    onClick: handleClickOpenUpdateSection,
-                    "aria-label": t("update_section"),
-                    disabled: isCreator ? false : true,
-                    children: /*#__PURE__*/_jsx(Update, {})
-                  })
-                })
-              }) : null
-            }), /*#__PURE__*/_jsx(Box, {
-              children: isCreator ? /*#__PURE__*/_jsx(Tooltip, {
-                title: t("delete_section"),
-                children: /*#__PURE__*/_jsx("span", {
-                  children: /*#__PURE__*/_jsx(IconButton, {
-                    onClick: () => handleDeleteCourseSection(courseId, sectionId),
-                    "aria-label": t("delete_section"),
-                    disabled: isCreator ? false : true,
-                    children: /*#__PURE__*/_jsx(Delete, {})
-                  })
-                })
-              }) : null
-            }), /*#__PURE__*/_jsx(Box, {
-              children: isCreator ? /*#__PURE__*/_jsx(Tooltip, {
-                title: isHidden ? t("show_section") : t("hide_section"),
-                children: /*#__PURE__*/_jsx("span", {
-                  children: /*#__PURE__*/_jsx(IconButton, {
-                    onClick: handleSectionVisibility,
-                    "aria-label": t("section_visibility"),
-                    disabled: isCreator ? false : true,
-                    children: isHidden ? /*#__PURE__*/_jsx(Hidden, {}) : /*#__PURE__*/_jsx(Show, {})
-                  })
-                })
-              }) : null
-            }), /*#__PURE__*/_jsx(Box, {
-              children: isCreator ? /*#__PURE__*/_jsx(Tooltip, {
-                title: t("move_section"),
-                children: /*#__PURE__*/_jsx(IconButton, {
-                  "data-handler-id": handlerId,
-                  style: {
-                    cursor: "move"
-                  },
-                  "aria-label": "Move Section",
-                  disabled: isCreator ? false : true,
-                  children: /*#__PURE__*/_jsx(DragHandle, {})
-                })
-              }) : null
-            })]
-          })]
-        })
-      }),
-      className: classes.root,
-      children: [/*#__PURE__*/_jsxs("div", {
-        className: classes.nested,
-        children: [/*#__PURE__*/_jsx(TopicList, {
-          t: t,
-          topics: topics,
-          isCreator: isCreator,
-          courseId: courseId,
-          sectionId: sectionId,
-          sectionIndex: index,
-          handleUpdateSectionTopic: handleUpdateSectionTopic,
-          handleDuplicateTopic: handleDuplicateTopic,
-          moveTopic: moveTopic,
-          isMember: isMember,
-          disableDrag: disableDrag,
-          courseSettings: courseSettings,
-          showViewTopicButton: showViewTopicButton,
-          isClassroomArchived: isClassroomArchived,
-          ...otherProps
-        }), isCreator && /*#__PURE__*/_jsxs(ListItem, {
-          button: true,
-          onClick: handleCreateTopic,
-          "data-cy": "create-topic",
-          children: [/*#__PURE__*/_jsx(ListItemIcon, {
-            children: /*#__PURE__*/_jsx(Add, {
-              className: classes.greenColor
-            })
-          }), /*#__PURE__*/_jsx(ListItemText, {
-            primary: t("add_new")
-          })]
-        })]
-      }), /*#__PURE__*/_jsx(UpdateSectionDialog, {
-        t: t,
-        section: section,
-        handleInputChange: handleSectionChange,
-        open: isUpdateSectionOpen,
-        handleClose: handleCloseUpdateSection,
-        handleSubmit: handleUpdateSection,
-        update: true
-      })]
-    }), /*#__PURE__*/_jsx(SelectClassroom, {
-      t: t,
-      open: isSelectClassroomDialogOpen,
-      handleClose: handleCloseSelectClassroomDialog,
-      title: t("select_a_classroom"),
-      teachClassrooms: teachClassrooms || [],
-      type: "section",
-      courseId: courseId,
-      sectionId: sectionId
-    })]
-  });
-}
-function SectionList({
-  sections = [],
-  handleUpdateSections,
-  handleUpdateCourseSection,
-  handleDeleteCourseSection,
-  handleDuplicateTopic,
-  handleUpdateSectionTopic,
-  teachClassrooms,
-  isCreator,
-  disableDrag,
-  courseSettings,
-  showViewTopicButton,
-  isClassroomArchived = false,
-  ...otherProps
-}) {
-  const onDropSection = () => {
-    handleUpdateSections(sections);
-  };
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: sections.map((section, index) => {
-      return /*#__PURE__*/_jsx(Section, {
-        index: index,
-        onDropSection: onDropSection,
-        handleUpdateCourseSection: handleUpdateCourseSection,
-        handleDeleteCourseSection: handleDeleteCourseSection,
-        handleUpdateSectionTopic: handleUpdateSectionTopic,
-        handleDuplicateTopic: handleDuplicateTopic,
-        teachClassrooms: teachClassrooms,
-        isCreator: isCreator,
-        courseSettings: courseSettings,
-        ...section,
-        ...otherProps,
-        disableDrag: disableDrag,
-        showViewTopicButton: showViewTopicButton,
-        isClassroomArchived: isClassroomArchived
-      }, section.sectionId);
-    })
-  });
-}
-function CourseOutline({
-  t = text => text,
-  sections = [],
-  completions = [],
-  isMember,
-  isCreator,
-  disableDrag,
-  courseId,
-  handleViewCourseTopic,
-  handleUpdateSectionTopic,
-  handleClickOpenCreateSection,
-  handleCreateCourseSectionTopic,
-  handleUpdateCourseSection,
-  handleDuplicateTopic,
-  handleDeleteCourseSectionTopic,
-  handleDeleteCourseSection,
-  handleUpdateSections,
-  handleDeleteSectionVideo,
-  handleUpdateTopics,
-  isPublic,
-  handleSwitchChange,
-  isLoading,
-  loading,
-  teachClassrooms,
-  courseSettings,
-  showViewTopicButton = true,
-  isClassroomArchived = false,
-  classroomId,
-  isChallengeModeStudent = false,
-  isReadWriteModeStudent = false,
-  ...otherProps
-}) {
-  const [percentageCompletion, setPercentageCompletion] = useState({
-    completed: 0,
-    total: 0,
-    percentage: 0
-  });
-  const [sects, setSects] = useState([]);
-  useEffect(() => {
-    if (isMember) {
-      const sectionsWithProgress = calcCompletions(sections, completions, null, isChallengeModeStudent, isReadWriteModeStudent);
-      const percentCompletion = calcPercentageCompletion(sectionsWithProgress);
-      setSects(sectionsWithProgress);
-      setPercentageCompletion(percentCompletion);
-    } else {
-      setSects(sections);
-      setPercentageCompletion({
-        completed: 0,
-        total: 0,
-        percentage: 0
-      });
-    }
-  }, [isMember, isChallengeModeStudent, isReadWriteModeStudent, JSON.stringify(sections), JSON.stringify(completions)]);
-  const moveSection = useCallback((dragIndex, hoverIndex) => {
-    const dragSection = sects[dragIndex];
-    const newSections = update(sects, {
-      $splice: [[dragIndex, 1], [hoverIndex, 0, {
-        ...dragSection,
-        idx: hoverIndex
-      }]]
-    });
-    setSects(newSections);
-  }, [sects]);
-  const moveTopic = useCallback((sectionIndex, dragIndex, hoverIndex) => {
-    const dragTopic = sects[sectionIndex].topics[dragIndex];
-    const newTopics = update(sects[sectionIndex].topics, {
-      $splice: [[dragIndex, 1], [hoverIndex, 0, {
-        ...dragTopic,
-        idx: hoverIndex
-      }]]
-    });
-    const newSections = update(sects, {
-      $splice: [[sectionIndex, 1], [sectionIndex, 0, {
-        ...sects[sectionIndex],
-        topics: newTopics
-      }]]
-    });
-    setSects(newSections);
-  }, [sects]);
-  const {
-    percentage,
-    completed,
-    total
-  } = percentageCompletion;
-  if (isLoading) {
-    return /*#__PURE__*/_jsx(_Fragment, {
-      children: Array(3).fill("").map((_, idx) => /*#__PURE__*/_jsxs("div", {
-        children: [/*#__PURE__*/_jsx(Box, {
-          sx: {
-            ml: 2,
-            py: 2
-          },
-          children: /*#__PURE__*/_jsx(Typography, {
-            variant: "h5",
-            component: "h2",
-            children: /*#__PURE__*/_jsx(Skeleton, {
-              variant: "rect",
-              height: 30,
-              width: 150
-            })
-          })
-        }), /*#__PURE__*/_jsx(Box, {
-          sx: {
-            ml: 4
-          },
-          children: Array(2).fill("").map((_, idy) => /*#__PURE__*/_jsxs(ListItem, {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-            children: [/*#__PURE__*/_jsx(ListItemAvatar, {
-              children: /*#__PURE__*/_jsx(Skeleton, {
-                variant: "circular",
-                height: 40,
-                width: 40
-              })
-            }), /*#__PURE__*/_jsx(Box, {
-              sx: {
-                fontWeight: "fontWeightBold",
-                width: "100%"
-              },
-              children: /*#__PURE__*/_jsx(ListItemText, {
-                primary: /*#__PURE__*/_jsx(Typography, {
-                  variant: "body1",
-                  children: /*#__PURE__*/_jsx(Skeleton, {
-                    variant: "rect",
-                    height: 40,
-                    width: "100%"
-                  })
-                })
-              })
-            })]
-          }, `section_${idx}_topic_${idy}`))
-        })]
-      }, `section_${idx}`))
-    });
-  }
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Typography, {
-      variant: "subtitle1",
-      children: /*#__PURE__*/_jsxs(Box, {
-        sx: {
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between"
-        },
-        children: [/*#__PURE__*/_jsx(Box, {
-          sx: {
-            fontWeight: "fontWeightBold"
-          },
-          children: isMember && !isCreator ? t("course_progress") : t(isCreator || isCreator && isMember ? "course_outline" : "course_progress")
-        }), isMember && !isCreator && /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx(Box, {
-            sx: {
-              display: "inline",
-              flexGrow: 1,
-              ml: 6
-            },
-            children: /*#__PURE__*/_jsx(Tooltip, {
-              title: `Completed ${completed} / ${total} exercises`,
-              children: /*#__PURE__*/_jsx(ColorLinearProgress, {
-                variant: "determinate",
-                value: percentage
-              })
-            })
-          }), /*#__PURE__*/_jsxs(Box, {
-            sx: {
-              ml: 1,
-              fontSize: 14
-            },
-            children: [percentage, "%"]
-          })]
-        }), /*#__PURE__*/_jsx(Box, {
-          children: isCreator && /*#__PURE__*/_jsx(Button, {
-            variant: "contained",
-            color: "primary",
-            onClick: handleClickOpenCreateSection,
-            size: "small",
-            "data-cy": "add-section",
-            children: t("add_section")
-          })
-        })]
-      })
-    }), /*#__PURE__*/_jsx(SectionList, {
-      t: t,
-      sections: sects,
-      completions: completions,
-      isMember: isMember,
-      courseId: courseId,
-      handleViewCourseTopic: handleViewCourseTopic,
-      handleCreateCourseSectionTopic: handleCreateCourseSectionTopic,
-      handleDeleteCourseSection: handleDeleteCourseSection,
-      handleUpdateCourseSection: handleUpdateCourseSection,
-      handleDuplicateTopic: handleDuplicateTopic,
-      handleDeleteCourseSectionTopic: handleDeleteCourseSectionTopic,
-      handleDeleteSectionVideo: handleDeleteSectionVideo,
-      handleUpdateSectionTopic: handleUpdateSectionTopic,
-      isCreator: isCreator,
-      moveSection: moveSection,
-      moveTopic: moveTopic,
-      handleUpdateSections: handleUpdateSections,
-      handleUpdateTopics: handleUpdateTopics,
-      isPublic: isPublic,
-      handleSwitchChange: handleSwitchChange,
-      teachClassrooms: teachClassrooms,
-      ...otherProps,
-      loading: loading,
-      disableDrag: disableDrag,
-      courseSettings: courseSettings,
-      showViewTopicButton: showViewTopicButton,
-      isClassroomArchived: isClassroomArchived,
-      classroomId: classroomId
-    })]
-  });
-}
-export default CourseOutline;