@nualang/nualang-ui-components 0.1.1419 → 0.1.1421

package/dist/Lists/ExerciseSelection/ExerciseSelection.js

@@ -5,174 +5,12 @@ import useMediaQuery from "@mui/material/useMediaQuery";
 import ImageSearchIcon from "@mui/icons-material/ImageSearch";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import ExpandLessIcon from "@mui/icons-material/ExpandLess";
-import ForumIcon from "@mui/icons-material/Forum";
+import DoneAllIcon from "@mui/icons-material/DoneAll";
 import OndemandVideoIcon from "@mui/icons-material/OndemandVideo";
-import RoleplaySelection from "../RoleplaySelection/RoleplaySelection";
+import RoleplaySelection, { isRoleplayPlayable, topicHasScenario } from "../RoleplaySelection/RoleplaySelection";
 import PhraseListSelection from "../PhraseListSelection/PhraseListSelection";
-import MenuBookIcon from '@mui/icons-material/MenuBook';
 import { CardInfoSectionItem } from "../../Cards/CardElements";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-function Exercise({
-  name,
-  description,
-  courseSectionTopicId,
-  handleCreateGame,
-  t,
-  isExerciseSelected,
-  roleplays,
-  handleSelectExercise = null,
-  useCase,
-  getPhraseLists,
-  courseId,
-  sectionId,
-  topicId,
-  setIsExerciseSelected,
-  phrases,
-  topicName
-}) {
-  const noRoleplays = name.toLowerCase() === "roleplays" && roleplays.length === 0;
-  const noPhrases = name.toLowerCase() === "phrases" && !phrases?.length && !getPhraseLists;
-  const [roleplaysOpen, setRoleplaysOpen] = useState(noRoleplays ? false : true);
-  const [phraseListsOpen, setPhraseListsOpen] = useState(noPhrases ? false : true);
-  const [hasPhraseListsAvailable, setHasPhraseListsAvailable] = useState(true);
-  const handlePhraseListsLoaded = count => {
-    if (count === 0) {
-      setHasPhraseListsAvailable(false);
-      setPhraseListsOpen(false);
-    }
-  };
-  const noPhraseListsAvailable = name.toLowerCase() === "phrases" && !hasPhraseListsAvailable;
-  return /*#__PURE__*/_jsxs(Tooltip, {
-    title: (name === "roleplays" && noRoleplays ? t("topic_no_roleplays") : "") || (name === "phrases" && noPhrases ? t("topic_no_phrases") : "") || (noPhraseListsAvailable ? t("no_phrase_lists") : ""),
-    children: [/*#__PURE__*/_jsxs(ListItemButton, {
-      onClick: () => {
-        if (name.toLowerCase() === "roleplays") {
-          setRoleplaysOpen(!roleplaysOpen);
-        } else if (name.toLowerCase() === "phrases") {
-          setPhraseListsOpen(!phraseListsOpen);
-        }
-      },
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "space-between",
-      disabled: isExerciseSelected || noRoleplays || noPhrases || noPhraseListsAvailable,
-      sx: theme => ({
-        [theme.breakpoints.up("sm")]: {
-          ml: 3.5
-        }
-      }),
-      children: [name.toLowerCase() === "phrases" && /*#__PURE__*/_jsx(ListItemIcon, {
-        children: /*#__PURE__*/_jsx(MenuBookIcon, {})
-      }), name.toLowerCase() === "roleplays" && /*#__PURE__*/_jsx(ListItemIcon, {
-        children: /*#__PURE__*/_jsx(ForumIcon, {})
-      }), /*#__PURE__*/_jsx(Box, {
-        sx: {
-          width: "100%"
-        },
-        children: /*#__PURE__*/_jsx(ListItemText, {
-          primary: t(name),
-          secondary: t(description)
-        })
-      }), name.toLowerCase() === "phrases" && /*#__PURE__*/_jsx(ListItemIcon, {
-        children: phraseListsOpen ? /*#__PURE__*/_jsx(ExpandLessIcon, {}) : /*#__PURE__*/_jsx(ExpandMoreIcon, {})
-      }), name.toLowerCase() === "roleplays" && /*#__PURE__*/_jsx(ListItemIcon, {
-        children: roleplaysOpen ? /*#__PURE__*/_jsx(ExpandLessIcon, {}) : /*#__PURE__*/_jsx(ExpandMoreIcon, {})
-      })]
-    }), name.toLowerCase() === "phrases" && getPhraseLists && /*#__PURE__*/_jsx(Collapse, {
-      in: phraseListsOpen,
-      timeout: "auto",
-      unmountOnExit: true,
-      children: /*#__PURE__*/_jsx(Box, {
-        sx: {
-          ml: 7
-        },
-        children: /*#__PURE__*/_jsx(PhraseListSelection, {
-          getPhraseLists: getPhraseLists,
-          courseId: courseId,
-          sectionId: sectionId,
-          topicId: topicId,
-          handleCreateGame: handleCreateGame,
-          courseSectionTopicId: courseSectionTopicId,
-          t: t,
-          isExerciseSelected: isExerciseSelected,
-          setIsExerciseSelected: setIsExerciseSelected,
-          isExpanded: phraseListsOpen,
-          onPhraseListsLoaded: handlePhraseListsLoaded,
-          topicName: topicName
-        })
-      })
-    }), name.toLowerCase() === "roleplays" && /*#__PURE__*/_jsx(Collapse, {
-      in: roleplaysOpen,
-      timeout: "auto",
-      unmountOnExit: true,
-      children: /*#__PURE__*/_jsx(Box, {
-        sx: {
-          ml: 7
-        },
-        children: /*#__PURE__*/_jsx(RoleplaySelection, {
-          roleplays: roleplays,
-          handleCreateGame: handleCreateGame,
-          courseSectionTopicId: courseSectionTopicId,
-          t: t,
-          isExerciseSelected: isExerciseSelected,
-          handleSelectExercise: handleSelectExercise,
-          useCase: useCase,
-          topicName: topicName
-        })
-      })
-    })]
-  });
-}
-function ExerciseList({
-  t,
-  exercises = [],
-  isMember,
-  courseId,
-  sectionId,
-  topicId,
-  handleCreateGame,
-  section,
-  isExerciseSelected,
-  setIsExerciseSelected,
-  roleplays,
-  phrases,
-  handleSelectExercise,
-  useCase,
-  handleStartExercise,
-  isCreator,
-  getPhraseLists,
-  ...otherProps
-}) {
-  const courseSectionTopicId = `${courseId}|${sectionId}|${topicId}`;
-  return /*#__PURE__*/_jsx(List, {
-    component: "div",
-    disablePadding: true,
-    children: exercises.map((exercise, i) => {
-      const keyId = `exerc_${courseSectionTopicId}_${exercise}_${i}`;
-      return /*#__PURE__*/_jsx(Exercise, {
-        t: t,
-        ...exercise,
-        isMember: isMember,
-        courseSectionTopicId: courseSectionTopicId,
-        handleCreateGame: handleCreateGame,
-        section: section,
-        isExerciseSelected: isExerciseSelected,
-        setIsExerciseSelected: setIsExerciseSelected,
-        roleplays: roleplays,
-        courseId: courseId,
-        sectionId: sectionId,
-        topicId: topicId,
-        phrases: phrases,
-        handleSelectExercise: handleSelectExercise,
-        useCase: useCase,
-        handleStartExercise: handleStartExercise,
-        isCreator: isCreator,
-        getPhraseLists: getPhraseLists,
-        ...otherProps
-      }, keyId);
-    })
-  });
-}
 function Topic({
   t,
   courseId,
@@ -183,41 +21,32 @@ function Topic({
   description,
   picture,
   roleplays = [],
-  bots = [],
-  completions = [],
-  isMember,
-  nextTopic,
-  prevTopic,
-  handleViewCourseTopic,
   isTopicHidden,
-  completion = {},
-  sectionIndex,
-  index,
-  moveTopic,
-  onDropSection,
-  handleCreateGame,
-  phrases,
-  section,
-  isExerciseSelected,
-  setIsExerciseSelected,
-  getRoleplays,
-  handleSelectExercise,
-  useCase,
-  handleStartExercise,
-  isCreator,
-  courseSectionTopicId,
+  sourceType = "phrases",
   getPhraseLists,
-  ...otherProps
+  selectedListIds,
+  onTogglePhraseList,
+  onToggleTopicAll,
+  selectedScenarioId,
+  onSelectScenario,
+  courseSectionTopicId
 }) {
   const theme = useTheme();
   const isLargeScreen = useMediaQuery(theme.breakpoints.up("sm"));
   const topicRef = useRef(null);
-  const [isExerciseListOpen, setExerciseListOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
   const [isFocused, setIsFocused] = useState(false);
+  // Enriched phrase lists for this topic, reported up by PhraseListSelection
+  // once loaded. Drives the subtitle and Select all / Clear all.
+  const [loadedLists, setLoadedLists] = useState(null);
+  const topicKey = `${courseId}|${sectionId}|${topicId}`;
+  const isPhrases = sourceType === "phrases";
+  const playableRoleplays = roleplays.filter(isRoleplayPlayable);
   useEffect(() => {
-    if (courseSectionTopicId.split("|")[0] === courseId && courseSectionTopicId.split("|")[1] === sectionId && courseSectionTopicId.split("|")[2] === topicId) {
+    const [cId, sId, tId] = courseSectionTopicId?.split("|") || [];
+    if (cId === courseId && sId === sectionId && tId === topicId) {
       setIsFocused(true);
-      setExerciseListOpen(true);
+      setIsOpen(true);
       const element = topicRef.current;
       if (element) {
         const dialogContent = document.querySelector(".MuiDialogContent-root");
@@ -233,31 +62,53 @@ function Topic({
       }
     }
   }, [courseSectionTopicId, courseId, sectionId, topicId]);
-  const exercises = [{
-    name: "phrases",
-    description: `phrases_exercise_desc`
-  }, {
-    name: "roleplays",
-    description: `roleplay_exercise_desc`
-  }];
-  const toggleExerciseList = () => {
-    setExerciseListOpen(!isExerciseListOpen);
-  };
-  const hasNonEmptyRoleplay = roleplays.some(roleplay => roleplay?.script?.length !== 0 && roleplay?.script?.some(line => line.text !== undefined));
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: /*#__PURE__*/_jsxs(Tooltip, {
-      title: !phrases?.length && !getPhraseLists ? t("topic_no_phrases") : "",
+  if (isTopicHidden) return null;
+  // In scenarios mode, drop topics that have no playable scenarios.
+  if (!isPhrases && !topicHasScenario(roleplays)) return null;
+  const noPhraseSource = isPhrases && !getPhraseLists;
+  const noScenarioSource = !isPhrases && playableRoleplays.length === 0;
+  const isTopicDisabled = noPhraseSource || noScenarioSource;
+  const selectedCount = isPhrases && loadedLists ? loadedLists.filter(l => selectedListIds?.has(l.phraseListId)).length : 0;
+  const listCount = loadedLists ? loadedLists.length : null;
+  const allSelected = isPhrases && listCount > 0 && selectedCount === listCount;
+  let subtitle = description;
+  if (isPhrases) {
+    if (listCount != null) {
+      subtitle = selectedCount ? t("n_of_m_lists_selected", {
+        n: selectedCount,
+        m: listCount
+      }) : t("n_phrase_lists", {
+        count: listCount
+      });
+    }
+  } else {
+    subtitle = t("n_scenarios", {
+      count: playableRoleplays.length
+    });
+  }
+  const showSelectAll = isPhrases && isOpen && listCount > 0;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Tooltip, {
+      title: noPhraseSource ? t("topic_no_phrases") : noScenarioSource ? t("topic_no_roleplays") : "",
       placement: "top",
-      children: [!isTopicHidden && /*#__PURE__*/_jsxs(ListItemButton, {
+      children: /*#__PURE__*/_jsxs(ListItemButton, {
         ref: topicRef,
         selected: isFocused,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-        onClick: toggleExerciseList,
+        onClick: () => setIsOpen(v => !v),
         "data-cy": "topic-list-item",
-        disabled: !phrases?.length && !getPhraseLists && !hasNonEmptyRoleplay || isExerciseSelected,
+        disabled: isTopicDisabled,
+        "aria-expanded": isOpen,
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          px: 2,
+          py: 1,
+          borderRadius: 1
+        },
         children: [isLargeScreen && /*#__PURE__*/_jsx(ListItemAvatar, {
+          sx: {
+            minWidth: 56
+          },
           children: picture ? /*#__PURE__*/_jsx(Avatar, {
             src: picture,
             alt: topicName
@@ -267,35 +118,12 @@ function Topic({
           })
         }), /*#__PURE__*/_jsxs(Box, {
           sx: {
-            fontWeight: "fontWeightBold",
-            width: "100%"
+            flex: 1,
+            minWidth: 0
           },
           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: topicName
-                }) : /*#__PURE__*/_jsx(Avatar, {
-                  alt: topicName,
-                  children: /*#__PURE__*/_jsx(ImageSearchIcon, {})
-                })
-              }), /*#__PURE__*/_jsx(Typography, {
-                variant: "body1",
-                children: topicName || ""
-              })]
-            }),
-            secondary: /*#__PURE__*/_jsx(_Fragment, {
-              children: /*#__PURE__*/_jsx(Typography, {
-                variant: "body2",
-                component: "p",
-                color: "textSecondary",
-                children: description
-              })
-            })
+            primary: topicName || "",
+            secondary: subtitle
           }), videoUrl && /*#__PURE__*/_jsx(Box, {
             sx: {
               display: "flex",
@@ -314,40 +142,81 @@ function Topic({
               })]
             })
           })]
+        }), showSelectAll && /*#__PURE__*/_jsxs(Box, {
+          role: "button",
+          onClick: e => {
+            e.stopPropagation();
+            onToggleTopicAll(loadedLists);
+          },
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            gap: 0.75,
+            px: 1,
+            py: 0.5,
+            borderRadius: "25px",
+            cursor: "pointer"
+          },
+          children: [/*#__PURE__*/_jsx(DoneAllIcon, {
+            sx: {
+              fontSize: 18,
+              color: "primary.main"
+            }
+          }), /*#__PURE__*/_jsx(Typography, {
+            variant: "body2",
+            sx: {
+              fontWeight: 600,
+              color: "primary.main"
+            },
+            children: allSelected ? t("clear_all") : t("select_all")
+          })]
         }), /*#__PURE__*/_jsx(ListItemIcon, {
-          children: isExerciseListOpen ? /*#__PURE__*/_jsx(ExpandLessIcon, {}) : /*#__PURE__*/_jsx(ExpandMoreIcon, {})
-        })]
-      }), /*#__PURE__*/_jsx(Collapse, {
-        in: isExerciseListOpen,
-        timeout: "auto",
-        unmountOnExit: true,
-        children: /*#__PURE__*/_jsx(ExerciseList, {
-          t: t,
-          topicInfo: {
-            topicName,
-            description
+          sx: {
+            minWidth: 56,
+            justifyContent: "flex-end"
           },
-          exercises: exercises,
-          isMember: isMember,
+          children: isOpen ? /*#__PURE__*/_jsx(ExpandLessIcon, {
+            sx: {
+              color: "text.secondary"
+            }
+          }) : /*#__PURE__*/_jsx(ExpandMoreIcon, {
+            sx: {
+              color: "text.secondary"
+            }
+          })
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Collapse, {
+      in: isOpen,
+      timeout: "auto",
+      unmountOnExit: true,
+      children: /*#__PURE__*/_jsxs(Box, {
+        sx: {
+          ml: 7
+        },
+        children: [isPhrases && getPhraseLists && /*#__PURE__*/_jsx(PhraseListSelection, {
+          getPhraseLists: getPhraseLists,
           courseId: courseId,
           sectionId: sectionId,
           topicId: topicId,
-          handleCreateGame: handleCreateGame,
-          section: section,
-          isExerciseSelected: isExerciseSelected,
-          setIsExerciseSelected: setIsExerciseSelected,
-          roleplays: roleplays,
-          phrases: phrases,
-          handleSelectExercise: handleSelectExercise,
-          useCase: useCase,
-          handleStartExercise: handleStartExercise,
-          isCreator: isCreator,
-          getPhraseLists: getPhraseLists,
+          courseSectionTopicId: topicKey,
+          t: t,
+          isExpanded: isOpen,
+          selectedListIds: selectedListIds,
+          onTogglePhraseList: onTogglePhraseList,
+          onPhraseListsLoaded: setLoadedLists,
           topicName: topicName,
-          ...otherProps
-        })
-      })]
-    })
+          topicVideoUrl: videoUrl
+        }), !isPhrases && /*#__PURE__*/_jsx(RoleplaySelection, {
+          roleplays: roleplays,
+          courseSectionTopicId: topicKey,
+          t: t,
+          selectedScenarioId: selectedScenarioId,
+          onSelectScenario: onSelectScenario,
+          topicName: topicName
+        })]
+      })
+    })]
   });
 }
 function Section({
@@ -357,171 +226,85 @@ function Section({
   sectionName,
   isHidden,
   topics = [],
-  handleCreateGame,
-  section,
-  isExerciseSelected,
-  setIsExerciseSelected,
-  getRoleplays,
-  handleSelectExercise,
-  useCase,
-  handleStartExercise,
-  isCreator,
-  courseSectionTopicId,
+  sourceType,
   getPhraseLists,
-  ...otherProps
+  selectedListIds,
+  onTogglePhraseList,
+  onToggleTopicAll,
+  selectedScenarioId,
+  onSelectScenario,
+  courseSectionTopicId
 }) {
-  const root = {
-    width: "100%"
-  };
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: !isHidden && /*#__PURE__*/_jsx(List, {
-      subheader: /*#__PURE__*/_jsx(ListSubheader, {
-        disableGutters: true,
-        disableSticky: true,
-        component: "div",
-        id: `${sectionName}-section-list-subheader`,
-        sx: {
-          fontWeight: !isExerciseSelected ? "bold" : "normal"
-        },
-        children: sectionName
-      }),
-      sx: root,
-      children: topics.map((topic, i) => /*#__PURE__*/_jsx(Topic, {
-        index: i,
-        topics: topics,
-        topicLength: topics.length,
-        sectionId: sectionId,
-        handleCreateGame: handleCreateGame,
-        courseId: courseId,
-        phrases: topic.phrases,
-        section: section,
-        t: t,
-        ...topic,
-        ...otherProps,
-        picture: topic.picture,
-        isExerciseSelected: isExerciseSelected,
-        setIsExerciseSelected: setIsExerciseSelected,
-        getRoleplays: getRoleplays,
-        handleSelectExercise: handleSelectExercise,
-        useCase: useCase,
-        handleStartExercise: handleStartExercise,
-        isCreator: isCreator,
-        courseSectionTopicId: courseSectionTopicId,
-        getPhraseLists: getPhraseLists
-      }, `${sectionId}-${topic.topicId}`))
-    })
-  });
-}
-function SectionList({
-  sections = [],
-  handleFetchTopic,
-  teachClassrooms,
-  handleCreateGame,
-  courseId,
-  t,
-  isExerciseSelected,
-  setIsExerciseSelected,
-  getRoleplays,
-  handleSelectExercise,
-  useCase,
-  handleStartExercise,
-  isCreator,
-  courseSectionTopicId,
-  getPhraseLists,
-  ...otherProps
-}) {
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: sections.length > 0 ? sections.map((section, index) => {
-      return /*#__PURE__*/_jsx(Section, {
-        index: index,
-        handleFetchTopic: handleFetchTopic,
-        teachClassrooms: teachClassrooms,
-        handleCreateGame: handleCreateGame,
-        courseId: courseId,
-        t: t,
-        ...section,
-        isExerciseSelected: isExerciseSelected,
-        setIsExerciseSelected: setIsExerciseSelected,
-        section: section,
-        getRoleplays: getRoleplays,
-        handleSelectExercise: handleSelectExercise,
-        useCase: useCase,
-        handleStartExercise: handleStartExercise,
-        isCreator: isCreator,
-        courseSectionTopicId: courseSectionTopicId,
-        getPhraseLists: getPhraseLists,
-        ...otherProps
-      }, section.sectionId);
-    }) : /*#__PURE__*/_jsx(Typography, {
-      children: t("sections_not_found")
-    })
+  if (isHidden) return null;
+  // In scenarios mode, only show topics that actually have scenarios; if the
+  // whole section has none, hide the section (and its subheader) entirely.
+  const visibleTopics = sourceType === "scenarios" ? topics.filter(tp => topicHasScenario(tp.roleplays)) : topics;
+  if (visibleTopics.length === 0) return null;
+  return /*#__PURE__*/_jsx(List, {
+    subheader: /*#__PURE__*/_jsx(ListSubheader, {
+      disableGutters: true,
+      disableSticky: true,
+      component: "div",
+      id: `${sectionName}-section-list-subheader`,
+      sx: {
+        fontWeight: "bold"
+      },
+      children: sectionName
+    }),
+    sx: {
+      width: "100%"
+    },
+    children: visibleTopics.map(topic => /*#__PURE__*/_jsx(Topic, {
+      sectionId: sectionId,
+      courseId: courseId,
+      t: t,
+      ...topic,
+      picture: topic.picture,
+      sourceType: sourceType,
+      getPhraseLists: getPhraseLists,
+      selectedListIds: selectedListIds,
+      onTogglePhraseList: onTogglePhraseList,
+      onToggleTopicAll: onToggleTopicAll,
+      selectedScenarioId: selectedScenarioId,
+      onSelectScenario: onSelectScenario,
+      courseSectionTopicId: courseSectionTopicId
+    }, `${sectionId}-${topic.topicId}`))
   });
 }
 function ExerciseSelection({
   t = text => text,
   sections = [],
-  isMember,
-  isCreator,
   courseId,
-  handleFetchTopic,
-  isPublic,
-  handleSwitchChange,
   isLoading,
-  teachClassrooms,
-  handleCreateGame,
-  isExerciseSelected,
-  setIsExerciseSelected,
-  getRoleplays,
-  handleSelectExercise,
-  useCase,
-  handleStartExercise,
-  courseSectionTopicId,
+  sourceType = "phrases",
   getPhraseLists,
-  ...otherProps
+  selectedListIds,
+  onTogglePhraseList,
+  onToggleTopicAll,
+  selectedScenarioId,
+  onSelectScenario,
+  courseSectionTopicId
 }) {
-  if (isLoading) {
-    return /*#__PURE__*/_jsx(_Fragment, {
-      children: /*#__PURE__*/_jsx(SectionList, {
-        t: t,
-        sections: sections,
-        isMember: isMember,
-        courseId: courseId,
-        handleFetchTopic: handleFetchTopic,
-        isCreator: isCreator,
-        isPublic: isPublic,
-        handleSwitchChange: handleSwitchChange,
-        teachClassrooms: teachClassrooms,
-        handleCreateGame: handleCreateGame,
-        isExerciseSelected: isExerciseSelected,
-        setIsExerciseSelected: setIsExerciseSelected,
-        getRoleplays: getRoleplays,
-        handleStartExercise: handleStartExercise,
-        courseSectionTopicId: courseSectionTopicId,
-        getPhraseLists: getPhraseLists,
-        ...otherProps
-      })
+  if (!isLoading && sections.length === 0) {
+    return /*#__PURE__*/_jsx(Typography, {
+      children: t("sections_not_found")
     });
   }
   return /*#__PURE__*/_jsx(_Fragment, {
-    children: /*#__PURE__*/_jsx(SectionList, {
-      t: t,
-      sections: sections,
-      isMember: isMember,
+    children: sections.map(section => /*#__PURE__*/_jsx(Section, {
       courseId: courseId,
-      handleFetchTopic: handleFetchTopic,
-      isCreator: isCreator,
-      isPublic: isPublic,
-      handleSwitchChange: handleSwitchChange,
-      teachClassrooms: teachClassrooms,
-      handleCreateGame: handleCreateGame,
-      isExerciseSelected: isExerciseSelected,
-      setIsExerciseSelected: setIsExerciseSelected,
-      handleSelectExercise: handleSelectExercise,
-      useCase: useCase,
-      courseSectionTopicId: courseSectionTopicId,
+      t: t,
+      ...section,
+      section: section,
+      sourceType: sourceType,
       getPhraseLists: getPhraseLists,
-      ...otherProps
-    })
+      selectedListIds: selectedListIds,
+      onTogglePhraseList: onTogglePhraseList,
+      onToggleTopicAll: onToggleTopicAll,
+      selectedScenarioId: selectedScenarioId,
+      onSelectScenario: onSelectScenario,
+      courseSectionTopicId: courseSectionTopicId
+    }, section.sectionId))
   });
 }
 export default ExerciseSelection;