front/src/routes/scene/edit-scene/actions/SendMessageParams.jsx
import Select from 'react-select';
import { Component } from 'preact';
import { connect } from 'unistore/preact';
import { Text } from 'preact-i18n';
import TextWithVariablesInjected from '../../../../components/scene/TextWithVariablesInjected';
class SendMessageParams extends Component {
getOptions = async () => {
try {
const users = await this.props.httpClient.get('/api/v1/user');
const userOptions = [];
users.forEach(user => {
userOptions.push({
label: user.firstname,
value: user.selector
});
});
await this.setState({ userOptions });
this.refreshSelectedOptions(this.props);
return userOptions;
} catch (e) {
console.error(e);
}
};
updateText = text => {
this.props.updateActionProperty(this.props.columnIndex, this.props.index, 'text', text);
};
handleChange = selectedOption => {
if (selectedOption && selectedOption.value) {
this.props.updateActionProperty(this.props.columnIndex, this.props.index, 'user', selectedOption.value);
} else {
this.props.updateActionProperty(this.props.columnIndex, this.props.index, 'user', null);
}
};
refreshSelectedOptions = nextProps => {
let selectedOption = '';
if (nextProps.action.user && this.state.userOptions) {
const userOption = this.state.userOptions.find(option => option.value === nextProps.action.user);
if (userOption) {
selectedOption = userOption;
}
}
this.setState({ selectedOption });
};
constructor(props) {
super(props);
this.props = props;
this.state = {
selectedOption: ''
};
}
componentDidMount() {
this.getOptions();
}
componentWillReceiveProps(nextProps) {
this.refreshSelectedOptions(nextProps);
}
render(props, { selectedOption, userOptions }) {
return (
<div>
<div class="form-group">
<label class="form-label">
<Text id="editScene.actionsCard.messageSend.userLabel" />
<span class="form-required">
<Text id="global.requiredField" />
</span>
</label>
<Select
styles={{
// Fixes the overlapping problem of the component
menu: provided => ({ ...provided, zIndex: 2 })
}}
options={userOptions}
value={selectedOption}
onChange={this.handleChange}
/>
</div>
<div class="form-group">
<label class="form-label">
<Text id="editScene.actionsCard.messageSend.textLabel" />{' '}
<span class="form-required">
<Text id="global.requiredField" />
</span>
</label>
<div class="mb-1 small">
<Text id="editScene.actionsCard.messageSend.explanationText" />
</div>
<div className="tags-input">
<TextWithVariablesInjected
text={props.action.text}
triggersVariables={props.triggersVariables}
actionsGroupsBefore={props.actionsGroupsBefore}
variables={props.variables}
updateText={this.updateText}
/>
</div>
</div>
</div>
);
}
}
export default connect('httpClient', {})(SendMessageParams);