@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
86 lines (85 loc) • 4.58 kB
JavaScript
import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState } from 'react';
import { styled } from '@mui/material/styles';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import { TextField, Typography, FormGroup } from '@mui/material';
import { http, Endpoints } from '@selfcommunity/api-services';
import { Logger } from '@selfcommunity/utils';
import { useSCUser } from '@selfcommunity/react-core';
import BaseDialog from '../../../shared/BaseDialog';
import classNames from 'classnames';
import { SCOPE_SC_UI } from '../../../constants/Errors';
import { LoadingButton } from '@mui/lab';
import { PREFIX } from '../constants';
const messages = defineMessages({
name: {
id: 'ui.incubatorListWidget.createIncubatorDialog.formPlaceholder.name',
defaultMessage: 'ui.incubatorListWidget.createIncubatorDialog.formPlaceholder.name'
},
slogan: {
id: 'ui.incubatorListWidget.createIncubatorDialog.formPlaceholder.slogan',
defaultMessage: 'ui.incubatorListWidget.createIncubatorDialog.formPlaceholder.slogan'
}
});
const classes = {
root: `${PREFIX}-create-dialog-root`,
form: `${PREFIX}-form`,
name: `${PREFIX}-name`,
slogan: `${PREFIX}-slogan`,
intro: `${PREFIX}-intro`,
submittedMessage: `${PREFIX}-submitted-message`
};
const Root = styled(BaseDialog, {
name: PREFIX,
slot: 'CreateDialogRoot'
})(() => ({}));
export default function CreateIncubatorDialog(props) {
// PROPS
const { className, open, onClose } = props, rest = __rest(props, ["className", "open", "onClose"]);
// CONTEXT
const scUserContext = useSCUser();
// INTL
const intl = useIntl();
// STATE
const [name, setName] = useState('');
const [slogan, setSlogan] = useState('');
const [isSubmitting, setIsSubmitting] = useState(false);
const [submitted, setSubmitted] = useState(false);
const [error, setError] = useState('');
// HANDLERS
const handleSubmit = (event) => {
event.preventDefault();
setIsSubmitting(true);
http
.request({
url: Endpoints.CreateAnIncubator.url(),
method: Endpoints.CreateAnIncubator.method,
data: {
name: name,
slogan: slogan
}
})
.then((res) => {
setIsSubmitting(false);
setSubmitted(true);
})
.catch((error) => {
setError(error);
setIsSubmitting(false);
Logger.error(SCOPE_SC_UI, error);
});
};
if (!scUserContext.user) {
return null;
}
let dialogContent;
if (submitted) {
dialogContent = (_jsx(Typography, Object.assign({ variant: 'subtitle2', className: classes.submittedMessage }, { children: _jsx(FormattedMessage, { id: "ui.incubatorListWidget.createIncubatorDialog.propose.success", defaultMessage: "ui.incubatorListWidget.createIncubatorDialog.propose.success" }) })));
}
else {
dialogContent = (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ component: 'span', className: classes.intro }, { children: _jsx(FormattedMessage, { id: "ui.incubatorsListDialog.createIncubatorDialog.intro", defaultMessage: "ui.incubatorsListDialog.createIncubatorDialog.intro" }) })), _jsxs(FormGroup, Object.assign({ className: classes.form }, { children: [_jsx(TextField, { required: true, error: Boolean(error), className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: name, onChange: (event) => setName(event.target.value) }), _jsx(TextField, { multiline: true, error: Boolean(error), className: classes.slogan, placeholder: `${intl.formatMessage(messages.slogan)}`, margin: "normal", value: slogan, onChange: (event) => setSlogan(event.target.value) })] })), _jsx(LoadingButton, Object.assign({ loading: isSubmitting, disabled: !name || Boolean(error), variant: "contained", onClick: handleSubmit }, { children: _jsx(FormattedMessage, { id: "ui.incubatorListWidget.createIncubatorDialog.button", defaultMessage: "ui.incubatorListWidget.createIncubatorDialog.button" }) }))] }));
}
// RENDER
return (_jsx(Root, Object.assign({ title: _jsx(FormattedMessage, { id: "ui.incubatorListWidget.createIncubatorDialog.title", defaultMessage: "ui.incubatorListWidget.createIncubatorDialog.title" }), open: open, onClose: onClose, className: classNames(classes.root, className) }, rest, { children: dialogContent })));
}