trc-client-core/src/home/HomeUpcomingSessions.jsx

The core of the TRC Client

import React from 'react';
import Reflux from 'reflux';
import StoreMixin from 'reflux-immutable/StoreMixin';
import SodataStore from 'trc-client-core/src/sodata/SodataStore';
import SodataActions from 'trc-client-core/src/sodata/SodataActions';

import Grid from 'trc-client-core/src/components/Grid';
import Icon from 'trc-client-core/src/components/Icon';
import Col from 'trc-client-core/src/components/Col';
import Widget from 'trc-client-core/src/components/Widget';
import Time from 'trc-client-core/src/components/Time';

var HomeUpcomingSessions = React.createClass({
    displayName: 'HomeUpcomingSessions',
    mixins: [
        StoreMixin,
        Reflux.listenTo(SodataStore, 'onStoreChange')
    ],
    componentDidMount() {
        SodataActions.fetchUpcomingSessions();
    },  
    getStoreState(){
        return {
            sessions: SodataStore.get('upcomingCourses')
        };
    },
    render() {
        if(!this.state.sessions){
            return (
                <Grid modifier="tight">
                    <Col className="flush">
                        <Widget className="l-height--homeWidget ">
                            
                        </Widget>
                    </Col>
                    <Col>
                        <Widget className="l-height--homeWidget ">
                            
                        </Widget>
                    </Col>
                    <Col>
                        <Widget className="l-height--homeWidget ">
                            
                        </Widget>
                    </Col>
                </Grid>
            );
        }
        return (
            <Grid modifier="tight">
                {this.renderUpcomingSessions()}
            </Grid>
        );
    },
    renderUpcomingSessions() {
        return this.state.sessions.map((sessions) => {
            var course = sessions.get('course');
            var details = sessions.get('descriptionDetails');
            var soData = sessions.get('soData');
            var soNumA = soData.get('soNoParticipants');
            var soNumB = soData.get('soMaximumEnrolment');
            var soNumC = soNumB - soNumA;
            var soPlaces = soNumC + " Places Left";
            if(soNumC <= 0){
                soPlaces = "FULL";
            }
            return (
                <Col key={soData.get('soId')} className="flush">
                    <Widget className="l-height--homeWidget ">
                        <ul>
                            <li><Time type="short" value={soData.get('soStartDate')}/><Icon className="right" hexCode={details.get('courseIcon')}/></li>
                            <li><h3 className="Widget_heading hug">{course.get('workshopName')}</h3></li>
                            <li><Icon size="small" hexCode={'e062'}/><span className='push-left'>{soData.get('facility')}</span></li>
                            <li><Icon size="small" hexCode={'e023'}/><span className='push-left'>{details.get('duration')}</span></li>
                            <li><Icon size="small" hexCode={'e008'}/><span className='push-left'>{soPlaces}</span></li>
                            <li><a href={`/#/course/${course.get('courseCode')}`} className="Button Widget_cta">Learn More</a></li>
                        </ul>
                    </Widget>
                </Col>
            );
        }).toJS();
    }
});

module.exports = HomeUpcomingSessions;