be-components 2.6.5 → 2.6.7

package/src/MarketComponents/components/TournamentList/index.tsx

@@ -0,0 +1,163 @@
+import React, { useEffect, useState } from 'react';
+import { View, FlatList, ActivityIndicator } from 'react-native';
+import type { BestAvailableOrderProps, BestAvailableResponseProps, EventOrderStatProps, LeagueProps, MarketProps, MatchProps, OrderProps, TournamentProps, TradeProps } from '../../../types';
+import { MarketComponentApi } from '../../api';
+import SocketManager from '../../../Socket';
+import Colors from '../../../constants/colors';
+import TournamentMarket from '../TournamentMarket';
+import { TournamentListHelpers } from './api';
+import moment from 'moment-mini';
+
+type TournamentListProps = {
+    list_key:string //Change key to reload data
+    tournaments:TournamentProps[],
+    distinct_id?:string,
+    show_grades?:boolean,
+    hide_liquidity?:boolean,
+    hide_match_liquidity?:boolean,
+    hide_participant_liquidity?:boolean,
+    show_id?:boolean,
+    init_expanded_ids?:string[],
+    onTeamSelect?:(team_id:string) => void,
+    onActivate?:(event_id:string, event_type:string) => void,
+    onViewEvent?:(data:{ event_id:string, event_type:string, market_id:string, side_id?:string, side_type?:string }) => void,
+    onOrder?:(o:OrderProps) => void,
+    onTradeLongPress?:(trade:TradeProps) => void,
+    onViewAdditionalMarkets?:(event_id:string, event_type:string) => void
+}
+
+const TournamentList = ({ tournaments, hide_liquidity, hide_match_liquidity, hide_participant_liquidity, show_grades, list_key, distinct_id, onViewEvent, onOrder, onTradeLongPress, onViewAdditionalMarkets, onActivate }:TournamentListProps) => {
+    const [ needs_reload, setNeedsReload ] = useState(false);
+    const [ socket_response, setSocketResponse ] = useState<{ tournament_ids:string[], matches:MatchProps[], ba_response:BestAvailableResponseProps } | undefined>(undefined);
+    const [ event_data, setListData ] = useState<{
+        loading:boolean,
+        markets:MarketProps[],
+        leagues:LeagueProps[],
+        tournament_latest_trades: TradeProps[],
+        tournament_available_orders: BestAvailableOrderProps[],
+        tournament_order_stats:EventOrderStatProps[],
+        match_latest_trades:TradeProps[],
+        match_available_orders:BestAvailableOrderProps[],
+        match_order_stats:EventOrderStatProps[]
+    }>({
+        loading:false,
+        leagues:[],
+        tournament_latest_trades: [],
+        match_latest_trades:[],
+        markets:[],
+        tournament_available_orders: [],
+        match_available_orders:[],
+        tournament_order_stats: [],
+        match_order_stats:[]
+    });
+    const { loading, leagues, tournament_available_orders, tournament_order_stats, tournament_latest_trades, match_available_orders, match_order_stats, match_latest_trades, markets } = event_data;
+
+    useEffect(() => {
+        MarketComponentApi.setEnvironment();
+        if(tournaments.length > 0){ getDataFromServer() }
+    },[list_key, tournaments.length]);
+
+    useEffect(() => {
+        if(!socket_response){ return }
+        const updated_data = TournamentListHelpers.getMarketDataFromBestAvailable(socket_response.ba_response, tournaments, socket_response.matches);
+        if(!updated_data.updated){ return }
+        let socket_match_ids = socket_response.matches.map(m => m.match_id);
+        setListData({
+            ...event_data,
+            tournament_order_stats: tournament_order_stats.filter(os => !socket_response.tournament_ids.find(new_id => new_id == os.event_id)).concat(updated_data.event_order_stats),
+            tournament_available_orders: tournament_available_orders.filter(os => !socket_response.tournament_ids.find(new_id => new_id == os.event_id)).concat(updated_data.available_orders),
+            tournament_latest_trades: tournament_latest_trades.filter(lt => !socket_response.tournament_ids.find(new_id => new_id == lt.event_id)).concat(updated_data.latest_trades),
+            match_order_stats: match_order_stats.filter(os => !socket_match_ids.find(new_id => new_id == os.event_id)).concat(updated_data.m_event_order_stats),
+            match_available_orders: match_available_orders.filter(os => !socket_match_ids.find(new_id => new_id == os.event_id)).concat(updated_data.m_available_orders),
+            match_latest_trades: match_latest_trades.filter(os => !socket_match_ids.find(new_id => new_id == os.event_id)).concat(updated_data.m_latest_trades)
+        })
+    },[socket_response])
+
+    const getDataFromServer = async() => {
+        setListData({ ...event_data, loading:true });
+        const ba = await MarketComponentApi.getBestAvailableOrders();
+        if(!ba){ return }
+        const lt = await MarketComponentApi.getLatestTradesByEvents('tournament', tournaments.map(e => e.tournament_id));
+        const ev_data = TournamentListHelpers.getMarketDataFromBestAvailable(ba, tournaments, []);
+        const maks = await MarketComponentApi.getMarkets();
+        const lgs = await MarketComponentApi.getLeagues();
+
+        setListData({
+            ...event_data,
+            loading:false,
+            leagues:lgs,
+            tournament_latest_trades: lt,
+            markets: maks,
+            tournament_order_stats: ev_data.event_order_stats,
+            tournament_available_orders: ev_data.available_orders,
+            match_latest_trades: ev_data.m_latest_trades,
+            match_available_orders: ev_data.m_available_orders,
+            match_order_stats: ev_data.m_event_order_stats
+        });
+    }
+
+    const renderTournaments = (data: { item:TournamentProps, index:number }) => {
+        const t_ba = tournament_available_orders.filter(o => o.event_id == data.item.tournament_id && o.event_type == 'tournament');
+        const t_order_st = tournament_order_stats.filter(os => os.event_id == data.item.tournament_id && os.event_type == 'tournament');
+        const t_lts = tournament_latest_trades.filter(lt => lt.event_id == data.item.tournament_id && lt.event_type == 'tournament');
+        const league = leagues.find(l => l.league_id == data.item.league_id);
+        return (
+            <TournamentMarket
+                tournament={data.item}
+                markets={markets}
+                latest_trades={t_lts}
+                league={league}
+                show_grades={show_grades}
+                match_available_orders={match_available_orders}
+                match_latest_trades={match_latest_trades}
+                hide_liquidity={hide_liquidity}
+                hide_match_liquidity={hide_match_liquidity}
+                hide_participant_liquidity={hide_participant_liquidity}
+                match_order_stats={match_order_stats}
+                best_available_orders={t_ba}
+                event_order_stats={t_order_st}
+                onActivate={onActivate ? onActivate : undefined}
+                onView={(ev) => {
+                    if(onViewEvent){ onViewEvent(ev) }
+                }}
+                onOrder={(o) => onOrder ? onOrder(o) : console.log('')}
+                onViewAdditionalMarkets={(event_id, event_type) => onViewAdditionalMarkets ? onViewAdditionalMarkets(event_id, event_type) : console.log('')}
+                onTradeLongPress={(t) => onTradeLongPress ? onTradeLongPress(t) : console.log(t)}
+            />
+        )
+    }
+
+    return (
+        <View>
+            {loading ?
+                <ActivityIndicator style={{ padding:20, alignSelf:'center' }} size='large' color={Colors.brand.midnight} />
+            :<></>}
+            {markets.length > 0 ?
+            <FlatList
+                key={'tournament_list'}
+                data={tournaments.sort((a,b) => moment(a.scheduled_datetime).unix() - moment(b.scheduled_datetime).unix())}
+                renderItem={renderTournaments}
+                keyExtractor={(item) => item.tournament_id.toString()}
+            />
+            :<></>}
+            <SocketManager
+                distinct_id={distinct_id}
+                onConnect={() => {
+                    if(needs_reload){
+                        getDataFromServer();
+                        setNeedsReload(false);
+                    }
+                }}
+                onDisconnect={() => setNeedsReload(true)}
+                onSocketEvent={(ev) => {
+                    if(ev.type != 'V1_LOAD_BEST_AVAILABLE'){ return }
+                    let tournament_ids = ev.data.tournaments.map((e:TournamentProps) => e.tournament_id);
+                    setSocketResponse({ tournament_ids, matches:ev.data.matches, ba_response: ev.data });
+                }}
+                subscribed_events={['V1_LOAD_BEST_AVAILABLE']}
+            />
+        </View>
+    )
+}
+
+export default TournamentList

package/src/MarketComponents/components/TournamentMarket/api/index.ts

@@ -47,9 +47,8 @@ const TournamentMarketHelpers = {
             if(a_trade){ a_prob = a_trade.probability }
             let b_trade = latest_trades.find(os => os.market_id == market?.market_id && os.side == market?.trade_side && os.side_type == 'team' && os.side_id == b.team_id);
             if(b_trade){ b_prob = b_trade.probability }
-            let a_stats = event_order_stats.filter(os => os.market_id == market?.market_id && os.side_type == 'athlete' && os.side_id == a.team_id).reduce((a,b) => a + b.open_order_amount, 0);
-            let b_stats = event_order_stats.filter(os => os.market_id == market?.market_id && os.side_type == 'athlete' && os.side_id == b.team_id).reduce((a,b) => a + b.open_order_amount, 0);
-            
+            let a_stats = event_order_stats.filter(os => os.market_id == market?.market_id && os.side_type == 'team' && os.side_id == a.team_id).reduce((a,b) => a + b.open_order_amount, 0);
+            let b_stats = event_order_stats.filter(os => os.market_id == market?.market_id && os.side_type == 'team' && os.side_id == b.team_id).reduce((a,b) => a + b.open_order_amount, 0);
             if(a_stats > 0){ a_prob += a_stats }
             if(b_stats > 0){ b_prob += b_stats }
             return b_prob - a_prob

package/src/MarketComponents/components/TournamentMarket/index.tsx

@@ -17,6 +17,10 @@ type TournamentMarketProps = {
     tournament:TournamentProps,
     league?:LeagueProps,
     markets:MarketProps[],
+    hide_liquidity?:boolean,
+    hide_match_liquidity?:boolean,
+    show_grades?:boolean,
+    hide_participant_liquidity?:boolean,
     latest_trades:TradeProps[],
     best_available_orders:BestAvailableOrderProps[],
     match_available_orders:BestAvailableOrderProps[],
@@ -31,7 +35,7 @@ type TournamentMarketProps = {
 }
 
 
-const TournamentMarket = ({ tournament, league, markets, latest_trades, best_available_orders, event_order_stats, match_available_orders, match_latest_trades, match_order_stats, onView, onTradeLongPress, onViewAdditionalMarkets, onOrder }:TournamentMarketProps) => {
+const TournamentMarket = ({ tournament, hide_match_liquidity, show_grades, hide_participant_liquidity, league, markets, latest_trades, hide_liquidity, best_available_orders, event_order_stats, match_available_orders, match_latest_trades, match_order_stats, onView, onTradeLongPress, onViewAdditionalMarkets, onOrder }:TournamentMarketProps) => {
     const [ tournament_data, setTournamentData ] = useState<{
         loaded:boolean,
         loading:boolean,
@@ -56,7 +60,7 @@ const TournamentMarket = ({ tournament, league, markets, latest_trades, best_ava
 
     const supported_markets = markets.filter(m => tournament.supported_markets.find(sm => sm.market_id == m.market_id));
     const { show_athletes, show_teams, show_matches } = TournamentMarketHelpers.visibleMarketTypes(tournament, active_market);
-    const { liquidity, open_order_count } = MarketComponentHelpers.getLiqudity(event_order_stats.concat(match_order_stats));
+    const { liquidity, open_order_count } = MarketComponentHelpers.getLiqudity(event_order_stats.concat(match_order_stats.filter(m => matches.find(nm => nm.match_id == m.event_id))));
     const sorted_athletes = TournamentMarketHelpers.sortAthletes(event_order_stats, latest_trades, athletes, active_market);
     const sorted_teams = TournamentMarketHelpers.sortTeams(event_order_stats, latest_trades, teams, active_market);
     const sorted_matches = TournamentMarketHelpers.sortMatches(match_order_stats, matches, active_market);
@@ -85,7 +89,6 @@ const TournamentMarket = ({ tournament, league, markets, latest_trades, best_ava
         let market = markets.find(m => m.market_id == sm?.market_id);
         const aths = await MarketComponentApi.getAthletesByIds(a_ids);
         const tms = await MarketComponentApi.getTeamsByIds(t_ids);
-
         setTournamentData({
             ...tournament_data,
             loaded: true,
@@ -129,7 +132,9 @@ const TournamentMarket = ({ tournament, league, markets, latest_trades, best_ava
                 away_athlete={away_athlete}
                 home_athlete={home_athlete}
                 away_team={away_team}
+                show_grades={show_grades}
                 home_team={home_team}
+                hide_liquidity={hide_match_liquidity ? true : false}
                 market={active_market}
                 latest_trades={m_trades}
                 best_available_orders={m_available_orders}
@@ -144,6 +149,7 @@ const TournamentMarket = ({ tournament, league, markets, latest_trades, best_ava
     }
 
     const renderTeams = (data:{ item:TeamProps, index:number }) => {
+        console.log('rendering team!!!!')
         if(!active_market){ return <></> }
         let team_available_orders = best_available_orders.filter(ba => ba.side_type == 'team' && ba.side_id == data.item.team_id);
         let team_trades = latest_trades.filter(t => t.side_type == 'team' && t.side_id == data.item.team_id);
@@ -154,6 +160,8 @@ const TournamentMarket = ({ tournament, league, markets, latest_trades, best_ava
                 event_type='tournament'
                 onTradeLongPress={onTradeLongPress}
                 onView={onView}
+                show_grades={show_grades}
+                hide_liquidity={hide_participant_liquidity ? true : false}
                 tournament={tournament}
                 event_order_stats={team_order_stats}
                 best_available_orders={team_available_orders}
@@ -176,6 +184,8 @@ const TournamentMarket = ({ tournament, league, markets, latest_trades, best_ava
                 event_type='tournament'
                 onTradeLongPress={onTradeLongPress}
                 onView={onView}
+                show_grades={show_grades}
+                hide_liquidity={hide_participant_liquidity ? true : false}
                 tournament={tournament}
                 event_order_stats={team_order_stats}
                 best_available_orders={team_available_orders}
@@ -240,7 +250,9 @@ const TournamentMarket = ({ tournament, league, markets, latest_trades, best_ava
             :<></>}
             </View>
             }
+            
             <View style={{ backgroundColor:Colors.shades.shade100, padding:10, flexDirection:'row', alignItems:'center', flexWrap:'wrap', borderBottomLeftRadius:8, borderBottomRightRadius:8 }}>
+                {!hide_liquidity ?
                 <TouchableOpacity style={{ flex:1, flexDirection:'row', minWidth:115 }} onPress={() => {
                     if(!active_market){ return }
                     onViewAdditionalMarkets(tournament.tournament_id, 'tournament');
@@ -253,6 +265,7 @@ const TournamentMarket = ({ tournament, league, markets, latest_trades, best_ava
                         <Text size={12} color={Colors.brand.electric} weight='semibold'>${liquidity.toFixed()} {open_order_count} Orders</Text>
                     </View>
                 </TouchableOpacity>
+                :<View style={{flex:1}} />}
                 <TouchableOpacity style={{ flexDirection:'row', alignItems:'center', backgroundColor:Colors.shades.white, borderWidth:1, borderColor:Colors.shades.shade600, borderRadius:4, padding:10, ...view_styles.float }} onPress={() => setShowMarkets(!show_markets)}>
                     <Text style={{ marginRight:10 }} size={14} color={Colors.brand.midnight}>{active_market?.type == 'Stat' ? active_market.stat_label : active_market?.type}</Text>
                     <Icons.ChevronIcon color={Colors.brand.midnight} size={14} />

package/src/MarketComponents/index.tsx

@@ -5,6 +5,7 @@ import AthleteTournamentMarket from './components/AthleteTournamentMarket';
 import TeamEventList from './components/TeamEventList';
 import TournamentMarket from './components/TournamentMarket';
 import MatchMarket from './components/MatchMarket';
+import TournamentList from './components/TournamentList';
 
 export default {
     TeamEventMarket,
@@ -13,5 +14,6 @@ export default {
     AthleteTournamentMarket,
     TeamEventList,
     TournamentMarket,
-    MatchMarket
+    MatchMarket,
+    TournamentList
 }