ProjectFeedback.jsx

/* This class is used to create the /topic/projectfeedback page,
 * which shows expandable lists of feedback requests that need answering.
 */
var ProjectFeedbackPage = React.createClass({
    propTypes: {
        topic: React.PropTypes.string.isRequired
    },
    render: function() {
        var helpCollection = new DiscussionItemCollection([], {
            topic: this.props.topic,
            type: "projecthelp"
        });

        var helpList = <DiscussionItemList collection={helpCollection}/>;

        var critCollection = new DiscussionItemCollection([], {
            topic: this.props.topic,
            type: "projectcritique"
        });

        var critList = <DiscussionItemList collection={critCollection}/>;

        // store as strings in vars 
        // handlebars template 
        return  <div className="prerendered topic-content-view-root">
                    <div className="content-pane-inner">

                        <div className="main-header"> 
                            <div className="topic-info topic-color">
                                <h2 className="topic-title">{$._("Project Feedback")}</h2>
                                                    
                                <p>{$._("Want to help your fellow students learn to program?" + 
                                    "One way is by helping them with their projects, " +
                                    "which is one way they practice what they've learnt. " + 
                                    "There are two types of feedback requests that students " + 
                                    "can ask for on their projects: ")}</p>
                                <ul>
                                    <li><strong>{$._("Help")}:</strong>
                                    {$._("When they have a specific question, like how to do X?")}
                                    </li>
                                    <li><strong>{$._("Critique")}:</strong>
                                    {$._("When they think they're done, and want a general critique of the program and suggestions for improvement.")}
                                    </li>
                                </ul>
                                <p>{$._("You can browse through recent requests of both types below. " + 
                                    "Please check out our suggested guidelines for answering requests. Thank you for the help!")}</p>
                            </div>
                        </div>

                        <div className="projectfeedback-container">
                            <div>
                                <h4>Help Requests</h4>
                                {helpList}
                            </div>
                            <div>
                                <h4>Critique Requests</h4>
                                {critList}
                            </div>
                        </div>

                    </div>
                </div>;
    }
})