Something to refactor into presentational and container components

CardContainer.tsx

import * as React from "react";
import {CardSource, compareCards, Card} from "./cards";
import {EventCard as EventCardObj, EventCardGroup, TaskCard as TaskCardObj, TaskCardGroup} from "../calendar/cards";
import {ReferralCard as ReferralCardObj, ReferralCardGroup} from "../referral/cards";
import ReferralCard = require("./ReferralCard");
import EventCard = require("./EventCard");
import CardGroup = require("./CardGroup");
import TaskCard = require("./TaskCard");
import {ReloadEvent} from "../common/events";

const update = React.addons.update;

/**
 * A CardsContainer is a component to which cards can be added and sorted
 * It should be possible to add Cards or CardGroups to a CardContainer, and that a CardGroup could contain other groups.
 * e.g.
 * <pre>
 * <CardContainer searchInput={} >
 *     <CardGroup title="appointments">
 *         <CardGroup title="today">
 *             {eventsForToday}
 *         </CardGroup>
 *         <CardGroup title="tomorrow">
 *             {eventsForToday}
 *         </CardGroup>
 *         <CardGroup title="previous 7 days">
 *             {eventsForToday}
 *         </CardGroup>
 *     </CardContainer>
 *  </pre>
 */

interface Props {
    sources: CardSource[];
    width?: number;
}

interface State {
    cards?: Card[];
}

// TODO: Remove this line - this gets called when toggling, which means we do render with new card object
function componentFactory(card: Card) {
    if (card instanceof ReferralCardGroup) {
        const RCG = CardGroup.of<ReferralCardObj>();
        return (<RCG key={card.key} title={card.title} group={card}
                     cardFactory={aCard => (<ReferralCard key={aCard.dto.referralId} referral={aCard.dto}/>)} />);
    }
    else if (card instanceof ReferralCardObj) {
        return (<ReferralCard referral={card.dto} />);
    }
    else if (card instanceof EventCardObj) {
        return (<EventCard event={card.dto} />);
    }
    else if (card instanceof TaskCardObj) {
        return (<TaskCard task={card.dto} />);
    }
    else if (card instanceof EventCardGroup) {
        const ECG = CardGroup.of<EventCardObj>();
        return (<ECG key={card.key} title={card.title} group={card}
                     cardFactory={aCard => (<EventCard key={aCard.dto.uid} event={aCard.dto}/>)} />);
    }
    else if (card instanceof TaskCardGroup) {
        const TCG = CardGroup.of<TaskCardObj>();
        return (<TCG key={card.key} title={card.title} group={card}
                          cardFactory={aCard => (<TaskCard key={aCard.dto.taskDefinitionHandle} task={aCard.dto}/>)} />);
    }
    throw new Error("Unrecognised type:" + Object.getPrototypeOf(card));
}

class CardsContainer extends React.Component<Props, State> {

    constructor(props?: Props, context?: any) {
        super(props, context);
        this.state = {cards: []};
    }

    componentWillMount() {
        this.loadCards();
        ReloadEvent.bus.addHandler(this.loadCards);
    }

    componentWillUnmount() {
        ReloadEvent.bus.removeHandler(this.loadCards);
    }

    private loadCards = () => {
        this.setState({cards:[]});

        this.props.sources.forEach(source => {
            source.getCards().forEach(card => {
                this.setState(state => update(state, {cards: {$push: [card]}}));
            });
        });
    };


    // TODO: render() should be based on the filterCriteria property (or state??) see pulling up state, such that
    // a re-render on search input change will cause the results to be filtered
    render() {
        return (
            <div className="cards-container container-fluid">
                {this.state.cards
                    .sort(compareCards)
                    .map(card => componentFactory(card))}
            </div>
        );
    }
}


export = CardsContainer;