be-components 4.5.5 → 4.5.8

package/src/Bracket/index.tsx

@@ -1,15 +1,13 @@
 import React, { useEffect, useState } from 'react';
-import { BracketApi, BracketComeptitionApi, BracketCompetitionHelpers } from './api';
-import type { AthleteProps, BracketCompetitionProps, BracketProps, CompetitionPlayerBracketProps, CompetitionResultTypeProps, LeagueProps, MyPlayerProps, PlayerBalanceProps, PlayerBracketProps, TeamProps } from '../types';
+import { BracketApi, BracketComeptitionApi } from './api';
+import type { BracketCompetitionProps, CompetitionPlayerBracketProps, CompetitionResultTypeProps, LeagueProps, MyPlayerProps, PlayerBalanceProps, PlayerBracketProps } from '../types';
 import BracketPlay from './components/BracketPlay';
 import { Button, Text, View } from '../Components/Themed';
 import { ActivityIndicator, FlatList, Image, Modal } from 'react-native';
 import BracketHeader from './components/BracketHeader';
 import RoomHome from './components/RoomHome';
 import BracketCompetitionActions from './components/BracketCompetitionActions';
-import EditPlayerBracket from './components/EditPlayerBracket';
 import { useColors } from '../constants/useColors';
-import PlayerBracketSelector from './components/PlayerBrackets';
 import { Icons } from '../Components';
 
 type BracketRoomProps = {
@@ -37,7 +35,19 @@ const BracketRoom = ({ player_id, width, view_mode, bracket_id, insets, onCreate
     const [ show_competition_actions, setShowCompetitionActions ] = useState(false);
     let mode = width < 600 ? 'small' : width < 1500 ? 'medium' : 'large'
     let navigator_width = mode == 'large' ? 300 : mode == 'medium' ? 100 : 0
+
+    const [ play_data, setPlayData ] = useState<{
+        player_brackets:PlayerBracketProps[],
+        competition_player_brackets:CompetitionPlayerBracketProps[],
+    }>({
+        competition_player_brackets: [],
+        player_brackets: []
+    });
+    const { player_brackets, competition_player_brackets } = play_data;
+
     const [ local_balance, setLocalBalance ] = useState<PlayerBalanceProps|undefined>(player_balance);
+    const [ player, setPlayer ] = useState<MyPlayerProps|undefined>(undefined);
+
     const [ static_data, setStaticData ] = useState<{
         static_loaded:boolean,
         leagues:LeagueProps[],
@@ -49,92 +59,88 @@ const BracketRoom = ({ player_id, width, view_mode, bracket_id, insets, onCreate
     });
     const { competition_result_types, leagues, static_loaded } = static_data;
 
-    const [ room_data, setRoomData ] = useState<{
-        room_loaded: boolean,
-        public_competitions:BracketCompetitionProps[],
-        active_brackets:BracketProps[]
-    }>({
-        room_loaded:false,
-        public_competitions: [],
-        active_brackets: []
-    });
-    const { room_loaded, public_competitions, active_brackets } = room_data;
-    const [ show_pb_selector, setShowPBSelector ] = useState(false);
-    const [ editing_player_bracket, setEditingPlayerBracket ] = useState<PlayerBracketProps | undefined>(undefined);
     const [ nav_data, setNavData ] = useState<{
         active_nav: string,
-        active_competition_id?:string,
+        active_competition?:BracketCompetitionProps,
         active_bracket_id?:string,
         active_player_bracket_id?:string
     }>({
         active_nav: 'home'
     });
-    const { active_nav, active_bracket_id, active_competition_id, active_player_bracket_id } = nav_data;
+
+    const { active_nav, active_bracket_id, active_competition, active_player_bracket_id } = nav_data;
+    
     let comp_action_width = mode != 'small' && active_bracket_id ? 300 : 0
     let section_width = width - navigator_width - comp_action_width > MAX_WIDTH ? MAX_WIDTH : width - navigator_width - comp_action_width
-    const [ my_data, setMyData ] = useState<{
-        player?:MyPlayerProps,
-        teams:TeamProps[],
-        athletes:AthleteProps[],
-        bracket_competitions:BracketCompetitionProps[],
-        player_brackets:PlayerBracketProps[],
-        brackets:BracketProps[],
-        competition_player_brackets:CompetitionPlayerBracketProps[]
-    }>({
-        teams:[],
-        athletes:[],
-        player_brackets: [],
-        brackets:[],
-        bracket_competitions:[],
-        competition_player_brackets: []
-    });
-    const { teams, athletes, brackets, bracket_competitions, player_brackets, competition_player_brackets, player } = my_data
-    const [ my_admin_data, setMyAdminData ] = useState<{
-        admin_offset:number,
-        admin_competitions:BracketCompetitionProps[]
-    }>({
-            admin_offset:0,
-            admin_competitions: []
-    });
-    const { admin_competitions, admin_offset } = my_admin_data;
-    const active_player_bracket = player_brackets.filter(pb => pb.status != 'deleted').find(pb => pb.player_bracket_id == active_player_bracket_id);
-    const active_bracket = brackets.find(b => b.bracket_id == active_bracket_id);
-    const active_competition = public_competitions.find(bc => bc.bracket_competition_id == active_competition_id);
+
     //Very First Time we Launch - do this
     useEffect(() => {
         BracketApi.setEnvironment();
-        loadData(bracket_id, bracket_competition_id)
-    },[player_id, bracket_id, bracket_competition_id]);
+        getStaticData()
+    },[]);
 
-    //DATA LOADING FUNCTIONS
-    const loadData = async(bracket_id?:string, bracket_competition_id?:string) => {
-        let pbs:PlayerBracketProps[] = [];
-        if(!static_loaded){
-            setLoading('Setting up the bracket room ...');
-            await getStaticData();
-        }
-        if(player_id){
-            setLoading('Getting your data ...');
-            const my_response = await getMyData(player_id, bracket_id, bracket_competition_id);
-            pbs = my_response?.player_brackets ?? []
+    useEffect(() => {
+        if(!player_balance){return}
+        setLocalBalance(player_balance);
+    },[player_balance])
+
+
+    useEffect(() => {
+        if(!static_loaded){ return }
+        if(!player_id){ return }
+        getMyData()
+    },[static_loaded, player_id]);
+
+    useEffect(() => {
+        if(!bracket_id && !bracket_competition_id){ return }
+        if(!static_loaded){ return }
+        setUpInitData(bracket_id, bracket_competition_id)
+    },[static_loaded, player_id, bracket_id, bracket_competition_id])
+
+    const setUpInitData = async(bracket_id?:string, bracket_competition_id?:string) => {
+        let init_bracket_id = bracket_id
+        let bc:BracketCompetitionProps | undefined = undefined
+        let active_pb_id:string|undefined = undefined
+        if(bracket_competition_id){
+            let resp = await BracketComeptitionApi.getBracketCompetitionById(bracket_competition_id);
+            bc = resp?.bracket_competition
+            if(bc){ init_bracket_id = bc.bracket_id }
         }
-        if(!room_loaded){
-            setLoading('Building the bracket ...');
-            await getRoomData(pbs, bracket_id, bracket_competition_id);
+
+        if(player_id && init_bracket_id){
+            //Get the play data for whaat is provided!!
+            const my_data = await BracketComeptitionApi.getMyPlayerBrackets(init_bracket_id);
+            //Try to find an already entered bracket
+            active_pb_id = my_data.competition_player_brackets.find(cpb => cpb.bracket_competition_id == bracket_competition_id)?.player_bracket_id
+            if(!active_pb_id){
+                //Pick a random one
+                active_pb_id = my_data.player_brackets[0]?.player_bracket_id
+            }
+            setPlayData({
+                ...play_data,
+                player_brackets: my_data.player_brackets,
+                competition_player_brackets: my_data.competition_player_brackets,
+            })
         }
-        setLoading(undefined);
+        setNavData({ 
+            ...nav_data, 
+            active_nav: 'bracket', 
+            active_player_bracket_id:active_pb_id, 
+            active_bracket_id:init_bracket_id, 
+            active_competition:bc 
+        })
+        setShowCompetitionActions(true)
     }
 
-    const getAdminData = async(page:number) => {
-        const admin_comps = await BracketComeptitionApi.getMyAdminCompetitions(page);
-        setMyAdminData({
-            admin_offset: page,
-            admin_competitions: admin_comps
-        });
+    const getMyData = async() => {
+        const pb = await BracketComeptitionApi.getMyBalance();
+        const pl = await BracketComeptitionApi.getMyDetails();
+        setLocalBalance(pb);
+        setPlayer(pl);
     }
 
     const getStaticData = async() => {
-        setLoading('Loading Bracket Data ...')
+        setLoading('Setting Up Bracket')
         const comp_options = await BracketComeptitionApi.getCompetitionOptions();
         const lgs = await BracketApi.getLeagues();
         setStaticData({
@@ -143,82 +149,24 @@ const BracketRoom = ({ player_id, width, view_mode, bracket_id, insets, onCreate
             leagues:lgs,
             competition_result_types: comp_options.competition_result_types
         });
+        setTimeout(() => setLoading(undefined),500)
     }
 
-    const getRoomData = async(local_pbs:PlayerBracketProps[], bracket_id?:string, bracket_competition_id?:string) => {
-        let pub_competitions = await BracketComeptitionApi.getActivePublicBrackets();
-        let pub_brackets = await BracketApi.getActiveBrackets();
-        if(bracket_competition_id){
-            let bc = await BracketComeptitionApi.getBracketCompetitionById(bracket_competition_id);
-            if(!bc){ return }
-            let pb = local_pbs.find(pb => pb.status != 'deleted' && pb.bracket_id == bc.bracket_competition.bracket_id);
-            pub_competitions = pub_competitions.filter(pc => pc.bracket_competition_id != bc.bracket_competition.bracket_competition_id).concat(bc.bracket_competition);
-            setNavData({
-                ...nav_data,
-                active_bracket_id: bc.bracket_competition.bracket_id,
-                active_competition_id: bracket_competition_id,
-                active_player_bracket_id: pb?.player_bracket_id,
-                active_nav: 'bracket'
-            });
-            setRoomData({
-                ...room_data,
-                room_loaded: true,
-                active_brackets: pub_brackets,
-                public_competitions: pub_competitions.filter(pc => pc.status == 'scheduled')
-            });
-            if(mode == 'small'){ return setShowCompetitionActions(true) }
-            return
-        }
-        if(bracket_id){
-            let pb = player_brackets.find(pb => pb.status != 'deleted' && pb.bracket_id == bracket_id);
-            setNavData({
-                ...nav_data,
-                active_bracket_id: bracket_id,
-                active_competition_id: undefined,
-                active_player_bracket_id: pb?.player_bracket_id,
-                active_nav: 'bracket'
-            })
-        }
-        setRoomData({
-            ...room_data,
-            room_loaded: true,
-            active_brackets: pub_brackets,
-            public_competitions: pub_competitions.filter(pc => pc.status == 'scheduled')
+    const handleView = async(bracket_id:string, player_bracket_id?:string, bracket_competition?:BracketCompetitionProps) => {
+        setNavData({
+            ...nav_data,
+            active_nav:'bracket',
+            active_player_bracket_id:player_bracket_id,
+            active_bracket_id: bracket_id,
+            active_competition: bracket_competition
         });
-    }
-
-    const getMyData = async(player_id?:string, bracket_id?:string, bracket_competition_id?:string) => {
-        if(!player_id){ return }
-        let p = await BracketComeptitionApi.getMyDetails();
-        let pb = await BracketComeptitionApi.getMyBalance();
-        await getAdminData(0);
-        setLocalBalance(pb)
-        let my_resp = await BracketComeptitionApi.getMyPlayerBrackets();
-        let champ_team_ids = my_resp.player_brackets.filter(pb => pb.champion_id_type == 'team').map(b => b.champion_id ?? '')
-        const champ_teams = await BracketApi.getTeamsByIds(champ_team_ids);
-        let champ_athlete_ids = my_resp.player_brackets.filter(pb => pb.champion_id_type == 'athlete').map(b => b.champion_id ?? '')
-        const champ_athletes = await BracketApi.getAthletesByIds(champ_athlete_ids);
-        //Now get more if there is a bracket_id or competition_id
-        if(bracket_id || bracket_competition_id){
-            let bracket_pbs = await BracketComeptitionApi.getMyPlayerBrackets(bracket_id, bracket_competition_id)
-            my_resp = BracketCompetitionHelpers.combinePlayerBrackets(my_resp, bracket_pbs);
-        }
-        //Get brackets
-        let bks = await BracketApi.getBracketsByIds(my_resp.player_brackets.map(pb => pb.bracket_id));
-
-        setMyData({
-            ...my_data,
-            athletes: champ_athletes,
-            teams: champ_teams,
-            brackets: bks,
-            player: p,
-            player_brackets: my_resp.player_brackets.filter(pb => pb.status != 'deleted'),
-            bracket_competitions: my_resp.bracket_competitions,
-            competition_player_brackets: my_resp.competition_player_brackets
+        const my_data = await BracketComeptitionApi.getMyPlayerBrackets(bracket_id);
+        setPlayData({
+            ...play_data,
+            player_brackets: my_data.player_brackets,
+            competition_player_brackets: my_data.competition_player_brackets
         })
-        return my_resp
     }
-    
 
     const renderSections = (data:{ item:string, index:number }) => {
         switch(data.item){
@@ -227,55 +175,30 @@ const BracketRoom = ({ player_id, width, view_mode, bracket_id, insets, onCreate
                     <BracketHeader
                         view_mode={view_mode}
                         active_nav={active_nav}
-                        bracket={active_bracket}
-                        bracket_competition={active_competition}
+                        bracket={undefined}
+                        bracket_competition={undefined}
                         onGoHome={() => setNavData({
                             ...nav_data,
                             active_bracket_id:undefined,
                             active_nav:'home',
-                            active_competition_id: undefined,
+                            active_competition: undefined,
                             active_player_bracket_id: undefined
                         })}
                     />
                 )
             case 'home': 
+                if(!static_loaded){ return <></> }
                 return (
                     <RoomHome
                         player={player}
+                        visible={active_nav == 'home' ? true : false}
                         width={section_width}
-                        admin_competitions={admin_competitions}
-                        onMoreAdmin={(offset) => getAdminData(offset)}
-                        admin_offset={admin_offset}
-                        brackets={brackets}
                         onManageCompetition={onManageCompetition}
-                        onUpdatePlayerBracket={(new_pb) => {
-                            setMyData({
-                                ...my_data,
-                                player_brackets: player_brackets.filter(pb => pb.player_bracket_id != new_pb.player_bracket_id).concat(new_pb)
-                            })
-                        }}
                         onCreateNewCompetition={onCreateNewCompetition}
-                        visible={active_nav == 'home' ? true : false}
-                        active_brackets={active_brackets}
                         view_mode={view_mode}
-                        competition_result_types={competition_result_types}
+                        onRequestAuthenticate={onRequestAuthenticate}
                         leagues={leagues}
-                        onEditPlayerBracket={(pb) => setEditingPlayerBracket(pb)}
-                        onView={(bracket_id, player_bracket_id, bracket_competition_id) => {
-                            setNavData({
-                                ...nav_data,
-                                active_nav: 'bracket',
-                                active_player_bracket_id: player_bracket_id,
-                                active_bracket_id: bracket_id,
-                                active_competition_id: bracket_competition_id
-                            })
-                        }}
-                        player_brackets={player_brackets.filter(pb => pb.status != 'deleted')}
-                        competition_player_brackets={competition_player_brackets.filter(cpb => cpb.status != 'deleted')}
-                        public_competitions={public_competitions}
-                        bracket_competitions={bracket_competitions}
-                        athletes={athletes}
-                        teams={teams}
+                        onView={handleView}
                     />
                 )
             case 'bracket':
@@ -284,18 +207,22 @@ const BracketRoom = ({ player_id, width, view_mode, bracket_id, insets, onCreate
                 return (
                         <BracketPlay
                             width={section_width}
-                            //player={player}
+                            player={player}
                             onRequestAuthenticate={() => onRequestAuthenticate(active_competition?.auth_strategy_id)}
-                            onEditPlayerBracket={(pb:PlayerBracketProps) => {
-                                setEditingPlayerBracket(pb);
-                            }}
+                            
                             onChangePlayerBracket={() => {
-                                setShowPBSelector(true);
+                                setNavData({
+                                    ...nav_data,
+                                    active_nav:'home',
+                                    active_bracket_id:undefined,
+                                    active_competition:undefined,
+                                    active_player_bracket_id:undefined
+                                })
                             }}
                             onPlayerBracketUpdate={(newpb, ncpbs) => {
-                                setMyData({
-                                    ...my_data,
-                                    player_brackets: player_brackets.filter(pb => pb.player_bracket_id != newpb.player_bracket_id).concat(newpb),
+                                setPlayData({
+                                    ...play_data,
+                                    player_brackets:player_brackets.filter(pb => pb.player_bracket_id != newpb.player_bracket_id).concat(newpb),
                                     competition_player_brackets: competition_player_brackets.filter(cpb => !ncpbs.find(ncpb => ncpb.competition_player_bracket_id == cpb.competition_player_bracket_id)).concat(ncpbs)
                                 })
                             }}
@@ -307,7 +234,6 @@ const BracketRoom = ({ player_id, width, view_mode, bracket_id, insets, onCreate
         }
     }
 
-
     return (
         <View style={{ flex:1 }}>
             <View style={{ flex:1, flexDirection:'row' }}>
@@ -317,11 +243,122 @@ const BracketRoom = ({ player_id, width, view_mode, bracket_id, insets, onCreate
                             data={sections}
                             keyExtractor={(item) => item}
                             refreshing={loading ? true : false}
-                            onRefresh={() => loadData()}
                             key={'bracket_sections'}
                             renderItem={renderSections}
                         />
                     </View>
+                    <Modal
+                        visible={show_competition_actions}
+                        transparent
+                        style={{ flex:1 }}
+                        animationType={'slide'}
+                    >
+                        <View type='blur' style={{ flex:1, justifyContent:'flex-end', padding:10, paddingBottom:(insets?.bottom ?? 0)+10 }}>
+                            <View float style={{ maxHeight:700 }}>
+                            {active_competition ?
+                                <View transparent style={{ backgroundColor:Colors.text.action, flexDirection:'row', alignItems:'center', padding:17, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+                                    <Image
+                                        source={{ uri: active_competition.image?.url }}
+                                        style={{ height:40, width:40 }}
+                                        resizeMode='cover'
+                                    />
+                                    <View transparent style={{ flex:1, marginLeft:10 }}>
+                                        <Text theme='h2' color={Colors.text.white}>{active_competition.competition_name}</Text>
+                                        <Text style={{ marginTop:3 }} theme='description' color={Colors.text.white}>{active_competition.competition_name}</Text>
+                                    </View>
+                                                
+                                    <Button
+                                        type='text'
+                                        float
+                                        style={{ padding:10, flexDirection:'row', alignItems:'center' }}
+                                        onPress={() => {
+                                            setShowCompetitionActions(false)
+                                            setTimeout(() => {
+                                                onShareCompetition(active_competition)
+                                            }, 500);
+                                        }}
+                                    >
+                                        <Icons.ShareIcon size={14} color={Colors.text.white} />
+                                    </Button>
+                                </View>
+                                :<></>}
+                                <View style={{ flexGrow:1 }}>
+                                    {active_bracket_id ?
+                                    <BracketCompetitionActions
+                                        view_mode={view_mode}
+                                        onRequestAuthenticate={() => onRequestAuthenticate(active_competition?.auth_strategy_id)}
+                                        player={player}
+                                        hide_image
+                                        onManage={onManageCompetition}
+                                        onCreateNewCompetition={(bracket_id) => {
+                                            if(!onCreateNewCompetition){ return }
+                                            setShowCompetitionActions(false);
+                                            setTimeout(() => {
+                                                onCreateNewCompetition(bracket_id);
+                                            }, 500);
+                                        }}
+                                        insets={insets}
+                                        onFoundCompetition={(bc) => {
+                                            setNavData({
+                                                ...nav_data,
+                                                active_competition:bc,
+                                                active_bracket_id: bc.bracket_id
+                                            })
+                                        }}
+                                        onSelectCompetition={async(bc) => {
+                                            setNavData({
+                                                ...nav_data,
+                                                active_bracket_id: bc.bracket_id,
+                                                active_competition: bc
+                                            })
+                                        }}
+                                        onFocusPosition={onFocusPosition}
+                                        player_brackets={player_brackets}
+                                        onEnterCompetition={(new_bc, new_cpb, new_pb) => {
+                                            if(new_pb){
+                                                setNavData({
+                                                    ...nav_data,
+                                                    active_player_bracket_id: new_pb?.player_bracket_id,
+                                                    active_competition:new_bc
+                                                })
+                                            }
+                                            setPlayData({
+                                                ...play_data,
+                                                player_brackets: new_pb ? player_brackets.concat(new_pb) : player_brackets,
+                                                competition_player_brackets: competition_player_brackets.concat(new_cpb)
+
+                                            })
+                                        }}
+                                        competition_id={active_competition?.bracket_competition_id}
+                                        onLeaveCompetition={(bc, rem_cpb) => {
+                                            setNavData({
+                                                ...nav_data,
+                                                active_competition: bc
+                                            });
+                                            setPlayData({
+                                                ...play_data,
+                                                competition_player_brackets: competition_player_brackets.filter(cpb => cpb.competition_player_bracket_id != rem_cpb.competition_player_bracket_id)
+                                            })
+                                        }}
+                                        competition_result_types={competition_result_types}
+                                        bracket_id={active_bracket_id}
+                                        player_balance={local_balance}
+                                        player_bracket={player_brackets.find(pb => pb.player_bracket_id == active_player_bracket_id)}
+                                        competition_player_brackets={competition_player_brackets}
+                                    /> 
+                                    :<></>}
+                                </View>
+                                <View type='footer' style={{ flexDirection:'row', padding:10 }}>
+                                    <Button
+                                        style={{ flex:1 }}
+                                        title='CLOSE'
+                                        type='close'
+                                        onPress={() => setShowCompetitionActions(false)}
+                                    />
+                                </View>
+                            </View>
+                        </View>
+                    </Modal>
                     {mode == 'small' && active_bracket_id ?
                     <Button float style={{ padding:0, backgroundColor:Colors.text.action, borderBottomRightRadius:0, borderBottomLeftRadius:0 }} onPress={() => setShowCompetitionActions(true)}>
                         {active_competition ?
@@ -345,7 +382,7 @@ const BracketRoom = ({ player_id, width, view_mode, bracket_id, insets, onCreate
                         </View>
                         :
                         <View transparent style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
-                            <Icons.BracketIcon size={20} color={Colors.text.white} />
+                            <Icons.TrophyIcon size={20} color={Colors.text.white} />
                             <View transparent style={{ flex:1, marginLeft:10 }}>
                                 <Text theme='h2' color={Colors.text.white}>Available Competitions</Text>
                                 <Text style={{ marginTop:3 }} theme='description' color={Colors.text.white}>Press here to see eligible competitions to join!</Text>
@@ -362,236 +399,73 @@ const BracketRoom = ({ player_id, width, view_mode, bracket_id, insets, onCreate
                     </Button>
                     :<></>}
                 </View>
-                
                 {mode != 'small' && active_bracket_id ?
                 <View type='header' style={{ width:300 }}>
                     <BracketCompetitionActions
-                        view_mode={view_mode}
-                        player={player}
-                        onManage={onManageCompetition}
-                        insets={insets}
-                        onCreateNewCompetition={onCreateNewCompetition}
-                        onRequestAuthenticate={() => onRequestAuthenticate(active_competition?.auth_strategy_id)}
-                        onSelectCompetition={(bc) => {
-                            setNavData({
-                                ...nav_data,
-                                active_competition_id: bc.bracket_competition_id
-                            })
-                        }}
-                        onFoundCompetition={(bc) => {
-                            setRoomData({
-                                ...room_data,
-                                public_competitions: public_competitions.filter(pc => pc.bracket_competition_id != bc.bracket_competition_id).concat(bc)
-                            });
-                            setNavData({
-                                ...nav_data,
-                                active_competition_id: bc.bracket_competition_id,
-                                active_bracket_id: bc.bracket_id,
-                                active_player_bracket_id: active_player_bracket?.bracket_id == bc.bracket_id ? active_player_bracket_id : player_brackets.find(pb => pb.status != 'deleted' && pb.bracket_id == bc.bracket_id)?.player_bracket_id
-                            })
-                        }}
-                        onFocusPosition={onFocusPosition}
-                        player_brackets={player_brackets}
-                        onEnterCompetition={(new_bc, new_cpb, new_pb) => {
-                            setMyData({
-                                ...my_data,
-                                bracket_competitions: bracket_competitions.filter(bc => bc.bracket_competition_id != new_bc.bracket_competition_id).concat(new_bc),
-                                competition_player_brackets: competition_player_brackets.filter(cpb => cpb.competition_player_bracket_id != new_cpb.competition_player_bracket_id).concat(new_cpb),
-                                player_brackets: !new_pb ? player_brackets : player_brackets.filter(pb => pb.player_bracket_id != new_pb.player_bracket_id).concat(new_pb)
-                            });
-                            if(new_pb){
-                                setNavData({ ...nav_data, active_player_bracket_id: new_pb.player_bracket_id })
-                            }
-                        }}
-                        competition_id={active_competition_id}
-                        onLeaveCompetition={(new_bc, new_cpb) => setMyData({
-                            ...my_data,
-                            bracket_competitions: bracket_competitions.filter(bc => bc.bracket_competition_id != new_bc.bracket_competition_id).concat(new_bc),
-                            competition_player_brackets: competition_player_brackets.filter(cpb => cpb.competition_player_bracket_id != new_cpb.competition_player_bracket_id).concat(new_cpb)
-                        })}
-                        competition_result_types={competition_result_types}
-                        bracket_id={active_bracket_id}
-                        player_balance={local_balance}
-                        player_bracket={active_player_bracket}
-                        competition_player_brackets={competition_player_brackets}
-                    />
-                </View>
-                :<></>}
-            </View>
-            <Modal
-                visible={show_competition_actions}
-                transparent
-                style={{ flex:1 }}
-                animationType={'slide'}
-            >
-                <View type='blur' style={{ flex:1, justifyContent:'flex-end', padding:10, paddingBottom:(insets?.bottom ?? 0)+10 }}>
-                    <View float style={{ maxHeight:700 }}>
-                        {active_competition ?
-                        <View transparent style={{ backgroundColor:Colors.text.action, flexDirection:'row', alignItems:'center', padding:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
-                            <Image
-                                source={{ uri: active_competition.image?.url }}
-                                style={{ height:40, width:40 }}
-                                resizeMode='cover'
-                            />
-                            <View transparent style={{ flex:1, marginLeft:10 }}>
-                                <Text theme='h2' color={Colors.text.white}>{active_competition.competition_name}</Text>
-                                <Text style={{ marginTop:3 }} theme='description' color={Colors.text.white}>{active_competition.competition_name}</Text>
-                            </View>
-                                        
-                            <Button
-                                type='text'
-                                float
-                                style={{ padding:10, flexDirection:'row', alignItems:'center' }}
-                                onPress={() => {
-                                    setShowCompetitionActions(false)
-                                    setTimeout(() => {
-                                        onShareCompetition(active_competition)
-                                    }, 500);
-                                }}
-                            >
-                                <Icons.ShareIcon size={14} color={Colors.text.white} />
-                            </Button>
-                        </View>
-                        :<></>}
-                        <View style={{ flexGrow:1 }}>
-                            {active_bracket_id ?
-                            <BracketCompetitionActions
-                                view_mode={view_mode}
-                                onRequestAuthenticate={() => onRequestAuthenticate(active_competition?.auth_strategy_id)}
-                                player={player}
-                                hide_image
-                                onManage={onManageCompetition}
-                                onCreateNewCompetition={(bracket_id) => {
-                                    if(!onCreateNewCompetition){ return }
-                                    setShowCompetitionActions(false);
-                                    setTimeout(() => {
-                                        onCreateNewCompetition(bracket_id);
-                                    }, 500);
-                                }}
-                                insets={insets}
-                                onFoundCompetition={(bc) => {
-                                    setRoomData({
-                                        ...room_data,
-                                        public_competitions: public_competitions.filter(pc => pc.bracket_competition_id != bc.bracket_competition_id).concat(bc)
-                                    });
-                                    setNavData({
-                                        ...nav_data,
-                                        active_competition_id: bc.bracket_competition_id,
-                                        active_bracket_id: bc.bracket_id,
-                                        active_player_bracket_id: active_player_bracket?.bracket_id == bc.bracket_id ? active_player_bracket_id : player_brackets.find(pb => pb.status != 'deleted' && pb.bracket_id == bc.bracket_id)?.player_bracket_id
-                                    })
-                                }}
-                                onSelectCompetition={(bc) => {
-                                    setNavData({
-                                        ...nav_data,
-                                        active_competition_id: bc.bracket_competition_id
-                                    })
-                                }}
-                                onFocusPosition={onFocusPosition}
-                                player_brackets={player_brackets}
-                                onEnterCompetition={(new_bc, new_cpb, new_pb) => {
-                                    setMyData({
-                                        ...my_data,
-                                        bracket_competitions: bracket_competitions.filter(bc => bc.bracket_competition_id != new_bc.bracket_competition_id).concat(new_bc),
-                                        competition_player_brackets: competition_player_brackets.filter(cpb => cpb.competition_player_bracket_id != new_cpb.competition_player_bracket_id).concat(new_cpb),
-                                        player_brackets: !new_pb ? player_brackets : player_brackets.filter(pb => pb.player_bracket_id != new_pb.player_bracket_id).concat(new_pb)
-                                    });
-                                    if(new_pb){
-                                        setNavData({ ...nav_data, active_player_bracket_id: new_pb.player_bracket_id })
-                                    }
-                                }}
-                                competition_id={active_competition_id}
-                                onLeaveCompetition={(new_bc, new_cpb) => setMyData({
-                                    ...my_data,
-                                    bracket_competitions: bracket_competitions.filter(bc => bc.bracket_competition_id != new_bc.bracket_competition_id).concat(new_bc),
-                                    competition_player_brackets: competition_player_brackets.filter(cpb => cpb.competition_player_bracket_id != new_cpb.competition_player_bracket_id).concat(new_cpb)
-                                })}
-                                competition_result_types={competition_result_types}
-                                bracket_id={active_bracket_id}
-                                player_balance={local_balance}
-                                player_bracket={active_player_bracket}
-                                competition_player_brackets={competition_player_brackets}
-                            /> 
-                            :<></>}
-                        </View>
-                        <View type='footer' style={{ flexDirection:'row', padding:10 }}>
-                            <Button
-                                style={{ flex:1 }}
-                                title='CLOSE'
-                                type='close'
-                                onPress={() => setShowCompetitionActions(false)}
-                            />
-                        </View>
-                    </View>
-                </View>
-            </Modal>
-            <Modal
-                visible={show_pb_selector}
-                style={{ flex:1 }}
-                transparent
-                animationType={view_mode == 'desktop' ? 'fade' : 'slide'}
-            >
-                <View type='blur' style={view_mode == 'desktop' ? { flex:1, justifyContent:'center', alignItems:'center' } : { flex:1, justifyContent:'flex-end', paddingBottom:(insets?.bottom ?? 0) }}>
-                    <View float style={view_mode == 'desktop' ? { width:500 }:{ margin:10 }}>
-                        <PlayerBracketSelector
-                            player_brackets={player_brackets.filter(pb => pb.bracket_id == active_bracket_id && pb.status != 'deleted')}
-                            brackets={brackets}
-                            leagues={leagues}
-                            bracket_id={active_bracket_id}
-                            onCreateNew={(newpb) => {
-                                setShowPBSelector(false);
+                            view_mode={view_mode}
+                            onRequestAuthenticate={() => onRequestAuthenticate(active_competition?.auth_strategy_id)}
+                            player={player}
+                            hide_image
+                            onManage={onManageCompetition}
+                            onCreateNewCompetition={(bracket_id) => {
+                                if(!onCreateNewCompetition){ return }
+                                setShowCompetitionActions(false);
+                                setTimeout(() => {
+                                    onCreateNewCompetition(bracket_id);
+                                }, 500);
+                            }}
+                            insets={insets}
+                            onFoundCompetition={(bc) => {
                                 setNavData({
                                     ...nav_data,
-                                    active_player_bracket_id: newpb.player_bracket_id
-                                });
-                                setMyData({
-                                    ...my_data,
-                                    player_brackets: player_brackets.filter(pb => pb.player_bracket_id != newpb.player_bracket_id).concat(newpb)
+                                    active_competition:bc,
+                                    active_bracket_id: bc.bracket_id
                                 })
                             }}
-                            teams={teams}
-                            athletes={athletes}
-                            bracket_competitions={bracket_competitions}
-                            competition_player_brackets={competition_player_brackets}
-                            onClose={() => setShowPBSelector(false)}
-                            onSelect={(pb) => {
-                                setShowPBSelector(false);
-                                setNavData({ ...nav_data, active_player_bracket_id: pb.player_bracket_id })
+                            onSelectCompetition={async(bc) => {
+                                setNavData({
+                                    ...nav_data,
+                                    active_bracket_id: bc.bracket_id,
+                                    active_competition: bc
+                                })
                             }}
-                        />
-                    </View>
-                </View>
-            </Modal>
-            <Modal
-                visible={editing_player_bracket ? true : false}
-                style={{ flex:1 }}
-                transparent
-                animationType={view_mode == 'desktop' ? 'fade' : 'slide'}
-            >
-                <View type='blur' style={view_mode == 'desktop' ? { flex:1, justifyContent:'center', alignItems:'center' } : { flex:1, justifyContent:'flex-end', paddingBottom:(insets?.bottom ?? 0)}}>
-                    <View float style={view_mode == 'desktop' ? { width:500 }:{ margin:10 }}>
-                        <EditPlayerBracket
-                            player_bracket={editing_player_bracket}
-                            onClose={() => setEditingPlayerBracket(undefined)}
                             onFocusPosition={onFocusPosition}
-                            onUpdatePlayerBracket={(new_pb) => {
-                                setNavData({ ...nav_data, active_player_bracket_id: undefined });
+                            player_brackets={player_brackets}
+                            onEnterCompetition={(new_bc, new_cpb, new_pb) => {
+                                if(new_pb){
+                                    setNavData({
+                                        ...nav_data,
+                                        active_player_bracket_id: new_pb?.player_bracket_id,
+                                        active_competition:new_bc
+                                    })
+                                }
+                                setPlayData({
+                                    ...play_data,
+                                    player_brackets: new_pb ? player_brackets.concat(new_pb) : player_brackets,
+                                    competition_player_brackets: competition_player_brackets.concat(new_cpb)
 
-                                setMyData({
-                                    ...my_data,
-                                    player_brackets: player_brackets.filter(pb => pb.player_bracket_id != new_pb.player_bracket_id).concat(new_pb)
+                                })
+                            }}
+                            competition_id={active_competition?.bracket_competition_id}
+                            onLeaveCompetition={(bc, rem_cpb) => {
+                                setNavData({
+                                    ...nav_data,
+                                    active_competition: bc
                                 });
-                                if(new_pb.status != 'deleted'){
-                                    setTimeout(() => {
-                                        setNavData({ ...nav_data, active_player_bracket_id: new_pb.player_bracket_id })
-                                    }, (200));
-                                }
-                                setEditingPlayerBracket(undefined)
+                                setPlayData({
+                                    ...play_data,
+                                    competition_player_brackets: competition_player_brackets.filter(cpb => cpb.competition_player_bracket_id != rem_cpb.competition_player_bracket_id)
+                                })
                             }}
-                        />
+                            competition_result_types={competition_result_types}
+                            bracket_id={active_bracket_id}
+                            player_balance={local_balance}
+                            player_bracket={player_brackets.find(pb => pb.player_bracket_id == active_player_bracket_id)}
+                            competition_player_brackets={competition_player_brackets}
+                        /> 
                     </View>
-                </View>
-            </Modal>
+                :<></>}
+            </View>
             {loading ?
             <View type='blur' style={{ position:'absolute', top:0, left:0, right:0, bottom:0, justifyContent:'center', alignItems:'center' }}>
                 <View float style={{ width:300, height:300 }}>
@@ -605,8 +479,9 @@ const BracketRoom = ({ player_id, width, view_mode, bracket_id, insets, onCreate
                 </View>
             </View>
             :<></>}
+             
         </View>
     )
 }
 
-export default BracketRoom
+export default BracketRoom