sportsbet-mobile/client/sports/categoryDetails/EventRow.jsx

Sportsbet mobile

import React, { Component } from 'react';
import FontAwesome from 'react-fontawesome';
import Blaze from 'meteor/gadicc:blaze-react-component';

// import Market from './Market.jsx';

export default class EventRow extends Component {

	iconClass(sportName) {
		if (!sportName) {
			return;
		}
		return sportName.replace(/\s+/g, '-').toLowerCase();
	}

	start() {
		let event = this.props.event;
		return {
			time: moment(event.startTime).format('HH:mm'),
			date: moment(event.startTime).format('DD.MM')
		};
	}

	participants() {
		let teams = this.props.event.participants();

		if (teams[0] && teams[1]) {
			return <div><h3>{teams[0]}</h3> <span className="vs">vs</span> <h3>{teams[1]}</h3> </div>
		}
		return teams[0]
	}

	marketsBadge() {
		let event = this.props.event;
		if (event.outright === true) {
			return;
		}
		let count = (event.live && event.active) ? event.liveMarketCount : event.marketCount;
		if (!count) {
			return;
		}

		return(
			<a className="odds">
				<div className="markets">
					<div className="badge">+{count}</div>
					<div>markets</div>
				</div>
				<div className="arrow"><FontAwesome name="chevron-right" /></div>
			</a>
		)

	}

	mainMarket() {
		let event = this.props.event;
		var isInPlay = event.live && event.active;
		var category = event.rootCategory();
		if (!category || !event) {
			return;
		}

		let mainMarkets = event.mainMarkets({live: isInPlay, categoryId: category._id, limit: 1});
		if (!mainMarkets) {
			console.log('65');
			return;
		}
		if (typeof mainMarkets.fetch !== 'function') {
			console.log('69');
			return;
		}
		console.log(mainMarkets.fetch());
		let market = mainMarkets.fetch()[0];
		if (!market) {
			console.log('75');
			return;
		}

		let templateHandle = (market.live ? 'live' : 'prelive') + '_' + (+market.details.subType || market.details.typeId);
		console.log('returning stuff cmon');
		return {
			name: market.name,
			markets: [market],
			template: Betting.getMarketTpl(templateHandle),
			handle: templateHandle
		};
	}

	showMarkets() {
		let event = this.props.event;
		let count = (event.live && event.active) ? event.liveMarketCount : event.marketCount;
		let market = this.mainMarket();


		if (market) {
			return(
				<Blaze template="marketsNoName" mainMarket={market} />
			)
		}
		else if (count == 0) {
			return (
				<a className="col-sm-12">
					<div className="all-markets-disabled"><span>Markets currently unavailable</span></div>
				</a>
			)
		}
		else {
			return(
				<a className="col-sm-12 markets">
					<div className="all-markets-button"><span>Click here for all markets</span></div>
				</a>
			)
		}
	}

	render() {
		let event = this.props.event;
		let sport = event.sport.fetch();
		
		return(
			<div className="result">
				<div className="info">
					<span className="crumb">
						{ sport.name } / { event.competition.fetch().name }
					</span>
					{ this.participants() }
				</div>
				{ this.marketsBadge() }
				<span className="starts-in">Starts in: <span>{ this.start().date } { this.start().time }</span></span>
				<div className="clearfix"></div>
				<div className="additional">
					{ this.showMarkets() }
				</div>
				<div className="clearfix"></div>
			</div>
		);
		
		
		// return(
		// 	<li className="event-row-container">
		// 		<div className="info-container">
		// 			<div className="icon">
		// 				<div>
		// 					<i className={ this.iconClass(sport.name) } />
		// 				</div>
		// 			</div>
		// 			<div className="event-container">
		// 				<div className="crumb">
		// 					<span className="time-badge">{ this.start().date } <span>{ this.start().time }</span></span>
		// 					{ sport.name } / { event.competition.fetch().name }
		// 				</div>
		// 				<div className="event-title">
		// 					{ this.participants() }
		// 				</div>
		// 			</div>
		// 		</div>
		// 		{ this.marketsBadge() }
		// 		<div className="odds-row">
		// 			{ this.showMarkets() }
		// 		</div>
		// 	</li>
		// );

	}
}