import React, { PropTypes } from 'react';
import purebem from 'purebem';

import { Avatar, PendingCount } from 'app/components';


const block = purebem.of('project-list-item');

const ProjectListItem = React.createClass({

    contextTypes: {
        router: PropTypes.object.isRequired
    },

    propTypes: {
        item: PropTypes.object.isRequired
    },

    handleClick(id) {
        this.context.router.push(`project/${id}`);
    },

    render() {
        const { item } = this.props;

        return (
            <div className={ block() }>
                <div className={ block('column', ['left']) }>
                    <Avatar name={ item.title } />
                    <PendingCount project={ item } />
                </div>
                <div className={ block('column', ['right']) }>
                    <span className={ block('title') } onClick={ () => this.handleClick(item.pid) }>{ item.title }</span>
                    <div className={ block('dates') }>{ item.dateStart } - { item.dateEnd }</div>
                </div>
            </div>
        );
    }

});

export default ProjectListItem;

@@ -83,16 +83,25 @@
  Avatar,
+ NavLink,
  Pending
@@ -230,23 +230,20 @@
 (%7B%0A%0A    
-context
+prop
 Types: %7B
@@ -251,22 +251,20 @@
         
-router
+item
 : PropTy
@@ -301,141 +301,460 @@
     
-propTypes: %7B%0A        item: PropTypes.object.isRequired%0A    %7D,%0A%0A    handleClick(id) %7B%0A        this.context.router.push(%60project/$%7Bid%7D%60
+renderTitle() %7B%0A        const %7B item %7D = this.props;%0A%0A        if (item.role === 'pending') %7B%0A            return (%0A                %3Cspan className=%7B block('title') %7D%3E%7B item.title %7D%3C/span%3E%0A            );%0A        %7D%0A%0A        return (%0A            %3CNavLink%0A                activeClass=%7B false %7D%0A                baseClass=%7B block('title', %5B'link'%5D) %7D%0A                to=%7B %60project/$%7Bitem.pid%7D%60 %7D%3E%0A                %7B item.title %7D%0A            %3C/NavLink%3E%0A        
 );%0A 
@@ -1147,109 +1147,30 @@
     
-%3Cspan className=%7B block('title') %7D onClick=%7B () =%3E this.handleClick(item.pid) %7D%3E%7B item.title %7D%3C/span%3E
+%7B this.renderTitle() %7D
 %0A   

use NavLink in project listing