node-red-contrib-chatbot
Version:
REDBot a Chat bot for a full featured chat bot for Telegram, Facebook Messenger and Slack. Almost no coding skills required
187 lines (175 loc) • 4.92 kB
JavaScript
import React, { useState } from 'react';
import { useMutation } from 'react-apollo';
import _ from 'lodash';
import { Modal, FormGroup, ControlLabel, FormControl, HelpBlock, Form, Button } from 'rsuite';
import gql from 'graphql-tag';
import PropTypes from 'prop-types';
import useMCContext from '../../../src/hooks/mc-context';
import UserAutocomplete from '../../../src/components/user-autocomplete';
import Transport from '../../../src/components/transport';
const UserLabel = ({ user }) => {
if (!_.isEmpty(user.first_name) || !_.isEmpty(user.last_name)) {
return (
<span>
<b>{[user.first_name, user.last_name].filter(s => !_.isEmpty(s)).join(' ')}</b>
<em>(id: {user.id})</em>
</span>
);
} else if (!_.isEmpty(user.username)) {
return (
<span>
<b>{user.username}</b>
<em>(id: {user.id})</em>
</span>
);
} else {
return (
<span>
<b>Anonymous</b>
<em>(id: {user.id})</em>
</span>
);
}
};
UserLabel.propTypes = {
user: PropTypes.shape({
id: PropTypes.number,
userId: PropTypes.string,
chatIds: PropTypes.arrayOf(PropTypes.shape({
chatId: PropTypes.string,
transport: PropTypes.string
}))
})
};
const MERGE_USER = gql`
mutation($fromId: Int!, $toId: Int!, $chatbotId: String!) {
user: mergeUser(fromId: $fromId, toId: $toId, chatbotId: $chatbotId) {
id,
username,
userId,
first_name,
last_name,
username,
language,
payload,
createdAt,
email,
chatIds {
id,
transport,
chatId
}
}
}`;
const MergeModal = ({
user,
onCancel = () => {},
onSubmit = () => {},
disabled = false
}) => {
const [formValue, setFormValue] = useState({});
const [formError, setFormError] = useState(null);
return (
<Modal backdrop show onHide={onCancel} size="sm" overflow={false} className="modal-merge-user">
<Modal.Header>
<Modal.Title>Merge User <em>"{user.userId}"</em></Modal.Title>
</Modal.Header>
<Modal.Body>
<Form
formValue={formValue}
formError={formError}
onChange={formValue => {
setFormValue(formValue);
setFormError(null);
}}
fluid autoComplete="off"
>
<FormGroup>
<ControlLabel>User to merge to</ControlLabel>
<FormControl
disabled={disabled}
name="intoUser"
excludeIds={[user.id]}
accepter={UserAutocomplete}
/>
<HelpBlock>
This will merge the user <UserLabel user={user} /> into the selected user. Fields like <em>email</em>,
<em> first_name</em>, <em>last_name</em>, <em>username</em>, <em>language</em> will be copied into
the destination user (if empty), the <em>chatIds</em> for the platform{user.chatIds.length > 1 ? 's' : ''}
<span>{user.chatIds.map(item => <Transport key={item.transport} transport={item.transport}/>)}</span>
will be assigned to the destination user (if not already defined).
<br/>
<strong className="warning">The operation is irreversible!</strong>
</HelpBlock>
</FormGroup>
</Form>
</Modal.Body>
<Modal.Footer>
<Button onClick={onCancel} appearance="subtle">
Cancel
</Button>
<Button
appearance="primary"
disabled={disabled || formValue.intoUser == null}
onClick={() => {
if (confirm('Confirm to merge the user? The operation cannot be undone')) {
onSubmit(formValue);
}
}}
>
Merge user
</Button>
</Modal.Footer>
</Modal>
);
};
MergeModal.propTypes = {
user: PropTypes.shape({
id: PropTypes.number,
userId: PropTypes.string,
chatIds: PropTypes.arrayOf(PropTypes.shape({
chatId: PropTypes.string,
transport: PropTypes.string
}))
}),
disabled: PropTypes.bool,
onCompleted: PropTypes.func,
onCancel: PropTypes.func
};
export default ({ onComplete = () => {} }) => {
const [user, setUser] = useState(null);
const { state } = useMCContext();
const [
mergeUser,
{ loading: merging },
] = useMutation(MERGE_USER, {
onCompleted: () => {
setUser(null);
onComplete();
}
});
let mergeModal;
if (user != null) {
mergeModal = (
<MergeModal
user={user}
onCancel={() => setUser(null)}
disabled={merging}
onSubmit={({ intoUser }) => {
mergeUser({ variables: {
fromId: user.id,
toId: intoUser.id,
chatbotId: state.chatbotId
}});
}}
/>
);
}
return {
mergeUser: setUser,
mergeModal
};
};