@selfcommunity/react-ui 0.10.2-courses.176 → 0.10.2-courses.178

package/lib/cjs/components/CourseDashboard/Student.js

@@ -118,21 +118,33 @@ function Student(inProps) {
     const handleRequest = (0, react_1.useCallback)(() => {
         setLoadingRequest(true);
         let request;
-        let updatedCourse;
         if (sentRequest) {
             request = api_services_1.CourseService.leaveOrRemoveCourseRequest(scCourse.id);
-            updatedCourse = Object.assign(Object.assign({}, scCourse), { join_status: null });
         }
         else {
             request = api_services_1.CourseService.joinOrAcceptInviteToCourse(scCourse.id);
-            updatedCourse = Object.assign(Object.assign({}, scCourse), { join_status: scCourse.privacy === types_1.SCCoursePrivacyType.PRIVATE ? types_1.SCCourseJoinStatusType.REQUESTED : types_1.SCCourseJoinStatusType.JOINED });
         }
         request
-            .then(() => {
+            .then((data) => {
+            let updatedCourse;
+            if (data) {
+                updatedCourse = data;
+            }
+            else {
+                updatedCourse = Object.assign(Object.assign({}, scCourse), { join_status: null });
+            }
             setSCCourse(updatedCourse);
             setSentRequest((prev) => !prev);
             setLoadingRequest(false);
-            enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: sentRequest ? SNACKBAR_MESSAGES.request : scCourse.join_status === null ? SNACKBAR_MESSAGES.enroll : SNACKBAR_MESSAGES.cancel, defaultMessage: sentRequest ? SNACKBAR_MESSAGES.request : scCourse.join_status === null ? SNACKBAR_MESSAGES.enroll : SNACKBAR_MESSAGES.cancel }), {
+            enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: updatedCourse.join_status === types_1.SCCourseJoinStatusType.REQUESTED
+                    ? SNACKBAR_MESSAGES.request
+                    : updatedCourse.join_status === types_1.SCCourseJoinStatusType.JOINED
+                        ? SNACKBAR_MESSAGES.enroll
+                        : SNACKBAR_MESSAGES.cancel, defaultMessage: updatedCourse.join_status === types_1.SCCourseJoinStatusType.REQUESTED
+                    ? SNACKBAR_MESSAGES.request
+                    : updatedCourse.join_status === types_1.SCCourseJoinStatusType.JOINED
+                        ? SNACKBAR_MESSAGES.enroll
+                        : SNACKBAR_MESSAGES.cancel }), {
                 variant: 'success',
                 autoHideDuration: 3000
             });

package/lib/cjs/components/EditCourse/Lessons/LessonRow.js

@@ -16,8 +16,8 @@ const notistack_1 = require("notistack");
 const react_core_1 = require("@selfcommunity/react-core");
 const Errors_1 = require("../../../constants/Errors");
 const types_1 = require("../types");
-const hooks_1 = require("../hooks");
 const ConfirmDialog_1 = tslib_1.__importDefault(require("../../../shared/ConfirmDialog/ConfirmDialog"));
+const hooks_1 = require("../hooks");
 const classes = {
     cellWidth: `${constants_1.PREFIX}-cell-width`,
     cellAlignRight: `${constants_1.PREFIX}-cell-align-right`,
@@ -42,7 +42,7 @@ function LessonRow(props) {
     // CONTEXTS
     const scRoutingContext = (0, react_core_1.useSCRouting)();
     // HOOKS
-    const { isDisabled } = (0, hooks_1.useDisabled)();
+    const { isDisabled } = (0, hooks_1.useIsDisabled)();
     const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
     // HANDLERS
     const handleAbleEditMode = (0, react_1.useCallback)(() => setTimeout(() => setEditMode(true)), [setEditMode]);

package/lib/cjs/components/EditCourse/Lessons/SectionRow.js

@@ -40,7 +40,7 @@ function SectionRow(props) {
     const [editMode, setEditMode] = (0, react_1.useState)(false);
     const [lessons, setLessons] = (0, react_1.useState)([]);
     // HOOKS
-    const { isDisabled } = (0, hooks_1.useDisabled)();
+    const { isDisabled } = (0, hooks_1.useIsDisabled)();
     const intl = (0, react_intl_1.useIntl)();
     const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
     // EFFECTS
@@ -144,6 +144,6 @@ function SectionRow(props) {
                                     ? api_services_1.Endpoints.CreateCourseSection.url({ id: course.id })
                                     : api_services_1.Endpoints.PatchCourseSection.url({ id: course.id, section_id: section.id }),
                                 method: isNewRow ? api_services_1.Endpoints.CreateCourseSection.method : api_services_1.Endpoints.PatchCourseSection.method
-                            }, row: section, isNewRow: isNewRow, handleManageRow: handleManageSection, editMode: editMode, handleDisableEditMode: handleDisableEditMode }) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ className: classes.cellAlignCenter }, { children: isDisabled ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: false, variant: "rectangular", width: "250px", height: "38px", sx: { margin: 'auto', borderRadius: '5px' } })) : ((0, jsx_runtime_1.jsx)(LessonReleaseMenu_1.default, { course: course, section: section })) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ className: classes.cellAlignRight }, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.actionsWrapper }, { children: [(0, jsx_runtime_1.jsx)(AddButton_1.default, { label: "ui.editCourse.tab.lessons.table.lesson", handleAddRow: handleAddTempLesson, color: "primary", variant: "outlined", disabled: isDisabled }), (0, jsx_runtime_1.jsxs)(MenuRow_1.default, Object.assign({ disabled: isDisabled }, { children: [(0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ onClick: handleAbleEditMode }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editCourse.tab.lessons.table.menu.rename", defaultMessage: "ui.editCourse.tab.lessons.table.menu.rename" }) })) })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ onClick: handleOpenDialog }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editCourse.tab.lessons.table.menu.delete", defaultMessage: "ui.editCourse.tab.lessons.table.menu.delete" }) })) }))] }))] })) }))] })), (0, jsx_runtime_1.jsx)(material_1.TableRow, { children: (0, jsx_runtime_1.jsxs)(material_1.TableCell, Object.assign({ className: classes.tableBodyCollapseWrapper, colSpan: 4 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Collapse, Object.assign({ in: expand, timeout: "auto", unmountOnExit: true }, { children: (0, jsx_runtime_1.jsx)(dnd_1.DragDropContext, Object.assign({ onDragEnd: handleDragEnd }, { children: (0, jsx_runtime_1.jsx)(material_1.Table, { children: (0, jsx_runtime_1.jsx)(dnd_1.Droppable, Object.assign({ droppableId: "droppable-2" }, { children: (outerProvider) => ((0, jsx_runtime_1.jsxs)(material_1.TableBody, Object.assign({ ref: outerProvider.innerRef }, outerProvider.droppableProps, { children: [lessons.map((lesson, i, array) => ((0, jsx_runtime_1.jsx)(dnd_1.Draggable, Object.assign({ draggableId: i.toString(), index: i, isDragDisabled: isDisabled }, { children: (innerProvider) => ((0, jsx_runtime_1.jsx)(LessonRow_1.default, { provider: innerProvider, course: course, section: section, lesson: lesson, isNewRow: isNewLocalRow && i + 1 === array.length, handleManageLesson: handleManageLesson }, i)) }), i))), outerProvider.placeholder] }))) })) }) })) })), open && (0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { open: true, onClose: handleOpenDialog, onConfirm: handleDeleteSection })] })) })] }));
+                            }, row: section, isNewRow: isNewRow, handleManageRow: handleManageSection, editMode: editMode, handleDisableEditMode: handleDisableEditMode }) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ className: classes.cellAlignCenter }, { children: (0, jsx_runtime_1.jsx)(LessonReleaseMenu_1.default, { course: course, section: section }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ className: classes.cellAlignRight }, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.actionsWrapper }, { children: [(0, jsx_runtime_1.jsx)(AddButton_1.default, { label: "ui.editCourse.tab.lessons.table.lesson", handleAddRow: handleAddTempLesson, color: "primary", variant: "outlined", disabled: isDisabled }), (0, jsx_runtime_1.jsxs)(MenuRow_1.default, Object.assign({ disabled: isDisabled }, { children: [(0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ onClick: handleAbleEditMode }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editCourse.tab.lessons.table.menu.rename", defaultMessage: "ui.editCourse.tab.lessons.table.menu.rename" }) })) })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ onClick: handleOpenDialog }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editCourse.tab.lessons.table.menu.delete", defaultMessage: "ui.editCourse.tab.lessons.table.menu.delete" }) })) }))] }))] })) }))] })), (0, jsx_runtime_1.jsx)(material_1.TableRow, { children: (0, jsx_runtime_1.jsxs)(material_1.TableCell, Object.assign({ className: classes.tableBodyCollapseWrapper, colSpan: 4 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Collapse, Object.assign({ in: expand, timeout: "auto", unmountOnExit: true }, { children: (0, jsx_runtime_1.jsx)(dnd_1.DragDropContext, Object.assign({ onDragEnd: handleDragEnd }, { children: (0, jsx_runtime_1.jsx)(material_1.Table, { children: (0, jsx_runtime_1.jsx)(dnd_1.Droppable, Object.assign({ droppableId: "droppable-2" }, { children: (outerProvider) => ((0, jsx_runtime_1.jsxs)(material_1.TableBody, Object.assign({ ref: outerProvider.innerRef }, outerProvider.droppableProps, { children: [lessons.map((lesson, i, array) => ((0, jsx_runtime_1.jsx)(dnd_1.Draggable, Object.assign({ draggableId: i.toString(), index: i, isDragDisabled: isDisabled }, { children: (innerProvider) => ((0, jsx_runtime_1.jsx)(LessonRow_1.default, { provider: innerProvider, course: course, section: section, lesson: lesson, isNewRow: isNewLocalRow && i + 1 === array.length, handleManageLesson: handleManageLesson }, i)) }), i))), outerProvider.placeholder] }))) })) }) })) })), open && (0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { open: true, onClose: handleOpenDialog, onConfirm: handleDeleteSection })] })) })] }));
 }
 exports.default = (0, react_1.memo)(SectionRow);

package/lib/cjs/components/EditCourse/Lessons.js

@@ -58,7 +58,7 @@ function Lessons(props) {
     // STATES
     const [sections, setSections] = (0, react_1.useState)([]);
     // HOOKS
-    const { isDisabled } = (0, hooks_1.useDisabled)();
+    const { isDisabled } = (0, hooks_1.useIsDisabled)();
     const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
     const intl = (0, react_intl_1.useIntl)();
     // EFFECTS

package/lib/cjs/components/EditCourse/hooks.d.ts

@@ -1,3 +1,3 @@
-export declare const useDisabled: () => {
+export declare const useIsDisabled: () => {
     isDisabled: boolean;
 };

package/lib/cjs/components/EditCourse/hooks.js

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useDisabled = void 0;
+exports.useIsDisabled = void 0;
 const tslib_1 = require("tslib");
 const react_1 = require("react");
 const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
 const PubSub_1 = require("../../constants/PubSub");
-const useDisabled = () => {
+const useIsDisabled = () => {
     // STATES
     const [isDisabled, setIsDisabled] = (0, react_1.useState)(false);
     // REFS
@@ -19,4 +19,4 @@ const useDisabled = () => {
     }, [setIsDisabled]);
     return { isDisabled };
 };
-exports.useDisabled = useDisabled;
+exports.useIsDisabled = useIsDisabled;

package/lib/cjs/components/LessonReleaseMenu/LessonReleaseMenu.js

@@ -19,6 +19,7 @@ const api_services_1 = require("@selfcommunity/api-services");
 const Errors_1 = require("../../constants/Errors");
 const utils_1 = require("@selfcommunity/utils");
 const course_1 = require("../../utils/course");
+const hooks_1 = require("../EditCourse/hooks");
 const messages = (0, react_intl_1.defineMessages)({
     pickerPlaceholder: {
         id: 'ui.lessonReleaseMenu.scheduled.picker.placeholder',
@@ -49,13 +50,13 @@ const classes = {
 const Root = (0, styles_1.styled)(material_1.FormControl, {
     name: constants_1.PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => [styles.root]
+    overridesResolver: (_props, styles) => [styles.root]
 })(() => ({}));
 const PopoverRoot = (0, styles_1.styled)(material_1.Popover, {
     name: constants_1.PREFIX,
     slot: 'PopoverRoot',
-    overridesResolver: (props, styles) => styles.popoverRoot
-})(({ theme }) => ({}));
+    overridesResolver: (_props, styles) => styles.popoverRoot
+})(() => ({}));
 function LessonReleaseMenu(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({
@@ -72,6 +73,8 @@ function LessonReleaseMenu(inProps) {
     const [unit, setUnit] = (0, react_1.useState)(_unit);
     const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
     const [open, setOpen] = (0, react_1.useState)(false);
+    // HOOKS
+    const { isDisabled } = (0, hooks_1.useIsDisabled)();
     //INTL
     const intl = (0, react_intl_1.useIntl)();
     const handleUnitChange = (e) => {
@@ -125,7 +128,7 @@ function LessonReleaseMenu(inProps) {
             } }, { children: (0, jsx_runtime_1.jsx)(x_date_pickers_1.MobileDateTimePicker, { className: classes.picker, disablePast: true, label: drippedAt && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.lessonReleaseMenu.scheduled.picker.placeholder", defaultMessage: "ui.lessonReleaseMenu.scheduled.picker.placeholder" })), defaultValue: drippedAt, slots: {
                     //actionBar: PickerActionBar,
                     tabs: (props) => (0, jsx_runtime_1.jsx)(x_date_pickers_1.DateTimePickerTabs, Object.assign({}, props)),
-                    textField: (params) => ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { error: false, InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.pickerPlaceholder)}`, endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "expand_more" }) }) }))) }) })))
+                    textField: (params) => ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { error: false, InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.pickerPlaceholder)}`, endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ disabled: isDisabled }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "expand_more" }) })) }))) }) })))
                 }, slotProps: {
                     tabs: {
                         hidden: false
@@ -138,9 +141,9 @@ function LessonReleaseMenu(inProps) {
                     actionBar: {
                         actions: ['cancel', 'clear', 'accept']
                     }
-                }, onChange: (value) => setDrippedAt(value), onAccept: handleUpdate, onClear: () => setDrippedAt(null) }) }))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { size: "small", placeholder: placeholderStructured, defaultValue: null, onClick: handleClick, InputProps: {
-                        endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: handleClick }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "expand_more" }) })) })))
-                    } }), (0, jsx_runtime_1.jsxs)(PopoverRoot, Object.assign({ className: classes.popoverRoot, open: open, anchorEl: anchorEl, onClose: handleClose, anchorOrigin: {
+                }, onChange: (value) => setDrippedAt(value), onAccept: handleUpdate, onClear: () => setDrippedAt(null), disabled: isDisabled }) }))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { size: "small", placeholder: placeholderStructured, defaultValue: null, onClick: isDisabled ? undefined : handleClick, InputProps: {
+                        endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: handleClick, disabled: isDisabled }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "expand_more" }) })) })))
+                    }, disabled: isDisabled }), (0, jsx_runtime_1.jsxs)(PopoverRoot, Object.assign({ className: classes.popoverRoot, open: open, anchorEl: anchorEl, onClose: handleClose, anchorOrigin: {
                         vertical: 'bottom',
                         horizontal: 'left'
                     }, transformOrigin: {

package/lib/esm/components/CourseDashboard/Student.js

@@ -116,21 +116,33 @@ function Student(inProps) {
     const handleRequest = useCallback(() => {
         setLoadingRequest(true);
         let request;
-        let updatedCourse;
         if (sentRequest) {
             request = CourseService.leaveOrRemoveCourseRequest(scCourse.id);
-            updatedCourse = Object.assign(Object.assign({}, scCourse), { join_status: null });
         }
         else {
             request = CourseService.joinOrAcceptInviteToCourse(scCourse.id);
-            updatedCourse = Object.assign(Object.assign({}, scCourse), { join_status: scCourse.privacy === SCCoursePrivacyType.PRIVATE ? SCCourseJoinStatusType.REQUESTED : SCCourseJoinStatusType.JOINED });
         }
         request
-            .then(() => {
+            .then((data) => {
+            let updatedCourse;
+            if (data) {
+                updatedCourse = data;
+            }
+            else {
+                updatedCourse = Object.assign(Object.assign({}, scCourse), { join_status: null });
+            }
             setSCCourse(updatedCourse);
             setSentRequest((prev) => !prev);
             setLoadingRequest(false);
-            enqueueSnackbar(_jsx(FormattedMessage, { id: sentRequest ? SNACKBAR_MESSAGES.request : scCourse.join_status === null ? SNACKBAR_MESSAGES.enroll : SNACKBAR_MESSAGES.cancel, defaultMessage: sentRequest ? SNACKBAR_MESSAGES.request : scCourse.join_status === null ? SNACKBAR_MESSAGES.enroll : SNACKBAR_MESSAGES.cancel }), {
+            enqueueSnackbar(_jsx(FormattedMessage, { id: updatedCourse.join_status === SCCourseJoinStatusType.REQUESTED
+                    ? SNACKBAR_MESSAGES.request
+                    : updatedCourse.join_status === SCCourseJoinStatusType.JOINED
+                        ? SNACKBAR_MESSAGES.enroll
+                        : SNACKBAR_MESSAGES.cancel, defaultMessage: updatedCourse.join_status === SCCourseJoinStatusType.REQUESTED
+                    ? SNACKBAR_MESSAGES.request
+                    : updatedCourse.join_status === SCCourseJoinStatusType.JOINED
+                        ? SNACKBAR_MESSAGES.enroll
+                        : SNACKBAR_MESSAGES.cancel }), {
                 variant: 'success',
                 autoHideDuration: 3000
             });

package/lib/esm/components/EditCourse/Lessons/LessonRow.js

@@ -13,8 +13,8 @@ import { useSnackbar } from 'notistack';
 import { Link, SCRoutes, useSCRouting } from '@selfcommunity/react-core';
 import { SCOPE_SC_UI } from '../../../constants/Errors';
 import { ActionLessonType } from '../types';
-import { useDisabled } from '../hooks';
 import ConfirmDialog from '../../../shared/ConfirmDialog/ConfirmDialog';
+import { useIsDisabled } from '../hooks';
 const classes = {
     cellWidth: `${PREFIX}-cell-width`,
     cellAlignRight: `${PREFIX}-cell-align-right`,
@@ -39,7 +39,7 @@ function LessonRow(props) {
     // CONTEXTS
     const scRoutingContext = useSCRouting();
     // HOOKS
-    const { isDisabled } = useDisabled();
+    const { isDisabled } = useIsDisabled();
     const { enqueueSnackbar } = useSnackbar();
     // HANDLERS
     const handleAbleEditMode = useCallback(() => setTimeout(() => setEditMode(true)), [setEditMode]);

package/lib/esm/components/EditCourse/Lessons/SectionRow.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
 import { Fragment, memo, useCallback, useEffect, useMemo, useState } from 'react';
-import { Collapse, Icon, IconButton, MenuItem, Skeleton, Stack, Table, TableBody, TableCell, TableRow, Typography } from '@mui/material';
+import { Collapse, Icon, IconButton, MenuItem, Stack, Table, TableBody, TableCell, TableRow, Typography } from '@mui/material';
 import classNames from 'classnames';
 import { PREFIX } from '../constants';
 import LessonRow from './LessonRow';
@@ -16,7 +16,7 @@ import LessonReleaseMenu from '../../LessonReleaseMenu';
 import { SCCourseLessonTypologyType } from '@selfcommunity/types';
 import { CourseService, Endpoints } from '@selfcommunity/api-services';
 import { ActionLessonType } from '../types';
-import { useDisabled } from '../hooks';
+import { useIsDisabled } from '../hooks';
 import ConfirmDialog from '../../../shared/ConfirmDialog/ConfirmDialog';
 const classes = {
     tableBodyIconWrapper: `${PREFIX}-table-body-icon-wrapper`,
@@ -37,7 +37,7 @@ function SectionRow(props) {
     const [editMode, setEditMode] = useState(false);
     const [lessons, setLessons] = useState([]);
     // HOOKS
-    const { isDisabled } = useDisabled();
+    const { isDisabled } = useIsDisabled();
     const intl = useIntl();
     const { enqueueSnackbar } = useSnackbar();
     // EFFECTS
@@ -141,6 +141,6 @@ function SectionRow(props) {
                                     ? Endpoints.CreateCourseSection.url({ id: course.id })
                                     : Endpoints.PatchCourseSection.url({ id: course.id, section_id: section.id }),
                                 method: isNewRow ? Endpoints.CreateCourseSection.method : Endpoints.PatchCourseSection.method
-                            }, row: section, isNewRow: isNewRow, handleManageRow: handleManageSection, editMode: editMode, handleDisableEditMode: handleDisableEditMode }) }), _jsx(TableCell, Object.assign({ className: classes.cellAlignCenter }, { children: isDisabled ? (_jsx(Skeleton, { animation: false, variant: "rectangular", width: "250px", height: "38px", sx: { margin: 'auto', borderRadius: '5px' } })) : (_jsx(LessonReleaseMenu, { course: course, section: section })) })), _jsx(TableCell, Object.assign({ className: classes.cellAlignRight }, { children: _jsxs(Stack, Object.assign({ className: classes.actionsWrapper }, { children: [_jsx(AddButton, { label: "ui.editCourse.tab.lessons.table.lesson", handleAddRow: handleAddTempLesson, color: "primary", variant: "outlined", disabled: isDisabled }), _jsxs(MenuRow, Object.assign({ disabled: isDisabled }, { children: [_jsx(MenuItem, Object.assign({ onClick: handleAbleEditMode }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.editCourse.tab.lessons.table.menu.rename", defaultMessage: "ui.editCourse.tab.lessons.table.menu.rename" }) })) })), _jsx(MenuItem, Object.assign({ onClick: handleOpenDialog }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.editCourse.tab.lessons.table.menu.delete", defaultMessage: "ui.editCourse.tab.lessons.table.menu.delete" }) })) }))] }))] })) }))] })), _jsx(TableRow, { children: _jsxs(TableCell, Object.assign({ className: classes.tableBodyCollapseWrapper, colSpan: 4 }, { children: [_jsx(Collapse, Object.assign({ in: expand, timeout: "auto", unmountOnExit: true }, { children: _jsx(DragDropContext, Object.assign({ onDragEnd: handleDragEnd }, { children: _jsx(Table, { children: _jsx(Droppable, Object.assign({ droppableId: "droppable-2" }, { children: (outerProvider) => (_jsxs(TableBody, Object.assign({ ref: outerProvider.innerRef }, outerProvider.droppableProps, { children: [lessons.map((lesson, i, array) => (_jsx(Draggable, Object.assign({ draggableId: i.toString(), index: i, isDragDisabled: isDisabled }, { children: (innerProvider) => (_jsx(LessonRow, { provider: innerProvider, course: course, section: section, lesson: lesson, isNewRow: isNewLocalRow && i + 1 === array.length, handleManageLesson: handleManageLesson }, i)) }), i))), outerProvider.placeholder] }))) })) }) })) })), open && _jsx(ConfirmDialog, { open: true, onClose: handleOpenDialog, onConfirm: handleDeleteSection })] })) })] }));
+                            }, row: section, isNewRow: isNewRow, handleManageRow: handleManageSection, editMode: editMode, handleDisableEditMode: handleDisableEditMode }) }), _jsx(TableCell, Object.assign({ className: classes.cellAlignCenter }, { children: _jsx(LessonReleaseMenu, { course: course, section: section }) })), _jsx(TableCell, Object.assign({ className: classes.cellAlignRight }, { children: _jsxs(Stack, Object.assign({ className: classes.actionsWrapper }, { children: [_jsx(AddButton, { label: "ui.editCourse.tab.lessons.table.lesson", handleAddRow: handleAddTempLesson, color: "primary", variant: "outlined", disabled: isDisabled }), _jsxs(MenuRow, Object.assign({ disabled: isDisabled }, { children: [_jsx(MenuItem, Object.assign({ onClick: handleAbleEditMode }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.editCourse.tab.lessons.table.menu.rename", defaultMessage: "ui.editCourse.tab.lessons.table.menu.rename" }) })) })), _jsx(MenuItem, Object.assign({ onClick: handleOpenDialog }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.editCourse.tab.lessons.table.menu.delete", defaultMessage: "ui.editCourse.tab.lessons.table.menu.delete" }) })) }))] }))] })) }))] })), _jsx(TableRow, { children: _jsxs(TableCell, Object.assign({ className: classes.tableBodyCollapseWrapper, colSpan: 4 }, { children: [_jsx(Collapse, Object.assign({ in: expand, timeout: "auto", unmountOnExit: true }, { children: _jsx(DragDropContext, Object.assign({ onDragEnd: handleDragEnd }, { children: _jsx(Table, { children: _jsx(Droppable, Object.assign({ droppableId: "droppable-2" }, { children: (outerProvider) => (_jsxs(TableBody, Object.assign({ ref: outerProvider.innerRef }, outerProvider.droppableProps, { children: [lessons.map((lesson, i, array) => (_jsx(Draggable, Object.assign({ draggableId: i.toString(), index: i, isDragDisabled: isDisabled }, { children: (innerProvider) => (_jsx(LessonRow, { provider: innerProvider, course: course, section: section, lesson: lesson, isNewRow: isNewLocalRow && i + 1 === array.length, handleManageLesson: handleManageLesson }, i)) }), i))), outerProvider.placeholder] }))) })) }) })) })), open && _jsx(ConfirmDialog, { open: true, onClose: handleOpenDialog, onConfirm: handleDeleteSection })] })) })] }));
 }
 export default memo(SectionRow);

package/lib/esm/components/EditCourse/Lessons.js

@@ -13,7 +13,7 @@ import EmptyStatus from '../../shared/EmptyStatus';
 import AddButton from './Lessons/AddButton';
 import SectionRow from './Lessons/SectionRow';
 import { ActionLessonType } from './types';
-import { useDisabled } from './hooks';
+import { useIsDisabled } from './hooks';
 import classNames from 'classnames';
 const classes = {
     lessonTitle: `${PREFIX}-lesson-title`,
@@ -55,7 +55,7 @@ function Lessons(props) {
     // STATES
     const [sections, setSections] = useState([]);
     // HOOKS
-    const { isDisabled } = useDisabled();
+    const { isDisabled } = useIsDisabled();
     const { enqueueSnackbar } = useSnackbar();
     const intl = useIntl();
     // EFFECTS

package/lib/esm/components/EditCourse/hooks.d.ts

@@ -1,3 +1,3 @@
-export declare const useDisabled: () => {
+export declare const useIsDisabled: () => {
     isDisabled: boolean;
 };

package/lib/esm/components/EditCourse/hooks.js

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 import PubSub from 'pubsub-js';
 import { SCGroupEventType, SCTopicType } from '../../constants/PubSub';
-export const useDisabled = () => {
+export const useIsDisabled = () => {
     // STATES
     const [isDisabled, setIsDisabled] = useState(false);
     // REFS

package/lib/esm/components/LessonReleaseMenu/LessonReleaseMenu.js

@@ -17,6 +17,7 @@ import { CourseService } from '@selfcommunity/api-services';
 import { SCOPE_SC_UI } from '../../constants/Errors';
 import { Logger } from '@selfcommunity/utils';
 import { getDripDelayAndUnit } from '../../utils/course';
+import { useIsDisabled } from '../EditCourse/hooks';
 const messages = defineMessages({
     pickerPlaceholder: {
         id: 'ui.lessonReleaseMenu.scheduled.picker.placeholder',
@@ -47,13 +48,13 @@ const classes = {
 const Root = styled(FormControl, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => [styles.root]
+    overridesResolver: (_props, styles) => [styles.root]
 })(() => ({}));
 const PopoverRoot = styled(Popover, {
     name: PREFIX,
     slot: 'PopoverRoot',
-    overridesResolver: (props, styles) => styles.popoverRoot
-})(({ theme }) => ({}));
+    overridesResolver: (_props, styles) => styles.popoverRoot
+})(() => ({}));
 export default function LessonReleaseMenu(inProps) {
     // PROPS
     const props = useThemeProps({
@@ -70,6 +71,8 @@ export default function LessonReleaseMenu(inProps) {
     const [unit, setUnit] = useState(_unit);
     const [anchorEl, setAnchorEl] = useState(null);
     const [open, setOpen] = useState(false);
+    // HOOKS
+    const { isDisabled } = useIsDisabled();
     //INTL
     const intl = useIntl();
     const handleUnitChange = (e) => {
@@ -123,7 +126,7 @@ export default function LessonReleaseMenu(inProps) {
             } }, { children: _jsx(MobileDateTimePicker, { className: classes.picker, disablePast: true, label: drippedAt && (_jsx(FormattedMessage, { id: "ui.lessonReleaseMenu.scheduled.picker.placeholder", defaultMessage: "ui.lessonReleaseMenu.scheduled.picker.placeholder" })), defaultValue: drippedAt, slots: {
                     //actionBar: PickerActionBar,
                     tabs: (props) => _jsx(DateTimePickerTabs, Object.assign({}, props)),
-                    textField: (params) => (_jsx(TextField, Object.assign({}, params, { error: false, InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.pickerPlaceholder)}`, endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: _jsx(IconButton, { children: _jsx(Icon, { children: "expand_more" }) }) }))) }) })))
+                    textField: (params) => (_jsx(TextField, Object.assign({}, params, { error: false, InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.pickerPlaceholder)}`, endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: _jsx(IconButton, Object.assign({ disabled: isDisabled }, { children: _jsx(Icon, { children: "expand_more" }) })) }))) }) })))
                 }, slotProps: {
                     tabs: {
                         hidden: false
@@ -136,9 +139,9 @@ export default function LessonReleaseMenu(inProps) {
                     actionBar: {
                         actions: ['cancel', 'clear', 'accept']
                     }
-                }, onChange: (value) => setDrippedAt(value), onAccept: handleUpdate, onClear: () => setDrippedAt(null) }) }))) : (_jsxs(_Fragment, { children: [_jsx(TextField, { size: "small", placeholder: placeholderStructured, defaultValue: null, onClick: handleClick, InputProps: {
-                        endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: _jsx(IconButton, Object.assign({ onClick: handleClick }, { children: _jsx(Icon, { children: "expand_more" }) })) })))
-                    } }), _jsxs(PopoverRoot, Object.assign({ className: classes.popoverRoot, open: open, anchorEl: anchorEl, onClose: handleClose, anchorOrigin: {
+                }, onChange: (value) => setDrippedAt(value), onAccept: handleUpdate, onClear: () => setDrippedAt(null), disabled: isDisabled }) }))) : (_jsxs(_Fragment, { children: [_jsx(TextField, { size: "small", placeholder: placeholderStructured, defaultValue: null, onClick: isDisabled ? undefined : handleClick, InputProps: {
+                        endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: _jsx(IconButton, Object.assign({ onClick: handleClick, disabled: isDisabled }, { children: _jsx(Icon, { children: "expand_more" }) })) })))
+                    }, disabled: isDisabled }), _jsxs(PopoverRoot, Object.assign({ className: classes.popoverRoot, open: open, anchorEl: anchorEl, onClose: handleClose, anchorOrigin: {
                         vertical: 'bottom',
                         horizontal: 'left'
                     }, transformOrigin: {