trc-client-core/src/product/LexusEnform.jsx

The core of the TRC Client

import React from 'react';
import Video from 'trc-client-core/src/components/Video';
import IconList from 'trc-client-core/src/components/IconList';
import IconListItem from 'trc-client-core/src/components/IconListItem';
import Markdown from 'trc-client-core/src/components/Markdown';
import Grid from 'trc-client-core/src/components/Grid';
import Col from 'trc-client-core/src/components/Col';
import LexusEnformCollection from 'trc-client-core/src/product/LexusEnformCollection';

var LexusEnform = React.createClass({
    displayName: 'LexusEnform',
    componentWillMount() {
        if (!this.props.params.id) {
            this.props.history.replaceState(null, `/product/lexus-enform/${this.getIndexId()}`)
        }
    },
    render() {
        if (!this.props.params.id) {
            return null;
        }

        return React.cloneElement(this.props.children, { 
            children: this.renderContent()
        });            
    },
    getIndexId() {
        return LexusEnformCollection.filter(video => video.indexPage)[0].vimeoId;
    },
    getCurrentVideo() {
        return LexusEnformCollection.filter(ii => {
            return ii.vimeoId === parseInt(this.props.params.id, 10)
        })[0];
    },
    renderContent() {
        const currentVideo = (this.props.params.id) ? this.getCurrentVideo() : LexusEnformCollection[0];

        return <Grid>
            <Col>
                <Markdown html={currentVideo}/>
            </Col>
            <Col width="4">
                <IconList>
                    {LexusEnformCollection.map(this.renderVideos)}
                </IconList>
            </Col>
        </Grid>
    },
    renderVideos(video) {
        return <IconListItem 
            to={`/product/lexus-enform/${video.vimeoId}`}
            icon={"\uE009"} 
            key={video.title}
            children={video.title}
        />;
    }
});


module.exports = LexusEnform;