{"size": 1034, "ext": "js", "max_stars_repo_path": "src/app/components/ChannelList.js", "max_stars_repo_name": "Lapixx/Hellittaa", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/app/components/ChannelList.js", "max_issues_repo_name": "Lapixx/Hellittaa", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/app/components/ChannelList.js", "max_forks_repo_name": "Lapixx/Hellittaa", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 33.3548387097, "max_line_length": 92, "alphanum_fraction": 0.6373307544}
import { PropTypes } from 'prop-types';
import ChannelListItem from '../containers/ChannelListItem';
import ChannelCreationButton from '../components/ChannelCreationButton';

const ChannelList = ({ channels, onCreateNewChannel, activeChannelId, onChannelClick }) => (
    <div>
        {channels.map(
            channel =>
                (<ChannelListItem
                  key={channel.id}
                  {...channel}
                  onClick={() => onChannelClick(channel.id)}
                  isActive={activeChannelId === channel.id}
                />)
        )}
        <ChannelCreationButton label="+" onCreate={onCreateNewChannel} />
    </div>
);

ChannelList.propTypes = {
    channels: PropTypes.arrayOf(PropTypes.shape({
        id: PropTypes.string.isRequired,
        name: PropTypes.string.isRequired
    }).isRequired).isRequired,
    activeChannelId: PropTypes.string.isRequired,
    onChannelClick: PropTypes.func.isRequired,
    onCreateNewChannel: PropTypes.func.isRequired
};

export default ChannelList;
