@selfcommunity/react-templates 0.4.8-alpha.9 → 0.4.8-payments.143

package/lib/esm/components/Lesson/Lesson.js

@@ -0,0 +1,141 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { styled } from '@mui/material/styles';
+import { useThemeProps } from '@mui/system';
+import { Box, Icon, IconButton, Typography, useMediaQuery, useTheme } from '@mui/material';
+import { PREFIX } from './constants';
+import { useSCFetchCourse, useSCFetchLesson } from '@selfcommunity/react-core';
+import classNames from 'classnames';
+import { getCurrentSectionAndLessonIndex, HiddenPlaceholder, LessonAppbar, LessonDrawer, LessonObject, SCLessonActionsType } from '@selfcommunity/react-ui';
+import { CourseInfoViewType, CourseService } from '@selfcommunity/api-services';
+import { FormattedMessage } from 'react-intl';
+const classes = {
+    root: `${PREFIX}-root`,
+    containerRoot: `${PREFIX}-container-root`,
+    navigation: `${PREFIX}-navigation`,
+    navigationTitle: `${PREFIX}-navigation-title`
+};
+const Root = styled(Box, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => [styles.root]
+})(() => ({}));
+const Container = styled(Box, {
+    name: PREFIX,
+    slot: 'ContainerRoot',
+    overridesResolver: (props, styles) => styles.containerRoot,
+    shouldForwardProp: (prop) => prop !== 'open'
+})(() => ({}));
+export default function Lesson(inProps) {
+    var _a, _b, _c, _d, _e, _f;
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className = null, course, courseId, sectionId, lesson = null, lessonId, LessonAppbarProps = {}, LessonDrawerProps = {}, editMode = false, onEditModeClose = null, onLessonChange = null, onActivePanelChange = null } = props, rest = __rest(props, ["className", "course", "courseId", "sectionId", "lesson", "lessonId", "LessonAppbarProps", "LessonDrawerProps", "editMode", "onEditModeClose", "onLessonChange", "onActivePanelChange"]);
+    // HOOKS
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+    const [_lessonId, setLessonId] = useState(lessonId);
+    const [_sectionId, setSectionId] = useState(sectionId);
+    const { scCourse } = useSCFetchCourse({ id: courseId, course, params: { view: editMode ? CourseInfoViewType.EDIT : CourseInfoViewType.USER } });
+    const { scLesson, setSCLesson } = useSCFetchLesson({ id: _lessonId, lesson, courseId, sectionId: _sectionId });
+    // STATE
+    const [activePanel, setActivePanel] = useState(null);
+    const [settings, setSettings] = useState(null);
+    const [updating, setUpdating] = useState(false);
+    const [lessonContent, setLessonContent] = useState('');
+    const [lessonMedias, setLessonMedias] = useState((_a = scLesson === null || scLesson === void 0 ? void 0 : scLesson.medias) !== null && _a !== void 0 ? _a : []);
+    // HANDLERS
+    /**
+     * Handles lesson settings change
+     * @param newSettings
+     */
+    const handleSettingsChange = (newSettings) => {
+        setSettings(newSettings);
+    };
+    const handleOpenDrawer = (panel) => {
+        setActivePanel((prevPanel) => (prevPanel === panel ? null : panel));
+        onActivePanelChange && onActivePanelChange(panel);
+    };
+    const handleCloseDrawer = () => {
+        setActivePanel(null);
+        onEditModeClose && onEditModeClose();
+        onActivePanelChange && onActivePanelChange(null);
+    };
+    const handleLessonContentEdit = (html) => {
+        setLessonContent(html);
+    };
+    const handleLessonMediaEdit = (medias) => {
+        setLessonMedias(medias);
+    };
+    const handleChangeLesson = (l, s) => {
+        setLessonId(l.id);
+        setSectionId(s.id);
+        setCurrentSection(s);
+        onLessonChange && onLessonChange(l.id, s.id);
+    };
+    /**
+     * 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 });
+        CourseService.updateCourseLesson(scCourse.id, sectionId, scLesson.id, data)
+            .then((data) => {
+            setUpdating(false);
+            setSCLesson(data);
+        })
+            .catch((error) => {
+            setUpdating(false);
+            console.log(error);
+        });
+    };
+    const currentData = useMemo(() => {
+        if (!scCourse || !scLesson)
+            return null;
+        return getCurrentSectionAndLessonIndex(scCourse, scLesson.section_id, scLesson.id);
+    }, [scCourse, scLesson]);
+    const [currentSectionIndex, setCurrentSectionIndex] = useState((currentData === null || currentData === void 0 ? void 0 : currentData.currentSectionIndex) || 0);
+    const [currentLessonIndex, setCurrentLessonIndex] = useState((currentData === null || currentData === void 0 ? void 0 : currentData.currentLessonIndex) || 0);
+    const [currentSection, setCurrentSection] = 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) ||
+        ((_e = (_d = scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections[currentSectionIndex + 1]) === null || _d === void 0 ? void 0 : _d.lessons[0]) === null || _e === void 0 ? void 0 : _e.locked);
+    if (!scLesson || !scCourse) {
+        return _jsx(HiddenPlaceholder, {});
+    }
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(LessonAppbar, Object.assign({ showComments: scLesson.comments_enabled, editMode: editMode, activePanel: activePanel, title: scCourse.name, handleOpen: handleOpenDrawer, onSave: handleLessonUpdate, updating: updating }, LessonAppbarProps)), _jsxs(Container, Object.assign({ open: Boolean(activePanel) || editMode, className: classes.containerRoot }, { children: [_jsx(Box, Object.assign({ className: classes.navigation }, { children: _jsx(Typography, Object.assign({ variant: "body2", color: "text.secondary" }, { children: _jsx(FormattedMessage, { id: "templates.lesson.number", defaultMessage: "templates.lesson.number", values: { from: currentLessonIndex + 1, to: (_f = currentSection === null || currentSection === void 0 ? void 0 : currentSection.lessons) === null || _f === void 0 ? void 0 : _f.length } }) })) })), _jsxs(Box, Object.assign({ className: classes.navigationTitle }, { children: [_jsx(Typography, Object.assign({ variant: "h5" }, { children: scLesson.name })), _jsxs(Box, { children: [_jsx(IconButton, Object.assign({ onClick: handlePrev, disabled: isPrevDisabled }, { children: _jsx(Icon, { children: "arrow_back" }) })), _jsx(IconButton, Object.assign({ onClick: handleNext, disabled: isNextDisabled }, { children: _jsx(Icon, { children: "arrow_next" }) }))] })] })), _jsx(LessonObject, { course: scCourse, lesson: scLesson, editMode: editMode, onContentChange: handleLessonContentEdit, onMediaChange: handleLessonMediaEdit })] })), _jsx(LessonDrawer, Object.assign({ course: scCourse, lesson: scLesson, editMode: isMobile ? activePanel === SCLessonActionsType.SETTINGS : editMode, activePanel: activePanel, handleClose: handleCloseDrawer, handleChangeLesson: handleChangeLesson, LessonEditFormProps: { lesson: scLesson, onSave: handleLessonUpdate, updating: updating, onSettingsChange: handleSettingsChange } }, LessonDrawerProps))] })));
+}

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

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

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

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

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

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

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

@@ -0,0 +1,2 @@
+import Lesson from './Lesson';
+export default Lesson;

package/lib/esm/index.d.ts

@@ -11,4 +11,6 @@ import Group, { GroupProps, GroupSkeleton } from './components/Group';
 import GroupFeed, { GroupFeedProps, GroupFeedSkeleton } from './components/GroupFeed';
 import Event, { EventProps, EventSkeleton } from './components/Event';
 import EventFeed, { EventFeedProps, EventFeedSkeleton } from './components/EventFeed';
-export { Category, CategoryProps, CategorySkeleton, CategoryFeed, CategoryFeedProps, CategoryFeedSkeleton, ExploreFeed, ExploreFeedProps, ExploreFeedSkeleton, FeedObjectDetail, FeedObjectDetailProps, FeedObjectDetailSkeleton, MainFeed, MainFeedProps, MainFeedSkeleton, NotificationFeed, NotificationFeedProps, NotificationFeedSkeleton, UserFeed, UserFeedProps, UserFeedSkeleton, UserProfile, UserProfileProps, UserProfileSkeleton, LoyaltyProgramDetail, LoyaltyProgramDetailProps, LoyaltyProgramDetailSkeleton, GroupFeed, GroupFeedProps, GroupFeedSkeleton, Group, GroupProps, GroupSkeleton, Event, EventProps, EventSkeleton, EventFeed, EventFeedProps, EventFeedSkeleton };
+import Lesson, { LessonProps } from './components/Lesson';
+import Course, { CourseProps, TeacherSkeleton, StudentSkeleton } from './components/Course';
+export { Category, CategoryProps, CategorySkeleton, CategoryFeed, CategoryFeedProps, CategoryFeedSkeleton, Course, CourseProps, TeacherSkeleton, StudentSkeleton, ExploreFeed, ExploreFeedProps, ExploreFeedSkeleton, FeedObjectDetail, FeedObjectDetailProps, FeedObjectDetailSkeleton, MainFeed, MainFeedProps, MainFeedSkeleton, NotificationFeed, NotificationFeedProps, NotificationFeedSkeleton, UserFeed, UserFeedProps, UserFeedSkeleton, UserProfile, UserProfileProps, UserProfileSkeleton, LoyaltyProgramDetail, LoyaltyProgramDetailProps, LoyaltyProgramDetailSkeleton, GroupFeed, GroupFeedProps, GroupFeedSkeleton, Group, GroupProps, GroupSkeleton, Event, EventProps, EventSkeleton, EventFeed, EventFeedProps, EventFeedSkeleton, Lesson, LessonProps };

package/lib/esm/index.js

@@ -11,4 +11,6 @@ import Group, { GroupSkeleton } from './components/Group';
 import GroupFeed, { GroupFeedSkeleton } from './components/GroupFeed';
 import Event, { EventSkeleton } from './components/Event';
 import EventFeed, { EventFeedSkeleton } from './components/EventFeed';
-export { Category, CategorySkeleton, CategoryFeed, CategoryFeedSkeleton, ExploreFeed, ExploreFeedSkeleton, FeedObjectDetail, FeedObjectDetailSkeleton, MainFeed, MainFeedSkeleton, NotificationFeed, NotificationFeedSkeleton, UserFeed, UserFeedSkeleton, UserProfile, UserProfileSkeleton, LoyaltyProgramDetail, LoyaltyProgramDetailSkeleton, GroupFeed, GroupFeedSkeleton, Group, GroupSkeleton, Event, EventSkeleton, EventFeed, EventFeedSkeleton };
+import Lesson from './components/Lesson';
+import Course, { TeacherSkeleton, StudentSkeleton } from './components/Course';
+export { Category, CategorySkeleton, CategoryFeed, CategoryFeedSkeleton, Course, TeacherSkeleton, StudentSkeleton, ExploreFeed, ExploreFeedSkeleton, FeedObjectDetail, FeedObjectDetailSkeleton, MainFeed, MainFeedSkeleton, NotificationFeed, NotificationFeedSkeleton, UserFeed, UserFeedSkeleton, UserProfile, UserProfileSkeleton, LoyaltyProgramDetail, LoyaltyProgramDetailSkeleton, GroupFeed, GroupFeedSkeleton, Group, GroupSkeleton, Event, EventSkeleton, EventFeed, EventFeedSkeleton, Lesson };