@selfcommunity/react-ui 0.10.2-courses.162 → 0.10.2-courses.163

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

@@ -63,7 +63,14 @@ function Requests(props) {
                 utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
             });
         }
-    }, [state.isLoadingNext, state.initialized, course, dispatch]);
+    }, [state.isLoadingNext, state.initialized, course, dispatch, endpointQueryParams]);
+    // HANDLERS
+    const handleRemoveUser = (0, react_1.useCallback)((_msg, user) => {
+        dispatch({
+            type: widget_1.actionWidgetTypes.SET_RESULTS,
+            payload: { count: state.results.length - 1, results: state.results.filter((result) => result.id !== user.id) }
+        });
+    }, [state.count, state.results, dispatch]);
     // EFFECTS
     (0, react_1.useEffect)(() => {
         let _t;
@@ -79,14 +86,7 @@ function Requests(props) {
         return () => {
             updatedUsers.current && pubsub_js_1.default.unsubscribe(updatedUsers.current);
         };
-    }, []);
-    // HANDLERS
-    const handleRemoveUser = (0, react_1.useCallback)((user) => {
-        dispatch({
-            type: widget_1.actionWidgetTypes.SET_RESULTS,
-            payload: { count: state.count - 1, results: state.results.filter((result) => result.id !== user.id) }
-        });
-    }, [dispatch]);
+    }, [handleRemoveUser]);
     return ((0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editCourse.tab.requests.title", defaultMessage: "ui.editCourse.tab.requests.title", values: { requestsNumber: state.results.length } }) })), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.usersStatusWrapper }, { children: (0, jsx_runtime_1.jsx)(Status_1.default, { course: course }) })), (0, jsx_runtime_1.jsx)(CourseUsersTable_1.default, { course: course, state: state, dispatch: dispatch, headerCells: headerCells, mode: "requests", emptyStatusTitle: "ui.courseUsersTable.empty.requests.title" })] }));
 }
 exports.default = (0, react_1.memo)(Requests);

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

@@ -70,7 +70,11 @@ function Users(props) {
                 utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
             });
         }
-    }, [state.isLoadingNext, state.initialized, course, dispatch]);
+    }, [state.isLoadingNext, state.initialized, course, dispatch, endpointQueryParams]);
+    // HANDLERS
+    const handleAddUser = (0, react_1.useCallback)((_msg, user) => {
+        dispatch({ type: widget_1.actionWidgetTypes.LOAD_PREVIOUS_SUCCESS, payload: { count: state.count + 1, results: [user], initialized: true } });
+    }, [state.count, dispatch]);
     // EFFECTS
     (0, react_1.useEffect)(() => {
         let _t;
@@ -86,18 +90,17 @@ function Users(props) {
         return () => {
             updatedUsers.current && pubsub_js_1.default.unsubscribe(updatedUsers.current);
         };
-    }, []);
-    // HANDLERS
-    const handleAddUser = (0, react_1.useCallback)((user) => {
-        dispatch({ type: widget_1.actionWidgetTypes.LOAD_PREVIOUS_SUCCESS, payload: { count: state.count + 1, results: [user], initialized: true } });
-    }, [dispatch]);
+    }, [handleAddUser]);
     const handleConfirm = (0, react_1.useCallback)((newUsers) => {
         const data = {
             joined: newUsers.map((user) => user.id)
         };
         api_services_1.CourseService.changeCourseUserRole(course.id, data)
             .then(() => {
-            dispatch({ type: widget_1.actionWidgetTypes.RESET });
+            dispatch({
+                type: widget_1.actionWidgetTypes.LOAD_PREVIOUS_SUCCESS,
+                payload: { count: state.count + newUsers.length, results: newUsers, initialized: true }
+            });
         })
             .catch((error) => {
             dispatch({ type: widget_1.actionWidgetTypes.LOAD_NEXT_FAILURE, payload: { errorLoadNext: error } });

package/lib/cjs/shared/AddUsersButton/AddUsersButton.js

@@ -95,7 +95,7 @@ function AddUsersButton(inProps) {
     const handleConfirm = (0, react_1.useCallback)(() => {
         onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(invited);
         setInvited([]);
-    }, [invited]);
+    }, [invited, onConfirm]);
     // HANDLERS AUTOCOMPLETE
     const handleInputChange = (0, react_1.useCallback)((_, newValue, reason) => {
         switch (reason) {

package/lib/cjs/shared/CourseUsersTable/ChangeUsersStatus.js

@@ -21,7 +21,7 @@ function ChangeUserStatus(props) {
     const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
     // EFFECTS
     (0, react_1.useEffect)(() => {
-        setValue(`ui.editCourse.tab.users.table.select.${user.join_status}`);
+        setValue(`ui.editCourse.tab.users.table.select.${user.join_status || 'joined'}`);
     }, [user, setValue]);
     // HANDLERS
     const handleChange = (0, react_1.useCallback)((e) => {

package/lib/cjs/shared/CourseUsersTable/CourseUsersTable.js

@@ -52,7 +52,7 @@ function CourseUsersTable(inProps) {
     // EFFECTS
     (0, react_1.useEffect)(() => {
         setUsers(state.results);
-    }, [state.results]);
+    }, [state.results, setUsers]);
     // HANDLERS
     const handleChange = (0, react_1.useCallback)((e) => {
         const _value = e.target.value;
@@ -100,6 +100,6 @@ function CourseUsersTable(inProps) {
                                     }
                                     return ((0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ width: mode === 'dashboard' ? '20%' : '25%' }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: cell.id, defaultMessage: cell.id }) })) }), i));
                                 }) }) }), (0, jsx_runtime_1.jsxs)(material_1.TableBody, { children: [users.length > 0 &&
-                                    users.map((user, i) => ((0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.avatarWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: user.username, src: user.avatar }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: user.username }))] })) }), mode === 'dashboard' && ((0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.progressWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.LinearProgress, { className: classes.progress, variant: "determinate", value: user.user_completion_rate }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: `${Math.round(user.user_completion_rate)}%` }))] })) })), mode === 'edit' && ((0, jsx_runtime_1.jsx)(material_1.TableCell, { children: user.join_status !== types_1.SCCourseJoinStatusType.CREATOR && scUserContext.user.id !== user.id ? ((0, jsx_runtime_1.jsx)(ChangeUsersStatus_1.default, { course: course, user: user })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.editCourse.tab.users.table.select.${user.join_status}`, defaultMessage: `ui.editCourse.tab.users.table.select.${user.join_status}` }) }))) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: new Date(mode === 'requests' ? user.date_joined : user.joined_at).toLocaleDateString() })) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: new Date(mode === 'requests' ? user.date_joined : user.last_active_at).toLocaleDateString() })) }), mode === 'dashboard' && ((0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(SeeProgressButton_1.default, { course: course, user: user }) })), mode === 'requests' && ((0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(RequestButton_1.default, { course: course, user: user }) }))] }, i))), state.isLoadingNext && (0, jsx_runtime_1.jsx)(RowSkeleton_1.default, { editMode: mode !== 'dashboard' })] })] }) }), users.length > 0 && ((0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", variant: "outlined", color: "inherit", loading: state.isLoadingNext, disabled: !state.next, className: classes.loadingButton, 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.courseUsersTable.btn.label", defaultMessage: "ui.courseUsersTable.btn.label" }) })) }))), users.length === 0 && value.length === 0 && (0, jsx_runtime_1.jsx)(EmptyStatus_1.default, { icon: "face", title: emptyStatusTitle, description: emptyStatusDescription })] }));
+                                    users.map((user, i) => ((0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.avatarWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: user.username, src: user.avatar }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: user.username }))] })) }), mode === 'dashboard' && ((0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.progressWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.LinearProgress, { className: classes.progress, variant: "determinate", value: user.user_completion_rate }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: `${Math.round(user.user_completion_rate)}%` }))] })) })), mode === 'edit' && ((0, jsx_runtime_1.jsx)(material_1.TableCell, { children: user.join_status !== types_1.SCCourseJoinStatusType.CREATOR && scUserContext.user.id !== user.id ? ((0, jsx_runtime_1.jsx)(ChangeUsersStatus_1.default, { course: course, user: user })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.editCourse.tab.users.table.select.${user.join_status}`, defaultMessage: `ui.editCourse.tab.users.table.select.${user.join_status}` }) }))) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: new Date(mode === 'requests' ? user.date_joined : user.joined_at || new Date()).toLocaleDateString() })) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: new Date(mode === 'requests' ? user.date_joined : user.last_active_at || new Date()).toLocaleDateString() })) }), mode === 'dashboard' && ((0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(SeeProgressButton_1.default, { course: course, user: user }) })), mode === 'requests' && ((0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(RequestButton_1.default, { course: course, user: user }) }))] }, i))), state.isLoadingNext && (0, jsx_runtime_1.jsx)(RowSkeleton_1.default, { editMode: mode !== 'dashboard' })] })] }) }), users.length > 0 && ((0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", variant: "outlined", color: "inherit", loading: state.isLoadingNext, disabled: !state.next, className: classes.loadingButton, 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.courseUsersTable.btn.label", defaultMessage: "ui.courseUsersTable.btn.label" }) })) }))), users.length === 0 && value.length === 0 && (0, jsx_runtime_1.jsx)(EmptyStatus_1.default, { icon: "face", title: emptyStatusTitle, description: emptyStatusDescription })] }));
 }
 exports.default = (0, react_1.memo)(CourseUsersTable);

package/lib/esm/components/EditCourse/Requests.js

@@ -60,7 +60,14 @@ function Requests(props) {
                 Logger.error(SCOPE_SC_UI, error);
             });
         }
-    }, [state.isLoadingNext, state.initialized, course, dispatch]);
+    }, [state.isLoadingNext, state.initialized, course, dispatch, endpointQueryParams]);
+    // HANDLERS
+    const handleRemoveUser = useCallback((_msg, user) => {
+        dispatch({
+            type: actionWidgetTypes.SET_RESULTS,
+            payload: { count: state.results.length - 1, results: state.results.filter((result) => result.id !== user.id) }
+        });
+    }, [state.count, state.results, dispatch]);
     // EFFECTS
     useEffect(() => {
         let _t;
@@ -76,14 +83,7 @@ function Requests(props) {
         return () => {
             updatedUsers.current && PubSub.unsubscribe(updatedUsers.current);
         };
-    }, []);
-    // HANDLERS
-    const handleRemoveUser = useCallback((user) => {
-        dispatch({
-            type: actionWidgetTypes.SET_RESULTS,
-            payload: { count: state.count - 1, results: state.results.filter((result) => result.id !== user.id) }
-        });
-    }, [dispatch]);
+    }, [handleRemoveUser]);
     return (_jsxs(Box, { children: [_jsx(Typography, Object.assign({ variant: "h6" }, { children: _jsx(FormattedMessage, { id: "ui.editCourse.tab.requests.title", defaultMessage: "ui.editCourse.tab.requests.title", values: { requestsNumber: state.results.length } }) })), _jsx(Stack, Object.assign({ className: classes.usersStatusWrapper }, { children: _jsx(Status, { course: course }) })), _jsx(CourseUsersTable, { course: course, state: state, dispatch: dispatch, headerCells: headerCells, mode: "requests", emptyStatusTitle: "ui.courseUsersTable.empty.requests.title" })] }));
 }
 export default memo(Requests);

package/lib/esm/components/EditCourse/Users.js

@@ -67,7 +67,11 @@ function Users(props) {
                 Logger.error(SCOPE_SC_UI, error);
             });
         }
-    }, [state.isLoadingNext, state.initialized, course, dispatch]);
+    }, [state.isLoadingNext, state.initialized, course, dispatch, endpointQueryParams]);
+    // HANDLERS
+    const handleAddUser = useCallback((_msg, user) => {
+        dispatch({ type: actionWidgetTypes.LOAD_PREVIOUS_SUCCESS, payload: { count: state.count + 1, results: [user], initialized: true } });
+    }, [state.count, dispatch]);
     // EFFECTS
     useEffect(() => {
         let _t;
@@ -83,18 +87,17 @@ function Users(props) {
         return () => {
             updatedUsers.current && PubSub.unsubscribe(updatedUsers.current);
         };
-    }, []);
-    // HANDLERS
-    const handleAddUser = useCallback((user) => {
-        dispatch({ type: actionWidgetTypes.LOAD_PREVIOUS_SUCCESS, payload: { count: state.count + 1, results: [user], initialized: true } });
-    }, [dispatch]);
+    }, [handleAddUser]);
     const handleConfirm = useCallback((newUsers) => {
         const data = {
             joined: newUsers.map((user) => user.id)
         };
         CourseService.changeCourseUserRole(course.id, data)
             .then(() => {
-            dispatch({ type: actionWidgetTypes.RESET });
+            dispatch({
+                type: actionWidgetTypes.LOAD_PREVIOUS_SUCCESS,
+                payload: { count: state.count + newUsers.length, results: newUsers, initialized: true }
+            });
         })
             .catch((error) => {
             dispatch({ type: actionWidgetTypes.LOAD_NEXT_FAILURE, payload: { errorLoadNext: error } });

package/lib/esm/shared/AddUsersButton/AddUsersButton.js

@@ -93,7 +93,7 @@ function AddUsersButton(inProps) {
     const handleConfirm = useCallback(() => {
         onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(invited);
         setInvited([]);
-    }, [invited]);
+    }, [invited, onConfirm]);
     // HANDLERS AUTOCOMPLETE
     const handleInputChange = useCallback((_, newValue, reason) => {
         switch (reason) {

package/lib/esm/shared/CourseUsersTable/ChangeUsersStatus.js

@@ -19,7 +19,7 @@ function ChangeUserStatus(props) {
     const { enqueueSnackbar } = useSnackbar();
     // EFFECTS
     useEffect(() => {
-        setValue(`ui.editCourse.tab.users.table.select.${user.join_status}`);
+        setValue(`ui.editCourse.tab.users.table.select.${user.join_status || 'joined'}`);
     }, [user, setValue]);
     // HANDLERS
     const handleChange = useCallback((e) => {

package/lib/esm/shared/CourseUsersTable/CourseUsersTable.js

@@ -49,7 +49,7 @@ function CourseUsersTable(inProps) {
     // EFFECTS
     useEffect(() => {
         setUsers(state.results);
-    }, [state.results]);
+    }, [state.results, setUsers]);
     // HANDLERS
     const handleChange = useCallback((e) => {
         const _value = e.target.value;
@@ -97,6 +97,6 @@ function CourseUsersTable(inProps) {
                                     }
                                     return (_jsx(TableCell, Object.assign({ width: mode === 'dashboard' ? '20%' : '25%' }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: cell.id, defaultMessage: cell.id }) })) }), i));
                                 }) }) }), _jsxs(TableBody, { children: [users.length > 0 &&
-                                    users.map((user, i) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsxs(Stack, Object.assign({ className: classes.avatarWrapper }, { children: [_jsx(Avatar, { alt: user.username, src: user.avatar }), _jsx(Typography, Object.assign({ variant: "body2" }, { children: user.username }))] })) }), mode === 'dashboard' && (_jsx(TableCell, { children: _jsxs(Stack, Object.assign({ className: classes.progressWrapper }, { children: [_jsx(LinearProgress, { className: classes.progress, variant: "determinate", value: user.user_completion_rate }), _jsx(Typography, Object.assign({ variant: "body1" }, { children: `${Math.round(user.user_completion_rate)}%` }))] })) })), mode === 'edit' && (_jsx(TableCell, { children: user.join_status !== SCCourseJoinStatusType.CREATOR && scUserContext.user.id !== user.id ? (_jsx(ChangeUserStatus, { course: course, user: user })) : (_jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: `ui.editCourse.tab.users.table.select.${user.join_status}`, defaultMessage: `ui.editCourse.tab.users.table.select.${user.join_status}` }) }))) })), _jsx(TableCell, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: new Date(mode === 'requests' ? user.date_joined : user.joined_at).toLocaleDateString() })) }), _jsx(TableCell, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: new Date(mode === 'requests' ? user.date_joined : user.last_active_at).toLocaleDateString() })) }), mode === 'dashboard' && (_jsx(TableCell, { children: _jsx(SeeProgressButton, { course: course, user: user }) })), mode === 'requests' && (_jsx(TableCell, { children: _jsx(RequestButton, { course: course, user: user }) }))] }, i))), state.isLoadingNext && _jsx(RowSkeleton, { editMode: mode !== 'dashboard' })] })] }) }), users.length > 0 && (_jsx(LoadingButton, Object.assign({ size: "small", variant: "outlined", color: "inherit", loading: state.isLoadingNext, disabled: !state.next, className: classes.loadingButton, onClick: handleNext }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.courseUsersTable.btn.label", defaultMessage: "ui.courseUsersTable.btn.label" }) })) }))), users.length === 0 && value.length === 0 && _jsx(EmptyStatus, { icon: "face", title: emptyStatusTitle, description: emptyStatusDescription })] }));
+                                    users.map((user, i) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsxs(Stack, Object.assign({ className: classes.avatarWrapper }, { children: [_jsx(Avatar, { alt: user.username, src: user.avatar }), _jsx(Typography, Object.assign({ variant: "body2" }, { children: user.username }))] })) }), mode === 'dashboard' && (_jsx(TableCell, { children: _jsxs(Stack, Object.assign({ className: classes.progressWrapper }, { children: [_jsx(LinearProgress, { className: classes.progress, variant: "determinate", value: user.user_completion_rate }), _jsx(Typography, Object.assign({ variant: "body1" }, { children: `${Math.round(user.user_completion_rate)}%` }))] })) })), mode === 'edit' && (_jsx(TableCell, { children: user.join_status !== SCCourseJoinStatusType.CREATOR && scUserContext.user.id !== user.id ? (_jsx(ChangeUserStatus, { course: course, user: user })) : (_jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: `ui.editCourse.tab.users.table.select.${user.join_status}`, defaultMessage: `ui.editCourse.tab.users.table.select.${user.join_status}` }) }))) })), _jsx(TableCell, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: new Date(mode === 'requests' ? user.date_joined : user.joined_at || new Date()).toLocaleDateString() })) }), _jsx(TableCell, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: new Date(mode === 'requests' ? user.date_joined : user.last_active_at || new Date()).toLocaleDateString() })) }), mode === 'dashboard' && (_jsx(TableCell, { children: _jsx(SeeProgressButton, { course: course, user: user }) })), mode === 'requests' && (_jsx(TableCell, { children: _jsx(RequestButton, { course: course, user: user }) }))] }, i))), state.isLoadingNext && _jsx(RowSkeleton, { editMode: mode !== 'dashboard' })] })] }) }), users.length > 0 && (_jsx(LoadingButton, Object.assign({ size: "small", variant: "outlined", color: "inherit", loading: state.isLoadingNext, disabled: !state.next, className: classes.loadingButton, onClick: handleNext }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.courseUsersTable.btn.label", defaultMessage: "ui.courseUsersTable.btn.label" }) })) }))), users.length === 0 && value.length === 0 && _jsx(EmptyStatus, { icon: "face", title: emptyStatusTitle, description: emptyStatusDescription })] }));
 }
 export default memo(CourseUsersTable);