be-components 2.1.9 → 2.2.0

package/src/EventComponents/TeamProfile/index.tsx

@@ -0,0 +1,160 @@
+import React, { useEffect, useState } from 'react';
+import { View, Image, ScrollView, FlatList, TouchableOpacity, ActivityIndicator } from 'react-native';
+import type { EventProps, TeamProps } from '../../types';
+import { EventComponentApi } from '../api';
+import { Text } from '../../Components';
+import LinearGradient from 'react-native-linear-gradient';
+import Colors from '../../constants/colors';
+import { view_styles } from '../../constants/styles';
+import TeamEventList from '../../MarketComponents/components/TeamEventList';
+
+type TeamProfileProps = {
+    team_id:string,
+    height:number
+}
+
+const TeamProfile = ({ team_id, height }: TeamProfileProps ) => {
+    const [ module_size, setModuleSize ] = useState({ height:777, width:330 });
+    const [ team_data, setData ] = useState<{
+        loading:boolean,
+        team?:TeamProps,
+        event_toggle:string,
+    }>({
+        loading: false,
+        event_toggle: 'Upcoming',
+    });
+    const { team, event_toggle } = team_data;
+    const [ event_data, setEventData ] = useState<{
+        event_loading:boolean,
+        events:EventProps[],
+        event_offset:number
+    }>({
+        event_loading: false,
+        events: [],
+        event_offset: 0
+    });
+    const { event_loading, events } = event_data;
+
+    useEffect(() => {
+        EventComponentApi.setEnvironment();
+        getTeamData(team_id)
+    },[team_id]);
+
+    useEffect(() => {
+        getEventData(0);
+    },[event_toggle])
+
+    const getTeamData = async(id:string) => {
+        setData({ ...team_data, loading:true });
+        const team = await EventComponentApi.getTeamById(id);
+        setData({
+            ...team_data,
+            loading: false,
+            team:team,
+        })
+    }
+
+    const getEventData = async(offset:number) => {
+        setEventData({ ...event_data, event_loading:true });
+        let evs:EventProps[] = [];
+        switch(event_toggle){
+            case 'Upcoming':
+                evs = await EventComponentApi.getUpcomingScheduleByTeams(team_id, offset);
+                break
+            case 'Past':
+                evs = await EventComponentApi.getPastScheduleByTeams(team_id, offset);
+                break
+            default: break
+        }
+        setEventData({
+            ...event_data,
+            event_loading: false,
+            event_offset: offset,
+            events: evs
+        })
+    }
+
+
+
+    const renderEventToggles = (data:{ item:string, index:number }) => {
+        const active = data.item == event_toggle ? true : false
+        return (
+            <TouchableOpacity style={{ width: (module_size.width - 65) / 2, padding:15, borderRadius:22, backgroundColor:active?Colors.brand.midnight:'transparent' }}
+            onPress={() => setData({ ...team_data, event_toggle: data.item })}>
+                <Text textAlign='center' weight='bold' size={14} color={active ?Colors.shades.white:Colors.brand.midnight}>{data.item}</Text>
+            </TouchableOpacity>
+        )
+    }
+
+    if(!team){ return <></> }
+    return (
+        <View style={{ height }} onLayout={(ev) => {
+            const { height, width } = ev.nativeEvent.layout;
+            setModuleSize({ height, width })
+        }}>
+            <View style={{ position:'absolute', top:0, left:0, right:0 }}>
+                <LinearGradient style={{ opacity:0.5, height:module_size.width, borderBottomLeftRadius:40, borderBottomRightRadius:40 }} colors={[team.primary_color ?? Colors.brand.midnightTopGradient, team.secondary_color ?? Colors.brand.midnight]} nativeID='team_header'/>        
+                <View style={{ position:'absolute', top:0, left:0, right:0, bottom:0, alignItems:'center' }}>
+                    <Image
+                        source={{ uri:team.image?.url }}
+                        style={{ height: module_size.width*0.75, width:module_size.width*0.75 }}
+                        resizeMode='cover'
+                    />
+                </View>
+            </View>
+            <ScrollView style={{ flex:1 }}>
+                <View style={{ ...view_styles.section, marginTop:module_size.width *0.5 }}>
+                    <View style={{ ...view_styles.section_header }}>
+                        <Image
+                            style={{ height:40, width:40 }}
+                            source={{ uri: team.image?.url }}
+                            resizeMode='cover'
+                        />
+                        <View style={{ flex:1, marginLeft:10 }}>
+                            <Text theme='header'>{team.market_name} {team.name}</Text>
+                            <Text style={{ marginTop:4 }} theme='body_2'>{team.division} - {team.sub_division}</Text>
+                        </View>
+                        {team.rank ?
+                        <Text size={22} color={Colors.brand.cyan} weight='bold'>{team.rank}</Text>
+                        :<></>}
+                    </View>
+                </View>
+
+                <View style={{ ...view_styles.section }}>
+                    <View style={{ ...view_styles.section_header }}>
+                        <View style={{ flex:1 }}>
+                            <Text theme='header'>Events</Text>
+                            <Text style={{ marginTop:3 }} theme='body_2'>Events that this team is participating in</Text>
+                        </View>
+                    </View>
+                    <View style={{ ...view_styles.section_body, padding:0 }}>
+                        <View style={{ ...view_styles.body_row, margin:10, marginLeft:20, marginRight:20, borderRadius:22, padding:1, backgroundColor:Colors.shades.shade100 }}>
+                            <FlatList
+                                key={'toggles'}
+                                horizontal
+                                showsHorizontalScrollIndicator={false}
+                                data={['Upcoming', 'Past']}
+                                renderItem={renderEventToggles}
+                                keyExtractor={(item) => item}
+
+                            />
+                        </View>
+                        {event_loading ?
+                        <ActivityIndicator
+                            size='large'
+                            color={Colors.brand.midnight}
+                            style={{ padding:20, alignSelf:'center' }}
+                        />
+                        :<></>}
+                        <TeamEventList
+                            key={`${team_id}_${event_toggle}`}
+                            events={events}
+                        />
+                    </View>
+                </View>
+            </ScrollView>
+        </View>
+    )
+}
+
+export default TeamProfile

package/src/EventComponents/api/index.ts

@@ -0,0 +1,42 @@
+import axios from 'axios';
+import { APIOverrides } from "../../ApiOverrides";
+import type { EventProps, TeamProps } from '../../types';
+
+let EVENT_SVC_API = ''
+//let AUTH_SVC_API = ''
+
+export { EventComponentApi }
+
+const EventComponentApi = {
+    setEnvironment: () => {
+        const endpoints = APIOverrides.getEndpoints();
+        EVENT_SVC_API = endpoints['EVENT_SVC_API'] as string;
+        //MK_SVC_API = endpoints['MK_SVC_API'] as string;
+        //AUTH_SVC_API = endpoints['AUTH_SVC_API'] as string;
+    },
+    getTeamById: async(team_id:string):Promise<undefined|TeamProps> => {
+        try {
+            const resp = await axios.get(`${EVENT_SVC_API}/v1/teams/team/${team_id}`);
+            return resp.data.team
+        } catch (e) {
+            console.log(e);
+            return undefined
+        }
+    },
+    getUpcomingScheduleByTeams: async(team_ids:string, offset:number):Promise<EventProps[]> => {
+        try {
+            const resp = await axios.get(`${EVENT_SVC_API}/v1/teams/schedule/upcoming/${team_ids}?offset=${offset}`)
+            return resp.data.events
+        } catch (e) {
+            return []
+        }
+    },
+    getPastScheduleByTeams: async(team_ids:string, offset:number):Promise<EventProps[]> => {
+        try {
+            const resp = await axios.get(`${EVENT_SVC_API}/v1/teams/schedule/past/${team_ids}?offset=${offset}`)
+            return resp.data.events
+        } catch (e) {
+            return []
+        }
+    }
+}

package/src/EventComponents/index.tsx

@@ -0,0 +1,9 @@
+import AthleteCard from "./AthleteCard";
+import TeamCard from "./TeamCard";
+import TeamProfile from "./TeamProfile";
+
+export default {
+    TeamCard,
+    AthleteCard,
+    TeamProfile
+}

package/src/MarketComponents/api/index.ts

@@ -1,9 +1,10 @@
 import axios from 'axios';
 import { APIOverrides } from "../../ApiOverrides"
-import type { AthleteProps, ContestStatProps, EventOrderStatProps, EventProps, MarketProps, MarketSideOptionProps, MatchProps, OrderProps, TeamProps, TournamentProps } from "../../types"
+import type { AthleteProps, BestAvailableResponseProps, ContestStatProps, EventOrderStatProps, EventProps, MarketProps, MarketSideOptionProps, MatchProps, OrderProps, TeamProps, TournamentProps } from "../../types"
 
 let EVENT_SVC_API = ''
 let AUTH_SVC_API = ''
+let MK_SVC_API = ''
 
 export { MarketComponentApi, MarketComponentHelpers }
 
@@ -11,9 +12,37 @@ const MarketComponentApi = {
     setEnvironment: () => {
         const endpoints = APIOverrides.getEndpoints();
         EVENT_SVC_API = endpoints['EVENT_SVC_API'] as string;
-        //MK_SVC_API = endpoints['MK_SVC_API'] as string;
+        MK_SVC_API = endpoints['MK_SVC_API'] as string;
         AUTH_SVC_API = endpoints['AUTH_SVC_API'] as string;
     },
+    getMarkets:async():Promise<MarketProps[]> => {
+        try {
+            const resp = await axios.get(`${MK_SVC_API}/v1/markets/all`);
+            return resp.data.markets
+        } catch (e) {
+            console.log(e)
+            return []
+        }
+    },
+    getLatestTradesByEvents: async(event_type: string, event_ids:string[]) => {
+        try {
+            if(event_ids.length == 0){ return [] }
+            const resp = await axios.post(`${MK_SVC_API}/v1/trades/event/latest/bulk/get`, { event_type, event_ids })
+            return resp.data.trades
+        } catch (e) {
+            console.log(e)
+            return []
+        }
+    },
+    getBestAvailableOrders:async():Promise<BestAvailableResponseProps | undefined> => {
+        try {
+            const resp = await axios.get(`${MK_SVC_API}/v1/orders/available`);
+            return resp.data
+        } catch (e) {
+            console.log(e)
+            return undefined
+        }
+    },
     getAthletesByTeamId: async(team_id:string):Promise<AthleteProps[]> => {
         try {
             const resp = await axios.get(`${EVENT_SVC_API}/v1/athletes/team/${team_id}`)

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

@@ -0,0 +1,23 @@
+import type { BestAvailableOrderProps, BestAvailableResponseProps, EventOrderStatProps, EventProps, TradeProps } from "../../../../types";
+
+export { TeamEventListHelpers }
+
+const TeamEventListHelpers = {
+    getEventMarketDataFromBestAvailable: (ba:BestAvailableResponseProps, events:EventProps[]):{ updated:boolean, latest_trades:TradeProps[], event_order_stats:EventOrderStatProps[], available_orders:BestAvailableOrderProps[] } => {
+        let updated = false;
+        let event_order_stats:EventOrderStatProps[] = []
+        let available_orders:BestAvailableOrderProps[] = []
+        let latest_trades:TradeProps[] = []
+        ba.events.map(ba_event => {
+            if(!ba_event.supported_markets){ return }
+            if(!events.find(e => e.event_id == ba_event.event_id)){ return }
+            updated = true
+            ba_event.supported_markets.map(sm => {
+                if(sm.available_orders){ available_orders = available_orders.concat(sm.available_orders) }
+                if(sm.order_stats){ event_order_stats = event_order_stats.concat(sm.order_stats) }
+                if(sm.latest_trades){ latest_trades = latest_trades.concat(sm.latest_trades) }
+            })
+        })
+        return { updated, event_order_stats, available_orders, latest_trades }
+    }
+}

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

@@ -0,0 +1,136 @@
+import React, { useEffect, useState } from 'react';
+import { View, FlatList } from 'react-native';
+import type { BestAvailableOrderProps, BestAvailableResponseProps, EventOrderStatProps, EventProps, MarketProps, OrderProps, TradeProps } from '../../../types';
+import TeamEventMarket from '../TeamEventMarket';
+import { MarketComponentApi } from '../../api';
+import { TeamEventListHelpers } from './api';
+import SocketManager from '../../../Socket';
+
+type TeamEventListProps = {
+    key:string //Change key to reload data
+    events:EventProps[],
+    distinct_id?:string,
+    show_grades?: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,
+    onCompetitionSelect?:(competition_id:string) => void,
+    onSquaresSelect?:(sq_comp_id:string) => void,
+    onTradeLongPress?:(trade:TradeProps) => void,
+    onViewAdditionalMarkets?:(event_id:string, event_type:string) => void
+}
+
+const TeamEventList = ({ events, show_grades, show_id, key, distinct_id, init_expanded_ids, onTeamSelect, onViewEvent, onOrder, onCompetitionSelect, onSquaresSelect, onTradeLongPress, onViewAdditionalMarkets, onActivate }:TeamEventListProps) => {
+    const [ needs_reload, setNeedsReload ] = useState(false);
+    const [ socket_response, setSocketResponse ] = useState<{ event_ids:string[], ba_response:BestAvailableResponseProps } | undefined>(undefined);
+    const [ event_data, setListData ] = useState<{
+        loading:boolean,
+        markets:MarketProps[],
+        latest_trades: TradeProps[],
+        available_orders: BestAvailableOrderProps[],
+        order_stats:EventOrderStatProps[]
+    }>({
+        loading:false,
+        latest_trades: [],
+        markets:[],
+        available_orders: [],
+        order_stats: []
+    });
+    const { available_orders, order_stats, latest_trades, markets } = event_data;
+
+    useEffect(() => {
+        MarketComponentApi.setEnvironment();
+        if(events.length > 0){ getDataFromServer() }
+    },[key, events.length]);
+
+    useEffect(() => {
+        if(!socket_response){ return }
+        const updated_data = TeamEventListHelpers.getEventMarketDataFromBestAvailable(socket_response.ba_response, events);
+        if(!updated_data.updated){ return }
+        setListData({
+            ...event_data,
+            order_stats: order_stats.filter(os => !socket_response.event_ids.find(new_id => new_id == os.event_id)).concat(updated_data.event_order_stats),
+            available_orders: available_orders.filter(os => !socket_response.event_ids.find(new_id => new_id == os.event_id)).concat(updated_data.available_orders),
+            latest_trades: latest_trades.filter(lt => !socket_response.event_ids.find(new_id => new_id == lt.event_id)).concat(updated_data.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('team', events.map(e => e.event_id));
+        const ev_data = TeamEventListHelpers.getEventMarketDataFromBestAvailable(ba, events);
+        const maks = await MarketComponentApi.getMarkets();
+        setListData({
+            ...event_data,
+            loading:false,
+            latest_trades: lt,
+            markets: maks,
+            order_stats: ev_data.event_order_stats,
+            available_orders: ev_data.available_orders
+        });
+    }
+
+    const renderEvents = (data: { item:EventProps, index:number }) => {
+        const ba = available_orders.filter(o => o.event_id == data.item.event_id && o.event_type == 'team');
+        const order_st = order_stats.filter(os => os.event_id == data.item.event_id && os.event_type == 'team');
+        const lts = latest_trades.filter(lt => lt.event_id == data.item.event_id && lt.event_type == 'team');
+        let init_expanded = false
+        if(init_expanded_ids && init_expanded_ids.includes(data.item.event_id)){ init_expanded = true }
+        return (
+            <TeamEventMarket
+                event={data.item}
+                show_grades={show_grades}
+                show_id={show_id ? 'true' : 'false'}
+                markets={markets}
+                init_expanded={init_expanded}
+                latest_trades={lts}
+                best_available_orders={ba}
+                onTeamSelect={onTeamSelect}
+                default_price_view='best_available'
+                event_order_stats={order_st}
+                onActivate={onActivate ? onActivate : undefined}
+                onView={(ev) => {
+                    if(onViewEvent){ onViewEvent(ev) }
+                }}
+                onOrder={(o) => onOrder ? onOrder(o) : console.log('')}
+                onCompetitionSelect={(c) => onCompetitionSelect ? onCompetitionSelect(c) : console.log('')}
+                onSquaresSelect={(s) => onSquaresSelect ? onSquaresSelect(s) : console.log(s)}
+                onViewAdditionalMarkets={(event_id, event_type) => onViewAdditionalMarkets ? onViewAdditionalMarkets(event_id, event_type) : console.log('')}
+                onTradeLongPress={(t) => onTradeLongPress ? onTradeLongPress(t) : console.log(t)}
+            />
+        )
+    }
+
+    return (
+        <View>
+            <FlatList
+                data={events}
+                renderItem={renderEvents}
+                keyExtractor={(item) => item.event_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 event_ids = ev.data.events.map((e:EventProps) => e.event_id);
+                    setSocketResponse({ event_ids, ba_response: ev.data });
+                }}
+                subscribed_events={['V1_LOAD_BEST_AVAILABLE']}
+            />
+        </View>
+    )
+}
+
+export default TeamEventList

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

@@ -31,6 +31,7 @@ type TeamEventMarketProps = {
     onOrder:(order:OrderProps) => void,
     onEvent?:(be_event:BEEventProps) => void,
     onExpand?:(expanded:boolean) => void,
+    onTeamSelect?:(team_id:string) => void,
     show_grades?:boolean,
     onCompetitionSelect:(competition_id:string) => void,
     onSquaresSelect: (sq_comp_id:string) => void,
@@ -39,7 +40,7 @@ type TeamEventMarketProps = {
     onActivate?:(event_id:string, event_type:string) => void
     activate_loading?:boolean
 }
-const TeamEventMarket = ({ event, init_expanded, show_id, activate_loading, competitions, squares_competition, show_grades, markets, latest_trades, best_available_orders, event_order_stats, default_price_view, onSquaresSelect, onCompetitionSelect, onExpand, onOrder, onView, onViewAdditionalMarkets, onTradeLongPress, onActivate, onEvent }:TeamEventMarketProps) => {
+const TeamEventMarket = ({ event, init_expanded, show_id, activate_loading, competitions, squares_competition, show_grades, markets, latest_trades, best_available_orders, event_order_stats, default_price_view, onTeamSelect, onSquaresSelect, onCompetitionSelect, onExpand, onOrder, onView, onViewAdditionalMarkets, onTradeLongPress, onActivate, onEvent }:TeamEventMarketProps) => {
     const [ expanded_data, setExpandedData ] = useState<{
         expanded:boolean,
         loaded:boolean,
@@ -334,7 +335,7 @@ const TeamEventMarket = ({ event, init_expanded, show_id, activate_loading, comp
                         
                         <Text size={12} color={show_stats ? Colors.utility.error : Colors.brand.electric}>{show_stats ? 'Hide Boxscore': `${TeamEventMarketHelpers.getTimeDetail(event)}`}</Text>
                     </TouchableOpacity>
-                    <View nativeID='away_details' style={{ ...view_styles.body_row, minHeight:48 }}>
+                    <TouchableOpacity disabled={!onTeamSelect} style={{ ...view_styles.body_row, minHeight:48 }} onPress={() => onTeamSelect ? onTeamSelect(event.away_team_id) : console.log('')}>
                         <Image
                             source={{ uri: event.away.image?.url }}
                             style={{ height:30, width:30 }}
@@ -352,8 +353,8 @@ const TeamEventMarket = ({ event, init_expanded, show_id, activate_loading, comp
                             </View>
                             <Text theme='body'>{event.away_team_score}</Text>
                         </View>
-                    </View>
-                    <View nativeID='home_details' style={{ ...view_styles.body_row, minHeight:48 }}>
+                    </TouchableOpacity>
+                    <TouchableOpacity disabled={!onTeamSelect} style={{ ...view_styles.body_row, minHeight:48 }} onPress={() => onTeamSelect ? onTeamSelect(event.home_team_id) : console.log('')}>
                         <Image
                             source={{ uri: event.home.image?.url }}
                             style={{ height:30, width:30 }}
@@ -371,7 +372,7 @@ const TeamEventMarket = ({ event, init_expanded, show_id, activate_loading, comp
                             </View>
                             <Text theme='body'>{event.home_team_score}</Text>
                         </View>
-                    </View>
+                    </TouchableOpacity>
                 </View>
                 {event_status == 'active' ?
                 <View nativeID='primary_market_details' style={{ padding:5 }}>

package/src/index.tsx

@@ -26,8 +26,9 @@ import SeasonManager from "./CompetitionSeasonManager";
 import SeasonModule from "./CompetitionSeason";
 import CreateSeasonForm from "./CompetitionSeasonManager/components/CreateSeasonForm";
 import MarketComponents from './MarketComponents';
-import LocationTracker from "./LocationTracker";
+import EventComponents from './EventComponents';
 
+import LocationTracker from "./LocationTracker";
 export {
   Authenticator,
   Observer,
@@ -46,6 +47,7 @@ export {
   MyWallet,
   Checkout,
   MarketComponents,
+  EventComponents,
   PollCampaign,
   PollCampaignApi,
   PollApi,

package/src/types.d.ts

@@ -160,6 +160,12 @@ export interface ContestStatProps {
     last_update_datetime:any
 }
 
+export interface BestAvailableResponseProps {
+    events: EventProps[],
+    tournaments: TournamentProps[],
+    matches:MatchProps[]
+}
+
 export interface AthleteProps {
     athlete_id:string, 
     first_name:string, 
@@ -220,6 +226,9 @@ export interface SupportedMarketProps {
     market_id:string,
     external_id?:string,
     removed?:boolean //When true - it will no longer accept bets
+    available_orders?: BestAvailableOrderProps[],
+    order_stats?:EventOrderStatProps[],
+    latest_trades?:TradeProps[]
 }
 
 export interface EventScoringProps {