@selfcommunity/react-ui 0.10.2-courses.171 → 0.10.2-courses.172

package/lib/cjs/components/CourseForm/CourseForm.js

@@ -99,7 +99,7 @@ const Root = (0, styles_1.styled)(material_1.Box, {
  * @param inProps
  */
 function CourseForm(inProps) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     //PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
@@ -185,28 +185,28 @@ function CourseForm(inProps) {
      */
     const handleSubmit = (0, react_1.useCallback)(() => {
         setField((prev) => (Object.assign(Object.assign({}, prev), { isSubmitting: true })));
+        const formData = new FormData();
+        if (field.imageOriginalFile) {
+            formData.append('image_original', field.imageOriginalFile);
+        }
+        formData.append('name', field.name);
+        formData.append('description', field.description);
+        formData.append('type', field.type);
+        if (field.privacy) {
+            formData.append('privacy', field.privacy);
+        }
+        if (field.categories) {
+            for (const key in field.categories) {
+                formData.append(key, field.categories[key]);
+            }
+        }
         let courseService;
         if (course) {
-            // Update
-            const data = Object.assign({ name: field.name, description: field.description, type: field.type, categories: field.categories }, (field.privacy && { privacy: field.privacy }));
-            courseService = api_services_1.CourseService.updateCourse(course.id, data, {
-                headers: { 'Content-Type': 'application/json' }
+            courseService = api_services_1.CourseService.updateCourse(course.id, formData, {
+                headers: { 'Content-Type': 'multipart/form-data' }
             });
         }
         else {
-            // Create
-            const formData = new FormData();
-            if (field.imageOriginalFile) {
-                formData.append('image_original', field.imageOriginalFile);
-            }
-            formData.append('name', field.name);
-            formData.append('description', field.description);
-            formData.append('type', field.type);
-            if (field.categories) {
-                for (const key in field.categories) {
-                    formData.append(key, field.categories[key]);
-                }
-            }
             courseService = api_services_1.CourseService.createCourse(formData, {
                 headers: { 'Content-Type': 'multipart/form-data' }
             });
@@ -214,18 +214,18 @@ function CourseForm(inProps) {
         courseService
             .then((data) => {
             notifyChanges(data);
-            setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: false })));
+            setField((prev) => (Object.assign(Object.assign({}, prev), { isSubmitting: false })));
             onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(data);
         })
             .catch((e) => {
             const _error = (0, api_services_1.formatHttpErrorCode)(e);
             if (Object.values(_error)[0]['error'] === 'unique') {
-                setError(Object.assign(Object.assign({}, error), { ['nameError']: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.name.error.unique", defaultMessage: "ui.courseForm.name.error.unique" }) }));
+                setError(Object.assign(Object.assign({}, error), { nameError: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.name.error.unique", defaultMessage: "ui.courseForm.name.error.unique" }) }));
             }
             else {
                 setError(Object.assign(Object.assign({}, error), _error));
             }
-            setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: false })));
+            setField((prev) => (Object.assign(Object.assign({}, prev), { isSubmitting: false })));
             utils_1.Logger.error(Errors_1.SCOPE_SC_UI, e);
             onError === null || onError === void 0 ? void 0 : onError(e);
         });
@@ -250,11 +250,11 @@ function CourseForm(inProps) {
     /**
      * Renders root object
      */
-    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: _step === Course_1.SCCourseFormStepType.GENERAL ? classes.stepOne : classes.stepTwo }, { children: [_step === Course_1.SCCourseFormStepType.GENERAL && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: Object.values(types_1.SCCourseTypologyType).map((option, index) => ((0, jsx_runtime_1.jsx)(material_1.Card, Object.assign({ className: (0, classnames_1.default)(classes.card, { [classes.selected]: option === field.type }) }, { children: (0, jsx_runtime_1.jsx)(material_1.CardActionArea, Object.assign({ onClick: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['type']: option }))) }, { children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "subtitle2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.courseForm.${option}.title`, defaultMessage: `ui.courseForm.${option}.title` }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.courseForm.${option}.info`, defaultMessage: `ui.courseForm.${option}.info` }) }))] }) })) }), index))) })), _step === Course_1.SCCourseFormStepType.CUSTOMIZATION && ((0, jsx_runtime_1.jsxs)(material_1.FormGroup, Object.assign({ className: classes.form }, { children: [course && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.contrastColor }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.edit.title.general", defaultMessage: "ui.courseForm.edit.title.general" }) }))), (0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: (0, jsx_runtime_1.jsx)(UploadCourseCover_1.default, { courseId: (_a = course === null || course === void 0 ? void 0 : course.id) !== null && _a !== void 0 ? _a : null, isCreationMode: !course, onChange: handleChangeCover }) })), (0, jsx_runtime_1.jsx)(material_1.TextField, { required: true, className: (0, classnames_1.default)(classes.name, classes.contrastBgColor), placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: field.name, name: "name", onChange: handleChange, InputProps: {
+    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: _step === Course_1.SCCourseFormStepType.GENERAL ? classes.stepOne : classes.stepTwo }, { children: [_step === Course_1.SCCourseFormStepType.GENERAL && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: Object.values(types_1.SCCourseTypologyType).map((option, index) => ((0, jsx_runtime_1.jsx)(material_1.Card, Object.assign({ className: (0, classnames_1.default)(classes.card, { [classes.selected]: option === field.type }) }, { children: (0, jsx_runtime_1.jsx)(material_1.CardActionArea, Object.assign({ onClick: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['type']: option }))) }, { children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "subtitle2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.courseForm.${option}.title`, defaultMessage: `ui.courseForm.${option}.title` }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.courseForm.${option}.info`, defaultMessage: `ui.courseForm.${option}.info` }) }))] }) })) }), index))) })), _step === Course_1.SCCourseFormStepType.CUSTOMIZATION && ((0, jsx_runtime_1.jsxs)(material_1.FormGroup, Object.assign({ className: classes.form }, { children: [course && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.contrastColor }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.edit.title.general", defaultMessage: "ui.courseForm.edit.title.general" }) }))), (0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: (0, jsx_runtime_1.jsx)(UploadCourseCover_1.default, { isUploading: field.isSubmitting, onChange: handleChangeCover }) })), (0, jsx_runtime_1.jsx)(material_1.TextField, { required: true, className: (0, classnames_1.default)(classes.name, classes.contrastBgColor), placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: field.name, name: "name", onChange: handleChange, InputProps: {
                                         endAdornment: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: Course_1.COURSE_TITLE_MAX_LENGTH - field.name.length }))
                                     }, error: Boolean(field.name.length > Course_1.COURSE_TITLE_MAX_LENGTH) || Boolean(error['nameError']), helperText: field.name.length > Course_1.COURSE_TITLE_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.name.error.maxLength", defaultMessage: "ui.courseForm.name.error.maxLength" })) : error['nameError'] ? (error['nameError']) : null }), (0, jsx_runtime_1.jsx)(material_1.TextField, { multiline: true, className: (0, classnames_1.default)(classes.description, classes.contrastBgColor), placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, InputProps: {
-                                        endAdornment: ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: ((_b = field.description) === null || _b === void 0 ? void 0 : _b.length) ? Course_1.COURSE_DESCRIPTION_MAX_LENGTH - field.description.length : Course_1.COURSE_DESCRIPTION_MAX_LENGTH })))
-                                    }, error: Boolean(((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) > Course_1.COURSE_DESCRIPTION_MAX_LENGTH), helperText: ((_d = field.description) === null || _d === void 0 ? void 0 : _d.length) > Course_1.COURSE_DESCRIPTION_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.description.error.maxLength", defaultMessage: "ui.courseForm.description.error.maxLength" })) : null }), (0, jsx_runtime_1.jsx)(CategoryAutocomplete_1.default, { defaultValue: field.categories, TextFieldProps: { label: intl.formatMessage(Object.keys(field.categories).length ? messages.category : messages.categoryEmpty) }, multiple: true, onChange: handleOnChangeCategory, className: classes.contrastBgColor }), course && ((0, jsx_runtime_1.jsx)(Edit_1.default, { course: course, onPrivacyChange: (privacy) => setField((prev) => (Object.assign(Object.assign({}, prev), { ['privacy']: privacy }))), className: classes.contrastBgColor }))] }))), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: (0, classnames_1.default)(classes.actions, classes.contrastBgColor) }, { children: (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", loading: field.isSubmitting, disabled: _step === Course_1.SCCourseFormStepType.GENERAL
+                                        endAdornment: ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: ((_a = field.description) === null || _a === void 0 ? void 0 : _a.length) ? Course_1.COURSE_DESCRIPTION_MAX_LENGTH - field.description.length : Course_1.COURSE_DESCRIPTION_MAX_LENGTH })))
+                                    }, error: Boolean(((_b = field.description) === null || _b === void 0 ? void 0 : _b.length) > Course_1.COURSE_DESCRIPTION_MAX_LENGTH), helperText: ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) > Course_1.COURSE_DESCRIPTION_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.description.error.maxLength", defaultMessage: "ui.courseForm.description.error.maxLength" })) : null }), (0, jsx_runtime_1.jsx)(CategoryAutocomplete_1.default, { defaultValue: field.categories, TextFieldProps: { label: intl.formatMessage(Object.keys(field.categories).length ? messages.category : messages.categoryEmpty) }, multiple: true, onChange: handleOnChangeCategory, className: classes.contrastBgColor }), course && ((0, jsx_runtime_1.jsx)(Edit_1.default, { course: course, onPrivacyChange: (privacy) => setField((prev) => (Object.assign(Object.assign({}, prev), { ['privacy']: privacy }))), className: classes.contrastBgColor }))] }))), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: (0, classnames_1.default)(classes.actions, classes.contrastBgColor) }, { children: (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", loading: field.isSubmitting, disabled: _step === Course_1.SCCourseFormStepType.GENERAL
                                     ? !field.type || Object.keys(error).length !== 0
                                     : _step === Course_1.SCCourseFormStepType.CUSTOMIZATION &&
                                         (!field.name ||

package/lib/cjs/components/CourseForm/UploadCourseCover.d.ts

@@ -1,9 +1,9 @@
 export interface UploadCourseCoverProps {
     /**
-     * Id of the course. It is optional only for course creation modal.
-     * @default null
+     * If the image is in uploadingstate
+     * @default false
      */
-    courseId?: number;
+    isUploading: boolean;
     /**
      * On change function.
      * @default null
@@ -14,11 +14,6 @@ export interface UploadCourseCoverProps {
      * @default null
      */
     className?: string;
-    /**
-     * Prop to handle cover loading in the create course modal.
-     * @default false
-     */
-    isCreationMode?: boolean;
     /**
      * Any other properties
      */

package/lib/cjs/components/CourseForm/UploadCourseCover.js

@@ -11,9 +11,6 @@ const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const system_1 = require("@mui/system");
 const constants_1 = require("./constants");
 const lab_1 = require("@mui/lab");
-const Errors_1 = require("../../constants/Errors");
-const api_services_1 = require("@selfcommunity/api-services");
-const utils_1 = require("@selfcommunity/utils");
 const react_intl_1 = require("react-intl");
 const messages = (0, react_intl_1.defineMessages)({
     errorLoadImage: {
@@ -57,15 +54,12 @@ function UploadCourseCover(inProps) {
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { courseId = null, onChange, className = false, isCreationMode = false } = props, rest = tslib_1.__rest(props, ["courseId", "onChange", "className", "isCreationMode"]);
+    const { isUploading = false, onChange, className = false } = props, rest = tslib_1.__rest(props, ["isUploading", "onChange", "className"]);
     //CONTEXT
     const scUserContext = (0, react_1.useContext)(react_core_1.SCUserContext);
     //STATE
     let fileInput = (0, react_1.useRef)(null);
-    const [loading, setLoading] = (0, react_1.useState)(false);
     const [alert, setAlert] = (0, react_1.useState)(null);
-    // INTL
-    const intl = (0, react_intl_1.useIntl)();
     // Anonymous
     if (!scUserContext.user) {
         return null;
@@ -83,47 +77,18 @@ function UploadCourseCover(inProps) {
         reader.onload = (e) => {
             const img = new Image();
             img.onload = () => {
-                if (isCreationMode) {
-                    onChange(fileInput);
-                }
-                else {
-                    onChange(fileInput);
-                    handleSave();
-                }
+                onChange(fileInput);
             };
             img.src = e.target.result;
         };
         reader.readAsDataURL(selectedFile);
     };
-    /**
-     * Handles cover saving after upload action
-     */
-    function handleSave() {
-        if (!fileInput) {
-            return;
-        }
-        setLoading(true);
-        const formData = new FormData();
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        formData.append('image_original', fileInput);
-        api_services_1.CourseService.changeCourseCover(courseId, formData, { headers: { 'Content-Type': 'multipart/form-data' } })
-            .then((data) => {
-            // onChange && onChange(data.image_medium);
-            setLoading(false);
-        })
-            .catch((error) => {
-            utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
-            setLoading(false);
-            setAlert(intl.formatMessage(messages.errorLoadImage));
-        });
-    }
     /**
      * If there is an error
      */
     if (alert) {
         return ((0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ color: "error", onClose: () => setAlert(null) }, { children: alert })));
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { type: "file", onChange: handleUpload, ref: fileInput, hidden: true, accept: ".gif,.png,.jpg,.jpeg" }), (0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), size: "medium", variant: "contained", disabled: loading, onClick: () => fileInput.current.click(), loading: loading }, rest, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "image" }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { type: "file", onChange: handleUpload, ref: fileInput, hidden: true, accept: ".gif,.png,.jpg,.jpeg" }), (0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), size: "medium", variant: "contained", disabled: isUploading, onClick: () => fileInput.current.click(), loading: isUploading }, rest, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "image" }) }))] }));
 }
 exports.default = UploadCourseCover;

package/lib/esm/components/CourseForm/CourseForm.js

@@ -97,7 +97,7 @@ const Root = styled(Box, {
  * @param inProps
  */
 export default function CourseForm(inProps) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     //PROPS
     const props = useThemeProps({
         props: inProps,
@@ -183,28 +183,28 @@ export default function CourseForm(inProps) {
      */
     const handleSubmit = useCallback(() => {
         setField((prev) => (Object.assign(Object.assign({}, prev), { isSubmitting: true })));
+        const formData = new FormData();
+        if (field.imageOriginalFile) {
+            formData.append('image_original', field.imageOriginalFile);
+        }
+        formData.append('name', field.name);
+        formData.append('description', field.description);
+        formData.append('type', field.type);
+        if (field.privacy) {
+            formData.append('privacy', field.privacy);
+        }
+        if (field.categories) {
+            for (const key in field.categories) {
+                formData.append(key, field.categories[key]);
+            }
+        }
         let courseService;
         if (course) {
-            // Update
-            const data = Object.assign({ name: field.name, description: field.description, type: field.type, categories: field.categories }, (field.privacy && { privacy: field.privacy }));
-            courseService = CourseService.updateCourse(course.id, data, {
-                headers: { 'Content-Type': 'application/json' }
+            courseService = CourseService.updateCourse(course.id, formData, {
+                headers: { 'Content-Type': 'multipart/form-data' }
             });
         }
         else {
-            // Create
-            const formData = new FormData();
-            if (field.imageOriginalFile) {
-                formData.append('image_original', field.imageOriginalFile);
-            }
-            formData.append('name', field.name);
-            formData.append('description', field.description);
-            formData.append('type', field.type);
-            if (field.categories) {
-                for (const key in field.categories) {
-                    formData.append(key, field.categories[key]);
-                }
-            }
             courseService = CourseService.createCourse(formData, {
                 headers: { 'Content-Type': 'multipart/form-data' }
             });
@@ -212,18 +212,18 @@ export default function CourseForm(inProps) {
         courseService
             .then((data) => {
             notifyChanges(data);
-            setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: false })));
+            setField((prev) => (Object.assign(Object.assign({}, prev), { isSubmitting: false })));
             onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(data);
         })
             .catch((e) => {
             const _error = formatHttpErrorCode(e);
             if (Object.values(_error)[0]['error'] === 'unique') {
-                setError(Object.assign(Object.assign({}, error), { ['nameError']: _jsx(FormattedMessage, { id: "ui.courseForm.name.error.unique", defaultMessage: "ui.courseForm.name.error.unique" }) }));
+                setError(Object.assign(Object.assign({}, error), { nameError: _jsx(FormattedMessage, { id: "ui.courseForm.name.error.unique", defaultMessage: "ui.courseForm.name.error.unique" }) }));
             }
             else {
                 setError(Object.assign(Object.assign({}, error), _error));
             }
-            setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: false })));
+            setField((prev) => (Object.assign(Object.assign({}, prev), { isSubmitting: false })));
             Logger.error(SCOPE_SC_UI, e);
             onError === null || onError === void 0 ? void 0 : onError(e);
         });
@@ -248,11 +248,11 @@ export default function CourseForm(inProps) {
     /**
      * Renders root object
      */
-    return (_jsxs(Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsxs(Box, Object.assign({ className: _step === SCCourseFormStepType.GENERAL ? classes.stepOne : classes.stepTwo }, { children: [_step === SCCourseFormStepType.GENERAL && (_jsx(_Fragment, { children: Object.values(SCCourseTypologyType).map((option, index) => (_jsx(Card, Object.assign({ className: classNames(classes.card, { [classes.selected]: option === field.type }) }, { children: _jsx(CardActionArea, Object.assign({ onClick: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['type']: option }))) }, { children: _jsxs(CardContent, { children: [_jsx(Typography, Object.assign({ variant: "subtitle2" }, { children: _jsx(FormattedMessage, { id: `ui.courseForm.${option}.title`, defaultMessage: `ui.courseForm.${option}.title` }) })), _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: `ui.courseForm.${option}.info`, defaultMessage: `ui.courseForm.${option}.info` }) }))] }) })) }), index))) })), _step === SCCourseFormStepType.CUSTOMIZATION && (_jsxs(FormGroup, Object.assign({ className: classes.form }, { children: [course && (_jsx(Typography, Object.assign({ variant: "h5", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.courseForm.edit.title.general", defaultMessage: "ui.courseForm.edit.title.general" }) }))), _jsx(Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: _jsx(UploadCourseCover, { courseId: (_a = course === null || course === void 0 ? void 0 : course.id) !== null && _a !== void 0 ? _a : null, isCreationMode: !course, onChange: handleChangeCover }) })), _jsx(TextField, { required: true, className: classNames(classes.name, classes.contrastBgColor), placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: field.name, name: "name", onChange: handleChange, InputProps: {
+    return (_jsxs(Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsxs(Box, Object.assign({ className: _step === SCCourseFormStepType.GENERAL ? classes.stepOne : classes.stepTwo }, { children: [_step === SCCourseFormStepType.GENERAL && (_jsx(_Fragment, { children: Object.values(SCCourseTypologyType).map((option, index) => (_jsx(Card, Object.assign({ className: classNames(classes.card, { [classes.selected]: option === field.type }) }, { children: _jsx(CardActionArea, Object.assign({ onClick: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['type']: option }))) }, { children: _jsxs(CardContent, { children: [_jsx(Typography, Object.assign({ variant: "subtitle2" }, { children: _jsx(FormattedMessage, { id: `ui.courseForm.${option}.title`, defaultMessage: `ui.courseForm.${option}.title` }) })), _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: `ui.courseForm.${option}.info`, defaultMessage: `ui.courseForm.${option}.info` }) }))] }) })) }), index))) })), _step === SCCourseFormStepType.CUSTOMIZATION && (_jsxs(FormGroup, Object.assign({ className: classes.form }, { children: [course && (_jsx(Typography, Object.assign({ variant: "h5", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.courseForm.edit.title.general", defaultMessage: "ui.courseForm.edit.title.general" }) }))), _jsx(Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: _jsx(UploadCourseCover, { isUploading: field.isSubmitting, onChange: handleChangeCover }) })), _jsx(TextField, { required: true, className: classNames(classes.name, classes.contrastBgColor), placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: field.name, name: "name", onChange: handleChange, InputProps: {
                                         endAdornment: _jsx(Typography, Object.assign({ variant: "body2" }, { children: COURSE_TITLE_MAX_LENGTH - field.name.length }))
                                     }, error: Boolean(field.name.length > COURSE_TITLE_MAX_LENGTH) || Boolean(error['nameError']), helperText: field.name.length > COURSE_TITLE_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.courseForm.name.error.maxLength", defaultMessage: "ui.courseForm.name.error.maxLength" })) : error['nameError'] ? (error['nameError']) : null }), _jsx(TextField, { multiline: true, className: classNames(classes.description, classes.contrastBgColor), placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, InputProps: {
-                                        endAdornment: (_jsx(Typography, Object.assign({ variant: "body2" }, { children: ((_b = field.description) === null || _b === void 0 ? void 0 : _b.length) ? COURSE_DESCRIPTION_MAX_LENGTH - field.description.length : COURSE_DESCRIPTION_MAX_LENGTH })))
-                                    }, error: Boolean(((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) > COURSE_DESCRIPTION_MAX_LENGTH), helperText: ((_d = field.description) === null || _d === void 0 ? void 0 : _d.length) > COURSE_DESCRIPTION_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.courseForm.description.error.maxLength", defaultMessage: "ui.courseForm.description.error.maxLength" })) : null }), _jsx(CategoryAutocomplete, { defaultValue: field.categories, TextFieldProps: { label: intl.formatMessage(Object.keys(field.categories).length ? messages.category : messages.categoryEmpty) }, multiple: true, onChange: handleOnChangeCategory, className: classes.contrastBgColor }), course && (_jsx(CourseEdit, { course: course, onPrivacyChange: (privacy) => setField((prev) => (Object.assign(Object.assign({}, prev), { ['privacy']: privacy }))), className: classes.contrastBgColor }))] }))), _jsx(Box, Object.assign({ className: classNames(classes.actions, classes.contrastBgColor) }, { children: _jsx(LoadingButton, Object.assign({ size: "small", loading: field.isSubmitting, disabled: _step === SCCourseFormStepType.GENERAL
+                                        endAdornment: (_jsx(Typography, Object.assign({ variant: "body2" }, { children: ((_a = field.description) === null || _a === void 0 ? void 0 : _a.length) ? COURSE_DESCRIPTION_MAX_LENGTH - field.description.length : COURSE_DESCRIPTION_MAX_LENGTH })))
+                                    }, error: Boolean(((_b = field.description) === null || _b === void 0 ? void 0 : _b.length) > COURSE_DESCRIPTION_MAX_LENGTH), helperText: ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) > COURSE_DESCRIPTION_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.courseForm.description.error.maxLength", defaultMessage: "ui.courseForm.description.error.maxLength" })) : null }), _jsx(CategoryAutocomplete, { defaultValue: field.categories, TextFieldProps: { label: intl.formatMessage(Object.keys(field.categories).length ? messages.category : messages.categoryEmpty) }, multiple: true, onChange: handleOnChangeCategory, className: classes.contrastBgColor }), course && (_jsx(CourseEdit, { course: course, onPrivacyChange: (privacy) => setField((prev) => (Object.assign(Object.assign({}, prev), { ['privacy']: privacy }))), className: classes.contrastBgColor }))] }))), _jsx(Box, Object.assign({ className: classNames(classes.actions, classes.contrastBgColor) }, { children: _jsx(LoadingButton, Object.assign({ size: "small", loading: field.isSubmitting, disabled: _step === SCCourseFormStepType.GENERAL
                                     ? !field.type || Object.keys(error).length !== 0
                                     : _step === SCCourseFormStepType.CUSTOMIZATION &&
                                         (!field.name ||

package/lib/esm/components/CourseForm/UploadCourseCover.d.ts

@@ -1,9 +1,9 @@
 export interface UploadCourseCoverProps {
     /**
-     * Id of the course. It is optional only for course creation modal.
-     * @default null
+     * If the image is in uploadingstate
+     * @default false
      */
-    courseId?: number;
+    isUploading: boolean;
     /**
      * On change function.
      * @default null
@@ -14,11 +14,6 @@ export interface UploadCourseCoverProps {
      * @default null
      */
     className?: string;
-    /**
-     * Prop to handle cover loading in the create course modal.
-     * @default false
-     */
-    isCreationMode?: boolean;
     /**
      * Any other properties
      */

package/lib/esm/components/CourseForm/UploadCourseCover.js

@@ -9,10 +9,7 @@ import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
 import { PREFIX } from './constants';
 import { LoadingButton } from '@mui/lab';
-import { SCOPE_SC_UI } from '../../constants/Errors';
-import { CourseService } from '@selfcommunity/api-services';
-import { Logger } from '@selfcommunity/utils';
-import { defineMessages, useIntl } from 'react-intl';
+import { defineMessages } from 'react-intl';
 const messages = defineMessages({
     errorLoadImage: {
         id: 'ui.changeGroupCover.button.change.alertErrorImage',
@@ -55,15 +52,12 @@ export default function UploadCourseCover(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { courseId = null, onChange, className = false, isCreationMode = false } = props, rest = __rest(props, ["courseId", "onChange", "className", "isCreationMode"]);
+    const { isUploading = false, onChange, className = false } = props, rest = __rest(props, ["isUploading", "onChange", "className"]);
     //CONTEXT
     const scUserContext = useContext(SCUserContext);
     //STATE
     let fileInput = useRef(null);
-    const [loading, setLoading] = useState(false);
     const [alert, setAlert] = useState(null);
-    // INTL
-    const intl = useIntl();
     // Anonymous
     if (!scUserContext.user) {
         return null;
@@ -81,46 +75,17 @@ export default function UploadCourseCover(inProps) {
         reader.onload = (e) => {
             const img = new Image();
             img.onload = () => {
-                if (isCreationMode) {
-                    onChange(fileInput);
-                }
-                else {
-                    onChange(fileInput);
-                    handleSave();
-                }
+                onChange(fileInput);
             };
             img.src = e.target.result;
         };
         reader.readAsDataURL(selectedFile);
     };
-    /**
-     * Handles cover saving after upload action
-     */
-    function handleSave() {
-        if (!fileInput) {
-            return;
-        }
-        setLoading(true);
-        const formData = new FormData();
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        formData.append('image_original', fileInput);
-        CourseService.changeCourseCover(courseId, formData, { headers: { 'Content-Type': 'multipart/form-data' } })
-            .then((data) => {
-            // onChange && onChange(data.image_medium);
-            setLoading(false);
-        })
-            .catch((error) => {
-            Logger.error(SCOPE_SC_UI, error);
-            setLoading(false);
-            setAlert(intl.formatMessage(messages.errorLoadImage));
-        });
-    }
     /**
      * If there is an error
      */
     if (alert) {
         return (_jsx(Alert, Object.assign({ color: "error", onClose: () => setAlert(null) }, { children: alert })));
     }
-    return (_jsxs(_Fragment, { children: [_jsx("input", { type: "file", onChange: handleUpload, ref: fileInput, hidden: true, accept: ".gif,.png,.jpg,.jpeg" }), _jsx(Root, Object.assign({ className: classNames(classes.root, className), size: "medium", variant: "contained", disabled: loading, onClick: () => fileInput.current.click(), loading: loading }, rest, { children: _jsx(Icon, { children: "image" }) }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx("input", { type: "file", onChange: handleUpload, ref: fileInput, hidden: true, accept: ".gif,.png,.jpg,.jpeg" }), _jsx(Root, Object.assign({ className: classNames(classes.root, className), size: "medium", variant: "contained", disabled: isUploading, onClick: () => fileInput.current.click(), loading: isUploading }, rest, { children: _jsx(Icon, { children: "image" }) }))] }));
 }