trc-client-core/src/qanda/QandaFeed.jsx

The core of the TRC Client

import {History} from 'react-router';
import React from 'react';
import Reflux from 'reflux';
import RefluxImmutableStoreMixin from 'reflux-immutable/StoreMixin';
import Immutable from 'immutable';
import moment from 'moment';
import Tag from 'trc-client-core/src/components/Tag';

import DataTable from 'bd-stampy/components/DataTable';
import Icon from 'trc-client-core/src/components/Icon';
import QandaAskForm from 'trc-client-core/src/qanda/QandaAskForm';
import QandaStore from 'trc-client-core/src/qanda/QandaStore';    
import NavigationStore from 'trc-client-core/src/global/NavigationStore';    
import NavigationActions from 'trc-client-core/src/global/NavigationActions';    


var QandaFeed = React.createClass({
    displayName: 'QandaFeed',   
    contextTypes: {
        location: React.PropTypes.object
    },
    mixins: [
        History,
        Reflux.listenTo(QandaStore, 'onStoreChange'),
        Reflux.listenTo(NavigationStore, 'onStoreChange'),
        RefluxImmutableStoreMixin
    ],
    getStoreState() {
        return {
            questions: QandaStore.get('questions'),
            query: NavigationStore.get('query')
        };
    },
    getDefaultProps() {
        return {
            filter: []  
        };
    },
    render: function() {
        return (
            <div>
                <QandaAskForm defaultTag={this.props.defaultTag}/>
                {this.renderSearchingForTags()}                
                {this.renderQuestions()}
            </div>
        );
    },
    renderQuestions() {
        if(!this.state.questions) {
            return null;
        }

        var tableSchema = [{
            width: 1,
            render: (item) => <div className="Widget"><Icon hexCode={item.icon}/></div>
        }, {
            render: (item) => {
                return <div className="row hug-top">
                    <h3 className="hug">
                        <a href={`/#/product/qanda/${item.id}`}>
                            {this.renderNew(item)} {item.questionTitle}
                        </a>
                    </h3> 
                    
                    <div className="t-muted">{moment(item.answerDate).format('MMMM Do YYYY')}</div>
                    <ul className="t-muted List List-comma">
                        {item.tags.map((tag, key) => <li key={key}><Tag name={tag} /></li>)}
                    </ul>
                </div>;
            }
        }];

        var questionFilter = (question) => {
            var tag = this.context.location.query.tag || [];
            var filterArray = Immutable.List(this.props.filter).concat(tag);

            if(filterArray.size) {
                return filterArray.isSubset(question.get('tags'));
            }

            return true;
        };
        if(!this.state.questions.filter(questionFilter).size){
            return null;
        }
        return (
            <DataTable 
                modifier="top"
                schema={tableSchema}
                data={this.state.questions.filter(questionFilter).sortBy(qq => qq.get('answerDate')).reverse().toJS()}
            />
        );
    },
    renderNew(question) {
        if(moment().subtract(14, "days").isBefore(question.answerDate)) {
            return <span className="Badge Badge-small vertical-middle">New</span>;          
        }
    },
    renderSearchingForTags() {
        var {tag} = this.context.location.query;
        if (tag) {
            return (
                <div className="p">
                    <span className="gamma">Searching for: <em>{tag.replace('_', ' ')}</em> </span>
                    <span role="button" onClick={this.onRemoveTag} className="link">show all?</span>
                </div>
            );
        }
    },
    onRemoveTag() {
        this.history.pushState(null, '/product/qanda', null);
    }
});

module.exports = QandaFeed;