be-components 4.5.5 → 4.5.8

package/src/Bracket/components/RoomHome.tsx

@@ -1,38 +1,28 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Button, Text, View } from '../../Components/Themed';
-import type { AthleteProps, BracketCompetitionProps, BracketProps, CompetitionPlayerBracketProps, CompetitionResultTypeProps, LeagueProps, MyPlayerProps, PlayerBracketProps, TeamProps } from '../../types';
+import type { AthleteProps, BracketCompetitionProps, BracketProps, CompetitionPlayerBracketProps, LeagueProps, MyPlayerProps, PlayerBracketProps, TeamProps } from '../../types';
 import { FlatList, Image } from 'react-native';
 import PlayerBracketCard from './PlayerBracketCard';
 import SearchBox from '../../Components/SearchBox';
 import { Icons, Toggle } from '../../Components';
 import { useColors } from '../../constants/useColors';
 import moment from 'moment-mini';
-import { BracketComeptitionApi } from '../api';
+import { BracketApi, BracketComeptitionApi, BracketCompetitionHelpers } from '../api';
+import EditPlayerBracket from './EditPlayerBracket';
+import EnteredCompetitionsModal from './EnteredCompetitionsModal';
 
 type RoomHomeProps = {
     player?:MyPlayerProps,
-    visible?:boolean,
-    player_brackets:PlayerBracketProps[],
-    bracket_competitions:BracketCompetitionProps[],
-    competition_player_brackets:CompetitionPlayerBracketProps[],
-    brackets:BracketProps[],
+    visible:boolean,
     onManageCompetition:(bracket_competition_id:string) => void,
-    onMoreAdmin:(offset:number) => void,
-    admin_offset:number,
-    admin_competitions:BracketCompetitionProps[],
     onFocusPosition?:(pos:{ x:number, y:number, height:number, width:number }) => void,
     width:number,
-    public_competitions:BracketCompetitionProps[],
-    active_brackets:BracketProps[],
+    onRequestAuthenticate:() => void,
+    insets?: { top:number, bottom:number, right:number, left:number },
     view_mode:'mobile'|'desktop'
-    competition_result_types:CompetitionResultTypeProps[],
     leagues:LeagueProps[],
     onCreateNewCompetition?:(bracket_id?:string) => void,
-    athletes:AthleteProps[],
-    onUpdatePlayerBracket:(player_bracket:PlayerBracketProps) => void,
-    onEditPlayerBracket:(player_bracket:PlayerBracketProps) => void,
-    onView: (bracket_id:string, player_bracket_id?:string, bracket_competition_id?:string) => void,
-    teams:TeamProps[]
+    onView: (bracket_id:string, player_bracket_id?:string, bracket_competition?:BracketCompetitionProps) => void,
 }
 
 const MIN_CARD_WIDTH = 330
@@ -47,59 +37,237 @@ const calcCardWidth = (width:number, margin:number) => {
 
 const sections = [ 'toggle', 'active_brackets', 'past_brackets', 'tournaments', 'admin_competitions', 'competitions']
 
-const RoomHome = ({ visible, width, player, leagues, active_brackets, public_competitions, admin_competitions, onMoreAdmin, admin_offset, onManageCompetition, onCreateNewCompetition, onView, onUpdatePlayerBracket, onEditPlayerBracket, onFocusPosition, brackets, player_brackets, bracket_competitions, competition_player_brackets, athletes, teams }:RoomHomeProps) => {
+const RoomHome = ({ view_mode, visible, width, onRequestAuthenticate, player, leagues, insets, onManageCompetition, onCreateNewCompetition, onView, onFocusPosition}:RoomHomeProps) => {
     const Colors = useColors();
+    const [ active_toggle, setActiveToggle ] = useState('my_brackets');
+    const [ show_comps, setShowComps ] = useState<{
+        player_bracket?:PlayerBracketProps,
+        champion_team?:TeamProps,
+        champion_athlete?:AthleteProps,
+        entered_competitions:BracketCompetitionProps[],
+        entered_brackets:CompetitionPlayerBracketProps[]
+    }>({
+        entered_brackets: [],
+        entered_competitions:[]
+    })
+    const [ editing_player_bracket, setEditingPlayerBracket ] = useState<PlayerBracketProps|undefined>(undefined);
+    const [ admin_data, setAdminData ] = useState<{
+        admin_loading:boolean,
+        admin_competitions:BracketCompetitionProps[],
+        admin_brackets:BracketProps[],
+        admin_offset:number
+    }>({
+        admin_loading: false,
+        admin_brackets: [],
+        admin_competitions:[],
+        admin_offset:0
+    });
+    const { admin_competitions, admin_offset } = admin_data;
+    const [ competitions_data, setCompetitionsData ] = useState<{
+        competitions_loaded:boolean,
+        competitions_loading: boolean,
+        public_competitions:BracketCompetitionProps[],
+        competition_brackets:BracketProps[]
+    }>({
+        competitions_loading: false,
+        competitions_loaded: false,
+        public_competitions:[],
+        competition_brackets:[]
+    });
+    const { public_competitions, competition_brackets } = competitions_data
+    const [ comp_search, setCompSearch ] = useState({
+        visible: false,
+        value: ''
+    });
+    let visisble_comps = [ ...public_competitions ]
+    if(comp_search.visible){
+        visisble_comps = visisble_comps.filter(c => `${c.competition_name} ${c.competition_description}`.toLowerCase().includes(comp_search.value.toLowerCase()))
+    }
+    const unique_competition_leagues = [ ...new Set(competition_brackets.filter(b => visisble_comps.map(c => c.bracket_id.toString()).includes(b.bracket_id.toString())).map(b => b.league_id)) ]
+
+    const [ tournaments_data, setTournamentsData ] = useState<{
+        tournaments_loading:boolean,
+        tournament_brackets:BracketProps[]
+    }>({
+        tournaments_loading: false,
+        tournament_brackets: []
+    });
+    const { tournament_brackets } = tournaments_data;
+    let visisble_tourney_brackets = [ ...tournament_brackets ] 
+
+    const [ selected_league, setSelectedLeague ] = useState<string | undefined>(undefined);
+    if(selected_league){
+        visisble_tourney_brackets = visisble_tourney_brackets.filter(b => b.league_id == selected_league)
+    }
+    const [ tourney_search, setTourneySearch ] = useState({
+        visible:false, value:''
+    });
+    if(tourney_search.visible){
+        visisble_tourney_brackets = visisble_tourney_brackets.filter(b => `${b.bracket_name}`.toLowerCase().includes(tourney_search.value.toLowerCase()));
+    }
+    const unique_tournament_leagues = [ ...new Set(visisble_tourney_brackets.map(b => b.league_id)) ];
+
+    const [ my_brackets_data, setMyBrackets ] = useState<{
+        my_brackets_loading: boolean,
+        my_brackets_loaded:boolean,
+        competition_player_brackets:CompetitionPlayerBracketProps[],
+        my_competitions:BracketCompetitionProps[],
+        my_brackets:BracketProps[],
+        player_brackets:PlayerBracketProps[],
+        champion_teams:TeamProps[],
+        champion_athletes:AthleteProps[],
+    }>({
+        my_brackets_loading: false,
+        my_brackets_loaded: false,
+        competition_player_brackets: [],
+        my_brackets:[],
+        champion_athletes:[],
+        champion_teams: [],
+        my_competitions:[],
+        player_brackets:[]
+    });
+    const { my_brackets_loaded, my_brackets_loading, my_brackets, my_competitions, competition_player_brackets, player_brackets, champion_athletes, champion_teams } = my_brackets_data;
+    const active_brackets = player_brackets.filter(pb => pb.status == 'active');
+    const closed_brackets = player_brackets.filter(pb => pb.status == 'closed');
+
+    const [ past_search, setPastSearch ] = useState({
+        visible: false,
+        value:''
+    });
+    let closed_bracket_ids = [ ...new Set(closed_brackets.map(b => b.bracket_id)) ].slice(0,10)
+    if(past_search.visible){
+        let filtered_brackets = [ ...closed_brackets].filter(b => `${b.bracket_name}`.toLowerCase().includes(past_search.value.toLowerCase()))
+        closed_bracket_ids = [ ...new Set(filtered_brackets.map(b => b.bracket_id)) ].slice(0,10)
+    }
+
+    const [ active_search, setActiveSearch ] = useState({
+        visible:false,
+        value:''
+    });
+    let active_bracket_ids = [ ...new Set(active_brackets.map(b => b.bracket_id)) ]
+    if(active_search.visible){
+        let filtered_a_brackets = [ ...active_brackets].filter(b => `${b.bracket_name}`.toLowerCase().includes(active_search.value.toLowerCase()))
+        active_bracket_ids = [ ...new Set(filtered_a_brackets.map(b => b.bracket_id)) ].slice(0,10)
+    }
+
     const [ action_loading, setActionLoading ] = useState<string|undefined>(undefined)//This will be a bracket id
-    const [ active_toggle, setActiveToggle ] = useState('competitions');
-    const [ past_search, setPastSearch ] = useState('');
-    const [ show_active_search, setShowActiveSearch ] = useState(false);
     const [ expanded_brackets, setExpandedBrackets ] = useState<string[]>([]);
     const [ expanded_leagues, setExpandedLeagues ] = useState<string[]>([]);
     const [ expanded_c_leagues, setExpandedCLeagues ] = useState<string[]>([])
-    const [ active_search, setActiveSearch ] = useState('');
-    const [ show_past_search, setShowPastSearch ] = useState(false);
-    const [ show_brackets_search, setShowBracketsSearch ] = useState(false);
-    const [ selected_league, setSelectedLeague ] = useState<string | undefined>(undefined);
-    const [ brackets_search, setBracketsSearch ] = useState('');
-    console.log(brackets_search)
-    const [ competition_search, setCompetitionSearch ] = useState('');
-    console.log(competition_search)
-    const [ show_competition_search, setShowCompetitionSearch ] = useState(false);
-    let visible_active_brackets = [ ...active_brackets ]
-    const unique_leages = [ ...new Set(visible_active_brackets.map(b => b.league_id)) ];
-    if(selected_league){ visible_active_brackets = visible_active_brackets.filter(b => b.league_id == selected_league) }
-    //const inprogress_bracket_ids = [ ...new Set(visible_active_brackets.map(b => b.bracket_id)) ];
-
-    const filterPlayerBrackets = (bs:BracketProps[], pbs:PlayerBracketProps[], status:'active'|'closed', search:string) => {
-        let init_pbs = pbs.filter(pb => pb.status == status);
-        if(!search || search == ''){ return init_pbs }
-        let brackets = bs.filter(b => `${b.bracket_name.toLowerCase()}`.includes(search.toLowerCase()));
-        return init_pbs.filter(pb => brackets.map(b => b.bracket_id.toString()).includes(pb.bracket_id.toString()));
+
+
+    useEffect(() => {
+        if(!visible){ return }
+        getData(active_toggle)
+    },[visible, active_toggle]);
+    
+
+    const getData = async(toggle:string) => {
+        switch(toggle){
+            case 'my_brackets': getMyBrackets(); return
+            case 'tournaments': getTournaments(); return
+            case 'competitions': getCompetitions(); return
+            default: return
+        }
     }
 
-    let visible_player_brackets = useMemo(() => {
-        return filterPlayerBrackets(brackets, player_brackets, 'active', active_search);
-    },[brackets.length, player_brackets.length, active_search]);
+    const getCompetitions = async() => {
+        setCompetitionsData({ ...competitions_data, competitions_loading: true });
+        const pub_comps = await BracketComeptitionApi.getActivePublicBrackets();
+        const unique_brackets = [ ...new Set(pub_comps.map(c => c.bracket_id)) ] 
+        const comp_brackets = await BracketApi.getBracketsByIds(unique_brackets);
+        setCompetitionsData({
+            ...competitions_data,
+            public_competitions: pub_comps,
+            competitions_loaded: true,
+            competition_brackets: comp_brackets,
+            competitions_loading: false
+        })
+        getAdminComps(0);
+    }
 
-    const active_bracket_ids = [ ...new Set(visible_player_brackets.map(pb => pb.bracket_id)) ]
+    const getAdminComps = async(offset:number) => {
+        if(!player){ return }
+        const admin_comps = await BracketComeptitionApi.getMyAdminCompetitions(offset);
+        setAdminData({
+            admin_loading: false,
+            admin_brackets:[],
+            admin_competitions:admin_comps,
+            admin_offset:offset
+        })
+    }
 
-    let past_player_brackets = useMemo(() => {
-        return filterPlayerBrackets(brackets, player_brackets, 'closed', past_search);
-    },[brackets.length, player_brackets.length, past_search])
-    
-    const past_bracket_ids = [ ...new Set(past_player_brackets.map(pb => pb.bracket_id)) ]
+    const getTournaments = async() => {
+        setTournamentsData({ ...tournaments_data, tournaments_loading: true });
+        const tourney_brackets = await BracketApi.getActiveBrackets();
+        setTournamentsData({
+            ...tournaments_data,
+            tournaments_loading: false,
+            tournament_brackets: tourney_brackets
+        });
+    }
+
+    const getMyBrackets = async() => {
+        if(!player){ return }
+        setMyBrackets({ ...my_brackets_data, my_brackets_loading: true });
+        const my_response = await BracketComeptitionApi.getMyPlayerBrackets();
+        const bracket_ids = [ ...new Set(my_response.player_brackets.map(pb => pb.bracket_id))]
+        let brackets = await BracketApi.getBracketsByIds(bracket_ids);
+        let champ_team_ids = my_response.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_response.player_brackets.filter(pb => pb.champion_id_type == 'athlete').map(b => b.champion_id ?? '')
+        const champ_athletes = await BracketApi.getAthletesByIds(champ_athlete_ids);
+        //Filter to active and closed
+        setMyBrackets({
+            ...my_brackets_data,
+            my_brackets_loading:false,
+            my_brackets_loaded: true,
+            champion_athletes: champ_athletes,
+            champion_teams: champ_teams,
+            my_brackets: brackets,
+            player_brackets: my_response.player_brackets,
+            competition_player_brackets: my_response.competition_player_brackets,
+            my_competitions: my_response.bracket_competitions
+        })
+    }
+
+    const handleView = async(bracket_id:string, player_bracket_id?:string, bracket_competition?:BracketCompetitionProps) => {
+        if(bracket_id && player_bracket_id && bracket_competition){ return onView(bracket_id, player_bracket_id, bracket_competition) }
+        //Ok! Now - what if we do not have a player_bracket
+        let init_pb_id = player_bracket_id
+        if(!init_pb_id){
+            //Lets try and find one!
+            init_pb_id = player_brackets.find(pb => pb.bracket_id == bracket_id && pb.status != 'deleted')?.player_bracket_id
+            if(!init_pb_id && !my_brackets_loaded){
+                //Lets try and get the plyaers brackets and see!
+                const my_pbs = await BracketComeptitionApi.getMyPlayerBrackets();
+                init_pb_id = my_pbs.player_brackets.find(pb => pb.bracket_id == bracket_id && pb.status != 'deleted')?.player_bracket_id
+            }
+        } 
+
+        //Ok! Now - what if we do not have a bracket competition!
+        let init_bc = bracket_competition
+        if(!init_bc){
+            //First check if my competitions has any!
+            init_bc = my_competitions.find(c => c.bracket_id == bracket_id)
+            if(!init_bc){ init_bc = public_competitions.find(pc => pc.bracket_id == bracket_id) }
+            if(!init_bc){
+                //Lets try and get one from the server
+                const comps_bc = await BracketComeptitionApi.getBracketCompetitionsByBracketId(bracket_id);
+                init_bc = comps_bc.find(bc => bc.bracket_id == bracket_id && !bc.invite_only)
+            }
+        }
+        return onView(bracket_id, init_pb_id, init_bc)
+    }
 
-    const competition_bracket_ids = [ ...new Set(public_competitions.map(bc => bc.bracket_id)) ]
-    const competition_brackets = brackets.filter(b => competition_bracket_ids.includes(b.bracket_id));
-    const competition_league_ids = [ ...new Set(competition_brackets.map(cb => cb.league_id)) ];
 
     const pb_width = calcCardWidth(width, 6);
 
     const renderBrackets = (data:{ item:string, index:number }) => {
-        const bracket = brackets.find(b => b.bracket_id == data.item);
+        const bracket = my_brackets.find(b => b.bracket_id == data.item);
         if(!bracket){ return <></> }
         const expanded = expanded_brackets.includes(data.item) ? true : false
-        let my_player_brackets = player_brackets.filter(pb => pb.bracket_id == data.item);
+        let my_player_brackets = player_brackets.filter(pb => pb.bracket_id == data.item && pb.status != 'deleted');
         let additional = my_player_brackets.length - 1
         if(!expanded){
             my_player_brackets = my_player_brackets.slice(0,1);
@@ -107,8 +275,8 @@ const RoomHome = ({ visible, width, player, leagues, active_brackets, public_com
         const league = leagues.find(l => l.league_id == bracket.league_id);
         const act_loading = action_loading == data.item ? true : false
         return (
-            <View float style={{ margin:5, width: pb_width }}>
-               <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+            <View key={`${data.item}_${data.index}_bracket`} float style={{ margin:5, width: pb_width }}>
+               <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
                     {league ?
                     <Image
                         style={{ height:40, width:40, marginRight:5 }}
@@ -144,9 +312,12 @@ const RoomHome = ({ visible, width, player, leagues, active_brackets, public_com
                                 completion_status: 'inprogress',
                                 status: 'active'
                             })
-                            onUpdatePlayerBracket(new_pb);
                             setActionLoading(undefined);
                             if(!expanded){ setExpandedBrackets(expanded_brackets.concat(data.item)) }
+                            setMyBrackets({
+                                ...my_brackets_data,
+                                player_brackets: player_brackets.filter(pb => pb.player_bracket_id != new_pb.player_bracket_id).concat(new_pb)
+                            })
                         }}
                     />
                     :<></>}
@@ -173,7 +344,7 @@ const RoomHome = ({ visible, width, player, leagues, active_brackets, public_com
     const renderCompetitions = (data:{ item:BracketCompetitionProps, index:number }) => {
         return (
             <Button style={{ padding:10, flexDirection:'row', alignItems:'center', borderRadius:0, borderBottomWidth:1, borderColor:Colors.borders.light }}
-            onPress={() => onView(data.item.bracket_id, player_brackets.find(pb => pb.bracket_id == data.item.bracket_id)?.player_bracket_id, data.item.bracket_competition_id)}>
+            onPress={() => handleView(data.item.bracket_id, undefined, data.item)}>
                 <View transparent>
                     <Image
                         source={{ uri: data.item.image?.url }}
@@ -207,7 +378,7 @@ const RoomHome = ({ visible, width, player, leagues, active_brackets, public_com
                     <Icons.BracketIcon size={50} color={Colors.text.h1} />
                     }
                 </View>
-                <View type='footer' style={{ padding:8 }}>
+                <View type='footer' style={{ padding:8, borderBottomLeftRadius:8, borderBottomRightRadius:8 }}>
                     <Button
                         type='action'
                         style={{ padding:5 }}
@@ -219,14 +390,21 @@ const RoomHome = ({ visible, width, player, leagues, active_brackets, public_com
         )
     }
 
-    const renderPlayerBrackets = useCallback((data:{ item:PlayerBracketProps, index:number }) => {
+    const handleSearchPrivate = async(code:string) => {
+        const bc = await BracketComeptitionApi.getBracketcompetitionByCode(code);
+        if(!bc){ return alert('Unable to find private competition by that code')}
+        let pb_response = await BracketComeptitionApi.getMyPlayerBrackets(bc.bracket_id);
+        return handleView(bc.bracket_id, pb_response.player_brackets[0]?.player_bracket_id, bc)
+    }
+
+    const renderPlayerBrackets = (data:{ item:PlayerBracketProps, index:number}) => {
         const cpbs = competition_player_brackets.filter(cpb => cpb.status != 'deleted' && cpb.player_bracket_id == data.item.player_bracket_id);
-        const comps = bracket_competitions.filter(bc => cpbs.map(cpb => cpb.bracket_competition_id.toString()).includes(bc.bracket_competition_id.toString()));
-        const bracket = brackets.find(b => b.bracket_id == data.item.bracket_id);
+        const comps = my_competitions.filter(bc => cpbs.map(cpb => cpb.bracket_competition_id.toString()).includes(bc.bracket_competition_id.toString()));
+        const bracket = my_brackets.find(b => b.bracket_id == data.item.bracket_id);
         if(!bracket){ return <></> }
         const league = leagues.find(l => l.league_id == bracket.league_id);
-        const champion_team = teams.find(t => data.item.champion_id_type == 'team' && t.team_id == data.item.champion_id)
-        const champion_athlete = athletes.find(t => data.item.champion_id_type == 'athlete' && t.athlete_id == data.item.champion_id)
+        const champion_team = champion_teams.find(t => data.item.champion_id_type == 'team' && t.team_id == data.item.champion_id)
+        const champion_athlete = champion_athletes.find(t => data.item.champion_id_type == 'athlete' && t.athlete_id == data.item.champion_id)
         return (
             <View style={{ borderBottomWidth:1, borderColor:Colors.borders.light, padding:5 }}>
                 <PlayerBracketCard
@@ -237,12 +415,13 @@ const RoomHome = ({ visible, width, player, leagues, active_brackets, public_com
                     competition_player_brackets={cpbs}
                     bracket={bracket}
                     bracket_competitions={comps}
-                    onView={onView}
-                    onEdit={onEditPlayerBracket}
+                    onView={(bracket_id, player_bracket_id) => handleView(bracket_id, player_bracket_id)}
+                    onEdit={() => setEditingPlayerBracket(data.item)}
+                    onShowCompetitions={() => setShowComps({ player_bracket: data.item, entered_competitions:comps, entered_brackets: cpbs, champion_team, champion_athlete })}
                 />
             </View>
         )
-    }, [JSON.stringify(player_brackets)]);
+    };
 
     const renderLeagueFilters = (data:{ item:string, index:number }) => {
         const league = leagues.find(l => l.league_id == data.item);
@@ -251,7 +430,7 @@ const RoomHome = ({ visible, width, player, leagues, active_brackets, public_com
         return (
             <Button
                 float
-                style={{ flexDirection:'row', alignItems:'center', padding:5, paddingRight:10, paddingLeft:10, borderRadius:100, margin:5 }}
+                style={{ flexDirection:'row', alignItems:'center', padding:5, paddingRight:10, paddingLeft:10, borderRadius:100, margin:5, backgroundColor:selected?Colors.text.highlight:undefined }}
                 onPress={() => selected ? setSelectedLeague(undefined): setSelectedLeague(data.item)}
             >
                 <Image
@@ -267,7 +446,7 @@ const RoomHome = ({ visible, width, player, leagues, active_brackets, public_com
     const renderLeagueBrackets = (data:{ item:BracketProps, index:number }) => {
         return (
             <Button style={{ flexDirection:'row', alignItems:'center', padding:10, borderBottomWidth:1, borderColor:Colors.borders.light }}
-            onPress={() => onView(data.item.bracket_id, player_brackets.find(pb => pb.bracket_id == data.item.bracket_id)?.player_bracket_id, undefined)}>
+            onPress={() => handleView(data.item.bracket_id)}>
                 <Icons.BracketIcon size={18} color={Colors.text.h1} />
                 <View transparent style={{ flex:1, marginLeft:10, paddingLeft:5, borderLeftWidth:1, borderColor:Colors.borders.light }}>
                     <Text theme='h2'>{data.item.bracket_name}</Text>
@@ -283,7 +462,7 @@ const RoomHome = ({ visible, width, player, leagues, active_brackets, public_com
         if(!league){ return <></> }
         const expanded = expanded_c_leagues.includes(data.item) ? true : false
         //Find all the brackets for this league
-        let league_brackets = active_brackets.filter(b => b.league_id == data.item);
+        let league_brackets = competition_brackets.filter(b => b.league_id == data.item);
         let league_competitions = public_competitions.filter(bc => league_brackets.map(lb => lb.bracket_id.toString()).includes(bc.bracket_id.toString()));
         const num_comps = league_competitions.length
         let additional = league_competitions.length - 1
@@ -330,7 +509,7 @@ const RoomHome = ({ visible, width, player, leagues, active_brackets, public_com
         const league = leagues.find(l => l.league_id == data.item);
         if(!league){ return <></> }
         const expanded = expanded_leagues.includes(data.item) ? true : false
-        let league_brackets = active_brackets.filter(b => b.league_id == data.item);
+        let league_brackets = tournament_brackets.filter(b => b.league_id == data.item);
         let additional = league_brackets.length - 1
         if(!expanded){
             league_brackets = league_brackets.slice(0,1);
@@ -371,17 +550,15 @@ const RoomHome = ({ visible, width, player, leagues, active_brackets, public_com
         )
     }
 
+
+
     const renderSections = (data:{ item:string, index:number }) => {
         switch(data.item){
             case 'toggle':
                 return (
-                    <View style={{ margin:5 }}>
+                    <View style={{ margin:10, marginTop:18 }}>
                         <Toggle
-                            options={[
-                            { key: 'my_brackets', label:'My Brackets' },
-                            { key: 'tournaments', label:'Tournaments' },
-                            { key: 'competitions', label:'Competitions' }
-                            ]}
+                            options={BracketCompetitionHelpers.getToggleOptions()}
                             selected_option={active_toggle}
                             onSelectOption={(key) => setActiveToggle(key)}
         
@@ -390,9 +567,21 @@ const RoomHome = ({ visible, width, player, leagues, active_brackets, public_com
                 )
             case 'active_brackets':
                 if(active_toggle != 'my_brackets'){ return <></> }
+                if(!player){
+                    return (
+                        <View style={{ padding:40, justifyContent:'center', alignItems:'center' }}>
+                            <Button
+                                float
+                                type='success'
+                                title='GET STARTED'
+                                onPress={()=> onRequestAuthenticate()}
+                            />
+                        </View>
+                    )
+                }
                 return (
-                    <View nativeID='my_competitions'>
-                        <View type='header' style={{ padding:10, flexDirection:'row', alignItems:'center' }}>
+                    <View nativeID='my_competitions' style={{ marginTop:18 }}>
+                        <View style={{ padding:18, flexDirection:'row', alignItems:'center', borderBottomWidth:1, borderColor:Colors.borders.light  }}>
                             <View transparent style={{ flex:1, marginRight:10 }}>
                                 <Text theme='h1'>My Active Brackets</Text>
                                 <Text style={{ marginTop:4 }}>View / Edit your active brackets</Text>
@@ -400,24 +589,24 @@ const RoomHome = ({ visible, width, player, leagues, active_brackets, public_com
                             <Button
                                 float
                                 style={{ padding:0, height:35, width:35, justifyContent:'center', alignItems:'center' }}
-                                onPress={() => setShowActiveSearch(!show_active_search)}
+                                onPress={() => setActiveSearch({ visible: !active_search.visible, value:'' })}
                             >
-                                {show_active_search ?
+                                {active_search.visible ?
                                 <Icons.CloseIcon size={14} color={Colors.text.error} />
                                 :
                                 <Icons.SearchIcon size={14} color={Colors.text.action} />
                                 }
                             </Button>
                         </View>
-                        {show_active_search ?
+                        {active_search.visible ?
                         <SearchBox
-                            onChange={(text) => setActiveSearch(text)}
+                            onChange={(text) => setActiveSearch({ ...active_search, value: text })}
                             hide_search_button
                             placeholder='Search Active Brackets'
                             onFocusPosition={onFocusPosition}
                         />
                         :<></>}
-                        <View type='body' style={{ marginBottom:10, flexDirection:'row', flexWrap:'wrap', justifyContent:'center'}}>
+                        <View type='header' style={{ padding:10, flexDirection:'row', flexWrap:'wrap', justifyContent:'center'}}>
                             {active_bracket_ids.map((id, index) => {
                                 return renderBrackets({ item:id, index })
                             })}
@@ -436,38 +625,38 @@ const RoomHome = ({ visible, width, player, leagues, active_brackets, public_com
                             <Button
                                 float
                                 style={{ padding:0, height:35, width:35, justifyContent:'center', alignItems:'center' }}
-                                onPress={() => setShowBracketsSearch(!show_brackets_search)}
+                                onPress={() => setTourneySearch({ visible: !tourney_search.visible, value: '' })}
                             >
-                                {show_brackets_search ?
+                                {tourney_search.visible ?
                                 <Icons.CloseIcon size={14} color={Colors.text.error} />
                                 :
                                 <Icons.SearchIcon size={14} color={Colors.text.action} />
                                 }
                             </Button>
                         </View>
-                        {show_brackets_search ?
+                        {tourney_search.visible ?
 
                         <View style={{ padding:5 }}>
                             <FlatList
                                 key='unique_leagues'
                                 keyExtractor={(item) => item}
-                                data={unique_leages}
+                                data={unique_tournament_leagues}
                                 renderItem={renderLeagueFilters}
                                 horizontal
                             />
                         </View>
                         :<></>}
 
-                        {show_brackets_search ?
+                        {tourney_search.visible ?
                         <SearchBox
-                            onChange={(text) => setBracketsSearch(text)}
+                            onChange={(text) => setTourneySearch({ ...tourney_search, value: text })}
                             hide_search_button
                             placeholder='Search Active Tournaments'
                             onFocusPosition={onFocusPosition}
                         />
                         :<></>}
                         <View type='body' style={{ marginTop:10, marginBottom:10, flexDirection:'row', flexWrap:'wrap', justifyContent:'center'}}>
-                            {unique_leages.map((id, index) => {
+                            {unique_tournament_leagues.map((id, index) => {
                                 return renderLeagues({ item:id, index })
                             })}
                         </View>
@@ -476,35 +665,36 @@ const RoomHome = ({ visible, width, player, leagues, active_brackets, public_com
                 )
             case 'past_brackets':
                 if(active_toggle != 'my_brackets'){ return <></> }
+                if(!player){ return <></> }
                 return (
-                <View nativeID='past_brackets'>
-                    <View type='header' style={{ padding:10, flexDirection:'row', alignItems:'center' }}>
+                <View nativeID='past_brackets' style={{ marginTop:18 }}>
+                    <View  style={{ padding:18, flexDirection:'row', alignItems:'center', borderBottomWidth:1, borderColor:Colors.borders.light  }}>
                         <View transparent style={{ flex:1, marginRight:10 }}>
-                            <Text theme='h1'>MY PAST BRACKETS</Text>
+                            <Text theme='h1'>My Past Brackets</Text>
                             <Text style={{ marginTop:4 }}>View your past brackets</Text>
                         </View>
                         <Button
                             float
                             style={{ padding:0, height:35, width:35, justifyContent:'center', alignItems:'center' }}
-                            onPress={() => setShowPastSearch(!show_past_search)}
+                            onPress={() => setPastSearch({ visible: !past_search.visible, value: '' })}
                         >
-                            {show_past_search ?
+                            {past_search.visible ?
                             <Icons.CloseIcon size={14} color={Colors.text.error} />
                             :
                             <Icons.SearchIcon size={14} color={Colors.text.action} />
                             }
                         </Button>
                     </View>
-                    {show_past_search ?
+                    {past_search.visible ?
                     <SearchBox
-                        onChange={(text) => setPastSearch(text)}
+                        onChange={(text) => setPastSearch({ ...past_search, value:text })}
                         hide_search_button
                         placeholder='Search Past Brackets'
                         onFocusPosition={onFocusPosition}  
                     />
                     :<></>}
-                    <View type='body' style={{ marginBottom:10, flexDirection:'row', flexWrap:'wrap', justifyContent:'center'}}>
-                        {past_bracket_ids.map((id, index) => {
+                    <View type='header' style={{ padding:10, flexDirection:'row', flexWrap:'wrap', justifyContent:'center'}}>
+                        {closed_bracket_ids.map((id, index) => {
                             return renderBrackets({ item:id, index })
                         })}
                     </View>
@@ -512,6 +702,7 @@ const RoomHome = ({ visible, width, player, leagues, active_brackets, public_com
                 )
             case 'admin_competitions':
                 if(active_toggle != 'competitions'){ return <></> }
+                if(!player){ return <></> }
                 return (
                     <View>
                     <View type='header' style={{ padding:10, flexDirection:'row', alignItems:'center' }}>
@@ -524,23 +715,43 @@ const RoomHome = ({ visible, width, player, leagues, active_brackets, public_com
                             title='PREV'
                             type='text'
                             style={{ padding:0, marginRight:10 }}
-                            onPress={() => onMoreAdmin(admin_offset - 1)}
+                            onPress={() => getAdminComps(admin_offset - 1)}
                         />
                         :<></>}
                         <Button
                             title='MORE'
                             type='text'
                             style={{ padding:0 }}
-                            onPress={() => onMoreAdmin(admin_offset + 1)}
+                            onPress={() => getAdminComps(admin_offset + 1)}
                         />
                     </View>
                     <View style={{ padding:10 }}>
-                        <FlatList
-                            data={admin_competitions}
-                            renderItem={renderAdminCompetitions}
-                            keyExtractor={(item) => `admin_${item.bracket_competition_id.toString()}`}
-                            horizontal
-                        />
+                        <View style={{ flexDirection:'row' }}>
+                            {onCreateNewCompetition ?
+                            <View float style={{ width:100, margin:5, borderWidth:1, borderColor:Colors.text.success  }}>
+                                <View type='header' style={{ borderTopRightRadius:8, borderTopLeftRadius:8, padding:5 }}>
+                                    <Text style={{ padding:5 }} theme='description' textAlign='center'>NEW</Text>
+                                </View>
+                                <View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
+                                    <Icons.BracketIcon size={40} color={Colors.text.h1} />
+                                </View>
+                                <View type='footer' style={{ padding:8, borderBottomLeftRadius:8, borderBottomRightRadius:8 }}>
+                                    <Button
+                                        title='CREATE'
+                                        type='success'
+                                        style={{padding:5}}
+                                        onPress={() => onCreateNewCompetition()}
+                                    />
+                                </View>
+                            </View>
+                            :<></>}
+                            <FlatList
+                                data={admin_competitions}
+                                renderItem={renderAdminCompetitions}
+                                keyExtractor={(item) => `admin_${item.bracket_competition_id.toString()}`}
+                                horizontal
+                            />
+                        </View>
                     </View>
                     </View>
                 )
@@ -556,9 +767,9 @@ const RoomHome = ({ visible, width, player, leagues, active_brackets, public_com
                             <Button
                                 float
                                 style={{ padding:0, height:35, width:35, justifyContent:'center', alignItems:'center' }}
-                                onPress={() => setShowCompetitionSearch(!show_competition_search)}
+                                onPress={() => setCompSearch({ visible: !comp_search.visible, value: '' })}
                             >
-                                {show_competition_search ?
+                                {comp_search.visible ?
                                 <Icons.CloseIcon size={12} color={Colors.text.error} />
                                 :
                                 <Icons.SearchIcon size={12} color={Colors.text.action} />
@@ -575,16 +786,16 @@ const RoomHome = ({ visible, width, player, leagues, active_brackets, public_com
                             </Button>
                             :<></>}
                         </View>
-                        {show_competition_search ?
+                        {comp_search.visible ?
                         <SearchBox
-                            onChange={(text) => setCompetitionSearch(text)}
-                            onSearch={(text) => console.log(text)}
+                            onChange={(text) => setCompSearch({ ...comp_search, value:text })}
+                            onSearch={(text) => handleSearchPrivate(text)}
                             placeholder='Search or Enter Private Code'
                             onFocusPosition={onFocusPosition}  
                         />
                         :<></>}
                         <View type='body' style={{ marginTop:10, marginBottom:10, flexDirection:'row', flexWrap:'wrap', justifyContent:'center'}}>
-                            {competition_league_ids.map((id, index) => {
+                            {unique_competition_leagues.map((id, index) => {
                                 return renderLeaguesForCompetitions({ item:id, index })
                             })}
                         </View>
@@ -595,15 +806,43 @@ const RoomHome = ({ visible, width, player, leagues, active_brackets, public_com
     }
 
     if(!visible){ return <></> }
-
     return (
         <View style={{ flex:1 }}>
             <FlatList
                 data={sections}
                 key='room_sections'
+                refreshing={my_brackets_loading}
                 keyExtractor={(item) => item}
                 renderItem={renderSections}
             />
+                <EditPlayerBracket
+                    player_bracket={editing_player_bracket}
+                    view_mode={view_mode}
+                    insets={insets}
+                    onClose={() => setEditingPlayerBracket(undefined)}
+                    onFocusPosition={onFocusPosition}
+                    onUpdatePlayerBracket={(new_pb) => {
+                        setEditingPlayerBracket(undefined);
+                        setMyBrackets({
+                            ...my_brackets_data,
+                            player_brackets: player_brackets.filter(pb => pb.player_bracket_id != new_pb.player_bracket_id).concat(new_pb)
+                        })
+                    }}
+                />
+                <EnteredCompetitionsModal
+                    player_bracket={show_comps.player_bracket}
+                    onSelectCompetition={(bc) => {
+                        if(!show_comps.player_bracket){ return }
+                        onView(show_comps.player_bracket.bracket_id, show_comps.player_bracket.player_bracket_id, bc)
+                    }}
+                    insets={insets}
+                    champion_team={show_comps.champion_team}
+                    champion_athlete={show_comps.champion_athlete}
+                    onClose={() => setShowComps({ entered_brackets:[], entered_competitions:[] })}
+                    entered_brackets={show_comps.entered_brackets}
+                    entered_competitions={show_comps.entered_competitions}
+                    view_mode={view_mode}
+                />
         </View>
     )
 }