@selfcommunity/react-templates 0.4.5-alpha.8 → 0.4.5-courses.99

package/lib/cjs/components/CourseDashboard/CourseDashboard.d.ts

@@ -0,0 +1,28 @@
+import { HTMLAttributes } from 'react';
+import { SCCourseType } from '@selfcommunity/types';
+export interface CourseDashboardTemplateProps {
+    /**
+     * Id of the feed object
+     * @default 'course_dashboard'
+     */
+    id?: string;
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: HTMLAttributes<HTMLDivElement>['className'];
+    /**
+     * Course Object
+     * @default null
+     */
+    course?: SCCourseType;
+    /**
+     * Id of the course for filter the feed
+     * @default null
+     */
+    courseId?: number;
+    page?: 'students' | 'comments';
+    onTabChange?: (page: 'students' | 'comments') => void;
+    viewDashboard?: boolean;
+}
+export default function CourseDashboardTemplate(inProps: CourseDashboardTemplateProps): JSX.Element;

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

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const constants_1 = require("./constants");
+const material_1 = require("@mui/material");
+const react_core_1 = require("@selfcommunity/react-core");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const react_ui_1 = require("@selfcommunity/react-ui");
+const api_services_1 = require("@selfcommunity/api-services");
+const classes = {
+    root: `${constants_1.PREFIX}-root`
+};
+const Root = (0, material_1.styled)(material_1.Box, {
+    name: constants_1.PREFIX,
+    slot: 'Root'
+})(() => ({}));
+function CourseDashboardTemplate(inProps) {
+    // PROPS
+    const props = (0, material_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.PREFIX
+    });
+    const { id = 'course_dashboard', className = null, course = null, courseId = null, page, onTabChange, viewDashboard } = props;
+    // HOOKS
+    const { scCourse, error } = (0, react_core_1.useSCFetchCourse)({
+        id: courseId,
+        course,
+        params: { view: viewDashboard ? api_services_1.CourseInfoViewType.DASHBOARD : api_services_1.CourseInfoViewType.USER }
+    });
+    if (error) {
+        return null;
+    }
+    if (viewDashboard) {
+        return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className) }, { children: (0, jsx_runtime_1.jsx)(react_ui_1.CourseDashboard.Teacher, { course: scCourse, page: page, onTabChange: onTabChange }) })));
+    }
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className) }, { children: (0, jsx_runtime_1.jsx)(react_ui_1.CourseDashboard.Student, { course: scCourse }) })));
+}
+exports.default = CourseDashboardTemplate;

package/lib/cjs/components/CourseDashboard/constants.d.ts

@@ -0,0 +1 @@
+export declare const PREFIX = "SCCourseDashboardTemplate";

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PREFIX = void 0;
+exports.PREFIX = 'SCCourseDashboardTemplate';

package/lib/cjs/components/CourseDashboard/index.d.ts

@@ -0,0 +1,3 @@
+import CourseDashboardTemplate, { CourseDashboardTemplateProps } from './CourseDashboard';
+export default CourseDashboardTemplate;
+export { CourseDashboardTemplateProps };

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const CourseDashboard_1 = tslib_1.__importDefault(require("./CourseDashboard"));
+exports.default = CourseDashboard_1.default;

package/lib/cjs/components/Courses/Courses.d.ts

@@ -0,0 +1,25 @@
+import { SCCourseType } from '@selfcommunity/types';
+import { HTMLAttributes } from 'react';
+export interface CoursesTemplateProps {
+    /**
+     * Id of the feed object
+     * @default 'course_dashboard'
+     */
+    id?: string;
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: HTMLAttributes<HTMLDivElement>['className'];
+    /**
+     * Course Object
+     * @default null
+     */
+    course?: SCCourseType;
+    /**
+     * Id of the course for filter the feed
+     * @default null
+     */
+    courseId?: number;
+}
+export default function CoursesTemplate(inProps: CoursesTemplateProps): JSX.Element;

package/lib/cjs/components/Courses/Courses.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_core_1 = require("@selfcommunity/react-core");
+const constants_1 = require("./constants");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const react_ui_1 = require("@selfcommunity/react-ui");
+const classes = {
+    root: `${constants_1.PREFIX}-root`
+};
+const Root = (0, material_1.styled)(material_1.Box, {
+    name: constants_1.PREFIX,
+    slot: 'Root'
+})(() => ({}));
+function CoursesTemplate(inProps) {
+    // PROPS
+    const props = (0, material_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.PREFIX
+    });
+    const { id = 'courses', className = null, course = null, courseId = null } = props;
+    // HOOKS
+    const { scCourse } = (0, react_core_1.useSCFetchCourse)({ id: courseId, course });
+    const scUserContext = (0, react_core_1.useSCUser)();
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className) }, { children: (0, jsx_runtime_1.jsx)(react_ui_1.Courses, { endpoint: { url: () => '', method: 'GET' } }) })));
+}
+exports.default = CoursesTemplate;

package/lib/cjs/components/Courses/constants.d.ts

@@ -0,0 +1 @@
+export declare const PREFIX = "SCCoursesTemplate";

package/lib/cjs/components/Courses/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PREFIX = void 0;
+exports.PREFIX = 'SCCoursesTemplate';

package/lib/cjs/components/Courses/index.d.ts

@@ -0,0 +1,3 @@
+import CoursesTemplate, { CoursesTemplateProps } from './Courses';
+export default CoursesTemplate;
+export { CoursesTemplateProps };

package/lib/cjs/components/Courses/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const Courses_1 = tslib_1.__importDefault(require("./Courses"));
+exports.default = Courses_1.default;

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

@@ -0,0 +1,27 @@
+import { HTMLAttributes } from 'react';
+import { SCCourseType } from '@selfcommunity/types';
+export interface EditCourseTemplateProps {
+    /**
+     * Id of the feed object
+     * @default 'course_edit'
+     */
+    id?: string;
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: HTMLAttributes<HTMLDivElement>['className'];
+    /**
+     * Course Object
+     * @default null
+     */
+    course?: SCCourseType;
+    /**
+     * Id of the course for filter the feed
+     * @default null
+     */
+    courseId?: number;
+    page: 'lessons' | 'customize' | 'users' | 'options';
+    onTabChange: (page: 'lessons' | 'customize' | 'users' | 'options') => void;
+}
+export default function EditCourseTemplate(inProps: EditCourseTemplateProps): JSX.Element;

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

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const constants_1 = require("./constants");
+const material_1 = require("@mui/material");
+const react_core_1 = require("@selfcommunity/react-core");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const react_ui_1 = require("@selfcommunity/react-ui");
+const api_services_1 = require("@selfcommunity/api-services");
+const classes = {
+    root: `${constants_1.PREFIX}-root`
+};
+const Root = (0, material_1.styled)(material_1.Box, {
+    name: constants_1.PREFIX,
+    slot: 'Root'
+})(() => ({}));
+function EditCourseTemplate(inProps) {
+    // PROPS
+    const props = (0, material_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.PREFIX
+    });
+    const { id = 'course_edit', className = null, course = null, courseId = null, page, onTabChange } = props;
+    // HOOKS
+    const { scCourse } = (0, react_core_1.useSCFetchCourse)({ id: courseId, course, params: { view: api_services_1.CourseInfoViewType.EDIT } });
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className) }, { children: (0, jsx_runtime_1.jsx)(react_ui_1.EditCourse, { course: scCourse, page: page, onTabChange: onTabChange }) })));
+}
+exports.default = EditCourseTemplate;

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

@@ -0,0 +1 @@
+export declare const PREFIX = "SCEditCourseTemplate";

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PREFIX = void 0;
+exports.PREFIX = 'SCEditCourseTemplate';

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

@@ -0,0 +1,3 @@
+import EditCourseTemplate, { EditCourseTemplateProps } from './EditCourse';
+export default EditCourseTemplate;
+export { EditCourseTemplateProps };

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const EditCourse_1 = tslib_1.__importDefault(require("./EditCourse"));
+exports.default = EditCourse_1.default;

package/lib/cjs/components/Event/Event.js

@@ -6,6 +6,7 @@ const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const react_ui_1 = require("@selfcommunity/react-ui");
 const react_core_1 = require("@selfcommunity/react-core");
+const types_1 = require("@selfcommunity/types");
 const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
 const system_1 = require("@mui/system");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
@@ -54,7 +55,12 @@ function Event(inProps) {
     const { id = 'event', className, event, eventId, widgets, FeedObjectProps, FeedSidebarProps, EventFeedProps = {}, EventHeaderProps = {} } = props;
     // HOOKS
     const { scEvent } = (0, react_core_1.useSCFetchEvent)({ id: eventId, event });
-    if (!scEvent) {
+    const scUserContext = (0, react_core_1.useSCUser)();
+    if (scUserContext.user === undefined ||
+        !scEvent ||
+        (scUserContext.user &&
+            ((scEvent.privacy === types_1.SCEventPrivacyType.PUBLIC && !scEvent.subscription_status) ||
+                scEvent.subscription_status === types_1.SCEventSubscriptionStatusType.INVITED))) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
     }
     return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className) }, { children: [(0, jsx_runtime_1.jsx)(react_ui_1.EventHeader, Object.assign({ event: scEvent }, EventHeaderProps)), (0, jsx_runtime_1.jsx)(EventFeed_1.default, Object.assign({ className: classes.feed, event: scEvent, widgets: widgets, FeedObjectProps: FeedObjectProps, FeedSidebarProps: FeedSidebarProps }, EventFeedProps))] })));

package/lib/cjs/components/EventFeed/EventFeed.js

@@ -91,12 +91,12 @@ function EventFeed(inProps) {
     // REF
     const feedRef = (0, react_1.useRef)();
     // Hooks
-    const { scEvent, setSCEvent } = (0, react_core_1.useSCFetchEvent)({ id: eventId, event });
+    const { scEvent } = (0, react_core_1.useSCFetchEvent)({ id: eventId, event });
     // HANDLERS
     const handleComposerSuccess = (feedObject) => {
         var _a;
         enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composerIconButton.composer.success", defaultMessage: "ui.composerIconButton.composer.success" }), {
-            action: (snackbarId) => ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes[`${feedObject.type.toUpperCase()}_ROUTE_NAME`], react_ui_1.ContributionUtils.getRouteData(feedObject)) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composerIconButton.composer.viewContribute", defaultMessage: "ui.composerIconButton.composer.viewContribute" }) }))),
+            action: () => ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes[`${feedObject.type.toUpperCase()}_ROUTE_NAME`], react_ui_1.ContributionUtils.getRouteData(feedObject)) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composerIconButton.composer.viewContribute", defaultMessage: "ui.composerIconButton.composer.viewContribute" }) }))),
             variant: 'success',
             autoHideDuration: 7000
         });
@@ -114,16 +114,20 @@ function EventFeed(inProps) {
     // WIDGETS
     const _widgets = (0, react_1.useMemo)(() => widgets.map((w) => {
         if (scEvent) {
-            return Object.assign(Object.assign({}, w), { componentProps: Object.assign(Object.assign({}, w.componentProps), { eventId: scEvent.id }) });
+            return Object.assign(Object.assign({}, w), { componentProps: Object.assign(Object.assign({}, w.componentProps), { event: scEvent }) });
         }
         return w;
     }), [widgets, scEvent]);
-    if (!scEvent || (scEvent && ((eventId !== undefined && scEvent.id !== eventId) || (event && scEvent.id !== event.id)))) {
+    if (scUserContext.user === undefined ||
+        !scEvent ||
+        (scUserContext.user &&
+            ((scEvent.privacy === types_1.SCEventPrivacyType.PUBLIC && !scEvent.subscription_status) ||
+                scEvent.subscription_status === types_1.SCEventSubscriptionStatusType.INVITED)) ||
+        (scEvent && ((eventId !== undefined && scEvent.id !== eventId) || (event && scEvent.id !== event.id)))) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
     }
     else if (scEvent.privacy === types_1.SCEventPrivacyType.PRIVATE &&
         scEvent.subscription_status !== types_1.SCEventSubscriptionStatusType.SUBSCRIBED &&
-        scEvent.subscription_status !== types_1.SCEventSubscriptionStatusType.INVITED &&
         scEvent.subscription_status !== types_1.SCEventSubscriptionStatusType.GOING &&
         scEvent.subscription_status !== types_1.SCEventSubscriptionStatusType.NOT_GOING) {
         return ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsx)(react_ui_1.EventInfoWidget, { className: classes.root, event: scEvent }) })));
@@ -142,7 +146,6 @@ function EventFeed(inProps) {
                     ((!scUserContext.user && scEvent.privacy === types_1.SCEventPrivacyType.PUBLIC) ||
                         (scUserContext.user &&
                             (scEvent.subscription_status === types_1.SCEventSubscriptionStatusType.SUBSCRIBED ||
-                                scEvent.subscription_status === types_1.SCEventSubscriptionStatusType.INVITED ||
                                 scEvent.subscription_status === types_1.SCEventSubscriptionStatusType.GOING ||
                                 scEvent.subscription_status === types_1.SCEventSubscriptionStatusType.NOT_GOING)))) && ((0, jsx_runtime_1.jsx)(react_ui_1.InlineComposerWidget, { onSuccess: handleComposerSuccess, defaultValue: { event: scEvent }, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.eventFeed.composer.label", defaultMessage: "templates.eventFeed.composer.label" }), feedType: types_1.SCFeedTypologyType.EVENT }))] }), CustomAdvProps: { position: types_1.SCCustomAdvPosition.POSITION_FEED, groupsId: [scEvent.id] }, enabledCustomAdvPositions: [
             types_1.SCCustomAdvPosition.POSITION_FEED_SIDEBAR,

package/lib/cjs/components/Lesson/Lesson.d.ts

@@ -0,0 +1,40 @@
+import { SCCourseType } from '@selfcommunity/types';
+import { LessonAppbarProps, LessonDrawerProps } from '@selfcommunity/react-ui';
+export interface LessonProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * The course object
+     */
+    course?: SCCourseType;
+    /**
+     * The course id
+     */
+    courseId?: number;
+    /**
+     * The section id
+     */
+    sectionId: number;
+    /**
+     * The lesson id
+     */
+    lessonId?: number;
+    /**
+     * Props to spread to LessonAppbar Component
+     * @default {}
+     */
+    LessonAppbarProps?: LessonAppbarProps;
+    /**
+     * Props to spread to LessonDrawer Component
+     * @default {}
+     */
+    LessonDrawerProps?: LessonDrawerProps;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+export default function Lesson(inProps: LessonProps): JSX.Element;

package/lib/cjs/components/Lesson/Lesson.js

@@ -0,0 +1,146 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const styles_1 = require("@mui/material/styles");
+const system_1 = require("@mui/system");
+const material_1 = require("@mui/material");
+const constants_1 = require("./constants");
+const types_1 = require("@selfcommunity/types");
+const react_core_1 = require("@selfcommunity/react-core");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const react_ui_1 = require("@selfcommunity/react-ui");
+const api_services_1 = require("@selfcommunity/api-services");
+const react_intl_1 = require("react-intl");
+const classes = {
+    root: `${constants_1.PREFIX}-root`,
+    containerRoot: `${constants_1.PREFIX}-container-root`,
+    navigation: `${constants_1.PREFIX}-navigation`,
+    navigationTitle: `${constants_1.PREFIX}-navigation-title`
+};
+const Root = (0, styles_1.styled)(material_1.Box, {
+    name: constants_1.PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => [styles.root]
+})(() => ({}));
+const Container = (0, styles_1.styled)(material_1.Box, {
+    name: constants_1.PREFIX,
+    slot: 'ContainerRoot',
+    overridesResolver: (props, styles) => styles.containerRoot,
+    shouldForwardProp: (prop) => prop !== 'open'
+})(() => ({}));
+function Lesson(inProps) {
+    var _a, _b, _c, _d;
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.PREFIX
+    });
+    const { className = null, course, courseId, sectionId, lessonId, LessonAppbarProps = {}, LessonDrawerProps = {} } = props, rest = tslib_1.__rest(props, ["className", "course", "courseId", "sectionId", "lessonId", "LessonAppbarProps", "LessonDrawerProps"]);
+    // HOOKS
+    const theme = (0, material_1.useTheme)();
+    const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
+    const [_lessonId, setLessonId] = (0, react_1.useState)(lessonId);
+    const [_sectionId, setSectionId] = (0, react_1.useState)(sectionId);
+    const isCourseAdmin = (0, react_1.useMemo)(() => course && (course.join_status === types_1.SCCourseJoinStatusType.CREATOR || course.join_status === types_1.SCCourseJoinStatusType.MANAGER), [course]);
+    const { scCourse } = (0, react_core_1.useSCFetchCourse)({ id: courseId, params: { view: isCourseAdmin ? api_services_1.CourseInfoViewType.EDIT : api_services_1.CourseInfoViewType.USER } });
+    const { scLesson, setSCLesson } = (0, react_core_1.useSCFetchLesson)({ id: _lessonId, courseId, sectionId: _sectionId });
+    // STATE
+    const [activePanel, setActivePanel] = (0, react_1.useState)(null);
+    const [settings, setSettings] = (0, react_1.useState)(null);
+    const [updating, setUpdating] = (0, react_1.useState)(false);
+    const [lessonContent, setLessonContent] = (0, react_1.useState)('');
+    const [lessonMedias, setLessonMedias] = (0, react_1.useState)((_a = scLesson === null || scLesson === void 0 ? void 0 : scLesson.medias) !== null && _a !== void 0 ? _a : []);
+    const [editMode, setEditMode] = (0, react_1.useState)(isCourseAdmin);
+    const isEditMode = editMode;
+    // const isEditMode = useMemo(() => {
+    //   return value.startsWith(scRoutingContext.url(SCRoutes.COURSE_EDIT_ROUTE_NAME, {}));
+    // }, [value, scRoutingContext]);
+    // HANDLERS
+    /**
+     * Handles lesson settings change
+     * @param newSettings
+     */
+    const handleSettingsChange = (newSettings) => {
+        setSettings(newSettings);
+    };
+    const handleOpenDrawer = (panel) => {
+        setActivePanel((prevPanel) => (prevPanel === panel ? null : panel));
+    };
+    const handleCloseDrawer = () => {
+        setActivePanel(null);
+        setEditMode(false);
+    };
+    const handleLessonContentEdit = (html) => {
+        setLessonContent(html);
+    };
+    const handleLessonMediaEdit = (medias) => {
+        setLessonMedias(medias);
+    };
+    const handleChangeLesson = (l, s) => {
+        setLessonId(l.id);
+        setSectionId(s.id);
+        setCurrentSection(s);
+    };
+    /**
+     * Handles Lesson Edit
+     */
+    const handleLessonUpdate = () => {
+        setUpdating(true);
+        const mediaIds = lessonMedias.map((media) => media.id);
+        const data = Object.assign(Object.assign({}, settings), { type: scLesson.type, name: scLesson.name, text: lessonContent, medias: mediaIds });
+        api_services_1.CourseService.updateCourseLesson(scCourse.id, sectionId, scLesson.id, data)
+            .then((data) => {
+            setUpdating(false);
+            setSCLesson(data);
+        })
+            .catch((error) => {
+            setUpdating(false);
+            console.log(error);
+        });
+    };
+    const currentData = (0, react_1.useMemo)(() => {
+        if (!scCourse || !scLesson)
+            return null;
+        return (0, react_ui_1.getCurrentSectionAndLessonIndex)(scCourse, scLesson.section_id, scLesson.id);
+    }, [scCourse, scLesson]);
+    const [currentSectionIndex, setCurrentSectionIndex] = (0, react_1.useState)((currentData === null || currentData === void 0 ? void 0 : currentData.currentSectionIndex) || 0);
+    const [currentLessonIndex, setCurrentLessonIndex] = (0, react_1.useState)((currentData === null || currentData === void 0 ? void 0 : currentData.currentLessonIndex) || 0);
+    const [currentSection, setCurrentSection] = (0, react_1.useState)(((_b = scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections) === null || _b === void 0 ? void 0 : _b[currentSectionIndex]) || null);
+    const handlePrev = () => {
+        if (currentLessonIndex > 0) {
+            const newLessonIndex = currentLessonIndex - 1;
+            setCurrentLessonIndex(newLessonIndex);
+            handleChangeLesson(currentSection.lessons[newLessonIndex], currentSection);
+        }
+        else if (currentSectionIndex > 0) {
+            const prevSectionIndex = currentSectionIndex - 1;
+            const prevSection = scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections[prevSectionIndex];
+            const newLessonIndex = prevSection.lessons.length - 1;
+            setCurrentSectionIndex(prevSectionIndex);
+            setCurrentLessonIndex(newLessonIndex);
+            handleChangeLesson(prevSection.lessons[newLessonIndex], prevSection);
+        }
+    };
+    const handleNext = () => {
+        if (currentLessonIndex < currentSection.lessons.length - 1) {
+            const newLessonIndex = currentLessonIndex + 1;
+            setCurrentLessonIndex(newLessonIndex);
+            handleChangeLesson(currentSection.lessons[newLessonIndex], currentSection);
+        }
+        else if (currentSectionIndex < (scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections.length) - 1) {
+            const newSectionIndex = currentSectionIndex + 1;
+            setCurrentSectionIndex(newSectionIndex);
+            setCurrentLessonIndex(0);
+            handleChangeLesson(scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections[newSectionIndex].lessons[0], scCourse.sections[newSectionIndex]);
+        }
+    };
+    const isPrevDisabled = !(scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections) || (currentSectionIndex === 0 && currentLessonIndex === 0);
+    const isNextDisabled = !(scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections) || (currentSectionIndex === (scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections.length) - 1 && currentLessonIndex === ((_c = currentSection === null || currentSection === void 0 ? void 0 : currentSection.lessons) === null || _c === void 0 ? void 0 : _c.length) - 1);
+    if (!scLesson || !scCourse) {
+        return (0, jsx_runtime_1.jsx)(react_ui_1.HiddenPlaceholder, {});
+    }
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsx)(react_ui_1.LessonAppbar, Object.assign({ showComments: scLesson.comments_enabled, editMode: isEditMode, activePanel: activePanel, title: scCourse.name, handleOpen: handleOpenDrawer, onSave: handleLessonUpdate, updating: updating }, LessonAppbarProps)), (0, jsx_runtime_1.jsxs)(Container, Object.assign({ open: Boolean(activePanel) || isEditMode, className: classes.containerRoot }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.navigation }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", color: "text.secondary" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.lesson.number", defaultMessage: "templates.lesson.number", values: { from: currentLessonIndex + 1, to: (_d = currentSection === null || currentSection === void 0 ? void 0 : currentSection.lessons) === null || _d === void 0 ? void 0 : _d.length } }) })) })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.navigationTitle }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5" }, { children: scLesson.name })), (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: handlePrev, disabled: isPrevDisabled }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow_back" }) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: handleNext, disabled: isNextDisabled }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow_next" }) }))] })] })), (0, jsx_runtime_1.jsx)(react_ui_1.LessonObject, { course: scCourse, lesson: scLesson, editMode: isEditMode, onContentChange: handleLessonContentEdit, onMediaChange: handleLessonMediaEdit })] })), (0, jsx_runtime_1.jsx)(react_ui_1.LessonDrawer, Object.assign({ course: scCourse, lesson: scLesson, editMode: isMobile ? activePanel === react_ui_1.SCLessonActionsType.SETTINGS : isEditMode, activePanel: activePanel, handleClose: handleCloseDrawer, handleChangeLesson: handleChangeLesson, LessonEditFormProps: { lesson: scLesson, onSave: handleLessonUpdate, updating: updating, onSettingsChange: handleSettingsChange } }, LessonDrawerProps))] })));
+}
+exports.default = Lesson;

package/lib/cjs/components/Lesson/constants.d.ts

@@ -0,0 +1 @@
+export declare const PREFIX = "SCLessonTemplate";

package/lib/cjs/components/Lesson/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PREFIX = void 0;
+exports.PREFIX = 'SCLessonTemplate';

package/lib/cjs/components/Lesson/index.d.ts

@@ -0,0 +1,3 @@
+import Lesson, { LessonProps } from './Lesson';
+export default Lesson;
+export { LessonProps };

package/lib/cjs/components/Lesson/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const Lesson_1 = tslib_1.__importDefault(require("./Lesson"));
+exports.default = Lesson_1.default;

package/lib/cjs/components/UserFeed/UserFeed.js

@@ -24,24 +24,31 @@ const Root = (0, styles_1.styled)(react_ui_1.Feed, {
 const WIDGETS = [
     {
         type: 'widget',
-        component: react_ui_1.UserFollowedCategoriesWidget,
+        component: react_ui_1.UserLiveStreamWidget,
         componentProps: {},
         column: 'right',
         position: 0
     },
     {
         type: 'widget',
-        component: react_ui_1.UserFollowedUsersWidget,
+        component: react_ui_1.UserFollowedCategoriesWidget,
         componentProps: {},
         column: 'right',
         position: 1
     },
     {
         type: 'widget',
-        component: react_ui_1.UserFollowersWidget,
+        component: react_ui_1.UserFollowedUsersWidget,
         componentProps: {},
         column: 'right',
         position: 2
+    },
+    {
+        type: 'widget',
+        component: react_ui_1.UserFollowersWidget,
+        componentProps: {},
+        column: 'right',
+        position: 3
     }
 ];
 /**

package/lib/cjs/components/UserProfile/UserProfile.js

@@ -30,31 +30,38 @@ const Root = (0, styles_1.styled)(material_1.Box, {
 const WIDGETS_FOLLOWERS = [
     {
         type: 'widget',
-        component: react_ui_1.UserFollowedCategoriesWidget,
+        component: react_ui_1.UserLiveStreamWidget,
         componentProps: {},
         column: 'right',
         position: 0
     },
     {
         type: 'widget',
-        component: react_ui_1.UserFollowedUsersWidget,
+        component: react_ui_1.UserFollowedCategoriesWidget,
         componentProps: {},
         column: 'right',
         position: 1
     },
     {
         type: 'widget',
-        component: react_ui_1.UserFollowersWidget,
+        component: react_ui_1.UserFollowedUsersWidget,
         componentProps: {},
         column: 'right',
         position: 2
     },
     {
         type: 'widget',
-        component: react_ui_1.UserSubscribedGroupsWidget,
+        component: react_ui_1.UserFollowersWidget,
         componentProps: {},
         column: 'right',
         position: 3
+    },
+    {
+        type: 'widget',
+        component: react_ui_1.UserSubscribedGroupsWidget,
+        componentProps: {},
+        column: 'right',
+        position: 4
     }
 ];
 const WIDGETS_FOLLOWERS_MY_PROFILE = [
@@ -69,24 +76,31 @@ const WIDGETS_FOLLOWERS_MY_PROFILE = [
 const WIDGETS_CONNECTIONS = [
     {
         type: 'widget',
-        component: react_ui_1.UserFollowedCategoriesWidget,
+        component: react_ui_1.UserLiveStreamWidget,
         componentProps: {},
         column: 'right',
         position: 0
     },
     {
         type: 'widget',
-        component: react_ui_1.UserConnectionsWidget,
+        component: react_ui_1.UserFollowedCategoriesWidget,
         componentProps: {},
         column: 'right',
         position: 1
     },
     {
         type: 'widget',
-        component: react_ui_1.UserSubscribedGroupsWidget,
+        component: react_ui_1.UserConnectionsWidget,
         componentProps: {},
         column: 'right',
         position: 2
+    },
+    {
+        type: 'widget',
+        component: react_ui_1.UserSubscribedGroupsWidget,
+        componentProps: {},
+        column: 'right',
+        position: 3
     }
 ];
 const WIDGETS_CONNECTIONS_MY_PROFILE = [