@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
194 lines (193 loc) • 11.3 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const styles_1 = require("@mui/material/styles");
const Button_1 = tslib_1.__importDefault(require("@mui/material/Button"));
const Typography_1 = tslib_1.__importDefault(require("@mui/material/Typography"));
const material_1 = require("@mui/material");
const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
const api_services_1 = require("@selfcommunity/api-services");
const react_core_1 = require("@selfcommunity/react-core");
const react_intl_1 = require("react-intl");
const BaseDialog_1 = tslib_1.__importDefault(require("../../../shared/BaseDialog"));
const ConfirmDialog_1 = tslib_1.__importDefault(require("../../../shared/ConfirmDialog/ConfirmDialog"));
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const CircularProgress_1 = tslib_1.__importDefault(require("@mui/material/CircularProgress"));
const seamless_scroll_polyfill_1 = require("seamless-scroll-polyfill");
const Errors_1 = require("../../../constants/Errors");
const utils_1 = require("@selfcommunity/utils");
const constants_1 = require("../constants");
const classes = {
dialogRoot: `${constants_1.PREFIX}-dialog-root`,
upload: `${constants_1.PREFIX}-upload`,
imagesList: `${constants_1.PREFIX}-images-list`,
imageItem: `${constants_1.PREFIX}-image-item`,
primary: `${constants_1.PREFIX}-primary`
};
const Root = (0, styles_1.styled)(BaseDialog_1.default, {
name: constants_1.PREFIX,
slot: 'DialogRoot'
})(() => ({}));
function ChangePictureDialog(props) {
//PROPS
const { open, onChange, onClose, className } = props, rest = tslib_1.__rest(props, ["open", "onChange", "onClose", "className"]);
//CONTEXT
const scUserContext = (0, react_1.useContext)(react_core_1.SCUserContext);
const scContext = (0, react_1.useContext)(react_core_1.SCContext);
//STATE
const [file, setFile] = (0, react_1.useState)(scUserContext.user['avatar']);
const [error, setError] = (0, react_1.useState)(false);
const [alert, setAlert] = (0, react_1.useState)(false);
const [primary, setPrimary] = (0, react_1.useState)(null);
const [avatars, setAvatars] = (0, react_1.useState)([]);
const [deleteAvatarId, setDeleteAvatarId] = (0, react_1.useState)(null);
let fileInput = (0, react_1.useRef)(null);
const [openDeleteAvatarDialog, setOpenDeleteAvatarDialog] = (0, react_1.useState)(false);
const [isDeletingAvatar, setIsDeletingAvatar] = (0, react_1.useState)(false);
const [loading, setLoading] = (0, react_1.useState)(false);
/**
* Handles open confirm delete avatar dialog
* @param id
*/
function handleOpen(id) {
setOpenDeleteAvatarDialog(true);
setDeleteAvatarId(id);
}
/**
* Handles avatar upload
* @param event
*/
function handleUpload(event) {
var _a;
const maxSize = 3 * 1024 * 1024;
if (event && ((_a = event.target.files[0]) === null || _a === void 0 ? void 0 : _a.size) <= maxSize) {
fileInput = event.target.files[0];
setFile(URL.createObjectURL(fileInput));
handleSave();
}
else {
setAlert(true);
}
}
/**
* Performs save avatar after upload
*/
function handleSave() {
setLoading(true);
const formData = new FormData();
formData.append('avatar', fileInput);
api_services_1.UserService.addUserAvatar(formData, { headers: { 'Content-Type': 'multipart/form-data' } })
.then((data) => {
setAvatars((prev) => [...prev, data]);
selectPrimaryAvatar(data);
setLoading(false);
scrollToEndListAvatars();
setError(false);
})
.catch((error) => {
setError(true);
setLoading(false);
utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
});
}
/**
* Handle scroll to the last item added in the list of avatars
*/
function scrollToEndListAvatars() {
setTimeout(() => {
const element = document.getElementById(`avatarsList`);
if (element) {
(0, seamless_scroll_polyfill_1.scroll)(element, { top: element.scrollHeight, behavior: 'smooth' });
}
}, 200);
}
/**
* Fetches the list of avatars
*/
const fetchUserAvatars = (next = api_services_1.Endpoints.GetAvatars.url({})) => tslib_1.__awaiter(this, void 0, void 0, function* () {
const data = yield api_services_1.UserService.getUserAvatars({ url: next });
return data.next ? data.results.concat(yield fetchUserAvatars(data.next)) : data.results;
});
/**
* Gets the primary avatar from a list of avatars
* @param data
*/
function getPrimaryAvatar(data) {
return data.find((a) => a.primary === true);
}
/**
* Selects primary avatar
* Only if another avatar is selected (primary !== avatar.id)
* @param avatar
*/
function selectPrimaryAvatar(avatar) {
if (avatar.id !== primary) {
api_services_1.UserService.setUserPrimaryAvatar(avatar.id, { headers: { Authorization: `Bearer ${scContext.settings.session.authToken.accessToken}` } })
.then(() => {
scUserContext.updateUser({ avatar: avatar.avatar });
setPrimary(avatar.id);
onChange && onChange(avatar);
})
.catch((error) => {
utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
});
}
}
/**
* Handles deletion of a specific avatar
*/
function deleteAvatar() {
setIsDeletingAvatar(true);
api_services_1.UserService.removeUserAvatar(deleteAvatarId, { headers: { Authorization: `Bearer ${scContext.settings.session.authToken.accessToken}` } })
.then(() => {
const _avatars = avatars.filter((a) => a.id !== deleteAvatarId);
setAvatars(_avatars);
setIsDeletingAvatar(false);
setOpenDeleteAvatarDialog(false);
if (primary === deleteAvatarId) {
if (_avatars.length > 0) {
selectPrimaryAvatar(_avatars[_avatars.length - 1]);
}
else {
// if there are no more avatars set auto generated image
onChange && onChange(null);
}
}
})
.catch((error) => {
setOpenDeleteAvatarDialog(false);
utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
});
}
/**
* On mount, fetches the list of scUser's avatars
*/
(0, react_1.useEffect)(() => {
fetchUserAvatars()
.then((data) => {
const primary = getPrimaryAvatar(data);
if (data && data.length) {
setAvatars(data);
setPrimary(primary.id);
setFile(primary.avatar);
}
})
.catch((error) => {
utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
});
}, []);
/**
* Renders root object
*/
return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.dialogRoot, className), title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.changePicture.title", id: "ui.changePicture.title" }), onClose: onClose, open: open }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.upload }, { children: [alert ? ((0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ color: "error", onClose: () => setAlert(false) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.changePicture.button.upload.alert", defaultMessage: "ui.changePicture.button.upload.alert" }) }))) : ((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)(Button_1.default, Object.assign({ disabled: loading || isDeletingAvatar, variant: "outlined", onClick: () => fileInput.current.click(), color: error ? 'error' : 'primary', startIcon: loading ? null : (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "folder_open" }) }, { children: loading ? ((0, jsx_runtime_1.jsx)(CircularProgress_1.default, { size: 15 })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: error ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.changePicture.button.upload.error", defaultMessage: "ui.changePicture.button.upload.error" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.changePicture.button.upload", defaultMessage: "ui.changePicture.button.upload" })) })) }))] })), (0, jsx_runtime_1.jsx)(Typography_1.default, Object.assign({ component: "span", fontSize: "small", color: "text.secondary", gutterBottom: true }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.changePicture.info", defaultMessage: "ui.changePicture.info", values: {
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
// @ts-ignore
li: (chunks) => (0, jsx_runtime_1.jsx)("li", { children: chunks }),
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
// @ts-ignore
ul: (chunks) => (0, jsx_runtime_1.jsx)("ul", { children: chunks })
} }) }))] })), (0, jsx_runtime_1.jsx)(material_1.ImageList, Object.assign({ cols: 3, rowHeight: 'auto', id: "avatarsList", classes: { root: classes.imagesList } }, { children: avatars.map((avatar) => ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.imageItem }, { children: (0, jsx_runtime_1.jsxs)(material_1.ImageListItem, Object.assign({ className: primary === avatar.id ? classes.primary : '', onClick: () => selectPrimaryAvatar(avatar) }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar.avatar, loading: "lazy", alt: 'img' }), (0, jsx_runtime_1.jsx)(material_1.ImageListItemBar, { position: "top", actionIcon: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => handleOpen(avatar.id), size: "small" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "delete" }) })) })] }), avatar.id) }), avatar.id))) })), openDeleteAvatarDialog && ((0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { open: openDeleteAvatarDialog, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.changePicture.dialog.msg", defaultMessage: "ui.changePicture.dialog.msg" }), btnConfirm: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.changePicture.dialog.confirm", defaultMessage: "ui.changePicture.dialog.confirm" }), onConfirm: deleteAvatar, isUpdating: isDeletingAvatar, onClose: () => setOpenDeleteAvatarDialog(false) }))] })));
}
exports.default = ChangePictureDialog;