@selfcommunity/react-ui 0.10.2-courses.175 → 0.10.2-courses.176
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -91,7 +91,6 @@ export interface CoursesProps {
|
|
|
91
91
|
|itemPlaceholder|.SCCourses-item-placeholder|Styles applied to the placeholder for an item.|
|
|
92
92
|
|noResults|.SCCourses-no-results|Styles applied when there are no results.|
|
|
93
93
|
|search|.SCCourses-search|Styles applied to the search element.|
|
|
94
|
-
|showMore|.SCCourses-show-more|Styles applied to the show more button or section.|
|
|
95
94
|
|studentEmptyView|.SCCourses-student-empty-view|Styles applied to the student empty view.|
|
|
96
95
|
|teacherEmptyView|.SCCourses-teacher-empty-view|Styles applied to the teacher empty view.|
|
|
97
96
|
|
|
@@ -14,12 +14,14 @@ const react_intl_1 = require("react-intl");
|
|
|
14
14
|
const Errors_1 = require("../../constants/Errors");
|
|
15
15
|
const Pagination_1 = require("../../constants/Pagination");
|
|
16
16
|
const PubSub_1 = require("../../constants/PubSub");
|
|
17
|
-
const Course_1 = tslib_1.
|
|
17
|
+
const Course_1 = tslib_1.__importStar(require("../Course"));
|
|
18
18
|
const Skeleton_1 = tslib_1.__importDefault(require("../Courses/Skeleton"));
|
|
19
19
|
const constants_1 = require("./constants");
|
|
20
20
|
const course_1 = require("../../types/course");
|
|
21
21
|
const CategoryAutocomplete_1 = tslib_1.__importDefault(require("../CategoryAutocomplete"));
|
|
22
22
|
const CreatePlaceholder_1 = tslib_1.__importDefault(require("../Course/CreatePlaceholder"));
|
|
23
|
+
const InfiniteScroll_1 = tslib_1.__importDefault(require("../../shared/InfiniteScroll"));
|
|
24
|
+
const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/HiddenPlaceholder"));
|
|
23
25
|
const classes = {
|
|
24
26
|
root: `${constants_1.PREFIX}-root`,
|
|
25
27
|
category: `${constants_1.PREFIX}-category`,
|
|
@@ -32,9 +34,9 @@ const classes = {
|
|
|
32
34
|
itemPlaceholder: `${constants_1.PREFIX}-item-placeholder`,
|
|
33
35
|
noResults: `${constants_1.PREFIX}-no-results`,
|
|
34
36
|
search: `${constants_1.PREFIX}-search`,
|
|
35
|
-
showMore: `${constants_1.PREFIX}-show-more`,
|
|
36
37
|
studentEmptyView: `${constants_1.PREFIX}-student-empty-view`,
|
|
37
|
-
teacherEmptyView: `${constants_1.PREFIX}-teacher-empty-view
|
|
38
|
+
teacherEmptyView: `${constants_1.PREFIX}-teacher-empty-view`,
|
|
39
|
+
endMessage: `${constants_1.PREFIX}-end-message`
|
|
38
40
|
};
|
|
39
41
|
const Root = (0, material_1.styled)(material_1.Box, {
|
|
40
42
|
name: constants_1.PREFIX,
|
|
@@ -74,7 +76,6 @@ exports.CoursesChipRoot = (0, material_1.styled)(material_1.Chip, {
|
|
|
74
76
|
|itemPlaceholder|.SCCourses-item-placeholder|Styles applied to the placeholder for an item.|
|
|
75
77
|
|noResults|.SCCourses-no-results|Styles applied when there are no results.|
|
|
76
78
|
|search|.SCCourses-search|Styles applied to the search element.|
|
|
77
|
-
|showMore|.SCCourses-show-more|Styles applied to the show more button or section.|
|
|
78
79
|
|studentEmptyView|.SCCourses-student-empty-view|Styles applied to the student empty view.|
|
|
79
80
|
|teacherEmptyView|.SCCourses-teacher-empty-view|Styles applied to the teacher empty view.|
|
|
80
81
|
|
|
@@ -130,7 +131,6 @@ function Courses(inProps) {
|
|
|
130
131
|
* Fetches courses list
|
|
131
132
|
*/
|
|
132
133
|
const fetchCourses = () => {
|
|
133
|
-
setLoading(true);
|
|
134
134
|
return api_services_1.http
|
|
135
135
|
.request({
|
|
136
136
|
url: endpoint.url({}),
|
|
@@ -186,7 +186,7 @@ function Courses(inProps) {
|
|
|
186
186
|
return api_services_1.http
|
|
187
187
|
.request({
|
|
188
188
|
url: next,
|
|
189
|
-
method: showMyCourses ? api_services_1.Endpoints.GetJoinedCourses.method : api_services_1.Endpoints.SearchCourses.method
|
|
189
|
+
method: showMyCourses ? api_services_1.Endpoints.GetJoinedCourses.method : showForMe ? api_services_1.Endpoints.CourseSuggestion : api_services_1.Endpoints.SearchCourses.method
|
|
190
190
|
})
|
|
191
191
|
.then((res) => {
|
|
192
192
|
setCourses([...courses, ...res.data.results]);
|
|
@@ -210,6 +210,9 @@ function Courses(inProps) {
|
|
|
210
210
|
const categoriesIds = categories.map((item) => item.id);
|
|
211
211
|
setCategories(categoriesIds);
|
|
212
212
|
};
|
|
213
|
+
const handleScrollUp = () => {
|
|
214
|
+
window.scrollTo({ left: 0, top: 0, behavior: 'smooth' });
|
|
215
|
+
};
|
|
213
216
|
/**
|
|
214
217
|
* Renders courses list
|
|
215
218
|
*/
|
|
@@ -224,12 +227,19 @@ function Courses(inProps) {
|
|
|
224
227
|
// @ts-expect-error this is needed to use showForMe into SCCourses
|
|
225
228
|
showForMe: showMyCourses, deleteIcon: showMyCourses ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) : null, onDelete: showMyCourses ? () => setShowMyCourses(false) : null, disabled: loading || showForMe }) }))), (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,
|
|
226
229
|
// @ts-expect-error this is needed to use showForMe into SCCourses
|
|
227
|
-
showForMe: showForMe, deleteIcon: showForMe ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) : null, onDelete: showForMe ? handleDeleteClick : null, disabled: loading || showMyCourses }) })))] })) }))), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children:
|
|
230
|
+
showForMe: showForMe, deleteIcon: showForMe ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) : null, onDelete: showForMe ? handleDeleteClick : null, disabled: loading || showMyCourses }) })))] })) }))), (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" }) })), !isMobile && (0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({ coursesNumber: 4 }, CoursesSkeletonComponentProps, { CourseSkeletonProps: CourseSkeletonComponentProps }))] }))) : ((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: 1 }, CoursesSkeletonComponentProps, { CourseSkeletonProps: CourseSkeletonComponentProps })) }))) }))) : ((0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: courses.length, next: handleNext, hasMoreNext: Boolean(next), loaderNext: isMobile ? ((0, jsx_runtime_1.jsx)(Course_1.CourseSkeleton, { template: course_1.SCCourseTemplateType.PREVIEW })) : ((0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({ coursesNumber: 4 }, CoursesSkeletonComponentProps, { CourseSkeletonProps: CourseSkeletonComponentProps }))), endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "div", className: classes.endMessage }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courses.endMessage", defaultMessage: "ui.courses.endMessage", values: {
|
|
231
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
232
|
+
// @ts-ignore
|
|
233
|
+
button: (chunk) => ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ color: "secondary", variant: "text", onClick: handleScrollUp }, { children: chunk })))
|
|
234
|
+
} }) })) }, { 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)(CreatePlaceholder_1.default, { CreateCourseButtonComponentProps: CreateCourseButtonComponentProps }) }), "placeholder-item"))] }) })) }))) })] }));
|
|
228
235
|
/**
|
|
229
236
|
* Renders root object (if content availability community option is false and user is anonymous, component is hidden)
|
|
230
237
|
*/
|
|
231
238
|
if (!contentAvailability && !scUserContext.user) {
|
|
232
|
-
return
|
|
239
|
+
return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
|
|
240
|
+
}
|
|
241
|
+
if (loading) {
|
|
242
|
+
return (0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({}, CoursesSkeletonComponentProps, { CourseSkeletonProps: CourseSkeletonComponentProps }));
|
|
233
243
|
}
|
|
234
244
|
return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: c })));
|
|
235
245
|
}
|
|
@@ -91,7 +91,6 @@ export interface CoursesProps {
|
|
|
91
91
|
|itemPlaceholder|.SCCourses-item-placeholder|Styles applied to the placeholder for an item.|
|
|
92
92
|
|noResults|.SCCourses-no-results|Styles applied when there are no results.|
|
|
93
93
|
|search|.SCCourses-search|Styles applied to the search element.|
|
|
94
|
-
|showMore|.SCCourses-show-more|Styles applied to the show more button or section.|
|
|
95
94
|
|studentEmptyView|.SCCourses-student-empty-view|Styles applied to the student empty view.|
|
|
96
95
|
|teacherEmptyView|.SCCourses-teacher-empty-view|Styles applied to the teacher empty view.|
|
|
97
96
|
|
|
@@ -11,12 +11,14 @@ import { FormattedMessage } from 'react-intl';
|
|
|
11
11
|
import { SCOPE_SC_UI } from '../../constants/Errors';
|
|
12
12
|
import { DEFAULT_PAGINATION_OFFSET } from '../../constants/Pagination';
|
|
13
13
|
import { SCCourseEventType, SCTopicType } from '../../constants/PubSub';
|
|
14
|
-
import Course from '../Course';
|
|
14
|
+
import Course, { CourseSkeleton } from '../Course';
|
|
15
15
|
import Skeleton from '../Courses/Skeleton';
|
|
16
16
|
import { PREFIX } from './constants';
|
|
17
17
|
import { SCCourseTemplateType } from '../../types/course';
|
|
18
18
|
import CategoryAutocomplete from '../CategoryAutocomplete';
|
|
19
19
|
import CourseCreatePlaceholder from '../Course/CreatePlaceholder';
|
|
20
|
+
import InfiniteScroll from '../../shared/InfiniteScroll';
|
|
21
|
+
import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
|
|
20
22
|
const classes = {
|
|
21
23
|
root: `${PREFIX}-root`,
|
|
22
24
|
category: `${PREFIX}-category`,
|
|
@@ -29,9 +31,9 @@ const classes = {
|
|
|
29
31
|
itemPlaceholder: `${PREFIX}-item-placeholder`,
|
|
30
32
|
noResults: `${PREFIX}-no-results`,
|
|
31
33
|
search: `${PREFIX}-search`,
|
|
32
|
-
showMore: `${PREFIX}-show-more`,
|
|
33
34
|
studentEmptyView: `${PREFIX}-student-empty-view`,
|
|
34
|
-
teacherEmptyView: `${PREFIX}-teacher-empty-view
|
|
35
|
+
teacherEmptyView: `${PREFIX}-teacher-empty-view`,
|
|
36
|
+
endMessage: `${PREFIX}-end-message`
|
|
35
37
|
};
|
|
36
38
|
const Root = styled(Box, {
|
|
37
39
|
name: PREFIX,
|
|
@@ -71,7 +73,6 @@ export const CoursesChipRoot = styled(Chip, {
|
|
|
71
73
|
|itemPlaceholder|.SCCourses-item-placeholder|Styles applied to the placeholder for an item.|
|
|
72
74
|
|noResults|.SCCourses-no-results|Styles applied when there are no results.|
|
|
73
75
|
|search|.SCCourses-search|Styles applied to the search element.|
|
|
74
|
-
|showMore|.SCCourses-show-more|Styles applied to the show more button or section.|
|
|
75
76
|
|studentEmptyView|.SCCourses-student-empty-view|Styles applied to the student empty view.|
|
|
76
77
|
|teacherEmptyView|.SCCourses-teacher-empty-view|Styles applied to the teacher empty view.|
|
|
77
78
|
|
|
@@ -127,7 +128,6 @@ export default function Courses(inProps) {
|
|
|
127
128
|
* Fetches courses list
|
|
128
129
|
*/
|
|
129
130
|
const fetchCourses = () => {
|
|
130
|
-
setLoading(true);
|
|
131
131
|
return http
|
|
132
132
|
.request({
|
|
133
133
|
url: endpoint.url({}),
|
|
@@ -183,7 +183,7 @@ export default function Courses(inProps) {
|
|
|
183
183
|
return http
|
|
184
184
|
.request({
|
|
185
185
|
url: next,
|
|
186
|
-
method: showMyCourses ? Endpoints.GetJoinedCourses.method : Endpoints.SearchCourses.method
|
|
186
|
+
method: showMyCourses ? Endpoints.GetJoinedCourses.method : showForMe ? Endpoints.CourseSuggestion : Endpoints.SearchCourses.method
|
|
187
187
|
})
|
|
188
188
|
.then((res) => {
|
|
189
189
|
setCourses([...courses, ...res.data.results]);
|
|
@@ -207,6 +207,9 @@ export default function Courses(inProps) {
|
|
|
207
207
|
const categoriesIds = categories.map((item) => item.id);
|
|
208
208
|
setCategories(categoriesIds);
|
|
209
209
|
};
|
|
210
|
+
const handleScrollUp = () => {
|
|
211
|
+
window.scrollTo({ left: 0, top: 0, behavior: 'smooth' });
|
|
212
|
+
};
|
|
210
213
|
/**
|
|
211
214
|
* Renders courses list
|
|
212
215
|
*/
|
|
@@ -221,12 +224,19 @@ export default function Courses(inProps) {
|
|
|
221
224
|
// @ts-expect-error this is needed to use showForMe into SCCourses
|
|
222
225
|
showForMe: showMyCourses, deleteIcon: showMyCourses ? _jsx(Icon, { children: "close" }) : null, onDelete: showMyCourses ? () => setShowMyCourses(false) : null, disabled: loading || showForMe }) }))), _jsx(Grid, Object.assign({ item: true, xs: 12, md: "auto" }, { children: _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsx(CategoryAutocomplete, { onChange: handleOnChangeCategory, className: classes.category, size: "small", multiple: true }) })) })), authUserId && (_jsx(Grid, Object.assign({ item: true }, { children: _jsx(CoursesChipRoot, { color: showForMe ? 'primary' : 'default', variant: showForMe ? 'filled' : 'outlined', label: _jsx(FormattedMessage, { id: "ui.courses.filterByCoursesForMe", defaultMessage: "ui.courses.filterByCoursesForMe" }), onClick: handleChipClick,
|
|
223
226
|
// @ts-expect-error this is needed to use showForMe into SCCourses
|
|
224
|
-
showForMe: showForMe, deleteIcon: showForMe ? _jsx(Icon, { children: "close" }) : null, onDelete: showForMe ? handleDeleteClick : null, disabled: loading || showMyCourses }) })))] })) }))), _jsx(_Fragment, { children:
|
|
227
|
+
showForMe: showForMe, deleteIcon: showForMe ? _jsx(Icon, { children: "close" }) : null, onDelete: showForMe ? handleDeleteClick : null, disabled: loading || showMyCourses }) })))] })) }))), _jsx(_Fragment, { children: !courses.length ? (_jsx(Box, Object.assign({ className: classes.noResults }, { children: !canCreateCourse && onlyStaffEnabled ? (_jsxs(Stack, Object.assign({ className: classes.studentEmptyView }, { children: [_jsx(Stack, Object.assign({ className: classes.emptyBox }, { children: _jsx(Stack, Object.assign({ className: classes.emptyRotatedBox }, { children: _jsx(Icon, Object.assign({ className: classes.emptyIcon, color: "disabled", fontSize: "large" }, { children: "courses" })) })) })), _jsx(Typography, Object.assign({ variant: "h5", textAlign: "center" }, { children: _jsx(FormattedMessage, { id: "ui.courses.empty.title", defaultMessage: "ui.courses.empty.title" }) })), _jsx(Typography, Object.assign({ variant: "body1", textAlign: "center" }, { children: _jsx(FormattedMessage, { id: "ui.courses.empty.info", defaultMessage: "ui.courses.empty.info" }) })), !isMobile && _jsx(Skeleton, Object.assign({ coursesNumber: 4 }, CoursesSkeletonComponentProps, { CourseSkeletonProps: CourseSkeletonComponentProps }))] }))) : (_jsx(Box, Object.assign({ className: classes.teacherEmptyView }, { children: _jsx(Skeleton, Object.assign({ teacherView: (onlyStaffEnabled && canCreateCourse) || !onlyStaffEnabled, coursesNumber: 1 }, CoursesSkeletonComponentProps, { CourseSkeletonProps: CourseSkeletonComponentProps })) }))) }))) : (_jsx(InfiniteScroll, Object.assign({ dataLength: courses.length, next: handleNext, hasMoreNext: Boolean(next), loaderNext: isMobile ? (_jsx(CourseSkeleton, { template: SCCourseTemplateType.PREVIEW })) : (_jsx(Skeleton, Object.assign({ coursesNumber: 4 }, CoursesSkeletonComponentProps, { CourseSkeletonProps: CourseSkeletonComponentProps }))), endMessage: _jsx(Typography, Object.assign({ component: "div", className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.courses.endMessage", defaultMessage: "ui.courses.endMessage", values: {
|
|
228
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
229
|
+
// @ts-ignore
|
|
230
|
+
button: (chunk) => (_jsx(Button, Object.assign({ color: "secondary", variant: "text", onClick: handleScrollUp }, { children: chunk })))
|
|
231
|
+
} }) })) }, { children: _jsx(Grid, Object.assign({ container: true, spacing: { xs: 2 }, className: classes.courses }, GridContainerComponentProps, { children: _jsxs(_Fragment, { children: [courses.map((course) => (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, lg: 3, className: classes.item }, GridItemComponentProps, { children: _jsx(Course, Object.assign({ courseId: course.id }, CourseComponentProps)) }), course.id))), authUserId && courses.length % 2 !== 0 && (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, lg: 3, className: classes.itemPlaceholder }, GridItemComponentProps, { children: _jsx(CourseCreatePlaceholder, { CreateCourseButtonComponentProps: CreateCourseButtonComponentProps }) }), "placeholder-item"))] }) })) }))) })] }));
|
|
225
232
|
/**
|
|
226
233
|
* Renders root object (if content availability community option is false and user is anonymous, component is hidden)
|
|
227
234
|
*/
|
|
228
235
|
if (!contentAvailability && !scUserContext.user) {
|
|
229
|
-
return
|
|
236
|
+
return _jsx(HiddenPlaceholder, {});
|
|
237
|
+
}
|
|
238
|
+
if (loading) {
|
|
239
|
+
return _jsx(Skeleton, Object.assign({}, CoursesSkeletonComponentProps, { CourseSkeletonProps: CourseSkeletonComponentProps }));
|
|
230
240
|
}
|
|
231
241
|
return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: c })));
|
|
232
242
|
}
|