be-components 6.9.1 → 6.9.3

package/src/Competition/components/CompetitionLeaderboard.tsx

@@ -12,6 +12,11 @@ type CompetitionLeaderboardProps = {
     competition:CompetitionProps,
     competition_type:CompetitionTypeProps,
     hidden?:boolean,
+    refresh_leaders:{
+        refresh_key:string,
+        competition_records:CompetitionRecordProps[],
+        competition_results:CompetitionResultProps[]
+    },
     disable_collapse?:boolean,
     viewer_id?:string,
     height: number,
@@ -22,7 +27,7 @@ type CompetitionLeaderboardProps = {
     onLeaderSelect:(player:PublicPlayerProps) => void
 }
 const sections = [ 'my_result','header', 'leaders' ]
-const CompetitionLeaderboard = ({ hidden, disable_collapse, competition, competition_type, viewer_id, view_mode, onSeeFull, onClose, onLeaderSelect }:CompetitionLeaderboardProps) => {
+const CompetitionLeaderboard = ({ hidden, refresh_leaders, disable_collapse, competition, competition_type, viewer_id, view_mode, onSeeFull, onClose, onLeaderSelect }:CompetitionLeaderboardProps) => {
     const C = useColors();
     const [ expanded, setExpanded ] = useState(true);
     const [ data, setData ] = useState<{
@@ -40,20 +45,30 @@ const CompetitionLeaderboard = ({ hidden, disable_collapse, competition, competi
     })
 
     const { loading, competition_results, competition_records, players, offset } = data
-    let results = [ ...competition_results ];
+    let results = [ ...competition_results.filter(cr => cr.status != 'deleted') ];
+    let records = [ ...competition_records.filter(cr => cr.status != 'deleted') ]
     
     if(view_mode == 'short'){ results = results.filter((r,i) => r ? i < 3 : i < 3) }
 
     let viewer = players.find(p => p.player_id == viewer_id);
-    let viewer_result = competition_results.find(r => r.player_id == viewer_id);
-    let viewer_record = competition_records.find(r => r.player_id == viewer_id);
+    let viewer_result = results.find(r => r.player_id == viewer_id);
+    let viewer_record = records.find(r => r.player_id == viewer_id);
 
     const cl = competition?.market_type == 'FOR_MONEY' ? '$' : 'E'
 
     useEffect(() => {
         if(!competition){ return }
         getLeaderboardFromServer(competition.competition_id, 0)
-    },[competition])
+    },[competition?.competition_id]);
+
+    useEffect(() => {
+        if(refresh_leaders.competition_records.length == 0){ return }
+        setData({
+            ...data,
+            competition_records: competition_records.filter(cr => !refresh_leaders.competition_records.find(newcr => newcr.competition_record_id == cr.competition_record_id)).concat(refresh_leaders.competition_records),
+            competition_results: competition_results.filter(cr => !refresh_leaders.competition_results.find(newcr => newcr.competition_result_id == cr.competition_result_id)).concat(refresh_leaders.competition_results)
+        })
+    },[refresh_leaders?.refresh_key])
 
     const getLeaderboardFromServer = async(competition_id:string, offset:number) => {
         setData({ ...data, loading:true })
@@ -64,6 +79,7 @@ const CompetitionLeaderboard = ({ hidden, disable_collapse, competition, competi
         setData({
             ...data,
             players,
+            loading:false,
             competition_records: result_response.competition_records,
             competition_results: result_response.competition_results,
             offset,
@@ -163,7 +179,7 @@ const CompetitionLeaderboard = ({ hidden, disable_collapse, competition, competi
 
     if(view_mode == 'short'){
         return (
-            <View float nativeID="leaderboard">
+            <View nativeID="leaderboard" style={{ flex:1 }}>
              <Button 
                 disabled={disable_collapse}
                 style={{ flexDirection:'row', alignItems:'center', borderBottomWidth:expanded?1:0, borderColor:C.borders.light }}
@@ -179,7 +195,7 @@ const CompetitionLeaderboard = ({ hidden, disable_collapse, competition, competi
                     :<></>}
                 </Button>
                 {expanded ?
-                <View transparent type='body' style={{ flex:1 }}>
+                <View transparent type='body'>
                     {viewer_record && viewer_result && viewer ?
                     <View transparent style={{ padding:10, marginBottom:10, borderTopRightRadius:8, borderTopLeftRadius:8, borderBottomWidth:1, borderColor:C.borders.light }}>
                         <Text size={14} theme="h1">MY RESULTS</Text>

package/src/Competition/components/WagerPickForm.tsx

@@ -23,11 +23,11 @@ type WagerPickFormProps = {
 const WagerPickForm = ({ player_pick, mode, event_title, balance, event_start, padding_bottom, loading, onCancel, onFocusPosition, onSubmit }:WagerPickFormProps) => {
     const C = useColors();
     const [ reviewed, setReviewed ] = useState(false);
-    const [ wager, setWager ] = useState({ stake:0, stake_label: '0', potential_winnings: 0 });
+    const [ wager, setWager ] = useState({ stake:0, stake_label: '', potential_winnings: 0 });
 
 
     const handleWagerChange = (text:string) => {
-        if(text == ''){ return setWager({ stake:0, stake_label:'0', potential_winnings:0 }) }
+        if(text == ''){ return setWager({ stake:0, stake_label:'', potential_winnings:0 }) }
         let wager_amt = parseFloat(text)
         let potential_winnings = CompetitionHelpers.calcPotentialWinnings(wager_amt, player_pick.odds)
         setWager({ stake:wager_amt, stake_label:wager_amt.toString(), potential_winnings })

package/src/Competition/index.tsx

@@ -3,7 +3,7 @@ import { CompetitionApi, CompetitionHelpers, CompetitionMatchApi, CompetitionPla
 import { Image, ActivityIndicator, Modal, FlatList } from 'react-native';
 import { view_styles } from '../constants/styles';
 import { ConfirmationModal, Icons, Toggle } from '../Components';
-import type { AthleteProps, BEEventProps, CodeRequestProps, CompetitionMatchMarketProps, CompetitionMatchProps, CompetitionPayoutTypeProps, CompetitionPlayerProps, CompetitionProps, CompetitionResultTypeProps, CompetitionSeasonProps, CompetitionTypeProps, EventProps, FocusPositionProps, LeagueProps, MarketProps, MatchProps, MyPlayerProps, PlayerBalanceProps, PlayerPickProps, PlayerReferralProps, PromoProps, PublicPlayerProps, RewardOptionProps, TeamProps, TournamentProps } from '../types';
+import type { AthleteProps, BEEventProps, CodeRequestProps, CompetitionMatchMarketProps, CompetitionMatchProps, CompetitionPayoutTypeProps, CompetitionPlayerProps, CompetitionProps, CompetitionRecordProps, CompetitionResultProps, CompetitionResultTypeProps, CompetitionSeasonProps, CompetitionTypeProps, EventProps, FocusPositionProps, LeagueProps, MarketProps, MatchProps, MyPlayerProps, PlayerBalanceProps, PlayerPickProps, PlayerReferralProps, PromoProps, PublicPlayerProps, RewardOptionProps, TeamProps, TournamentProps } from '../types';
 import CompetitionInfoCard from './components/CompetitionInfoCard';
 import CompetitionLeaderboard from './components/CompetitionLeaderboard';
 import WagerPickForm from './components/WagerPickForm';
@@ -14,6 +14,7 @@ import LeaderPicks from './components/LeaderPicks';
 import SeasonCard from './components/SeasonCard';
 import { Button, Text, View } from '../Components/Themed';
 import { useColors } from '../constants/useColors';
+import SocketManager from '../Socket';
 
 type CompetitionModuleProps = {
     player_id?:string,
@@ -36,6 +37,23 @@ const competition_sections = ['header','pending','join','test','details','leader
 const CompetitionModule = ({ competition_id, view_mode, insets, player_id, confirm_padding, onManageCompetition, onFocusPosition, onRequestAuthentication, onShareCompetition, onClose, onViewCompetitionSeason }:CompetitionModuleProps) => {
     const C = useColors();
     const [ active_tab, setActiveTab ] = useState('play');
+    const [ socket_details, setSocketDetails ] = useState<{
+        competition?:CompetitionProps,
+        refresh_leaders: {
+            refresh_key:string,
+            competition_records:CompetitionRecordProps[],
+            competition_results:CompetitionResultProps[]
+        },
+        competition_players:CompetitionPlayerProps[],
+    }>({
+        competition_players: [],
+        refresh_leaders: {
+            refresh_key: moment().toString(),
+            competition_records: [],
+            competition_results: []
+        }
+    });
+    const [ needs_reload, setNeedsReload ] = useState(false);
     const [ viewing_leader, setViewingLeader ] = useState<PublicPlayerProps|undefined>();
     const [ show_full_leaderboard, setShowFullLeaderboard ] = useState(false);
     const [ module_size, setModuleSize ] = useState({ width:0, height:0 });
@@ -91,7 +109,7 @@ const CompetitionModule = ({ competition_id, view_mode, insets, player_id, confi
         competition_matches:[],
         competition_players:[],
         competition_match_markets:[],
-    })
+    });
 
     const [ nav_out, setNavOut ] = useState<{
         visible:boolean,
@@ -145,6 +163,21 @@ const CompetitionModule = ({ competition_id, view_mode, insets, player_id, confi
         if(player_id){ getPlayerData(competition_id, player_id, 0) }
     },[competition_id, player_id])
 
+    useEffect(() => {
+        if(!loaded){ return }
+        //Need to update the competition!
+        let my_player = socket_details.competition_players.find(cp => cp.player_id == player?.player_id);
+        let entered = competition?.entered ?? false
+        if(my_player){
+            if(my_player.status == 'active'){ entered = true } else { entered = false }
+        }
+        setCompetitionData({ 
+            ...competition_data, 
+            competition: socket_details.competition ? { ...socket_details.competition, entered } : competition,
+            competition_players: competition_players.filter(cp => !socket_details.competition_players.find(newcp => newcp.competition_player_id == cp.competition_player_id)).concat(socket_details.competition_players),
+        });
+    },[socket_details.refresh_leaders?.refresh_key]);
+
 
     useEffect(() => {
         if(!competition){ return }
@@ -477,6 +510,7 @@ const CompetitionModule = ({ competition_id, view_mode, insets, player_id, confi
                     <CompetitionLeaderboard 
                         hidden={active_tab == 'leaderboard' ? false : true}
                         disable_collapse
+                        refresh_leaders={socket_details.refresh_leaders}
                         competition={competition}
                         width={module_size.width}
                         competition_type={competition_type}
@@ -560,15 +594,60 @@ const CompetitionModule = ({ competition_id, view_mode, insets, player_id, confi
         }}>
             <FlatList
                 key={`competition_sections`}
+                onRefresh={() => getCompetitionFromServer(competition_id)}
+                refreshing={loading}
                 data={competition_sections}
                 keyExtractor={(item) => item}
                 renderItem={renderSections}
             />
+            <SocketManager
+                subscribed_events={['V1_UPDATE_COMPETITION_RECORDS','V1_UPDATE_COMPETITION_PLAYERS', 'ACTIVATE_COMPETITION']}
+                onConnect={() => {
+                    if(needs_reload){ getCompetitionFromServer(competition_id); console.log('RELOADING DATA!!!!') }
+                }}
+                onDisconnect={() => setNeedsReload(true)}
+                onSocketEvent={(event) => {
+                    switch(event.type){
+                        case 'ACTIVATE_COMPETITION':
+                            //competition = message.competition
+                            let comp:CompetitionProps | undefined = event.competition as CompetitionProps | undefined
+                            if(!comp){ return }
+                            if(comp.competition_id != competition_id){ return } //Not our competition!!!
+                            setSocketDetails({
+                                ...socket_details,
+                                competition: comp
+                            });
+                            break
+                        case 'V1_UPDATE_COMPETITION_PLAYERS':
+                            let competition_players = event.data as CompetitionPlayerProps[]
+                            let competition = event.competition as CompetitionProps
+                            let competition_records = event.records as CompetitionRecordProps[]
+                            let competition_results = event.results as CompetitionResultProps[]
+                            if(!competition || !competition_players || !competition_results || !competition_records){ return } //There is an issue with this data
+                            if(competition?.competition_id != competition_id){ return }
+                            console.log(`records = ${competition_records.length}`);
+                            console.log(`results is ${competition_results.length}`);
+                            console.log(`players are ${competition_players.length}`)
+                            setSocketDetails({
+                                competition: competition,
+                                competition_players: competition_players,
+                                refresh_leaders:{
+                                    refresh_key: moment().toString(),
+                                    competition_records,
+                                    competition_results
+                                }
+                            });
+                            break
+                        default: return //Do nothing
+                    }
+                }}
+            />
             {show_full_leaderboard ?
             <View type='blur' style={view_mode=='desktop'?{position:'absolute', top:0, left:0, right:0, bottom:0, justifyContent:'center', alignItems:'center'}:{ position:'absolute', bottom:0, left:0, right:0, top:0 }}>
                 <View style={view_mode=='desktop'?{ width:500, height:676, borderRadius:22 }:{flex:1}}>
                     <CompetitionLeaderboard 
                         competition={competition}
+                        refresh_leaders={socket_details.refresh_leaders}
                         competition_type={competition_type}
                         height={module_size.height}
                         width={module_size.width}

package/src/CompetitionManager/api/index.ts

@@ -285,9 +285,13 @@ const ManageCompetitionMatchApi = {
         const resp = await axios.post(`${TP_SVC_API}/v2/competitions/match/update`, { competition_match })
         return resp.data.competition_match
     },
-    deleteCompetitionMatch: async(competition_match_id:string):Promise<{ competition_match:CompetitionMatchProps, competition_match_markets:CompetitionMatchMarketProps[] }> => {
-        const resp = await axios.post(`${TP_SVC_API}/v2/competitions/match/delete`, { competition_match_id })
-        return { competition_match: resp.data.competition_match, competition_match_markets:resp.data.competition_match_markets }
+    deleteCompetitionMatch: async(competition_match_id:string):Promise<undefined | { competition_match:CompetitionMatchProps, competition_match_markets:CompetitionMatchMarketProps[] }> => {
+        try {
+            const resp = await axios.post(`${TP_SVC_API}/v2/competitions/match/delete`, { competition_match_id })
+            return { competition_match: resp.data.competition_match, competition_match_markets:resp.data.competition_match_markets }
+        } catch (e) {
+            return undefined
+        }
     },
     createCompetitionMatchMarkets: async(competition_match_markets:CompetitionMatchMarketProps[]):Promise<CompetitionMatchMarketProps[]> => {
         const resp = await axios.post(`${TP_SVC_API}/v2/competitions/market/create`, { competition_match_markets })
@@ -297,10 +301,14 @@ const ManageCompetitionMatchApi = {
         const resp = await axios.post(`${TP_SVC_API}/v2/competitions/market/update`, { competition_match_markets })
         return resp.data.competition_match_markets
     },
-    deleteCompetitionMatchMarkets: async(competition_match_market_ids:string[]):Promise<CompetitionMatchMarketProps[]> => {
+    deleteCompetitionMatchMarkets: async(competition_match_market_ids:string[]):Promise<undefined | CompetitionMatchMarketProps[]> => {
         if(competition_match_market_ids.length == 0){ return [] }
-        const resp = await axios.post(`${TP_SVC_API}/v2/competitions/market/delete`, { competition_match_market_ids })
-        return resp.data.competition_match_markets
+        try {
+            const resp = await axios.post(`${TP_SVC_API}/v2/competitions/market/delete`, { competition_match_market_ids })
+            return resp.data.competition_match_markets
+        } catch (e) {
+            return undefined
+        }
     }
 }
 

package/src/CompetitionManager/components/CompetitionContestsForm.tsx

@@ -65,7 +65,7 @@ const CompetitionContestsForm = ({
     const [ active_contest_type ] = useState('team');
     const [ expanded_contests, setExpandedContests ] = useState<string[]>([]);
 
-    const unique_team_events = [ ...new Set(competition_matches.filter(cm => cm.event_type == 'team').map(cm => cm.event_id)) ]
+    const unique_team_events = [ ...new Set(competition_matches.filter(cm => cm.status == 'inprogress' && cm.event_type == 'team').map(cm => cm.event_id)) ]
     const append_to_events = competition.linked_event_ids && competition.linked_event_ids.length == unique_team_events.length ? true : false 
 
     const renderPrimaryMarkets = (data: { item:{ market:MarketProps, included:boolean }, index:number }) => {
@@ -87,7 +87,7 @@ const CompetitionContestsForm = ({
         const show_details = show_match_markets.includes(`${data.event_type}:${data.event_id}:${data.item}`) ? true : false
         const market_matches = competition_matches.filter(cm => cm.market_id_override == data.item && cm.side_id_override);
         return (
-            <View style={{ flex:1, padding:0, borderBottomWidth:1, borderColor:Colors.borders.light }}>
+            <View style={{ padding:0, borderBottomWidth:1, borderColor:Colors.borders.light }}>
                 <Button transparent style={{ flexDirection:'row', alignItems:'center', padding:10 }} onPress={() => {
                             if(show_details){ return setShowMatchMarkets(show_match_markets.filter(smm => smm != `${data.event_type}:${data.event_id}:${data.item}`)) }
                             return setShowMatchMarkets(show_match_markets.concat(`${data.event_type}:${data.event_id}:${data.item}`))
@@ -114,12 +114,12 @@ const CompetitionContestsForm = ({
                     </View>
                     <View transparent style={{ flexDirection:'row', alignItems:'center', padding:0 }}>
                         {market.level != 'event' ?
-                        <View style={{ margin:5, justifyContent:'center', alignItems:'center' }}>
+                        <View transparent style={{ margin:5, justifyContent:'center', alignItems:'center' }}>
                             <Text theme='h2' size={14} color={Colors.text.action}>{market_matches.length}</Text>
                             <Text theme='description' color={Colors.text.action} style={{ marginTop:3 }}>{market.level.toUpperCase()}{market_matches.length == 1 ? '':'S'}</Text>
                         </View>
                         :
-                        <View>
+                        <View transparent>
                             <Icons.ChevronIcon direction={show_details ? 'up' : 'down'} color={Colors.text.action} size={8} />
                         </View>
                         }

package/src/CompetitionManager/components/CompetitionSettingsForm.tsx

@@ -54,6 +54,9 @@ const CompetitionSettingsForm = ({ init_expanded, onFocusPosition, player, compe
 
     if(!competition || !draft_competition){ return <></> }
     const is_changed = JSON.stringify(competition) != JSON.stringify(draft_competition) ? true : false
+    const is_ticket_changed = draft_competition.buy_in.toString() != competition.buy_in.toString() ? true : false
+    const is_guar_changed = draft_competition.guaranteed_payout?.toString() != competition.guaranteed_payout?.toString() ? true : false
+    const is_max_tickets_changed = draft_competition.available_tickets.toString() != competition.available_tickets.toString() ? true : false
     return (
         <View float style={{ flexGrow:1, borderRadius:0 }}>
             <Button 
@@ -154,7 +157,7 @@ const CompetitionSettingsForm = ({ init_expanded, onFocusPosition, player, compe
                 </View>
                 :<></>}
                 </View>
-                <View type='row' nativeID="buy_in" style={{ flexWrap:'wrap', padding:20, borderBottomWidth:1, borderColor:Colors.borders.light }}>
+                <View type='row' nativeID="buy_in" style={{ flexWrap:'wrap', padding:20, borderBottomWidth:1, borderColor:is_ticket_changed ? Colors.text.warning : Colors.borders.light }}>
                     <View style={{ flex:1, minWidth:200 }}>
                         <Text theme="h1">Ticket Price</Text>
                         <Text style={{ marginTop:3 }} theme="description">Set the amount required to purchase a ticket to participate</Text>
@@ -163,11 +166,22 @@ const CompetitionSettingsForm = ({ init_expanded, onFocusPosition, player, compe
                         style={{ flexGrow:1, textAlign:'center', minWidth:100, margin:5, borderColor:competition.buy_in ? Colors.text.success: Colors.text.warning  }}
                         onChangeText={(text) => setDraftCompetition({ ...draft_competition, buy_in: text })}
                         placeholder="0"
+                        onFocus={() => {
+                            if(draft_competition.buy_in == 0){ setDraftCompetition({ ...draft_competition, buy_in: '' }) }
+                        }}
                         onFocusPosition={onFocusPosition}
                         keyboardType="decimal-pad"
                         editable={competition.competition_season_id ? false : true}
                         value={draft_competition.buy_in.toString()}
                     />
+                    {is_ticket_changed ?
+                    <Button
+                        title='SAVE'
+                        type='success'
+                        style={{ margin:5, padding:15, flexGrow:1 }}
+                        onPress={() => onCompetitionUpdate(draft_competition)}
+                    />
+                    :<></>}
                 </View>
                 {player?.role == 'admin' ?
                 <View type='row' nativeID="buy_in" style={{ flexWrap:'wrap', padding:20,  borderBottomWidth:1, borderColor:Colors.borders.light }}>
@@ -184,6 +198,14 @@ const CompetitionSettingsForm = ({ init_expanded, onFocusPosition, player, compe
                         editable={competition.competition_season_id ? false : true}
                         value={draft_competition.guaranteed_payout?.toString()}
                     />
+                    {is_guar_changed ?
+                    <Button
+                        title='SAVE'
+                        type='success'
+                        style={{ margin:5, padding:15, flexGrow:1 }}
+                        onPress={() => onCompetitionUpdate(draft_competition)}
+                    />
+                    :<></>}
                 </View>
                 :<></>}
                     
@@ -196,11 +218,22 @@ const CompetitionSettingsForm = ({ init_expanded, onFocusPosition, player, compe
                         style={{ flexGrow:1, textAlign:'center', minWidth:100, margin:5, borderColor:parseInt(competition.available_tickets as string) > 0 ? Colors.text.success : Colors.text.warning }}
                         onChangeText={(text) => setDraftCompetition({ ...draft_competition, available_tickets: text })}
                         placeholder="100"
+                        onFocus={() => {
+                            if(draft_competition.available_tickets == 0){ setDraftCompetition({ ...draft_competition, available_tickets: '' }) }
+                        }}
                         onFocusPosition={onFocusPosition}
                         keyboardType="decimal-pad"
                         editable={competition.competition_season_id ? false : true}
                         value={draft_competition.available_tickets.toString()}
                     />
+                     {is_max_tickets_changed ?
+                    <Button
+                        title='SAVE'
+                        type='success'
+                        style={{ margin:5, padding:15, flexGrow:1 }}
+                        onPress={() => onCompetitionUpdate(draft_competition)}
+                    />
+                    :<></>}
                 </View>
             </View>
             :<></>}

package/src/CompetitionManager/components/ContestSelector.tsx

@@ -2,19 +2,21 @@ import React, { useEffect, useState } from 'react';
 import { FlatList, Image, ActivityIndicator } from "react-native"
 import { Switch } from '../../Components';
 import DropDown from '../../Components/Dropdown';
-import type { EventProps, LeagueProps } from '../../types';
-import { ManageCompetitionMatchApi } from '../api';
+import type { EventProps, LeagueProps, MarketProps, TradeProps } from '../../types';
+import { ManageCompetitionApi, ManageCompetitionMarketApi, ManageCompetitionMatchApi } from '../api';
 import moment from 'moment-mini';
 import SearchBox from '../../Components/SearchBox';
 import { useColors } from '../../constants/useColors';
 import { Button, Text, View } from '../../Components/Themed';
+import { MarketComponentHelpers } from '../../MarketComponents/api';
 
 type ContestSelectorProps = {
     action_loading:boolean,
     leagues:LeagueProps[],
+    active_markets?:string[],
     selected_team_events:EventProps[],
-    onSelectTeamEvent:(event:EventProps) => void,
-    onSelectTeamEvents: (events:EventProps[]) => void,
+    onSelectTeamEvent:(event:EventProps, trades:TradeProps[]) => void,
+    onSelectTeamEvents: (events:EventProps[], trades:TradeProps[]) => void,
     onDeselectTeamEvent: (event:EventProps) => void,
     onClose:() => void
 }
@@ -30,17 +32,21 @@ const ContestSelector = ({ action_loading, leagues, selected_team_events, onClos
     const [ selector_data, setData ] = useState<{
         loading:boolean,
         events:EventProps[],
+        markets:MarketProps[],
+        trades:TradeProps[],
         range_dates:string[],
         active_league?:LeagueProps,
         active_date: string
     }>({
         loading:false,
+        markets:[],
         events: [],
+        trades:[],
         range_dates: [],
         active_date: moment().format('YYYY/MM/DD')
     })
 
-    const { loading, events, range_dates, active_league, active_date } = selector_data;
+    const { loading, events, range_dates, trades, markets, active_league, active_date } = selector_data;
 
     let filtered_events = events.filter(e => `${e.event_id} ${e.away?.market_name} ${e.away?.name} ${e.home?.market_name} ${e.home?.name}`.toLowerCase().includes(search_value.toLowerCase()))
     .filter(e => moment(e.scheduled_datetime).format('YYYY/MM/DD') == active_date)
@@ -69,6 +75,7 @@ const ContestSelector = ({ action_loading, leagues, selected_team_events, onClos
 
     const show_add_all = filtered_events.filter(e => !selected_team_events.map(e => e.event_id.toString()).includes(e.event_id)).length > 0 ? true : false
 
+    const spread_market = markets.find(mk => mk.type == 'Spread');
 
     useEffect(() => {
         if(leagues.length == 0){ return }
@@ -89,7 +96,13 @@ const ContestSelector = ({ action_loading, leagues, selected_team_events, onClos
         if(!best_day){
             best_day = unique_dates[0] ?? moment().format('YYYY/MM/DD')
         }
-        setData({ ...selector_data, loading:false, events: resp.events, range_dates: unique_dates, active_date: best_day })
+        
+        //Lets grab all the last trades for events that we have
+        let ev_markets = await ManageCompetitionApi.getMarkets();
+        let event_trades = await ManageCompetitionMarketApi.getLatestTradesByEventIds(resp.events.map(e => e.event_id), 'team');
+
+
+        setData({ ...selector_data, loading:false, events: resp.events, range_dates: unique_dates, active_date: best_day, trades: event_trades.filter(t => t.market_type == 'FOR_MONEY'), markets:ev_markets })
     }
 
     const renderDivisions = (data: { item:string, index:number }) => {
@@ -123,6 +136,9 @@ const ContestSelector = ({ action_loading, leagues, selected_team_events, onClos
     const renderEvents = (data: { item:EventProps, index:number }) => {
         const selected = selected_team_events.map(e => e.event_id.toString()).includes(data.item.event_id.toString()) ? true : false
         const is_live = moment(data.item.scheduled_datetime).isBefore(moment()) ? true : false
+        const event_trades = trades.filter(t => t.event_type == 'team' && t.event_id == data.item.event_id && t.market_type == 'FOR_MONEY')
+        const spread_trades = event_trades.filter(t => t.market_id == spread_market?.market_id);
+        const home_trade = spread_trades.find(t => t.side_id == data.item.home_team_id)
         return (
             <View type='row' style={{  padding:10, borderBottomWidth:1, borderColor:Colors.borders.light }}>
                 <View style={{ flexDirection:'row', alignItems:'center', paddingRight:10, borderRightWidth:1, borderColor:Colors.borders.light }}>
@@ -139,7 +155,7 @@ const ContestSelector = ({ action_loading, leagues, selected_team_events, onClos
                     />
                 </View>
                 <View style={{ flex:1, marginLeft: 10 }}>
-                    <Text theme='h2'>{data.item.event_title}</Text>
+                    <Text theme='h2'>{data.item.event_title}{home_trade && spread_market?` ${MarketComponentHelpers.getVar1Label(spread_market, home_trade.var_1)}`:''}</Text>
                     <Text style={{ marginTop:3 }} theme='description'>{data.item.time_detail == 'scheduled' ? moment(data.item.scheduled_datetime).format('MMM DD hh:mm a'): data.item.time_detail}</Text>
                 </View>
                 {!is_live ?
@@ -149,7 +165,7 @@ const ContestSelector = ({ action_loading, leagues, selected_team_events, onClos
                     onChange={() => {
                         if(action_loading){ return }
                         if(selected){ return onDeselectTeamEvent(data.item) } 
-                        return onSelectTeamEvent(data.item)
+                        return onSelectTeamEvent(data.item, event_trades)
                     }}
                 />
                 :<></>}
@@ -246,7 +262,7 @@ const ContestSelector = ({ action_loading, leagues, selected_team_events, onClos
                     onPress={() => {
                         ///First remove any event that is already selected
                         let add_events = filtered_events.filter(e => !selected_team_events.map(e => e.event_id.toString()).includes(e.event_id))
-                        onSelectTeamEvents(add_events);
+                        onSelectTeamEvents(add_events, trades);
                     }}
                 />
                 :<></>}

package/src/CompetitionManager/components/ContestSettingsForm.tsx

@@ -121,10 +121,21 @@ const ContestSettingsForm = ({ init_expanded, onFocusPosition, competition, comp
                         style={{ flex:1, minWidth:100, textAlign:'center', margin:5 }}
                         onChangeText={(text) => setDraftCompetition({ ...draft_competition, max_pick_count: text })}
                         placeholder="0"
+                        onFocus={() => {
+                            if(draft_competition.max_pick_count == 0){ setDraftCompetition({ ...draft_competition, max_pick_count: '' }) }
+                        }}
                         onFocusPosition={onFocusPosition}
                         keyboardType="decimal-pad"
                         value={draft_competition.max_pick_count.toString()}
                     />
+                    {is_changed ?
+                    <Button
+                        title='SAVE'
+                        type='success'
+                        style={{ margin:5, padding:15, flexGrow:1 }}
+                        onPress={() => onCompetitionUpdate(draft_competition)}
+                    />
+                    :<></>}
                 </View>
                 :<></>}
                 {competition_type?.type == 'wager' ?
@@ -142,6 +153,14 @@ const ContestSettingsForm = ({ init_expanded, onFocusPosition, competition, comp
                         keyboardType="decimal-pad"
                         value={draft_competition.initial_balance.toString()}
                     />
+                    {is_changed ?
+                    <Button
+                        title='SAVE'
+                        type='success'
+                        style={{ margin:5, padding:15, flexGrow:1 }}
+                        onPress={() => onCompetitionUpdate(draft_competition)}
+                    />
+                    :<></>}
                 </View>
                 :<></>}
                 <View style={{ padding:20 }}>

package/src/CompetitionManager/components/MarketSelector.tsx

@@ -55,13 +55,11 @@ const MarketSelector = ({ markets, selected_markets, onSelectMarket, onDeselectM
                 />
             </View>
             <View style={{ flex:1 }}>
-                <View type='body'>
-                    <FlatList
-                        data={filtered_markets}
-                        renderItem={renderMarkets}
-                        keyExtractor={(item) => item.market_id.toString()}
-                    />
-                </View>
+                <FlatList
+                    data={filtered_markets}
+                    renderItem={renderMarkets}
+                    keyExtractor={(item) => item.market_id.toString()}
+                />
             </View>
             <View type='footer' style={{ flexDirection:'row', alignItems:'center', padding:10, borderBottomRightRadius:8, borderBottomLeftRadius:8 }}>
                 <Button

package/src/CompetitionManager/index.tsx

@@ -249,7 +249,7 @@ const CompetitionManager = ({ float, header_style, footer_style, player_id, onFo
         const addEvents = new_events.map(async e => {
             const cm = await ManageCompetitionMatchApi.createCompetitionMatch(competition_id, e.event_id, 'team', 'event', undefined, undefined, undefined);
             added_matches.push(cm)
-        })
+        });
         await Promise.all(addEvents);
         const e_trades = await ManageCompetitionMarketApi.getLatestTradesByEventIds(new_events.map(e => e.event_id), 'team');
         setCompetitionData({
@@ -257,7 +257,7 @@ const CompetitionManager = ({ float, header_style, footer_style, player_id, onFo
             competition: { ...competition, scheduled_datetime: undefined },
             competition_matches: competition_matches.concat(added_matches),
             events: events.filter(e => !new_events.find(ne => ne.event_id == e.event_id)).concat(new_events),
-            trades: trades.filter(t => !events.map(e => e.event_id.toString()).includes(t.event_id)).concat(e_trades)
+            trades: trades.filter(t => !new_events.map(e => e.event_id.toString()).includes(t.event_id.toString())).concat(e_trades)
         })
         setActionLoading(false)
     }
@@ -280,18 +280,26 @@ const CompetitionManager = ({ float, header_style, footer_style, player_id, onFo
     const handleRemoveCompetitionMatch = async(competition_match_id:string) => {
         if(action_loading){ return }
         setActionLoading(true);
-        await ManageCompetitionMatchApi.deleteCompetitionMatch(competition_match_id);
+        let result = await ManageCompetitionMatchApi.deleteCompetitionMatch(competition_match_id);
+        if(!result){
+            setActionLoading(false);
+            return alert('Unable to remove this market.  It could either be the event has already started or a player has already made a pick on it.')
+        }
         setCompetitionData({
             ...competition_data,
             competition_matches: competition_matches.filter(cm => cm.competition_match_id != competition_match_id)
-        })
+        });
         setActionLoading(false)
     }
 
     const handleRemoveCompetitionMatchMarkets = async(cmms:CompetitionMatchMarketProps[]) => {
         if(action_loading){ return }
         setActionLoading(true);
-        await ManageCompetitionMatchApi.deleteCompetitionMatchMarkets(cmms.map(cmm => cmm.competition_match_market_id));
+        let result = await ManageCompetitionMatchApi.deleteCompetitionMatchMarkets(cmms.map(cmm => cmm.competition_match_market_id));
+        if(!result){
+            setActionLoading(false);
+            return alert('Unable to remove this market.  It could either be the event has already started or a player has already made a pick on it.')
+        }
         setCompetitionData({
             ...competition_data,
             competition_match_markets: competition_match_markets.filter(cmm => !cmms.map(rmm => rmm.competition_match_market_id.toString()).includes(cmm.competition_match_market_id))
@@ -365,6 +373,7 @@ const CompetitionManager = ({ float, header_style, footer_style, player_id, onFo
         let markets_removed:string[] = []
         const rem_non_primary = non_primary_matches.map(async cm => {
             const del_response = await ManageCompetitionMatchApi.deleteCompetitionMatch(cm.competition_match_id);
+            if(!del_response){ return } //We had an issue tring to remove this
             matches_removed = matches_removed.concat(del_response.competition_match.competition_match_id)
             markets_removed = markets_removed.concat(del_response.competition_match_markets.map(cmm => cmm.competition_match_market_id))
         })
@@ -427,7 +436,6 @@ const CompetitionManager = ({ float, header_style, footer_style, player_id, onFo
         if(market.level == 'event'){
             //If the level is event - we need to create some events
             let market_trades = trades.filter(t => t.market_type == 'FOR_MONEY' && t.event_id == contest_id && t.event_type == contest_type && t.market_id == market.market_id)
-            console.log(`market trades are ${market_trades.length}`)
             let event_cmms:CompetitionMatchMarketProps[] = []
             market_trades.map(t => {
                 event_cmms.push({ ...ManageCompetitionHelpers.createCompetitionMatchMarketFromTrade(t), competition_match_id: new_cm.competition_match_id })
@@ -691,7 +699,7 @@ const CompetitionManager = ({ float, header_style, footer_style, player_id, onFo
          </View>
             :<></>}
             {show_markets.contest_id && show_markets.contest_type && showing_market_event ?
-            <View type='blur' style={{ position:'absolute', top:0, left:0, right:0, bottom:0, paddingBottom:insets?.bottom, paddingTop:insets?.top }}>
+            <View type='blur' style={{  position:'absolute', top:0, left:0, right:0, bottom:0, paddingBottom:insets?.bottom, paddingTop:insets?.top }}>
                 <MarketSelector
                     markets={markets.filter(m => m.event_type == show_markets.contest_type && showing_market_event.supported_markets?.map(m => m.market_id.toString()).includes(m.market_id.toString()))}
                     onClose={() => setShowMarkets({})}

package/src/CreateEngagement/index.tsx

@@ -31,7 +31,7 @@ const steps:CreateEngagementStepProps[] = [
     { step_key: 'intro', num: 1, title: 'BettorEdge Engagements', description: 'Create an engagement and share with friends to play along' },
     { step_key: 'options', num:2, title: 'Engagement Types', description: 'Select an engagement type below to get started!' },
     { step_key: 'group', num:3, title: 'Add Group', description: 'Select one of your groups to add this engagement to!' },
-    { step_key: 'company', num:4, title: 'Add Company', description: 'Select one of your companie to add this engagement to!' },
+    { step_key: 'company', num:4, title: 'Add Company', description: 'Select one of your companies to add this engagement to!' },
     { step_key: 'image', num:5, title:'Add an Image!', description: 'Add an image to your engagement to make it stand out!' },
     { step_key: 'create', num:6, title: 'Create Engagement', description: 'Complete the step below to create this BettorEdge Engagement!' },
     { step_key: 'success', num:7, title: 'Engagement Successfully Created!', description: 'Your engagement is in pending status. You can activate it when ready from your dashboard or the engagement screen!' }