be-components 4.5.5 → 4.5.6

package/lib/module/Bracket/components/RoomHome.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Button, Text, View } from '../../Components/Themed';
 import { FlatList, Image } from 'react-native';
 import PlayerBracketCard from './PlayerBracketCard';
@@ -6,7 +6,9 @@ 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 } from '../api';
+import EditPlayerBracket from './EditPlayerBracket';
+import EnteredCompetitionsModal from './EnteredCompetitionsModal';
 const MIN_CARD_WIDTH = 330;
 const calcCardWidth = (width, margin) => {
   let num_cards_possible = Math.floor(width / MIN_CARD_WIDTH);
@@ -19,79 +21,241 @@ const calcCardWidth = (width, margin) => {
 };
 const sections = ['toggle', 'active_brackets', 'past_brackets', 'tournaments', 'admin_competitions', 'competitions'];
 const RoomHome = ({
+  view_mode,
   visible,
   width,
   player,
   leagues,
-  active_brackets,
-  public_competitions,
-  admin_competitions,
-  onMoreAdmin,
-  admin_offset,
+  insets,
   onManageCompetition,
   onCreateNewCompetition,
   onView,
-  onUpdatePlayerBracket,
-  onEditPlayerBracket,
-  onFocusPosition,
-  brackets,
-  player_brackets,
-  bracket_competitions,
-  competition_player_brackets,
-  athletes,
-  teams
+  onFocusPosition
 }) => {
   const Colors = useColors();
+  const [active_toggle, setActiveToggle] = useState('my_brackets');
+  const [show_comps, setShowComps] = useState({
+    entered_brackets: [],
+    entered_competitions: []
+  });
+  const [editing_player_bracket, setEditingPlayerBracket] = useState(undefined);
+  const [admin_data, setAdminData] = useState({
+    admin_loading: false,
+    admin_brackets: [],
+    admin_competitions: [],
+    admin_offset: 0
+  });
+  const {
+    admin_competitions,
+    admin_offset
+  } = admin_data;
+  const [competitions_data, setCompetitionsData] = useState({
+    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: false,
+    tournament_brackets: []
+  });
+  const {
+    tournament_brackets
+  } = tournaments_data;
+  let visisble_tourney_brackets = [...tournament_brackets];
+  const [selected_league, setSelectedLeague] = useState(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: 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(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([]);
   const [expanded_leagues, setExpandedLeagues] = useState([]);
   const [expanded_c_leagues, setExpandedCLeagues] = useState([]);
-  const [active_search, setActiveSearch] = useState('');
-  const [show_past_search, setShowPastSearch] = useState(false);
-  const [show_brackets_search, setShowBracketsSearch] = useState(false);
-  const [selected_league, setSelectedLeague] = useState(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)) ];
+  useEffect(() => {
+    if (!visible) {
+      return;
+    }
+    getData(active_toggle);
+  }, [visible, active_toggle]);
+  const getData = async toggle => {
+    switch (toggle) {
+      case 'my_brackets':
+        getMyBrackets();
+        return;
+      case 'tournaments':
+        getTournaments();
+        return;
+      case 'competitions':
+        getCompetitions();
+        return;
+      default:
+        return;
+    }
+  };
+  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 getAdminComps = async offset => {
+    const admin_comps = await BracketComeptitionApi.getMyAdminCompetitions(offset);
+    setAdminData({
+      admin_loading: false,
+      admin_brackets: [],
+      admin_competitions: admin_comps,
+      admin_offset: offset
+    });
+  };
+  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 () => {
+    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, player_bracket_id, bracket_competition) => {
+    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;
+      }
+    }
 
-  const filterPlayerBrackets = (bs, pbs, status, search) => {
-    let init_pbs = pbs.filter(pb => pb.status == status);
-    if (!search || search == '') {
-      return init_pbs;
+    //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);
+      }
     }
-    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()));
+    return onView(bracket_id, init_pb_id, init_bc);
   };
-  let visible_player_brackets = useMemo(() => {
-    return filterPlayerBrackets(brackets, player_brackets, 'active', active_search);
-  }, [brackets.length, player_brackets.length, active_search]);
-  const active_bracket_ids = [...new Set(visible_player_brackets.map(pb => pb.bracket_id))];
-  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 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 => {
-    const bracket = brackets.find(b => b.bracket_id == data.item);
+    const bracket = my_brackets.find(b => b.bracket_id == data.item);
     if (!bracket) {
       return /*#__PURE__*/React.createElement(React.Fragment, null);
     }
     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);
@@ -99,6 +263,7 @@ const RoomHome = ({
     const league = leagues.find(l => l.league_id == bracket.league_id);
     const act_loading = action_loading == data.item ? true : false;
     return /*#__PURE__*/React.createElement(View, {
+      key: `${data.item}_${data.index}_bracket`,
       float: true,
       style: {
         margin: 5,
@@ -109,7 +274,9 @@ const RoomHome = ({
       style: {
         flexDirection: 'row',
         alignItems: 'center',
-        padding: 10
+        padding: 10,
+        borderTopRightRadius: 8,
+        borderTopLeftRadius: 8
       }
     }, league ? /*#__PURE__*/React.createElement(Image, {
       style: {
@@ -174,11 +341,14 @@ const RoomHome = ({
           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)
+        });
       }
     }) : /*#__PURE__*/React.createElement(React.Fragment, null)), /*#__PURE__*/React.createElement(View, {
       style: {
@@ -215,7 +385,7 @@ const RoomHome = ({
         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)
     }, /*#__PURE__*/React.createElement(View, {
       transparent: true
     }, /*#__PURE__*/React.createElement(Image, {
@@ -293,7 +463,9 @@ const RoomHome = ({
     })), /*#__PURE__*/React.createElement(View, {
       type: "footer",
       style: {
-        padding: 8
+        padding: 8,
+        borderBottomLeftRadius: 8,
+        borderBottomRightRadius: 8
       }
     }, /*#__PURE__*/React.createElement(Button, {
       type: "action",
@@ -304,16 +476,24 @@ const RoomHome = ({
       onPress: () => onManageCompetition(data.item.bracket_competition_id)
     })));
   };
-  const renderPlayerBrackets = useCallback(data => {
+  const handleSearchPrivate = async code => {
+    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 => {
     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 /*#__PURE__*/React.createElement(React.Fragment, null);
     }
     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 /*#__PURE__*/React.createElement(View, {
       style: {
         borderBottomWidth: 1,
@@ -328,10 +508,17 @@ const RoomHome = ({
       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
+      })
     }));
-  }, [JSON.stringify(player_brackets)]);
+  };
   const renderLeagueFilters = data => {
     const league = leagues.find(l => l.league_id == data.item);
     if (!league) {
@@ -347,7 +534,8 @@ const RoomHome = ({
         paddingRight: 10,
         paddingLeft: 10,
         borderRadius: 100,
-        margin: 5
+        margin: 5,
+        backgroundColor: selected ? Colors.text.highlight : undefined
       },
       onPress: () => selected ? setSelectedLeague(undefined) : setSelectedLeague(data.item)
     }, /*#__PURE__*/React.createElement(Image, {
@@ -374,7 +562,7 @@ const RoomHome = ({
         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)
     }, /*#__PURE__*/React.createElement(Icons.BracketIcon, {
       size: 18,
       color: Colors.text.h1
@@ -406,7 +594,7 @@ const RoomHome = ({
     }
     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;
@@ -494,7 +682,7 @@ const RoomHome = ({
       return /*#__PURE__*/React.createElement(React.Fragment, null);
     }
     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);
@@ -579,7 +767,8 @@ const RoomHome = ({
       case 'toggle':
         return /*#__PURE__*/React.createElement(View, {
           style: {
-            margin: 5
+            margin: 10,
+            marginTop: 18
           }
         }, /*#__PURE__*/React.createElement(Toggle, {
           options: [{
@@ -600,13 +789,17 @@ const RoomHome = ({
           return /*#__PURE__*/React.createElement(React.Fragment, null);
         }
         return /*#__PURE__*/React.createElement(View, {
-          nativeID: "my_competitions"
+          nativeID: "my_competitions",
+          style: {
+            marginTop: 18
+          }
         }, /*#__PURE__*/React.createElement(View, {
-          type: "header",
           style: {
-            padding: 10,
+            padding: 18,
             flexDirection: 'row',
-            alignItems: 'center'
+            alignItems: 'center',
+            borderBottomWidth: 1,
+            borderColor: Colors.borders.light
           }
         }, /*#__PURE__*/React.createElement(View, {
           transparent: true,
@@ -629,22 +822,28 @@ const RoomHome = ({
             justifyContent: 'center',
             alignItems: 'center'
           },
-          onPress: () => setShowActiveSearch(!show_active_search)
-        }, show_active_search ? /*#__PURE__*/React.createElement(Icons.CloseIcon, {
+          onPress: () => setActiveSearch({
+            visible: !active_search.visible,
+            value: ''
+          })
+        }, active_search.visible ? /*#__PURE__*/React.createElement(Icons.CloseIcon, {
           size: 14,
           color: Colors.text.error
         }) : /*#__PURE__*/React.createElement(Icons.SearchIcon, {
           size: 14,
           color: Colors.text.action
-        }))), show_active_search ? /*#__PURE__*/React.createElement(SearchBox, {
-          onChange: text => setActiveSearch(text),
+        }))), active_search.visible ? /*#__PURE__*/React.createElement(SearchBox, {
+          onChange: text => setActiveSearch({
+            ...active_search,
+            value: text
+          }),
           hide_search_button: true,
           placeholder: "Search Active Brackets",
           onFocusPosition: onFocusPosition
         }) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(View, {
-          type: "body",
+          type: "header",
           style: {
-            marginBottom: 10,
+            padding: 10,
             flexDirection: 'row',
             flexWrap: 'wrap',
             justifyContent: 'center'
@@ -687,25 +886,31 @@ const RoomHome = ({
             justifyContent: 'center',
             alignItems: 'center'
           },
-          onPress: () => setShowBracketsSearch(!show_brackets_search)
-        }, show_brackets_search ? /*#__PURE__*/React.createElement(Icons.CloseIcon, {
+          onPress: () => setTourneySearch({
+            visible: !tourney_search.visible,
+            value: ''
+          })
+        }, tourney_search.visible ? /*#__PURE__*/React.createElement(Icons.CloseIcon, {
           size: 14,
           color: Colors.text.error
         }) : /*#__PURE__*/React.createElement(Icons.SearchIcon, {
           size: 14,
           color: Colors.text.action
-        }))), show_brackets_search ? /*#__PURE__*/React.createElement(View, {
+        }))), tourney_search.visible ? /*#__PURE__*/React.createElement(View, {
           style: {
             padding: 5
           }
         }, /*#__PURE__*/React.createElement(FlatList, {
           key: "unique_leagues",
           keyExtractor: item => item,
-          data: unique_leages,
+          data: unique_tournament_leagues,
           renderItem: renderLeagueFilters,
           horizontal: true
-        })) : /*#__PURE__*/React.createElement(React.Fragment, null), show_brackets_search ? /*#__PURE__*/React.createElement(SearchBox, {
-          onChange: text => setBracketsSearch(text),
+        })) : /*#__PURE__*/React.createElement(React.Fragment, null), tourney_search.visible ? /*#__PURE__*/React.createElement(SearchBox, {
+          onChange: text => setTourneySearch({
+            ...tourney_search,
+            value: text
+          }),
           hide_search_button: true,
           placeholder: "Search Active Tournaments",
           onFocusPosition: onFocusPosition
@@ -718,7 +923,7 @@ const RoomHome = ({
             flexWrap: 'wrap',
             justifyContent: 'center'
           }
-        }, unique_leages.map((id, index) => {
+        }, unique_tournament_leagues.map((id, index) => {
           return renderLeagues({
             item: id,
             index
@@ -729,13 +934,17 @@ const RoomHome = ({
           return /*#__PURE__*/React.createElement(React.Fragment, null);
         }
         return /*#__PURE__*/React.createElement(View, {
-          nativeID: "past_brackets"
+          nativeID: "past_brackets",
+          style: {
+            marginTop: 18
+          }
         }, /*#__PURE__*/React.createElement(View, {
-          type: "header",
           style: {
-            padding: 10,
+            padding: 18,
             flexDirection: 'row',
-            alignItems: 'center'
+            alignItems: 'center',
+            borderBottomWidth: 1,
+            borderColor: Colors.borders.light
           }
         }, /*#__PURE__*/React.createElement(View, {
           transparent: true,
@@ -745,7 +954,7 @@ const RoomHome = ({
           }
         }, /*#__PURE__*/React.createElement(Text, {
           theme: "h1"
-        }, "MY PAST BRACKETS"), /*#__PURE__*/React.createElement(Text, {
+        }, "My Past Brackets"), /*#__PURE__*/React.createElement(Text, {
           style: {
             marginTop: 4
           }
@@ -758,27 +967,33 @@ const RoomHome = ({
             justifyContent: 'center',
             alignItems: 'center'
           },
-          onPress: () => setShowPastSearch(!show_past_search)
-        }, show_past_search ? /*#__PURE__*/React.createElement(Icons.CloseIcon, {
+          onPress: () => setPastSearch({
+            visible: !past_search.visible,
+            value: ''
+          })
+        }, past_search.visible ? /*#__PURE__*/React.createElement(Icons.CloseIcon, {
           size: 14,
           color: Colors.text.error
         }) : /*#__PURE__*/React.createElement(Icons.SearchIcon, {
           size: 14,
           color: Colors.text.action
-        }))), show_past_search ? /*#__PURE__*/React.createElement(SearchBox, {
-          onChange: text => setPastSearch(text),
+        }))), past_search.visible ? /*#__PURE__*/React.createElement(SearchBox, {
+          onChange: text => setPastSearch({
+            ...past_search,
+            value: text
+          }),
           hide_search_button: true,
           placeholder: "Search Past Brackets",
           onFocusPosition: onFocusPosition
         }) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(View, {
-          type: "body",
+          type: "header",
           style: {
-            marginBottom: 10,
+            padding: 10,
             flexDirection: 'row',
             flexWrap: 'wrap',
             justifyContent: 'center'
           }
-        }, past_bracket_ids.map((id, index) => {
+        }, closed_bracket_ids.map((id, index) => {
           return renderBrackets({
             item: id,
             index
@@ -814,24 +1029,72 @@ const RoomHome = ({
             padding: 0,
             marginRight: 10
           },
-          onPress: () => onMoreAdmin(admin_offset - 1)
+          onPress: () => getAdminComps(admin_offset - 1)
         }) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(Button, {
           title: "MORE",
           type: "text",
           style: {
             padding: 0
           },
-          onPress: () => onMoreAdmin(admin_offset + 1)
+          onPress: () => getAdminComps(admin_offset + 1)
         })), /*#__PURE__*/React.createElement(View, {
           style: {
             padding: 10
           }
-        }, /*#__PURE__*/React.createElement(FlatList, {
+        }, /*#__PURE__*/React.createElement(View, {
+          style: {
+            flexDirection: 'row'
+          }
+        }, onCreateNewCompetition ? /*#__PURE__*/React.createElement(View, {
+          float: true,
+          style: {
+            width: 100,
+            margin: 5,
+            borderWidth: 1,
+            borderColor: Colors.text.success
+          }
+        }, /*#__PURE__*/React.createElement(View, {
+          type: "header",
+          style: {
+            borderTopRightRadius: 8,
+            borderTopLeftRadius: 8,
+            padding: 5
+          }
+        }, /*#__PURE__*/React.createElement(Text, {
+          style: {
+            padding: 5
+          },
+          theme: "description",
+          textAlign: "center"
+        }, "NEW")), /*#__PURE__*/React.createElement(View, {
+          style: {
+            flex: 1,
+            justifyContent: 'center',
+            alignItems: 'center'
+          }
+        }, /*#__PURE__*/React.createElement(Icons.BracketIcon, {
+          size: 40,
+          color: Colors.text.h1
+        })), /*#__PURE__*/React.createElement(View, {
+          type: "footer",
+          style: {
+            padding: 8,
+            borderBottomLeftRadius: 8,
+            borderBottomRightRadius: 8
+          }
+        }, /*#__PURE__*/React.createElement(Button, {
+          title: "CREATE",
+          type: "success",
+          style: {
+            padding: 5
+          },
+          onPress: () => onCreateNewCompetition()
+        }))) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(FlatList, {
           data: admin_competitions,
           renderItem: renderAdminCompetitions,
           keyExtractor: item => `admin_${item.bracket_competition_id.toString()}`,
           horizontal: true
-        })));
+        }))));
       case 'competitions':
         if (active_toggle != 'competitions') {
           return /*#__PURE__*/React.createElement(React.Fragment, null);
@@ -866,8 +1129,11 @@ const RoomHome = ({
             justifyContent: 'center',
             alignItems: 'center'
           },
-          onPress: () => setShowCompetitionSearch(!show_competition_search)
-        }, show_competition_search ? /*#__PURE__*/React.createElement(Icons.CloseIcon, {
+          onPress: () => setCompSearch({
+            visible: !comp_search.visible,
+            value: ''
+          })
+        }, comp_search.visible ? /*#__PURE__*/React.createElement(Icons.CloseIcon, {
           size: 12,
           color: Colors.text.error
         }) : /*#__PURE__*/React.createElement(Icons.SearchIcon, {
@@ -891,9 +1157,12 @@ const RoomHome = ({
         }, "+"), /*#__PURE__*/React.createElement(Icons.TrophyIcon, {
           color: Colors.text.white,
           size: 14
-        })) : /*#__PURE__*/React.createElement(React.Fragment, null)), show_competition_search ? /*#__PURE__*/React.createElement(SearchBox, {
-          onChange: text => setCompetitionSearch(text),
-          onSearch: text => console.log(text),
+        })) : /*#__PURE__*/React.createElement(React.Fragment, null)), comp_search.visible ? /*#__PURE__*/React.createElement(SearchBox, {
+          onChange: text => setCompSearch({
+            ...comp_search,
+            value: text
+          }),
+          onSearch: text => handleSearchPrivate(text),
           placeholder: "Search or Enter Private Code",
           onFocusPosition: onFocusPosition
         }) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(View, {
@@ -905,7 +1174,7 @@ const RoomHome = ({
             flexWrap: 'wrap',
             justifyContent: 'center'
           }
-        }, competition_league_ids.map((id, index) => {
+        }, unique_competition_leagues.map((id, index) => {
           return renderLeaguesForCompetitions({
             item: id,
             index
@@ -925,8 +1194,40 @@ const RoomHome = ({
   }, /*#__PURE__*/React.createElement(FlatList, {
     data: sections,
     key: "room_sections",
+    refreshing: my_brackets_loading,
     keyExtractor: item => item,
     renderItem: renderSections
+  }), /*#__PURE__*/React.createElement(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)
+      });
+    }
+  }), /*#__PURE__*/React.createElement(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
   }));
 };
 export default RoomHome;