// Args: tutor, onHide, onSelected 'use strict'; var ChooseTopicModal = React.createClass({ displayName: 'ChooseTopicModal', getInitialState: function getInitialState() { return { topics: null }; }, shown: false, componentDidMount: function componentDidMount() { var _this = this; this.mounted = true; if (this.props.tutor && !this.shown) { this.shown = true; CAMBLY.get('/getTopics', { tutorId: this.props.tutor.userId }).done(function (data) { if (_this.mounted) { _this.setState({ topics: data.topics }); } }); } else if (this.props.tutor) { // This doesn't play nicely due to multiple modalling... // $(this.modal).modal('handleUpdate'); } else if (!this.props.tutor && this.shown) { // Reset the component this.shown = false; this.setState(this.getInitialState()); } }, componentDidUpdate: function componentDidUpdate() { $(document.body).addClass('modal-open'); }, componentWillUnmount: function componentWillUnmount() { this.mounted = false; }, onChoose: function onChoose(topic) { this.props.onChoose(topic); $(this.modal).modal('hide'); }, onModal: function onModal(modal) { this.modal = modal; if (modal) { $(modal).modal('show'); $(modal).on('hidden.bs.modal', (function (e) { this.props.onHide(); }).bind(this)); } }, render: function render() { var topics = React.createElement("div", null, "Loading..."); if (this.state.topics != null) { var topicRows = this.state.topics.map((function (topic) { return React.createElement("tr", { key: topic.title }, React.createElement("td", null, React.createElement("a", { onClick: this.onChoose.bind(this, topic.url), href: "#" }, topic.title))); }).bind(this)); topics = React.createElement("table", { className: "table" }, React.createElement("tbody", null, topicRows)); } return React.createElement("div", { className: "modal fade", id: "chooseTopicModal", tabIndex: "-1", role: "dialog", 'aria-labelledby': "chooseTopicTitle", 'aria-hidden': "true", ref: this.onModal }, React.createElement("div", { className: "modal-dialog" }, React.createElement("div", { className: "modal-content" }, React.createElement("div", { className: "modal-header" }, React.createElement("div", { className: "row" }, React.createElement("div", { className: "col-xs-8 col-xs-offset-2 text-center" }, React.createElement("h2", { id: "chooseTopicTitle" }, "Choose a Topic")), React.createElement("div", { className: "col-xs-2 text-right" }, React.createElement("button", { type: "button", className: "close", 'data-dismiss': "modal", 'aria-label': "Close" }, React.createElement("span", { 'aria-hidden': "true" }, "×"))))), React.createElement("div", { className: "modal-body" }, React.createElement("div", { className: "row" }, React.createElement("div", { className: "col-xs-12" }, topics)))))); } }); // TODO(gaR): bring this back! // //