@nualang/nualang-ui-components 0.1.1214 → 0.1.1216

package/dist/Dialogs/CreateAssignmentScreen/CreateAssignmentScreen.js

@@ -16,6 +16,8 @@ var _mui = require("tss-react/mui");
 var _ArrowDropDown = _interopRequireDefault(require("@mui/icons-material/ArrowDropDown"));
 var _ArrowDropUp = _interopRequireDefault(require("@mui/icons-material/ArrowDropUp"));
 var _dayjs = _interopRequireDefault(require("dayjs"));
+var _SelectExercise = _interopRequireDefault(require("../SelectExercise/SelectExercise"));
+var _Queries = require("@nualang/nualang-api-and-queries/Queries");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -39,20 +41,92 @@ function Transition(props) {
 function CreateAssignmentScreen({
   t,
   classrooms = [],
+  classroom,
+  getClassroomMembers,
   open,
-  handleClose
+  handleClose,
+  getCourseSections,
+  getRoleplays,
+  createAssignment,
+  username,
+  getMemberDetails,
+  getClassroom,
+  getCourses
 }) {
   const {
     classes
   } = useStyles();
+  const [selectedExercises, setSelectedExercises] = (0, _react.useState)([]);
+  const [members, setMembers] = (0, _react.useState)([]);
   const [assignment, setAssignment] = (0, _react.useState)({
-    classroom: "",
-    students: [],
+    classroomId: "",
+    assignedStudents: members?.map(member => member.memberId),
     title: "",
-    description: "",
-    assignDate: (0, _dayjs.default)(),
-    dueDate: (0, _dayjs.default)().add(1, "day")
+    instructions: "",
+    type: "assignment",
+    scheduleDate: (0, _dayjs.default)(),
+    dueDate: (0, _dayjs.default)().add(1, "day"),
+    exercises: selectedExercises
   });
+  const classroomQuery = _Queries.classrooms.useClassroom(async classroomId => {
+    const response = await getClassroom(classroomId);
+    return response;
+  }, {
+    classroomId: assignment.classroomId
+  }, {
+    enabled: !!assignment.classroomId
+  });
+  const selectedClassroom = (0, _react.useMemo)(() => classroomQuery.isSuccess && classroomQuery.data.Item ? classroomQuery.data.Item : {}, [classroomQuery.data, classroomQuery.isSuccess]);
+  const coursesQuery = _Queries.courses.useCourses(async filters => {
+    const response = await getCourses(filters);
+    return response;
+  }, {
+    filters: {
+      courseIds: selectedClassroom?.courses?.toString()
+    }
+  }, {
+    enabled: !!assignment.classroomId
+  });
+  const membersQuery = _Queries.classrooms.useClassroomMembers(async (classroomId, username) => {
+    const response = await getClassroomMembers(classroomId, username);
+    return response;
+  }, {
+    classroomId: assignment.classroomId,
+    username: username
+  }, {
+    enabled: !!assignment.classroomId
+  });
+  const selectedCourses = (0, _react.useMemo)(() => coursesQuery.isSuccess && Array.isArray(coursesQuery.data.Items) && coursesQuery.data.Items.length ? coursesQuery.data.Items : [], [coursesQuery.data, coursesQuery.isSuccess]);
+  const selectedMembers = (0, _react.useMemo)(() => membersQuery.isSuccess && Array.isArray(membersQuery.data.Items) && membersQuery.data.Items.length ? membersQuery.data.Items : [], [membersQuery.data, membersQuery.isSuccess]);
+  const classroomMembers = async selectedMembers => {
+    const formattedMembers = await getMemberDetails(selectedMembers);
+    setMembers(formattedMembers);
+  };
+  (0, _react.useEffect)(() => {
+    classroomMembers(selectedMembers);
+  }, [selectedMembers]);
+  (0, _react.useEffect)(() => {
+    setAssignment(prev => ({
+      ...prev,
+      exercises: selectedExercises
+    }));
+  }, [selectedExercises]);
+  (0, _react.useEffect)(() => {
+    setAssignment(prev => ({
+      ...prev,
+      assignedStudents: members?.map(member => member.memberId)
+    }));
+  }, [members]);
+  (0, _react.useEffect)(() => {
+    setAssignment(prev => ({
+      ...prev,
+      classroomId: classroom
+    }));
+  }, [classroom]);
+  const [isSelectExerciseOpen, setIsSelectExerciseOpen] = (0, _react.useState)(false);
+  const handleCloseSelectExercise = () => {
+    setIsSelectExerciseOpen(false);
+  };
   const [anchorEl, setAnchorEl] = (0, _react.useState)(null);
   const handleMenuOpen = event => {
     setAnchorEl(event.currentTarget);
@@ -63,17 +137,17 @@ function CreateAssignmentScreen({
   const handleChange = field => event => {
     let value = event?.target?.value ?? event;
     setAssignment(prev => {
-      if (field === "students") {
+      if (field === "assignedStudents") {
         return {
           ...prev,
-          students: typeof value === "string" ? value.split(",") : value
+          assignedStudents: typeof value === "string" ? value.split(",") : value
         };
       }
       if (field === "classroom") {
         return {
           ...prev,
-          classroom: value,
-          students: []
+          classroomId: value,
+          assignedStudents: []
         };
       }
       return {
@@ -82,8 +156,10 @@ function CreateAssignmentScreen({
       };
     });
   };
-  const selectedClassroom = classrooms.find(c => c.id === assignment.classroom);
-  const studentsInClassroom = selectedClassroom ? selectedClassroom.students : [];
+  const handleCreateAssignment = () => {
+    createAssignment(assignment);
+    handleClose();
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Dialog, {
     fullScreen: true,
     open: open,
@@ -102,7 +178,6 @@ function CreateAssignmentScreen({
           variant: "h5",
           fontWeight: "bold",
           textAlign: "center",
-          mb: 1,
           children: t("create_assignment")
         })]
       })
@@ -129,30 +204,47 @@ function CreateAssignmentScreen({
             variant: "outlined",
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.InputLabel, {
               id: "classroom-label",
+              required: true,
               children: t("select_classroom")
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Select, {
               labelId: "classroom-label",
               id: "classroom",
-              value: assignment.classroom,
+              value: assignment.classroomId,
               label: t("select_classroom"),
-              onChange: handleChange("classroom"),
+              onChange: handleChange("classroomId"),
+              required: true,
+              disabled: classroom,
               children: classrooms.map(classroom => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
-                value: classroom.id,
-                children: classroom.name
-              }, classroom.id))
+                value: classroom.classroomId,
+                children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+                  sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 0.5
+                  },
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemAvatar, {
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Avatar, {
+                      src: classroom.picture
+                    })
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
+                    primary: classroom.classroomName
+                  })]
+                })
+              }, classroom.classroomId))
             })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, {
             label: t("assignment_title"),
             fullWidth: true,
             value: assignment.title,
-            onChange: handleChange("title")
+            onChange: handleChange("title"),
+            required: true
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, {
             label: t("assignment_description"),
             fullWidth: true,
             multiline: true,
             rows: 3,
-            value: assignment.description,
-            onChange: handleChange("description")
+            value: assignment.instructions,
+            onChange: handleChange("instructions")
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
             variant: "outlined",
             color: "primary",
@@ -160,6 +252,7 @@ function CreateAssignmentScreen({
               width: "fit-content"
             },
             startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Add.default, {}),
+            onClick: () => setIsSelectExerciseOpen(true),
             children: t("add_exercise")
           })]
         })
@@ -180,31 +273,33 @@ function CreateAssignmentScreen({
           },
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.FormControl, {
             fullWidth: true,
-            disabled: !assignment.classroom,
+            disabled: !assignment.classroomId,
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.InputLabel, {
-              id: "students-label",
-              children: t("select_students")
+              id: "members-label",
+              required: true,
+              children: t("select_members")
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Select, {
-              labelId: "students-label",
-              id: "students",
-              label: t("select_students"),
+              labelId: "members-label",
+              id: "assignedStudents",
+              label: t("select_members"),
               multiple: true,
-              value: assignment.students,
-              onChange: handleChange("students"),
-              renderValue: selected => studentsInClassroom.filter(student => selected.includes(student.id)).map(s => s.name).join(", "),
-              children: studentsInClassroom.map(student => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
-                value: student.id,
+              required: true,
+              value: assignment.assignedStudents,
+              onChange: handleChange("assignedStudents"),
+              renderValue: selected => selected.map(memberId => members?.find(member => member.memberId === memberId)).map(member => member?.username).join(", "),
+              children: members?.map(member => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
+                value: member.memberId,
                 children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Avatar, {
-                  src: student.userImage,
+                  src: member.userImage,
                   sx: {
                     mr: 2
                   }
                 }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
-                  primary: student.name
+                  primary: member.username
                 }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Checkbox, {
-                  checked: assignment.students.includes(student.id)
+                  checked: assignment.assignedStudents?.includes(member.memberId)
                 })]
-              }, student.id))
+              }, member.memberId))
             })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LocalizationProvider.LocalizationProvider, {
             dateAdapter: _AdapterDayjs.AdapterDayjs,
@@ -236,6 +331,7 @@ function CreateAssignmentScreen({
         sx: {
           marginRight: 2
         },
+        onClick: handleClose,
         children: t("cancel")
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ButtonGroup, {
         variant: "contained",
@@ -244,7 +340,8 @@ function CreateAssignmentScreen({
           borderRadius: 10
         },
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
-          disabled: !assignment.students.length || !assignment.assignDate || !assignment.dueDate || !assignment.title || !assignment.classroom,
+          disabled: !assignment.assignedStudents?.length || !assignment.scheduleDate || !assignment.dueDate || !assignment.title || !assignment.classroomId || !assignment.exercises?.length,
+          onClick: handleCreateAssignment,
           children: t("assign")
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
           color: "primary",
@@ -253,7 +350,7 @@ function CreateAssignmentScreen({
             minWidth: "40px",
             padding: "6px"
           },
-          disabled: !assignment.students.length || !assignment.assignDate || !assignment.dueDate || !assignment.title || !assignment.classroom,
+          disabled: !assignment.assignedStudents?.length || !assignment.scheduleDate || !assignment.dueDate || !assignment.title || !assignment.classroomId || !assignment.exercises?.length,
           children: anchorEl ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ArrowDropUp.default, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ArrowDropDown.default, {})
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Popover, {
@@ -278,21 +375,39 @@ function CreateAssignmentScreen({
             dateAdapter: _AdapterDayjs.AdapterDayjs,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DatePicker.DatePicker, {
               label: t("assign_date"),
-              value: assignment.assignDate,
+              value: assignment.scheduleDate,
               onChange: date => setAssignment(prev => ({
                 ...prev,
-                assignDate: date
+                scheduleDate: date
               }))
             })
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
             variant: "outlined",
             color: "primary",
             fullWidth: true,
+            onClick: () => {
+              handleCreateAssignment;
+              handleMenuClose();
+            },
             children: t("schedule_assignment")
           })]
         })
       })]
-    }), ";"]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectExercise.default, {
+      t: t,
+      open: isSelectExerciseOpen,
+      handleClose: handleCloseSelectExercise,
+      courses: selectedCourses,
+      getCourseSections: getCourseSections,
+      getRoleplays: getRoleplays,
+      username: username,
+      useCase: "assignment",
+      selectedExercises: selectedExercises,
+      setSelectedExercises: setSelectedExercises,
+      isAssignment: true
+    }), selectedExercises?.map(exercise => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
+      children: [exercise.name ? exercise.name : exercise.game, " | ", exercise.courseSectionTopicId ? exercise.courseSectionTopicId : exercise.roleplayId]
+    }))]
   });
 }
 CreateAssignmentScreen.propTypes = {

package/dist/Dialogs/SelectExercise/SelectExercise.js

@@ -20,10 +20,12 @@ function SelectExercise({
   getRoleplays,
   handleCreateGame,
   username,
-  useCase = "live"
+  useCase = "live",
+  selectedExercises = [],
+  setSelectedExercises,
+  isAssignment
 }) {
   const [isExerciseSelected, setIsExerciseSelected] = (0, _react.useState)(false);
-  const [selectedExercises, setSelectedExercises] = (0, _react.useState)([]);
   const handleSelectExercise = (exercises = []) => {
     setSelectedExercises(prevSelectedExercises => {
       let updatedExercises = [...prevSelectedExercises];
@@ -39,12 +41,18 @@ function SelectExercise({
       return updatedExercises;
     });
   };
+  const handleSubmitExercises = () => {
+    setSelectedExercises(selectedExercises);
+    handleClose();
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ResponsiveDialog.default, {
     open: open,
     handleClose: handleClose,
     dialogTitle: useCase === "live" ? t("play_live") : t("assignment"),
     maxWidth: "md",
-    handleSubmit: useCase === "live" ? null : () => {},
+    handleSubmit: useCase === "live" ? null : () => {
+      handleSubmitExercises();
+    },
     submitText: useCase === "live" ? null : t("add_exercises"),
     isSubmitDisabled: selectedExercises.length === 0,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.DialogContentText, {
@@ -63,7 +71,8 @@ function SelectExercise({
         isDialogOpen: open,
         useCase: useCase,
         selectedExercises: selectedExercises,
-        handleSelectExercise: useCase === "assignment" ? handleSelectExercise : null
+        handleSelectExercise: useCase === "assignment" ? handleSelectExercise : null,
+        isAssignment: isAssignment
       })
     })]
   });

package/dist/Lists/AssignmentCardsList/AssignmentCardsList.js

@@ -42,13 +42,15 @@ const AssignmentCardsList = ({
         }), !isCreator ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
           sx: {
             textAlign: "center",
-            mt: 2
+            mt: 2,
+            width: '70%'
           },
           children: t("no_assignments_description")
         }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
           sx: {
             textAlign: "center",
-            mt: 2
+            mt: 2,
+            width: '70%'
           },
           children: t("assignments_description")
         }), isCreator && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {

package/dist/Lists/ExerciseSelection/ExerciseSelection.js

@@ -111,7 +111,7 @@ function Exercise({
       }), name.toLowerCase() === "roleplays" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemIcon, {
         children: roleplaysOpen ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandLess.default, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandMore.default, {})
       }), (name.toLowerCase() === "listening" || name.toLowerCase() === "translation" || name.toLowerCase() === "pronunciation") && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemIcon, {
-        children: isAssignment ? isCreator ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Checkbox, {
+        children: isAssignment ? useCase === "assignment" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Checkbox, {
           checked: isAssignmentExerciseSelected,
           onClick: event => {
             event.stopPropagation();

package/dist/Screens/Classrooms/ViewClassroom/ViewClassroom.js

@@ -1067,6 +1067,24 @@ function Classroom({
     tabIndex: tabs.findIndex(tab => tab.id === "Discuss"),
     variant: "extended"
   };
+  const assignmentsFab = {
+    color: "primary",
+    loading,
+    className: null,
+    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Add.default, {
+      sx: {
+        mr: 1
+      }
+    }),
+    buttonText: t("create_assignment"),
+    id: "assignments-fab",
+    onClick: () => {
+      handleCreateAssignment();
+    },
+    title: t("create_assignment"),
+    tabIndex: tabs.findIndex(tab => tab.id === "Assignments"),
+    variant: "extended"
+  };
   const fabs = [[{
     color: "primary",
     className: null,
@@ -1076,7 +1094,7 @@ function Classroom({
     title: t("add_courses"),
     tabIndex: tabs.findIndex(tab => tab.id === "Courses"),
     variant: "circular"
-  }, vchatFab]];
+  }, vchatFab, assignmentsFab]];
   let initialTabValue;
   if (window.location.hash) {
     const selectedTab = window.location.hash;

package/dist/Screens/Dashboard/Dashboard.js

@@ -62,7 +62,7 @@ const CategoryListComponent = ({
   const isCategoriesLoading = categoriesQuery.isLoading;
   const categories = categoriesQuery.isSuccess && Array.isArray(categoriesQuery.data.Items) && categoriesQuery.data.Items.length ? categoriesQuery.data.Items : [];
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: process.env.REACT_APP_STAGE === "dev" && (isCategoriesLoading || categories.length > 0) ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.default.Fragment, {
+    children: isCategoriesLoading || categories.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.default.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
         pb: 2,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

package/dist/hooks/useRecognition.js

@@ -154,12 +154,22 @@ function useRecognition(props = {}) {
    */
   const initRecording = async (gcloudParams, onData, onError) => {
     try {
+      const {
+        mediaDevices
+      } = navigator;
+      const [availableMicrophones, activeMicrophone, sampleRate] = await (0, _index.getMicrophoneInfo)(mediaDevices);
       await setupAudioContext();
+      let sampleRateToUse = sampleRate;
+      if (sampleRate && sampleRate < 8000) {
+        sampleRateToUse = 8000;
+      } else if (sampleRate && sampleRate > 48000) {
+        sampleRateToUse = 48000;
+      }
       const handleSuccess = function (stream) {
         const gcloudConfig = {
           config: {
             encoding: "LINEAR16",
-            sampleRateHertz: 16000,
+            sampleRateHertz: sampleRateToUse || 16000,
             languageCode: gcloudParams.languageCode || "en-US",
             profanityFilter: true,
             enableWordTimeOffsets: false,
@@ -172,7 +182,6 @@ function useRecognition(props = {}) {
           interimResults: gcloudParams.interimResults // If you want interim results, set this to true
         };
         socket.emit("startGoogleCloudStream", gcloudConfig, version); // init socket Google Speech Connection
-
         streamRef.current = stream;
         audioInputRef.current = audioContextRef.current.createMediaStreamSource(stream);
         serverErrorRef.current = null;

package/dist/utils/index.js

@@ -454,7 +454,12 @@ const getMicrophoneInfo = async mediaDevices => {
     const availableMicrophoneNames = microphones?.filter(device => device.deviceId !== "default").map(device => device.label).join(", ") || "No available microphones detected";
     const activeMicrophone = microphones?.length > 0 ? microphones.find(mic => mic.deviceId === "default") || microphones[0] : null;
     const activeMicrophoneName = activeMicrophone?.label.split("Default - ").pop() || "No active microphone detected";
-    return [availableMicrophoneNames, activeMicrophoneName];
+
+    // Create an AudioContext with the stream from the active microphone
+
+    const capabilities = activeMicrophone.getCapabilities();
+    let sampleRate = capabilities?.sampleRate?.max || capabilities?.sampleRate?.exact;
+    return [availableMicrophoneNames, activeMicrophoneName, sampleRate];
   } catch (error) {
     console.error("Error accessing the microphone:", error);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nualang/nualang-ui-components",
-  "version": "0.1.1214",
+  "version": "0.1.1216",
   "main": "dist/index.js",
   "files": [
     "dist",