105 lines
2.8 KiB
JavaScript
105 lines
2.8 KiB
JavaScript
|
import React from 'react';
|
||
|
|
import Flux from '../lib/flux';
|
||
|
|
import classNames from 'classnames';
|
||
|
|
import HelpdeskActionCreators from '../actions/HelpdeskActionCreators';
|
||
|
|
import HelpdeskUtils from '../utils/HelpdeskUtils';
|
||
|
|
import Spinner from './common/Spinner';
|
||
|
|
import HelpdeskStore from '../stores/HelpdeskStore';
|
||
|
|
import TimerMixin from 'react-timer-mixin';
|
||
|
|
import '../styles/need_help_modal.styl';
|
||
|
|
import i18n from '../i18n';
|
||
|
|
|
||
|
|
const NeedHelpModal = React.createClass({
|
||
|
|
mixins: [Flux.StoreListenerMixin(HelpdeskStore), TimerMixin],
|
||
|
|
propTypes: {
|
||
|
|
handleClose: React.PropTypes.func,
|
||
|
|
},
|
||
|
|
statics: {
|
||
|
|
key: () => 'need-help-modal',
|
||
|
|
},
|
||
|
|
|
||
|
|
getInitialState() {
|
||
|
|
return {
|
||
|
|
failed: false,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
getStateFromStores() {
|
||
|
|
const content = HelpdeskStore.featuredArticles;
|
||
|
|
|
||
|
|
return {
|
||
|
|
loading: content.length === 0,
|
||
|
|
contentLoaded: content.length > 0,
|
||
|
|
content,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
componentWillMount() {
|
||
|
|
this.setTimeout(() => this.setState({failed: this.state.loading}), 5000);
|
||
|
|
HelpdeskActionCreators.loadFeaturedArticles();
|
||
|
|
},
|
||
|
|
|
||
|
|
componentWillUnmount() {
|
||
|
|
if (this.props.handleClose) {
|
||
|
|
this.props.handleClose();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
componentDidUpdate(prevProps, prevState) {
|
||
|
|
if (!prevState.contentLoaded && this.state.contentLoaded) {
|
||
|
|
this.refs.query.focus();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
handleSubmit(e) {
|
||
|
|
e.preventDefault();
|
||
|
|
const query = this.refs['query'].value;
|
||
|
|
const url = HelpdeskUtils.getSearchURL(query);
|
||
|
|
window.open(url, '_blank');
|
||
|
|
this.props.onClose();
|
||
|
|
},
|
||
|
|
|
||
|
|
render() {
|
||
|
|
let content = null;
|
||
|
|
if (this.state.contentLoaded) {
|
||
|
|
const contentItems = this.state.content.map(article => {
|
||
|
|
return <li key={article.id}><a href={article.htmlUrl} target="_blank">{article.title}</a></li>;
|
||
|
|
});
|
||
|
|
|
||
|
|
content = <ul>{contentItems}</ul>;
|
||
|
|
} else if (this.state.failed) {
|
||
|
|
content = (
|
||
|
|
<div className="failed">
|
||
|
|
<div className="poop" />
|
||
|
|
{i18n.Messages.NEED_HELP_FAILED_LOADING.format()}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
} else {
|
||
|
|
content = <Spinner />;
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<form
|
||
|
|
className={classNames('modal-content', 'form', 'need-help-modal', this.props.className)}
|
||
|
|
onSubmit={this.handleSubmit}>
|
||
|
|
<div className="header control-group">
|
||
|
|
<h1>{i18n.Messages.NEED_HELP_TITLE_QUESTION}</h1>
|
||
|
|
<input id="help-query" ref="query" type="text" placeholder={i18n.Messages.NEED_HELP_SEARCH_PLACEHOLDER} />
|
||
|
|
</div>
|
||
|
|
<div className={classNames('form-inner', {loading: !this.state.loaded})}>
|
||
|
|
{content}
|
||
|
|
</div>
|
||
|
|
<div className="footer">
|
||
|
|
{i18n.Messages.NEED_HELP_SUBMIT_REQUEST.format({submitRequestURL: HelpdeskUtils.getSubmitRequestURL()})}
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
);
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
export default NeedHelpModal;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// WEBPACK FOOTER //
|
||
|
|
// ./discord_app/components/NeedHelpModal.js
|