@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
129 lines (123 loc) • 6.52 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 system_1 = require("@mui/system");
const styles_1 = require("@mui/material/styles");
const material_1 = require("@mui/material");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const api_services_1 = require("@selfcommunity/api-services");
const utils_1 = require("@selfcommunity/utils");
const react_core_1 = require("@selfcommunity/react-core");
const Errors_1 = require("../../constants/Errors");
const react_intl_1 = require("react-intl");
const LoadingButton_1 = tslib_1.__importDefault(require("@mui/lab/LoadingButton"));
const PREFIX = 'SCAccountDelete';
const classes = {
root: `${PREFIX}-root`,
message: `${PREFIX}-message`,
confirm: `${PREFIX}-confirm`,
button: `${PREFIX}-button`
};
const Root = (0, styles_1.styled)(material_1.Box, {
name: PREFIX,
slot: 'Root',
overridesResolver: (props, styles) => styles.root
})(() => ({}));
/**
* > API documentation for the Community-JS AccountDelete component. Learn about the available props and the CSS API.
*
*
* This component allows users to display the logic behind user deletion.
* Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/AccountDelete)
#### Import
```jsx
import {AccountDelete} from '@selfcommunity/react-ui';
```
#### Component Name
The name `SCAccountDelete` can be used when providing style overrides in the theme.
#### CSS
|Rule Name|Global class|Description|
|---|---|---|
|root|.SCAccountDelete-root|Styles applied to the root element.|
|message|.SCAccountDelete-message|Styles applied to the message element section.|
|confirm|.SCAccountDelete-confirm|Styles applied to the confirm element section.|
|button|.SCAccountDelete-button|Styles applied to the button element.|
* @param inProps
*/
function AccountDelete(inProps) {
// PROPS
const props = (0, system_1.useThemeProps)({
props: inProps,
name: PREFIX
});
const { className = '', onLogout, onDeleteAccount } = props, rest = tslib_1.__rest(props, ["className", "onLogout", "onDeleteAccount"]);
// CONTEXT
const scUserContext = (0, react_core_1.useSCUser)();
// PREFERENCES
const scPreferences = (0, react_core_1.useSCPreferences)();
const communityName = (0, react_1.useMemo)(() => {
return scPreferences.preferences && react_core_1.SCPreferences.TEXT_APPLICATION_NAME in scPreferences.preferences
? scPreferences.preferences[react_core_1.SCPreferences.TEXT_APPLICATION_NAME].value
: null;
}, [scPreferences.preferences]);
// STATE
const [isDeleting, setIsDeleting] = (0, react_1.useState)(false);
const [error, setError] = (0, react_1.useState)(null);
const [confirm, setConfirm] = (0, react_1.useState)('');
// CONST
const authUserId = scUserContext.user ? scUserContext.user.id : null;
// INTL
const intl = (0, react_intl_1.useIntl)();
/**
* Handle confirm delete account
*/
const handleDelete = (0, react_1.useCallback)(() => {
setIsDeleting(true);
setError(null);
api_services_1.UserService.userDelete(scUserContext.user.id, 0)
.then(() => {
setIsDeleting(false);
onDeleteAccount && onDeleteAccount(scUserContext.user);
handleLogout();
})
.catch((_error) => {
setError(intl.formatMessage({ id: 'ui.common.error.action', defaultMessage: 'ui.common.error.action' }));
utils_1.Logger.error(Errors_1.SCOPE_SC_UI, _error);
})
.then(() => setIsDeleting(false));
}, [setIsDeleting, setError, onDeleteAccount]);
/**
* Handle logout
*/
const handleLogout = (0, react_1.useCallback)(() => {
scUserContext.logout();
onLogout && onLogout();
}, [scUserContext.logout, onLogout]);
const handleChange = (0, react_1.useCallback)((event) => setConfirm(event.target.value), [setConfirm]);
/**
* If there's no authUserId, component is hidden.
*/
if (!authUserId) {
return null;
}
/**
* Renders root object
*/
return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.message, component: material_1.Box }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountDelete.message", defaultMessage: "ui.accountDelete.message", values: {
communityName,
// 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.jsxs)(material_1.Typography, Object.assign({ className: classes.confirm, component: material_1.Box }, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountDelete.confirmMessage", defaultMessage: "ui.accountDelete.confirmMessage", values: {
username: scUserContext.user.username,
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
// @ts-ignore
b: (chunks) => (0, jsx_runtime_1.jsx)("b", { children: chunks })
} }), (0, jsx_runtime_1.jsx)(material_1.TextField, { name: "confirm", value: confirm, onChange: handleChange, autoComplete: "off", size: "small" })] })), error && (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ color: "error" }, { children: error })), (0, jsx_runtime_1.jsx)(LoadingButton_1.default, Object.assign({ className: classes.button, size: "small", disabled: isDeleting || confirm !== scUserContext.user.username, variant: "outlined", onClick: handleDelete }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountDelete.buttonLabel", defaultMessage: "ui.accountDelete.buttonLabel" }) }))] })));
}
exports.default = AccountDelete;