@selfcommunity/react-ui 0.10.2-alpha.8 → 0.10.2-courses.100

package/lib/cjs/components/CourseParticipantsButton/CourseParticipantsButton.js

@@ -0,0 +1,148 @@
+"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 styles_1 = require("@mui/material/styles");
+const system_1 = require("@mui/system");
+const api_services_1 = require("@selfcommunity/api-services");
+const react_core_1 = require("@selfcommunity/react-core");
+const types_1 = require("@selfcommunity/types");
+const utils_1 = require("@selfcommunity/utils");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const react_1 = require("react");
+const react_intl_1 = require("react-intl");
+const use_deep_compare_effect_1 = require("use-deep-compare-effect");
+const Errors_1 = require("../../constants/Errors");
+const BaseDialog_1 = tslib_1.__importDefault(require("../../shared/BaseDialog"));
+const InfiniteScroll_1 = tslib_1.__importDefault(require("../../shared/InfiniteScroll"));
+const buttonCounters_1 = require("../../utils/buttonCounters");
+const AvatarGroupSkeleton_1 = tslib_1.__importDefault(require("../Skeleton/AvatarGroupSkeleton"));
+const User_1 = tslib_1.__importStar(require("../User"));
+const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/HiddenPlaceholder"));
+const PREFIX = 'SCCourseParticipantsButton';
+const classes = {
+    root: `${PREFIX}-root`,
+    dialogRoot: `${PREFIX}-dialog-root`,
+    endMessage: `${PREFIX}-end-message`,
+    infiniteScroll: `${PREFIX}-infinite-scroll`,
+    participants: `${PREFIX}-participants`
+};
+const Root = (0, styles_1.styled)(material_1.Button, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (_props, styles) => styles.root,
+    shouldForwardProp: (prop) => prop !== 'enrolled'
+})(() => ({}));
+const DialogRoot = (0, styles_1.styled)(BaseDialog_1.default, {
+    name: PREFIX,
+    slot: 'DialogRoot',
+    overridesResolver: (_props, styles) => styles.dialogRoot
+})(() => ({}));
+/**
+ *> API documentation for the Community-JS Course Participants Button component. Learn about the available props and the CSS API.
+ *
+ #### Import
+ ```jsx
+ import {CourseParticipantsButton} from '@selfcommunity/react-ui';
+ ```
+ #### Component Name
+
+ The name `SCCourseParticipantsButton` can be used when providing style overrides in the theme.
+
+ * #### CSS
+ *
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCourseParticipantsButton-root|Styles applied to the root element.|
+ |dialogRoot|.SCCourseParticipantsButton-dialog-root|Styles applied to the dialog root element.|
+ |endMessage|.SCCourseParticipantsButton-end-message|Styles applied to the end message element.|
+ |infiniteScroll|.SCCourseParticipantsButton-infinite-scroll|Styles applied to the infinite scroll element.|
+ |participants|.SCCourseParticipantsButton-participants|Styles applied to the participants section.|
+ 
+ * @param inProps
+ */
+function CourseParticipantsButton(inProps) {
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, courseId, course, hideCaption = false, DialogProps = {} } = props, rest = tslib_1.__rest(props, ["className", "courseId", "course", "hideCaption", "DialogProps"]);
+    // STATE
+    const [loading, setLoading] = (0, react_1.useState)(true);
+    const [next, setNext] = (0, react_1.useState)(null);
+    const [offset, setOffset] = (0, react_1.useState)(null);
+    const [enrolled, setEnrolled] = (0, react_1.useState)([]);
+    const [open, setOpen] = (0, react_1.useState)(false);
+    // HOOKS
+    const { scCourse } = (0, react_core_1.useSCFetchCourse)({ id: courseId, course });
+    const participantsAvailable = (0, react_1.useMemo)(() => (scCourse === null || scCourse === void 0 ? void 0 : scCourse.join_status) === types_1.SCCourseJoinStatusType.CREATOR || (scCourse === null || scCourse === void 0 ? void 0 : scCourse.join_status) === types_1.SCCourseJoinStatusType.MANAGER, [scCourse]);
+    (0, use_deep_compare_effect_1.useDeepCompareEffectNoCheck)(() => {
+        setEnrolled([]);
+        setLoading(true);
+    }, [scCourse]);
+    // FETCH FIRST FOLLOWERS
+    (0, use_deep_compare_effect_1.useDeepCompareEffectNoCheck)(() => {
+        if (!scCourse) {
+            return;
+        }
+        if (!enrolled.length && participantsAvailable) {
+            api_services_1.CourseService.getCourseJoinedUsers(scCourse.id, { limit: 3 }).then((res) => {
+                setEnrolled([...res.results]);
+                setOffset(4);
+                setLoading(false);
+            });
+        }
+        else {
+            setOffset(0);
+        }
+    }, [scCourse, participantsAvailable, enrolled]);
+    (0, react_1.useEffect)(() => {
+        if (open && offset !== null) {
+            setLoading(true);
+            api_services_1.CourseService.getCourseJoinedUsers(scCourse.id, { offset, limit: 20 }).then((res) => {
+                setEnrolled([...(offset === 0 ? [] : enrolled), ...res.results]);
+                setNext(res.next);
+                setLoading(false);
+                setOffset(null);
+            });
+        }
+    }, [open, enrolled, offset]);
+    /**
+     * Memoized fetchEnrolledUsers
+     */
+    const fetchEnrolledUsers = (0, react_1.useCallback)(() => {
+        if (!next) {
+            return;
+        }
+        api_services_1.http
+            .request({
+            url: next,
+            method: api_services_1.Endpoints.GetUsersGoingToCourse.method
+        })
+            .then((res) => {
+            setEnrolled([...enrolled, ...res.data.results]);
+            setNext(res.data.next);
+        })
+            .catch((error) => utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error))
+            .then(() => setLoading(false));
+    }, [enrolled, scCourse, next]);
+    const renderSurplus = (0, react_1.useCallback)(() => (0, buttonCounters_1.numberFormatter)(enrolled.length), [enrolled]);
+    /**
+     * Opens participants dialog
+     */
+    const handleToggleDialogOpen = (0, react_1.useCallback)(() => {
+        setOpen((prev) => !prev);
+    }, [setOpen]);
+    /**
+     * Rendering
+     */
+    if (!participantsAvailable) {
+        return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
+    }
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), onClick: handleToggleDialogOpen, disabled: loading || !scCourse || enrolled.length === 0, 
+                // @ts-expect-error this is needed to use enrolled into SCCourseParticipantsButton
+                enrolled: enrolled }, rest, { children: [!hideCaption && ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.participants }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "people_alt" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.courseParticipantsButton.participants", id: "ui.courseParticipantsButton.participants", values: { total: enrolled.length } })] }))), !enrolled.length && (loading || !scCourse) ? ((0, jsx_runtime_1.jsx)(AvatarGroupSkeleton_1.default, Object.assign({}, rest, (!participantsAvailable && { skeletonsAnimation: false }), { count: 4 }))) : ((0, jsx_runtime_1.jsx)(material_1.AvatarGroup, Object.assign({ total: enrolled.length, renderSurplus: renderSurplus }, { children: enrolled.map((c) => ((0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: c.username, src: c.avatar }, c.id))) })))] })), open && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.courseParticipantsButton.dialogTitle", id: "ui.courseParticipantsButton.dialogTitle", values: { total: enrolled.length } }), onClose: handleToggleDialogOpen, open: true }, DialogProps, { children: (0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: enrolled.length, next: fetchEnrolledUsers, hasMoreNext: next !== null || loading, loaderNext: (0, jsx_runtime_1.jsx)(User_1.UserSkeleton, { elevation: 0 }), className: classes.infiniteScroll, endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.endMessage }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseParticipantsButton.noOtherParticipants", defaultMessage: "ui.courseParticipantsButton.noOtherParticipants" }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: enrolled.map((e) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, { elevation: 0, user: e }) }, e.id))) }) })) })))] }));
+}
+exports.default = CourseParticipantsButton;

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

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

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

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

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

@@ -0,0 +1,95 @@
+import { GridProps } from '@mui/material';
+import React from 'react';
+import { CourseProps, CourseSkeletonProps } from '../Course';
+import { CoursesSkeletonProps } from '../Courses/Skeleton';
+export declare const CoursesChipRoot: import("@emotion/styled").StyledComponent<import("@mui/material").ChipOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+}, "avatar" | "className" | "style" | "classes" | "label" | "tabIndex" | "color" | "children" | "sx" | "variant" | "disabled" | "size" | "icon" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export interface CoursesProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Feed API Query Params
+     * @default [{'limit': 20, 'offset': 0}]
+     */
+    endpointQueryParams?: Record<string, string | number>;
+    /**
+     * Props to spread to single course object
+     * @default {}
+     */
+    CourseComponentProps?: CourseProps;
+    /**
+     * Props to spread to single course skeleton object
+     * @default {}
+     */
+    CourseSkeletonComponentProps?: CourseSkeletonProps;
+    /**
+     * Props to spread to courses skeleton object
+     * @default {}
+     */
+    CoursesSkeletonComponentProps?: CoursesSkeletonProps;
+    /**
+     * Props spread to grid container
+     * @default {}
+     */
+    GridContainerComponentProps?: Pick<GridProps, Exclude<keyof GridProps, 'container' | 'component' | 'children' | 'item' | 'classes'>>;
+    /**
+     * Props spread to single grid item
+     * @default {}
+     */
+    GridItemComponentProps?: Pick<GridProps, Exclude<keyof GridProps, 'container' | 'component' | 'children' | 'item' | 'classes'>>;
+    /**
+     * Show/Hide filters
+     * @default true
+     */
+    showFilters?: boolean;
+    /**
+     * Filters component
+     * @param props
+     */
+    filters?: JSX.Element;
+    /**
+     * Other props
+     */
+    [p: string]: any;
+}
+/**
+ * > API documentation for the Community-JS Courses component. Learn about the available props and the CSS API.
+ *
+ *
+ * The Courses component renders the list of all available courses.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/Courses)
+
+ #### Import
+ ```jsx
+ import {Courses} from '@selfcommunity/react-ui';
+ ```
+ #### Component Name
+ The name `SCCourses` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCourses-root|Styles applied to the root element.|
+ |category|.SCCourses-category|Styles applied to the category autocomplete element.|
+ |courses|.SCCourses-courses|Styles applied to the courses section.|
+ |emptyBox|.SCCourses-empty-box|Styles applied to the empty box element.|
+ |emptyIcon|.SCCourses-empty-icon|Styles applied to the empty icon element.|
+ |emptyRotatedBox|.SCCourses-empty-rotated-box|Styles applied to the rotated empty box element.|
+ |filters|.SCCourses-filters|Styles applied to the filters section.|
+ |item|.SCCourses-item|Styles applied to an individual item.|
+ |itemPlaceholder|.SCCourses-item-placeholder|Styles applied to the placeholder for an item.|
+ |noResults|.SCCourses-no-results|Styles applied when there are no results.|
+ |search|.SCCourses-search|Styles applied to the search element.|
+ |showMore|.SCCourses-show-more|Styles applied to the show more button or section.|
+ |studentEmptyView|.SCCourses-student-empty-view|Styles applied to the student empty view.|
+ |teacherEmptyView|.SCCourses-teacher-empty-view|Styles applied to the teacher empty view.|
+
+
+ * @param inProps
+ */
+export default function Courses(inProps: CoursesProps): JSX.Element;

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

@@ -0,0 +1,236 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CoursesChipRoot = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const api_services_1 = require("@selfcommunity/api-services");
+const react_core_1 = require("@selfcommunity/react-core");
+const utils_1 = require("@selfcommunity/utils");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
+const react_1 = require("react");
+const react_intl_1 = require("react-intl");
+const Errors_1 = require("../../constants/Errors");
+const Pagination_1 = require("../../constants/Pagination");
+const PubSub_1 = require("../../constants/PubSub");
+const Course_1 = tslib_1.__importDefault(require("../Course"));
+const Skeleton_1 = tslib_1.__importDefault(require("../Courses/Skeleton"));
+const constants_1 = require("./constants");
+const course_1 = require("../../types/course");
+const CategoryAutocomplete_1 = tslib_1.__importDefault(require("../CategoryAutocomplete"));
+const Placeholder_1 = tslib_1.__importDefault(require("../Course/Placeholder"));
+const classes = {
+    root: `${constants_1.PREFIX}-root`,
+    category: `${constants_1.PREFIX}-category`,
+    courses: `${constants_1.PREFIX}-courses`,
+    emptyBox: `${constants_1.PREFIX}-empty-box`,
+    emptyIcon: `${constants_1.PREFIX}-empty-icon`,
+    emptyRotatedBox: `${constants_1.PREFIX}-empty-rotated-box`,
+    filters: `${constants_1.PREFIX}-filters`,
+    item: `${constants_1.PREFIX}-item`,
+    itemPlaceholder: `${constants_1.PREFIX}-item-placeholder`,
+    noResults: `${constants_1.PREFIX}-no-results`,
+    search: `${constants_1.PREFIX}-search`,
+    showMore: `${constants_1.PREFIX}-show-more`,
+    studentEmptyView: `${constants_1.PREFIX}-student-empty-view`,
+    teacherEmptyView: `${constants_1.PREFIX}-teacher-empty-view`
+};
+const Root = (0, material_1.styled)(material_1.Box, {
+    name: constants_1.PREFIX,
+    slot: 'Root'
+})(() => ({}));
+exports.CoursesChipRoot = (0, material_1.styled)(material_1.Chip, {
+    name: constants_1.PREFIX,
+    slot: 'CoursesChipRoot',
+    shouldForwardProp: (prop) => prop !== 'showForMe'
+})(() => ({}));
+/**
+ * > API documentation for the Community-JS Courses component. Learn about the available props and the CSS API.
+ *
+ *
+ * The Courses component renders the list of all available courses.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/Courses)
+
+ #### Import
+ ```jsx
+ import {Courses} from '@selfcommunity/react-ui';
+ ```
+ #### Component Name
+ The name `SCCourses` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCourses-root|Styles applied to the root element.|
+ |category|.SCCourses-category|Styles applied to the category autocomplete element.|
+ |courses|.SCCourses-courses|Styles applied to the courses section.|
+ |emptyBox|.SCCourses-empty-box|Styles applied to the empty box element.|
+ |emptyIcon|.SCCourses-empty-icon|Styles applied to the empty icon element.|
+ |emptyRotatedBox|.SCCourses-empty-rotated-box|Styles applied to the rotated empty box element.|
+ |filters|.SCCourses-filters|Styles applied to the filters section.|
+ |item|.SCCourses-item|Styles applied to an individual item.|
+ |itemPlaceholder|.SCCourses-item-placeholder|Styles applied to the placeholder for an item.|
+ |noResults|.SCCourses-no-results|Styles applied when there are no results.|
+ |search|.SCCourses-search|Styles applied to the search element.|
+ |showMore|.SCCourses-show-more|Styles applied to the show more button or section.|
+ |studentEmptyView|.SCCourses-student-empty-view|Styles applied to the student empty view.|
+ |teacherEmptyView|.SCCourses-teacher-empty-view|Styles applied to the teacher empty view.|
+
+
+ * @param inProps
+ */
+function Courses(inProps) {
+    var _a;
+    // PROPS
+    const props = (0, material_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.PREFIX
+    });
+    const { endpointQueryParams = { limit: 8, offset: Pagination_1.DEFAULT_PAGINATION_OFFSET }, className, CourseComponentProps = {}, CoursesSkeletonComponentProps = {}, CourseSkeletonComponentProps = { template: course_1.SCCourseTemplateType.PREVIEW }, GridContainerComponentProps = {}, GridItemComponentProps = {}, showFilters = true, filters } = props, rest = tslib_1.__rest(props, ["endpointQueryParams", "className", "CourseComponentProps", "CoursesSkeletonComponentProps", "CourseSkeletonComponentProps", "GridContainerComponentProps", "GridItemComponentProps", "showFilters", "filters"]);
+    // STATE
+    const [courses, setCourses] = (0, react_1.useState)([]);
+    const [loading, setLoading] = (0, react_1.useState)(true);
+    const [next, setNext] = (0, react_1.useState)(null);
+    const [query, setQuery] = (0, react_1.useState)('');
+    const [_categories, setCategories] = (0, react_1.useState)([]);
+    const [showForMe, setShowForMe] = (0, react_1.useState)(false);
+    const [showMyCourses, setShowMyCourses] = (0, react_1.useState)(false);
+    // CONTEXT
+    const scUserContext = (0, react_1.useContext)(react_core_1.SCUserContext);
+    const { preferences } = (0, react_core_1.useSCPreferences)();
+    // MEMO
+    const contentAvailability = react_core_1.SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY in preferences && preferences[react_core_1.SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value;
+    const onlyStaffEnabled = (0, react_1.useMemo)(() => { var _a; return (_a = preferences[react_core_1.SCPreferences.CONFIGURATIONS_COURSES_ONLY_STAFF_ENABLED]) === null || _a === void 0 ? void 0 : _a.value; }, [preferences]);
+    const canCreateCourse = (0, react_1.useMemo)(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_course; }, [(_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission]);
+    const endpoint = (0, react_1.useMemo)(() => {
+        if (showMyCourses) {
+            return api_services_1.Endpoints.GetJoinedCourses;
+        }
+        else if (showForMe) {
+            return api_services_1.Endpoints.CourseSuggestion;
+        }
+        return api_services_1.Endpoints.SearchCourses;
+    }, [showMyCourses, showForMe]);
+    // CONST
+    const authUserId = scUserContext.user ? scUserContext.user.id : null;
+    const theme = (0, material_1.useTheme)();
+    const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
+    // REFS
+    const updatesSubscription = (0, react_1.useRef)(null);
+    // HANDLERS
+    const handleChipClick = () => {
+        setShowForMe(!showForMe);
+    };
+    const handleDeleteClick = () => {
+        setShowForMe(false);
+    };
+    /**
+     * Fetches courses list
+     */
+    const fetchCourses = () => {
+        setLoading(true);
+        return api_services_1.http
+            .request({
+            url: endpoint.url({}),
+            method: endpoint.method,
+            params: Object.assign(Object.assign(Object.assign(Object.assign({}, endpointQueryParams), (_categories.length && { categories: JSON.stringify(_categories) })), (query && { search: query })), (showMyCourses && { created_by: authUserId }))
+        })
+            .then((res) => {
+            setCourses(res.data.results);
+            setNext(res.data.next);
+            setLoading(false);
+        })
+            .catch((error) => {
+            utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
+        });
+    };
+    /**
+     * On mount, fetches courses list
+     */
+    (0, react_1.useEffect)(() => {
+        if (!contentAvailability && !authUserId) {
+            return;
+        }
+        else {
+            fetchCourses();
+        }
+    }, [contentAvailability, authUserId, showForMe, showMyCourses, _categories]);
+    /**
+     * Subscriber for pubsub callback
+     */
+    const onDeleteCourseHandler = (0, react_1.useCallback)((_msg, deleted) => {
+        setCourses((prev) => {
+            if (prev.some((e) => e.id === deleted)) {
+                return prev.filter((e) => e.id !== deleted);
+            }
+            return prev;
+        });
+    }, [courses]);
+    /**
+     * On mount, subscribe to receive course updates (only delete)
+     */
+    (0, react_1.useEffect)(() => {
+        if (courses) {
+            updatesSubscription.current = pubsub_js_1.default.subscribe(`${PubSub_1.SCTopicType.COURSE}.${PubSub_1.SCCourseEventType.DELETE}`, onDeleteCourseHandler);
+        }
+        return () => {
+            updatesSubscription.current && pubsub_js_1.default.unsubscribe(updatesSubscription.current);
+        };
+    }, [courses]);
+    const handleNext = (0, react_1.useMemo)(() => () => {
+        if (!next) {
+            return;
+        }
+        return api_services_1.http
+            .request({
+            url: next,
+            method: showMyCourses ? api_services_1.Endpoints.GetJoinedCourses.method : api_services_1.Endpoints.SearchCourses.method
+        })
+            .then((res) => {
+            setCourses([...courses, ...res.data.results]);
+            setNext(res.data.next);
+        })
+            .catch((error) => console.log(error))
+            .then(() => setLoading(false));
+    }, [next]);
+    /**
+     * Handle change filter name
+     * @param course
+     */
+    const handleOnChangeFilterName = (course) => {
+        setQuery(course.target.value);
+    };
+    /**
+     * Handle change category
+     * @param categories
+     */
+    const handleOnChangeCategory = (categories) => {
+        const categoriesIds = categories.map((item) => item.id);
+        setCategories(categoriesIds);
+    };
+    /**
+     * Renders courses list
+     */
+    const c = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showFilters && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, className: classes.filters, gap: 2 }, { children: filters ? (filters) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 3 }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { className: classes.search, size: 'small', fullWidth: true, value: query, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courses.filterByName", defaultMessage: "ui.courses.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading, onKeyUp: (e) => {
+                                    e.preventDefault();
+                                    if (e.key === 'Enter') {
+                                        fetchCourses();
+                                    }
+                                }, InputProps: {
+                                    endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: isMobile ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => fetchCourses(), disabled: loading }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "search" }) }))) : ((0, jsx_runtime_1.jsx)(material_1.Button, { size: "small", variant: "contained", color: "secondary", onClick: () => fetchCourses(), endIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "search" }), disabled: loading })) })))
+                                } }) })), ((onlyStaffEnabled && canCreateCourse) || !onlyStaffEnabled) && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(exports.CoursesChipRoot, { color: showMyCourses ? 'primary' : 'default', variant: showMyCourses ? 'filled' : 'outlined', label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courses.filterByCreatedByMe", defaultMessage: "ui.courses.filterByCreatedByMe" }), onClick: () => setShowMyCourses(!showMyCourses), 
+                                // @ts-expect-error this is needed to use showForMe into SCCourses
+                                showForMe: showMyCourses, deleteIcon: showMyCourses ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) : null, onDelete: showMyCourses ? handleDeleteClick : null, disabled: loading }) }))), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: "auto" }, { children: (0, jsx_runtime_1.jsx)(material_1.FormControl, Object.assign({ fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(CategoryAutocomplete_1.default, { onChange: handleOnChangeCategory, className: classes.category, size: "small", multiple: true }) })) })), authUserId && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(exports.CoursesChipRoot, { color: showForMe ? 'primary' : 'default', variant: showForMe ? 'filled' : 'outlined', label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courses.filterByCoursesForMe", defaultMessage: "ui.courses.filterByCoursesForMe" }), onClick: handleChipClick, 
+                                // @ts-expect-error this is needed to use showForMe into SCCourses
+                                showForMe: showForMe, deleteIcon: showForMe ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) : null, onDelete: showForMe ? handleDeleteClick : null, disabled: loading }) })))] })) }))), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: loading ? ((0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({}, CoursesSkeletonComponentProps, { CourseSkeletonProps: CourseSkeletonComponentProps }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !courses.length ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.noResults }, { children: !canCreateCourse && onlyStaffEnabled ? ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.studentEmptyView }, { children: [(0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.emptyBox }, { children: (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.emptyRotatedBox }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: classes.emptyIcon, color: "disabled", fontSize: "large" }, { children: "courses" })) })) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", textAlign: "center" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courses.empty.title", defaultMessage: "ui.courses.empty.title" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", textAlign: "center" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courses.empty.info", defaultMessage: "ui.courses.empty.info" }) })), (0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({ coursesNumber: 4 }, CoursesSkeletonComponentProps, { CourseSkeletonProps: CourseSkeletonComponentProps, GridItemComponentProps: { md: 2 } }))] }))) : ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.teacherEmptyView }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({ teacherView: (onlyStaffEnabled && canCreateCourse) || !onlyStaffEnabled, coursesNumber: 4 }, CoursesSkeletonComponentProps, { CourseSkeletonProps: CourseSkeletonComponentProps, GridItemComponentProps: { md: 2 } })) }))) }))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, spacing: { xs: 2 }, className: classes.courses }, GridContainerComponentProps, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [courses.map((course) => ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, lg: 3, className: classes.item }, GridItemComponentProps, { children: (0, jsx_runtime_1.jsx)(Course_1.default, Object.assign({ courseId: course.id }, CourseComponentProps)) }), course.id))), authUserId && courses.length % 2 !== 0 && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, lg: 3, className: classes.itemPlaceholder }, GridItemComponentProps, { children: (0, jsx_runtime_1.jsx)(Placeholder_1.default, { actionCreate: true }) }), 'placeholder-item'))] }) })), Boolean(next) && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ color: "secondary", variant: "text", onClick: handleNext, className: classes.showMore }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courses.button.seeMore", defaultMessage: "ui.courses.button.seeMore" }) })))] })) })) })] }));
+    /**
+     * Renders root object (if content availability community option is false and user is anonymous, component is hidden)
+     */
+    if (!contentAvailability && !scUserContext.user) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: c })));
+}
+exports.default = Courses;

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

@@ -0,0 +1,54 @@
+import { GridProps } from '@mui/material';
+export interface CoursesSkeletonProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    CourseSkeletonProps?: any;
+    /**
+     * Props spread to grid container
+     * @default {}
+     */
+    GridContainerComponentProps?: Pick<GridProps, Exclude<keyof GridProps, 'container' | 'component' | 'children' | 'item' | 'classes'>>;
+    /**
+     * Props spread to single grid item
+     * @default {}
+     */
+    GridItemComponentProps?: Pick<GridProps, Exclude<keyof GridProps, 'container' | 'component' | 'children' | 'item' | 'classes'>>;
+    /**
+     * @default 20
+     */
+    coursesNumber?: number;
+    /**
+     *  If true, shows a different skeleton obj
+     * @default false
+     */
+    teacherView?: boolean;
+}
+/**https://www.figma.com/design/bm7N6ykMLLmaAA22g34bRY/Corsi?t=HKaD6ErrzGpYDJr1-0
+ * > API documentation for the Community-JS Groups Skeleton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {CoursesSkeleton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCCourses-skeleton-root` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCourses-skeleton-root|Styles applied to the root element.|
+ |courses|.SCCourses-skeleton-courses|Styles applied to the group elements.|
+ *
+ */
+export default function CoursesSkeleton(inProps: CoursesSkeletonProps): JSX.Element;

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

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styles_1 = require("@mui/material/styles");
+const constants_1 = require("./constants");
+const material_1 = require("@mui/material");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const Course_1 = require("../Course");
+const Placeholder_1 = tslib_1.__importDefault(require("../Course/Placeholder"));
+const classes = {
+    root: `${constants_1.PREFIX}-skeleton-root`,
+    courses: `${constants_1.PREFIX}-skeleton-courses`,
+    item: `${constants_1.PREFIX}-skeleton-item`
+};
+const Root = (0, styles_1.styled)(material_1.Box, {
+    name: constants_1.PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
+/**https://www.figma.com/design/bm7N6ykMLLmaAA22g34bRY/Corsi?t=HKaD6ErrzGpYDJr1-0
+ * > API documentation for the Community-JS Groups Skeleton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {CoursesSkeleton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCCourses-skeleton-root` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCourses-skeleton-root|Styles applied to the root element.|
+ |courses|.SCCourses-skeleton-courses|Styles applied to the group elements.|
+ *
+ */
+function CoursesSkeleton(inProps) {
+    const { className, CourseSkeletonProps = {}, coursesNumber = 8, GridContainerComponentProps = {}, GridItemComponentProps = {}, teacherView = false } = inProps, rest = tslib_1.__rest(inProps, ["className", "CourseSkeletonProps", "coursesNumber", "GridContainerComponentProps", "GridItemComponentProps", "teacherView"]);
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, spacing: { xs: 3 }, className: classes.courses }, GridContainerComponentProps, { children: [...Array(coursesNumber)].map((course, index) => ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6 }, GridItemComponentProps, { className: classes.item }, { children: teacherView ? (0, jsx_runtime_1.jsx)(Placeholder_1.default, { itemNumber: index + 1, actionCreate: index === 3 }) : (0, jsx_runtime_1.jsx)(Course_1.CourseSkeleton, Object.assign({}, CourseSkeletonProps)) }), index))) })) })));
+}
+exports.default = CoursesSkeleton;

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

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

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 = 'SCCourses';

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

@@ -0,0 +1,4 @@
+import Courses, { CoursesProps } from './Courses';
+import CoursesSkeleton, { CoursesSkeletonProps } from './Skeleton';
+export default Courses;
+export { CoursesProps, CoursesSkeleton, CoursesSkeletonProps };

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

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