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><t>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:</t></p>
                                <ul>
                                    <li><strong><t>Help</t></strong>
                                    <t>When they have a specific question, like how to do X?</t>
                                    </li>
                                    <li><strong><t>Critique</t>:</strong>
                                    <t>When they think they're done, and want a general critique of the program and suggestions for improvement.</t>
                                    </li>
                                </ul>
                                <p><t>You can browse through recent requests of both types below.
                                    Please check out our suggested guidelines for answering requests. Thank you for the help!</t></p>
                            </div>
                        </div>

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

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