sportsbet-mobile/client/leaderboard/Leaderboard.jsx

Sportsbet mobile

import React, { Component } from 'react';
import TrackerReact from 'meteor/ultimatejs:tracker-react';
import LeaderboardUsers from './LeaderboardUsers.jsx';

export default class Leaderboard extends TrackerReact(Component) {

	constructor() {
		super();
		this.state = {
			subs: {
				lb: DDP.Subscription,
				prizes: DDP.Subscription
			}
		};
	}

	componentWillMount() {
		Tracker.autorun(() => {
			this.state.subs.lb = Meteor.subscribe('betting/Leaderboards', {handle: Session.get('opened-leaderboard')}, {}, ['users', 'users.user']);
			let lb = Betting.Leaderboard.db.findOne();
			if (!lb) {
				return;
			}
			this.state.subs.prizes = Meteor.subscribe('betting/LeaderboardPrizes', {leaderboard: lb._id});
		});
	}

	leaderboard() {
		return Betting.Leaderboard.db.findOne();
	}

	betTypeStr() {
		let lb = Betting.Leaderboard.db.findOne();
		if (lb.includeSingleBet && lb.includeMultiBet) {
			return (
				<span>
					<b>single</b> and <b>multi bets</b>
				</span>
			);
		}
		if (lb.includeSingleBet && !lb.includeMultiBet) {
			return (<b>single bets</b>);
		}
		if (!lb.includeSingleBet && lb.includeMultiBet) {
			return (<b>multi bets</b>);
		}
	}

	liveStr() {
		let lb = Betting.Leaderboard.db.findOne();
		if (lb.includeLive && lb.includePreLive) {
			return (
				<span>
					both <b>live</b> and <b>pre-live</b>
				</span>
			);
		}
		if (lb.includeLive && !lb.includePreLive) {
			return (<b>live</b>);
		}
		if (!lb.includeLive && lb.includePreLive) {
			return (<b>pre-live</b>);
		}
	}

	categories() {
		return Betting.Leaderboard.db.findOne().categories.fetch();
	}

	link() {
		console.log(Session.get('isLive'));
	}

	toggleTerms() {
		$(this.refs.terms).fadeToggle(500);
	}

	componentWillUnmount() {
		this.state.subs.lb.stop();
		this.state.subs.prizes.stop();
	}

	showApplicableSports() {
		let lb = Betting.Leaderboard.db.findOne();
		if (lb.includeAllSports) {
			return(<div>All sports</div>)
		}
		return(
			<ul>
				{
					lb.categories.fetch().map((category) => {
						console.log('a', category);
						var link = '/sports/pre-live/' + category.makeSeoString() + '/events/' + category._id;
						return(
							<li key={category._id}><a href={link}>{category.name}</a></li>
						)
					})
				}
			</ul>
		)
	}


	render() {
		if (!this.state.subs.lb || !this.state.subs.lb.ready()) {
			return(
				<div>Please wait, loading leaderboard ... </div>
			)
		}


		if (!this.leaderboard()) {
			return(<div>The leaderboard is not available</div>);
		}

		let lb = this.leaderboard();
		return(
			<div className="leaderboard-page">
				<h1>{lb.title}</h1>
				<div className="prizepool">
					{lb.totalPrizepool * 1000} <span>mBTC</span>
				</div>
				<div className="clearfix" />
				<div className="date">
					<div>
						<span className="icon" />
						<span className="text">{moment(lb.startDate).format('DD/MM/YYYY')} - {moment(lb.endDate).format('DD/MM/YYYY')}</span>
					</div>
				</div>

				<LeaderboardUsers leaderboard={ lb } />

				<h2>Participating bets</h2>
				<hr />
				<div className="info">
					Allowed bets are {this.liveStr()} {this.betTypeStr()}.
					<p>
						{ lb.minStake ? <span>The minimum allowed stake is <b>{lb.minStake * 1000} mBtc</b><br /></span> : '' }
						{ lb.maxStake ? <span>The maximum allowed stake is <b>{lb.maxStake * 1000} mBtc</b><br /></span> : '' }
						{ lb.minOdds ? <span>The minimum allowed odds are <b>{lb.minOdds}</b></span> : '' }
					</p>
				</div>

				<h2>Applicable sports</h2>
				<hr />

				<div className="info">
					{ this.showApplicableSports() }
				</div>

				<h2>Leaderboard Description</h2>
				<hr />
				<div className="info">
					<div dangerouslySetInnerHTML={{__html: nl2br(lb.info)}} />
					<br />
					<a onClick={this.toggleTerms.bind(this)}> Terms and Conditions </a>
				</div>
				<div className="info terms" ref="terms">
					<br />
					<div dangerouslySetInnerHTML={{__html: nl2br(lb.terms)}} />
				</div>
			</div>
		)
	}

}