trc-client-core/src/course/CoursesListView.jsx

The core of the TRC Client

import {Link, History, State} from 'react-router';

import React from 'react';

import _ from 'lodash';
import {connect} from 'react-redux';
import CourseStore from './CourseStore.js';
import {requestCourseList} from 'trc-client-core/src/course/CourseActions';
import Loader from '../components/Loader';
import Paginate from 'bd-stampy/utils/Paginate';
import Pagination from 'bd-stampy/components/Pagination';

import CourseListQueryView from 'trc-client-core/src/course/CourseListQueryView';
import CourseListObject from 'trc-client-core/src/course/CourseListObject';

import UserStore from 'trc-client-core/src/user/UserStore';

var CoursesListView = React.createClass({
    displayName: 'CoursesListView',
    contextTypes: {
        location: React.PropTypes.object
    },
    mixins: [
        require('bd-stampy/mixins/FormMixin'),
        History,
        State
    ], 
    getInitialState() {
        return {
            courses: null
        };
    },
    FormMixin_initialFormData(nextState) {
        nextState.formData = _.defaults(this.context.location.query, {
            type: 'ALL',
            stream: 'ALL',
            departmentCategory: 'ALL'
        });
        return nextState;
    },
    componentDidMount() {
        this.props.dispatch(requestCourseList());
    },
    onChange(e, details) {
        var param = {};
        param[details.key] = details.value;
        this.history.replaceState(null, '/course', _.defaults(param, this.context.location.query));
        this.FormMixin_onFormChange(e, details);

    },
    onPagingate(e, page) {
        this.history.replaceState(null, '/course', {
            tab: this.context.location.query.tab,
            page: page
        });
    },
    render() {
        return (
            <div>
                <h1>Courses</h1>
                <CourseListQueryView onChange={this.onChange} value={this.state.formData}/>
                {this.renderCourseTable()}
            </div>
        );
    },
    renderCourseTable() {
        var currentPage = parseInt(this.context.location.query.page, 10) || 0;
        var paginateCount = 50;

        if(!this.props.courses) {
            return <Loader></Loader>;
        }

        var filtered = this.props.courses
            .filter(CourseStore.filterCourses(this.state.formData))
            .filter(cc => {
                if(!UserStore.isDepartment('service')) {
                    return cc.stream !== 'TECH';
                }
                return true;
            })

        var paginated = Paginate(filtered, paginateCount, currentPage);


        var courses = paginated.map((course, key) => {
            return (
                <CourseListObject course={course} icon={course.courseIcon} key={key} />
            );
        });

        return <div>
            {courses}
            <Pagination length={filtered.length} ammount={paginateCount} page={currentPage} onClick={this.onPagingate}/>
        </div>;
    }
});

export default connect(
    state => ({courses: state.course.get('collection').toList().toJS()})
)(CoursesListView);