BOOK-1173 Pagination Changes

.eslintrc

@@ -21,6 +21,7 @@
     "no-unused-vars": ["error", { 
       "vars": "all", "args": "after-used"
     }],
+    "keyword-spacing": ["error", { "before": true, "after": true }],
     "comma-dangle": "off",
     "indent": ["error", 2, {"SwitchCase": 1}],
     "quotes": ["error", "single"],

src/actions/BetActions.js

@@ -527,7 +527,7 @@ class BetActions {
         betDiff.map((item) => {
           item[0] = CurrencyUtils.correctFloatingPointPrecision([item[0], item[2]], currencyType);
 
-          if(item[1] === 'decrement') {
+          if (item[1] === 'decrement') {
             changeType = BetTypes.DECREMENT;
           }
 

src/components/App/App.less

@@ -209,6 +209,8 @@ body {
 .sportsBookToggle {
   z-index: 100;
   margin: 5px;
+  -webkit-app-region: no-drag;
+
   p {
     display: inline-block;
     padding: 2px 6px 2px 6px;

src/components/BettingDrawers/BetTable/BetTableInput.jsx

@@ -297,7 +297,7 @@ class BetTableInput extends PureComponent {
 
     // Override the disabled state of the input fields if the default state of stake,
     // undefined, is present.
-    if(isEmpty || oddsPopulated || this.props.autoOddsPopulated > 0){
+    if (isEmpty || oddsPopulated || this.props.autoOddsPopulated > 0){
       isValid = true;
     } else {
       isValid = isValidBetTotal;

src/components/BettingDrawers/MarketDrawer/PlaceBets.jsx

@@ -157,7 +157,7 @@ const mapStateToProps = (state, ownProps) => {
     // If odds exists, it has either been provided by the user and is an incomplete bet or it has 
     // been provided via clicking a bet from the /exchange.
     // If odds exists, autopopulated bets increment.
-    if( profit && odds && stake){
+    if ( profit && odds && stake){
       autoOddsPopulated = autoOddsPopulated + 1;
     }
 

src/components/BettingDrawers/QuickBetDrawer/QuickBetDrawer.jsx

@@ -189,7 +189,7 @@ const mapStateToProps = (state, ownProps) => {
     // If odds exists, it has either been provided by the user and is an incomplete bet or it has 
     // been provided via clicking a bet from the /exchange.
     // If odds exists, autopopulated bets increment.
-    if( profit && odds && stake){
+    if ( profit && odds && stake){
       autoOddsPopulated = autoOddsPopulated + 1;
     }
 

src/components/BettingWidgets/BackingBettingWidget/BackingBettingWidget.jsx

@@ -38,7 +38,7 @@ class BackingBettingWidget extends PureComponent {
     let eventTime;
 
     // If the following if statement is true, then the component is an event
-    if (this.props.eventTime) {
+    if (this.props.eventTime && !this.props.eventRoute) {
       eventFlag = true;
       const localDate = moment.utc(this.props.eventTime).local();
 
@@ -50,9 +50,8 @@ class BackingBettingWidget extends PureComponent {
     return (
       <div className={ 'backingBettingWidget ' +
         (SportsbookUtils.isAbleToBet(this.props.eventStatus) ? 'active ' : 'disabled ') }>
-        <div>
 
-          { eventFlag && 
+        { eventFlag &&
             <Col span={ 10 }>
               <Col className='date' span={ 5 }>
                 <span className='dateString'>
@@ -69,50 +68,52 @@ class BackingBettingWidget extends PureComponent {
                 </p>
               </Col>
             </Col>
-          }
+        }
 
-          {bettingMarkets && bettingMarkets.map((item, index) => {
-
-            let description = item.get('description');
-
-            if (eventFlag && description === 'The Draw') {
-              description = 'Draw';
-              span = 2;
-            } else if (eventFlag) {
-              span = SportsbookUtils.getColumnSize(this.props.columnType, eventFlag);
-            } else {
-              span = SportsbookUtils.getColumnSize(title, eventFlag);
+        {bettingMarkets && bettingMarkets.map((item, index) => {
+
+          let description = item.get('description');
+
+          if (eventFlag && description === 'The Draw') {
+            description = 'Draw';
+            span = 2;
+          } else if (eventFlag) {
+            span = SportsbookUtils.getColumnSize(this.props.columnType, eventFlag);
+          } else {
+            span = SportsbookUtils.getColumnSize(title, eventFlag);
+
+            if (bettingMarkets.length === 3) {
+              span = 8;
             }
+          }
 
-            return (
-              <Col
-                key={ index } 
-                span={ span }
-              >
-                <BettingMarket
-                  title={ description }
-                  eventName={ this.props.title }
-                  eventID={ this.props.eventID }
-                  backOrigin={ item.get('backOrigin') }
-                  bettingMarketId={ item.get('id') }
-                  eventStatus={ this.props.eventStatus }
-                  isLiveMarket={ this.props.isLiveMarket }
-                  createBet={ createBet }
-                  eventFlag={ eventFlag }
-                />
-              </Col>
-            );
-          })}
-        </div>
+          return (
+            <Col
+              key={ index } 
+              span={ span }
+            >
+              <BettingMarket
+                title={ description }
+                eventName={ this.props.title }
+                eventID={ this.props.eventID }
+                eventRoute={ this.props.eventRoute }
+                backOrigin={ item.get('backOrigin') }
+                bettingMarketId={ item.get('id') }
+                eventStatus={ this.props.eventStatus }
+                isLiveMarket={ this.props.isLiveMarket }
+                createBet={ createBet }
+                eventFlag={ eventFlag }
+              />
+            </Col>
+          );
+        })}
       </div>
     );
   }
 }
 
 BackingBettingWidget.propTypes = {
   isLiveMarket: PropTypes.bool.isRequired,
-  eventStatus: PropTypes.any.isRequired,
-  title: PropTypes.string.isRequired
 };
 
 const mapDispatchToProps = (dispatch) => {

src/components/BettingWidgets/BackingBettingWidget/BackingBettingWidget.less

@@ -8,6 +8,25 @@
   padding: 0px;
   display: block;
   width:100%;
+  height: @tileHeight;
+
+  /* Media Queries for 125-150% zoom levels */
+  @media (max-width: 1400px) {
+    height:50px;
+  }
+
+  @media (max-width: 1281px) {
+    height:60px;
+  }
+
+  .ant-col-2 {
+    .backBettingMarket {
+      @media (max-width: 1281px) {
+        padding-left: 8px;
+      }
+    }
+
+  }
 
   &.disabled {
     .name, .date {
@@ -20,7 +39,6 @@
     }
   }
 
-
   .date {
     font-size: 12px;
     font-weight: 300;
@@ -47,17 +65,30 @@
   .name, .date {
     color: @white;
     background-color: @midnight;
-    height: @tileHeight;
+    height: -webkit-fill-available;
     line-height: 1.2;
   }
 
   .backBettingMarket {
     background-color: @midnight;
     padding: 4px 16px 6px 16px;
     margin: 0px 0px 4px 4px;
-    height: @tileHeight;
+    height: -webkit-fill-available;
     line-height: 1.2;
 
+    &.eventFlag {
+      display: flex;
+
+      .odds {
+        margin-top: 8px;
+        text-align: right;
+      }
+
+      .bmTitle {
+        margin-top: 8px;
+      }
+    }
+
     &.active:hover {
       background-color: @cello;
       cursor: pointer;

src/components/BettingWidgets/BackingBettingWidget/BettingMarket.jsx

@@ -31,13 +31,22 @@ class BettingMarket extends PureComponent {
       odds = 1.01;
     }
 
-    this.props.createBet(
-      this.props.eventID,
-      this.props.eventName,
-      'back', 
-      this.props.bettingMarketId,
-      odds,
-    );
+    if (this.props.eventFlag) {
+      this.props.createBet(
+        this.props.eventID,
+        this.props.eventName,
+        'back', 
+        this.props.bettingMarketId,
+        odds,
+      );
+    } else {
+      this.props.createBet(
+        'back',
+        this.props.bettingMarketId,
+        odds
+      );
+    }
+
   }
 
   render() {
@@ -47,7 +56,7 @@ class BettingMarket extends PureComponent {
         className={
           'backBettingMarket ' +
           (SportsbookUtils.isAbleToBet(this.props.eventStatus) ? 'active ' : 'disabled ') +
-          (this.props.eventFlag ? 'eventFlag' : '')
+          (this.props.eventRoute ? 'eventFlag' : '')
         }
         onClick={ this.offerClicked }
       >
@@ -59,9 +68,7 @@ class BettingMarket extends PureComponent {
 }
 
 BettingMarket.propTypes = {
-  title: PropTypes.string.isRequired,
   isLiveMarket: PropTypes.bool.isRequired,
-  eventStatus: PropTypes.any.isRequired,
   createBet: PropTypes.func.isRequired,
   bettingMarketId: PropTypes.string.isRequired,
   eventFlag: PropTypes.bool

src/components/BettingWidgets/BackingWidgetContainer/BackingWidgetContainer.jsx

@@ -7,24 +7,15 @@ class BackingWidgetContainer extends PureComponent {
 
     let eventFlag = false;
 
-    if (this.props.marketData.length) {
+    if (this.props.marketData.size > 0) {
       eventFlag = true;
     }
 
     return (
       <div className='backingWidgetContainer'>
         <div className='title'>{this.props.widgetTitle}</div>
 
-        { !eventFlag && this.props.marketData.length > 0 &&
-          <BackingBettingWidget
-            marketData={ this.props.marketData }
-            title={ this.props.widgetTitle }
-            eventStatus={ this.props.eventStatus }
-            isLiveMarket={ true }
-          />
-        }
-
-        { eventFlag && this.props.marketData.length > 0 && this.props.marketData.map((market, index) => { // eslint-disable-line
+{ !eventFlag && this.props.marketData.length > 0 && this.props.marketData.map((market, index) => { // eslint-disable-line
           return (<BackingBettingWidget
             key={ index }
             title={ market.get('eventName') }
@@ -36,6 +27,20 @@ class BackingWidgetContainer extends PureComponent {
             isLiveMarket={ true }
           />);
         })}
+
+        { eventFlag && this.props.marketData.size > 0 && // eslint-disable-line
+          (<BackingBettingWidget
+            key={ this.props.marketData.get('id') }
+            title={ this.props.eventName }
+            eventID={ this.props.marketData.get('event_id') }
+            eventTime={ this.props.eventTime }
+            eventStatus={ this.props.marketData.get('status') }
+            eventRoute={ this.props.eventRoute }
+            columnType={ this.props.marketData.get('description') }
+            marketData={ this.props.marketData }
+            isLiveMarket={ true }
+          />)
+        }
       </div>
     );
   }

src/components/BettingWidgets/SimpleBettingWidget/SimpleBettingWidget.jsx

@@ -78,7 +78,7 @@ const hasOffers = (record, index) => {
 
   // This checks that there is a betting market exisiting to pair up with another.
   // aka: a second team betting market to be a competitor to the first one
-  if(index && offers.getIn([index - 1, 'betting_market_id']) === undefined) {
+  if (index && offers.getIn([index - 1, 'betting_market_id']) === undefined) {
     hasOffers = false;
   }
 

src/components/Exchange/Exchange.jsx

@@ -149,7 +149,9 @@ class Exchange extends PureComponent {
 
     // Pick one of the 2 betting drawers based on the path
     let selectBettingDrawer = (pathTokens) => {
-      if (pathTokens.length < 3 || pathTokens[2].toLowerCase() !== 'bettingmarketgroup') {
+      if (pathTokens.length < 3 || 
+        (pathTokens[2].toLowerCase() !== 'bettingmarketgroup' &&
+         pathTokens[2].toLowerCase() !== 'events'))  {
         return <QuickBetDrawer currencyFormat={ this.props.currencyFormat } />;
       }
 

src/components/SportsBook/SportsBook.jsx

@@ -12,7 +12,7 @@ class SportsBook extends PureComponent {
   render() {
 
     return (
-      <div className='all-sports-wrapper'>
+      <div id='all-sports-wrapper'>
         <div className='banner-ad-header' />
         {
           this.props.allSports.map((sport) => {
@@ -25,7 +25,7 @@ class SportsBook extends PureComponent {
 
               let bmgs = e.get('bettingMarketGroups');
 
-              if(bmgs) {
+              if (bmgs) {
                 let bmg = bmgs.first();
 
                 if (bmg && SportsbookUtils.hasBettingMarkets(bmg)) {

src/components/SportsBookEvent/SportsBookEvent.jsx

@@ -56,7 +56,7 @@ class SportsBookEvent extends PureComponent {
 
   render() {
     // Return nothing if betting market group doesn't exist
-    if (!this.props.event || this.props.event.isEmpty() || this.props.eventStatus === null) {
+    if (!this.props.event || this.props.event.isEmpty() || this.props.eventStatus === null) {      
       return null;
     } else {
       return (
@@ -69,13 +69,18 @@ class SportsBookEvent extends PureComponent {
             eventStatus={ this.props.eventStatus[1] }
             eventStatusClassName={ this.props.eventStatus[0] }
           />
-          {this.props.marketData.map((item, index) => {
+
+          {this.props.marketData.reverse().map((e, index) =>  {
             return (
               <BackingWidgetContainer
                 key={ index }
-                widgetTitle={ item.get('description') }
-                marketData={ item }
+                widgetTitle={ e.get('description') }
+                marketData={ e }
                 eventStatus={ this.props.eventStatus }
+                eventName={ this.props.eventName }
+                eventTime={ this.props.eventTime }
+                event={ this.props.event }
+                eventRoute={ this.props.route.path ? true : false }
               />
             );
           })}