@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
109 lines (108 loc) • 9.69 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const material_1 = require("@mui/material");
const react_1 = require("react");
const utils_1 = require("@selfcommunity/utils");
const Errors_1 = require("../../../constants/Errors");
const react_intl_1 = require("react-intl");
const lab_1 = require("@mui/lab");
const constants_1 = require("../constants");
const Pagination_1 = require("../../../constants/Pagination");
const widget_1 = require("../../../utils/widget");
const react_core_1 = require("@selfcommunity/react-core");
const api_services_1 = require("@selfcommunity/api-services");
const course_1 = require("../../../utils/course");
const classes = {
container: `${constants_1.PREFIX}-comments-container`,
outerWrapper: `${constants_1.PREFIX}-outer-wrapper`,
innerWrapper: `${constants_1.PREFIX}-inner-wrapper`,
userWrapper: `${constants_1.PREFIX}-user-wrapper`,
avatar: `${constants_1.PREFIX}-avatar`,
userInfo: `${constants_1.PREFIX}-user-info`,
circle: `${constants_1.PREFIX}-circle`,
button: `${constants_1.PREFIX}-button`,
contrastColor: `${constants_1.PREFIX}-contrast-color`
};
function CommentSkeleton({ id }) {
return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.outerWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "text", width: "90px", height: "21px" }), (0, jsx_runtime_1.jsx)(material_1.Divider, {}), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.innerWrapper }, { children: [Array.from(new Array(id)).map((_, i) => ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.userWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "circular", className: classes.avatar }), (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.userInfo }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "text", width: "90px", height: "21px" }), (0, jsx_runtime_1.jsx)(material_1.Box, { className: classes.circle }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "text", width: "90px", height: "21px" })] })), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "text", width: "180px", height: "21px" })] })] }), i))), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "rounded", width: "112px", height: "36px", className: classes.button })] }))] })));
}
function CommentsSkeleton() {
return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.container }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "text", width: "90px", height: "21px" }), Array.from(new Array(2)).map((_, i) => ((0, jsx_runtime_1.jsx)(CommentSkeleton, { id: 4 }, i))), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "rounded", width: "88px", height: "36px" })] })));
}
function Comments(props) {
// PROPS
const { course, endpointQueryParams = { limit: 3, offset: Pagination_1.DEFAULT_PAGINATION_OFFSET } } = props;
// STATES
const [state, dispatch] = (0, react_1.useReducer)(widget_1.dataWidgetReducer, {
isLoadingNext: false,
next: null,
cacheKey: react_core_1.SCCache.getWidgetStateCacheKey(react_core_1.SCCache.USER_COMMENTS_COURSES_STATE_CACHE_PREFIX_KEY, course.id),
cacheStrategy: utils_1.CacheStrategies.CACHE_FIRST,
visibleItems: endpointQueryParams.limit
}, widget_1.stateWidgetInitializer);
const [isLoading, setIsLoading] = (0, react_1.useState)(false);
// CONTEXTS
const scUserContext = (0, react_core_1.useSCUser)();
const scRoutingContext = (0, react_core_1.useSCRouting)();
// CALLBACKS
const _init = (0, react_1.useCallback)(() => {
if (!state.initialized && !state.isLoadingNext) {
dispatch({ type: widget_1.actionWidgetTypes.LOADING_NEXT });
api_services_1.CourseService.getCourseComments(course.id, Object.assign({}, endpointQueryParams))
.then((payload) => {
dispatch({ type: widget_1.actionWidgetTypes.LOAD_NEXT_SUCCESS, payload: Object.assign(Object.assign({}, payload), { initialized: true }) });
})
.catch((error) => {
dispatch({ type: widget_1.actionWidgetTypes.LOAD_NEXT_FAILURE, payload: { errorLoadNext: error } });
utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
});
}
}, [state.isLoadingNext, state.initialized, course, dispatch]);
// EFFECTS
(0, react_1.useEffect)(() => {
let _t;
if (scUserContext.user) {
_t = setTimeout(_init);
return () => {
clearTimeout(_t);
};
}
}, [scUserContext.user, _init]);
// HANDLERS
const handleNext = (0, react_1.useCallback)(() => {
setIsLoading(true);
dispatch({ type: widget_1.actionWidgetTypes.LOADING_NEXT });
api_services_1.http
.request({
url: state.next,
method: api_services_1.Endpoints.GetCourseComments.method
})
.then((res) => {
dispatch({ type: widget_1.actionWidgetTypes.LOAD_NEXT_SUCCESS, payload: res.data });
setIsLoading(false);
})
.catch((error) => {
utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
});
}, [state.next, dispatch, setIsLoading]);
// MEMOS
const renderComments = (0, react_1.useMemo)(() => {
const map = new Map();
state.results.forEach((comment) => {
const name = comment.extras.lesson.name;
if (!map.has(name)) {
map.set(name, [comment]);
}
else {
map.set(name, [...map.get(name), comment]);
}
});
return Array.from(map.entries()).map(([name, comments]) => ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.outerWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5" }, { children: name })), (0, jsx_runtime_1.jsx)(material_1.Divider, {}), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.innerWrapper }, { children: [comments.map((comment) => ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.userWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { src: comment.created_by.avatar, alt: comment.created_by.username, className: classes.avatar }), (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.userInfo }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: comment.created_by.username })), (0, jsx_runtime_1.jsx)(material_1.Box, { className: classes.circle }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedDate, { value: comment.created_at }) }))] })), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body1", component: "div", dangerouslySetInnerHTML: { __html: comment.html } })] })] }), comment.id))), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_LESSON_COMMENTS_ROUTE_NAME, (0, course_1.getUrlLesson)(comments[0].extras.course, comments[0].extras.lesson, comments[0].extras.section)), size: "small", variant: "outlined", color: "inherit", className: classes.button }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.teacher.tab.comments.lessons.btn.label", defaultMessage: "ui.course.dashboard.teacher.tab.comments.lessons.btn.label" }) })) }))] }))] }), name)));
}, [state.results]);
if (!state.initialized) {
return (0, jsx_runtime_1.jsx)(CommentsSkeleton, {});
}
return ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.container }, { children: state.count > 0 ? ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.teacher.tab.comments.number", defaultMessage: "ui.course.dashboard.teacher.tab.comments.number", values: { commentsNumber: state.count } }) })), renderComments, isLoading && (0, jsx_runtime_1.jsx)(CommentSkeleton, { id: 1 }), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", variant: "outlined", color: "inherit", loading: isLoading, disabled: !state.next, onClick: handleNext }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.teacher.tab.comments.btn.label", defaultMessage: "ui.course.dashboard.teacher.tab.comments.btn.label" }) })) }))] })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.teacher.tab.comments.empty", defaultMessage: "ui.course.dashboard.teacher.tab.comments.empty" }) }))) })));
}
exports.default = (0, react_1.memo)(Comments);