be-components 4.5.5 → 4.5.6

package/lib/module/Bracket/index.js

@@ -1,14 +1,12 @@
 import React, { useEffect, useState } from 'react';
-import { BracketApi, BracketComeptitionApi, BracketCompetitionHelpers } from './api';
+import { BracketApi, BracketComeptitionApi } from './api';
 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';
 const sections = ['header', 'home', 'bracket_selector', 'bracket'];
 const MAX_WIDTH = 1200;
@@ -31,7 +29,16 @@ const BracketRoom = ({
   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({
+    competition_player_brackets: [],
+    player_brackets: []
+  });
+  const {
+    player_brackets,
+    competition_player_brackets
+  } = play_data;
   const [local_balance, setLocalBalance] = useState(player_balance);
+  const [player, setPlayer] = useState(undefined);
   const [static_data, setStaticData] = useState({
     static_loaded: false,
     leagues: [],
@@ -42,90 +49,83 @@ const BracketRoom = ({
     leagues,
     static_loaded
   } = static_data;
-  const [room_data, setRoomData] = useState({
-    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(undefined);
   const [nav_data, setNavData] = useState({
     active_nav: 'home'
   });
   const {
     active_nav,
     active_bracket_id,
-    active_competition_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({
-    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: 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]);
-
-  //DATA LOADING FUNCTIONS
-  const loadData = async (bracket_id, bracket_competition_id) => {
-    let pbs = [];
+    getStaticData();
+  }, []);
+  useEffect(() => {
     if (!static_loaded) {
-      setLoading('Setting up the bracket room ...');
-      await getStaticData();
+      return;
     }
-    if (player_id) {
-      setLoading('Getting your data ...');
-      const my_response = await getMyData(player_id, bracket_id, bracket_competition_id);
-      pbs = my_response?.player_brackets ?? [];
+    if (!player_id) {
+      return;
     }
-    if (!room_loaded) {
-      setLoading('Building the bracket ...');
-      await getRoomData(pbs, bracket_id, bracket_competition_id);
+    getMyData();
+  }, [static_loaded, player_id]);
+  useEffect(() => {
+    if (!bracket_id && !bracket_competition_id) {
+      return;
     }
-    setLoading(undefined);
-  };
-  const getAdminData = async page => {
-    const admin_comps = await BracketComeptitionApi.getMyAdminCompetitions(page);
-    setMyAdminData({
-      admin_offset: page,
-      admin_competitions: admin_comps
+    if (!static_loaded) {
+      return;
+    }
+    setUpInitData(bracket_id, bracket_competition_id);
+  }, [static_loaded, player_id, bracket_id, bracket_competition_id]);
+  const setUpInitData = async (bracket_id, bracket_competition_id) => {
+    let init_bracket_id = bracket_id;
+    let bc = undefined;
+    let active_pb_id = 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 (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
+      });
+    }
+    setNavData({
+      ...nav_data,
+      active_nav: 'bracket',
+      active_player_bracket_id: active_pb_id,
+      active_bracket_id: init_bracket_id,
+      active_competition: bc
     });
   };
+  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({
@@ -134,83 +134,22 @@ const BracketRoom = ({
       leagues: lgs,
       competition_result_types: comp_options.competition_result_types
     });
+    setTimeout(() => setLoading(undefined), 500);
   };
-  const getRoomData = async (local_pbs, bracket_id, bracket_competition_id) => {
-    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, player_bracket_id, bracket_competition) => {
+    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, bracket_id, bracket_competition_id) => {
-    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 => {
     switch (data.item) {
@@ -218,53 +157,29 @@ const BracketRoom = ({
         return /*#__PURE__*/React.createElement(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 /*#__PURE__*/React.createElement(React.Fragment, null);
+        }
         return /*#__PURE__*/React.createElement(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,
           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':
         if (active_nav != 'bracket') {
@@ -274,19 +189,21 @@ const BracketRoom = ({
           return /*#__PURE__*/React.createElement(React.Fragment, null);
         }
         return /*#__PURE__*/React.createElement(BracketPlay, {
-          width: section_width
-          //player={player}
-          ,
+          width: section_width,
+          player: player,
           onRequestAuthenticate: () => onRequestAuthenticate(active_competition?.auth_strategy_id),
-          onEditPlayerBracket: pb => {
-            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,
+            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)
             });
@@ -321,24 +238,37 @@ const BracketRoom = ({
     data: sections,
     keyExtractor: item => item,
     refreshing: loading ? true : false,
-    onRefresh: () => loadData(),
     key: 'bracket_sections',
     renderItem: renderSections
-  })), mode == 'small' && active_bracket_id ? /*#__PURE__*/React.createElement(Button, {
-    float: true,
+  })), /*#__PURE__*/React.createElement(Modal, {
+    visible: show_competition_actions,
+    transparent: true,
     style: {
-      padding: 0,
-      backgroundColor: Colors.text.action,
-      borderBottomRightRadius: 0,
-      borderBottomLeftRadius: 0
+      flex: 1
     },
-    onPress: () => setShowCompetitionActions(true)
+    animationType: 'slide'
+  }, /*#__PURE__*/React.createElement(View, {
+    type: "blur",
+    style: {
+      flex: 1,
+      justifyContent: 'flex-end',
+      padding: 10,
+      paddingBottom: (insets?.bottom ?? 0) + 10
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    float: true,
+    style: {
+      maxHeight: 700
+    }
   }, active_competition ? /*#__PURE__*/React.createElement(View, {
     transparent: true,
     style: {
+      backgroundColor: Colors.text.action,
       flexDirection: 'row',
       alignItems: 'center',
-      padding: 10
+      padding: 10,
+      borderTopRightRadius: 8,
+      borderTopLeftRadius: 8
     }
   }, /*#__PURE__*/React.createElement(Image, {
     source: {
@@ -365,128 +295,116 @@ const BracketRoom = ({
     theme: "description",
     color: Colors.text.white
   }, active_competition.competition_name)), /*#__PURE__*/React.createElement(Button, {
+    type: "text",
     float: true,
-    disabled: true,
-    type: "action",
-    title: "VIEW",
-    onPress: () => console.log('')
-  })) : /*#__PURE__*/React.createElement(View, {
-    transparent: true,
     style: {
+      padding: 10,
       flexDirection: 'row',
-      alignItems: 'center',
-      padding: 10
-    }
-  }, /*#__PURE__*/React.createElement(Icons.BracketIcon, {
-    size: 20,
-    color: Colors.text.white
-  }), /*#__PURE__*/React.createElement(View, {
-    transparent: true,
-    style: {
-      flex: 1,
-      marginLeft: 10
-    }
-  }, /*#__PURE__*/React.createElement(Text, {
-    theme: "h2",
-    color: Colors.text.white
-  }, "Available Competitions"), /*#__PURE__*/React.createElement(Text, {
-    style: {
-      marginTop: 3
+      alignItems: 'center'
     },
-    theme: "description",
+    onPress: () => {
+      setShowCompetitionActions(false);
+      setTimeout(() => {
+        onShareCompetition(active_competition);
+      }, 500);
+    }
+  }, /*#__PURE__*/React.createElement(Icons.ShareIcon, {
+    size: 14,
     color: Colors.text.white
-  }, "Press here to see eligible competitions to join!")), /*#__PURE__*/React.createElement(Button, {
-    float: true,
-    disabled: true,
-    type: "action",
-    title: "VIEW",
-    onPress: () => console.log('')
-  }))) : /*#__PURE__*/React.createElement(React.Fragment, null)), mode != 'small' && active_bracket_id ? /*#__PURE__*/React.createElement(View, {
-    type: "header",
+  }))) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(View, {
     style: {
-      width: 300
+      flexGrow: 1
     }
-  }, /*#__PURE__*/React.createElement(BracketCompetitionActions, {
+  }, active_bracket_id ? /*#__PURE__*/React.createElement(BracketCompetitionActions, {
     view_mode: view_mode,
+    onRequestAuthenticate: () => onRequestAuthenticate(active_competition?.auth_strategy_id),
     player: player,
+    hide_image: true,
     onManage: onManageCompetition,
+    onCreateNewCompetition: bracket_id => {
+      if (!onCreateNewCompetition) {
+        return;
+      }
+      setShowCompetitionActions(false);
+      setTimeout(() => {
+        onCreateNewCompetition(bracket_id);
+      }, 500);
+    },
     insets: insets,
-    onCreateNewCompetition: onCreateNewCompetition,
-    onRequestAuthenticate: () => onRequestAuthenticate(active_competition?.auth_strategy_id),
-    onSelectCompetition: bc => {
+    onFoundCompetition: bc => {
       setNavData({
         ...nav_data,
-        active_competition_id: bc.bracket_competition_id
+        active_competition: bc,
+        active_bracket_id: bc.bracket_id
       });
     },
-    onFoundCompetition: bc => {
-      setRoomData({
-        ...room_data,
-        public_competitions: public_competitions.filter(pc => pc.bracket_competition_id != bc.bracket_competition_id).concat(bc)
-      });
+    onSelectCompetition: async 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
+        active_competition: bc
       });
     },
     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
+          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_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,
+    player_bracket: player_brackets.find(pb => pb.player_bracket_id == active_player_bracket_id),
     competition_player_brackets: competition_player_brackets
-  })) : /*#__PURE__*/React.createElement(React.Fragment, null)), /*#__PURE__*/React.createElement(Modal, {
-    visible: show_competition_actions,
-    transparent: true,
+  }) : /*#__PURE__*/React.createElement(React.Fragment, null)), /*#__PURE__*/React.createElement(View, {
+    type: "footer",
+    style: {
+      flexDirection: 'row',
+      padding: 10
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
     style: {
       flex: 1
     },
-    animationType: 'slide'
-  }, /*#__PURE__*/React.createElement(View, {
-    type: "blur",
-    style: {
-      flex: 1,
-      justifyContent: 'flex-end',
-      padding: 10,
-      paddingBottom: (insets?.bottom ?? 0) + 10
-    }
-  }, /*#__PURE__*/React.createElement(View, {
+    title: "CLOSE",
+    type: "close",
+    onPress: () => setShowCompetitionActions(false)
+  }))))), mode == 'small' && active_bracket_id ? /*#__PURE__*/React.createElement(Button, {
     float: true,
     style: {
-      maxHeight: 700
-    }
+      padding: 0,
+      backgroundColor: Colors.text.action,
+      borderBottomRightRadius: 0,
+      borderBottomLeftRadius: 0
+    },
+    onPress: () => setShowCompetitionActions(true)
   }, active_competition ? /*#__PURE__*/React.createElement(View, {
     transparent: true,
     style: {
-      backgroundColor: Colors.text.action,
       flexDirection: 'row',
       alignItems: 'center',
-      padding: 10,
-      borderTopRightRadius: 8,
-      borderTopLeftRadius: 8
+      padding: 10
     }
   }, /*#__PURE__*/React.createElement(Image, {
     source: {
@@ -513,27 +431,48 @@ const BracketRoom = ({
     theme: "description",
     color: Colors.text.white
   }, active_competition.competition_name)), /*#__PURE__*/React.createElement(Button, {
-    type: "text",
     float: true,
+    disabled: true,
+    type: "action",
+    title: "VIEW",
+    onPress: () => console.log('')
+  })) : /*#__PURE__*/React.createElement(View, {
+    transparent: true,
     style: {
-      padding: 10,
       flexDirection: 'row',
-      alignItems: 'center'
-    },
-    onPress: () => {
-      setShowCompetitionActions(false);
-      setTimeout(() => {
-        onShareCompetition(active_competition);
-      }, 500);
+      alignItems: 'center',
+      padding: 10
     }
-  }, /*#__PURE__*/React.createElement(Icons.ShareIcon, {
-    size: 14,
+  }, /*#__PURE__*/React.createElement(Icons.TrophyIcon, {
+    size: 20,
     color: Colors.text.white
-  }))) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(View, {
+  }), /*#__PURE__*/React.createElement(View, {
+    transparent: true,
     style: {
-      flexGrow: 1
+      flex: 1,
+      marginLeft: 10
     }
-  }, active_bracket_id ? /*#__PURE__*/React.createElement(BracketCompetitionActions, {
+  }, /*#__PURE__*/React.createElement(Text, {
+    theme: "h2",
+    color: Colors.text.white
+  }, "Available Competitions"), /*#__PURE__*/React.createElement(Text, {
+    style: {
+      marginTop: 3
+    },
+    theme: "description",
+    color: Colors.text.white
+  }, "Press here to see eligible competitions to join!")), /*#__PURE__*/React.createElement(Button, {
+    float: true,
+    disabled: true,
+    type: "action",
+    title: "VIEW",
+    onPress: () => console.log('')
+  }))) : /*#__PURE__*/React.createElement(React.Fragment, null)), mode != 'small' && active_bracket_id ? /*#__PURE__*/React.createElement(View, {
+    type: "header",
+    style: {
+      width: 300
+    }
+  }, /*#__PURE__*/React.createElement(BracketCompetitionActions, {
     view_mode: view_mode,
     onRequestAuthenticate: () => onRequestAuthenticate(active_competition?.auth_strategy_id),
     player: player,
@@ -550,165 +489,52 @@ const BracketRoom = ({
     },
     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
+        active_competition: bc,
+        active_bracket_id: bc.bracket_id
       });
     },
-    onSelectCompetition: bc => {
+    onSelectCompetition: async bc => {
       setNavData({
         ...nav_data,
-        active_competition_id: bc.bracket_competition_id
+        active_bracket_id: bc.bracket_id,
+        active_competition: bc
       });
     },
     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
+          active_player_bracket_id: new_pb?.player_bracket_id,
+          active_competition: new_bc
         });
       }
-    },
-    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
-  }) : /*#__PURE__*/React.createElement(React.Fragment, null)), /*#__PURE__*/React.createElement(View, {
-    type: "footer",
-    style: {
-      flexDirection: 'row',
-      padding: 10
-    }
-  }, /*#__PURE__*/React.createElement(Button, {
-    style: {
-      flex: 1
-    },
-    title: "CLOSE",
-    type: "close",
-    onPress: () => setShowCompetitionActions(false)
-  }))))), /*#__PURE__*/React.createElement(Modal, {
-    visible: show_pb_selector,
-    style: {
-      flex: 1
-    },
-    transparent: true,
-    animationType: view_mode == 'desktop' ? 'fade' : 'slide'
-  }, /*#__PURE__*/React.createElement(View, {
-    type: "blur",
-    style: view_mode == 'desktop' ? {
-      flex: 1,
-      justifyContent: 'center',
-      alignItems: 'center'
-    } : {
-      flex: 1,
-      justifyContent: 'flex-end',
-      paddingBottom: insets?.bottom ?? 0
-    }
-  }, /*#__PURE__*/React.createElement(View, {
-    float: true,
-    style: view_mode == 'desktop' ? {
-      width: 500
-    } : {
-      margin: 10
-    }
-  }, /*#__PURE__*/React.createElement(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);
-      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)
+      setPlayData({
+        ...play_data,
+        player_brackets: new_pb ? player_brackets.concat(new_pb) : player_brackets,
+        competition_player_brackets: competition_player_brackets.concat(new_cpb)
       });
     },
-    teams: teams,
-    athletes: athletes,
-    bracket_competitions: bracket_competitions,
-    competition_player_brackets: competition_player_brackets,
-    onClose: () => setShowPBSelector(false),
-    onSelect: pb => {
-      setShowPBSelector(false);
+    competition_id: active_competition?.bracket_competition_id,
+    onLeaveCompetition: (bc, rem_cpb) => {
       setNavData({
         ...nav_data,
-        active_player_bracket_id: pb.player_bracket_id
+        active_competition: bc
       });
-    }
-  })))), /*#__PURE__*/React.createElement(Modal, {
-    visible: editing_player_bracket ? true : false,
-    style: {
-      flex: 1
-    },
-    transparent: true,
-    animationType: view_mode == 'desktop' ? 'fade' : 'slide'
-  }, /*#__PURE__*/React.createElement(View, {
-    type: "blur",
-    style: view_mode == 'desktop' ? {
-      flex: 1,
-      justifyContent: 'center',
-      alignItems: 'center'
-    } : {
-      flex: 1,
-      justifyContent: 'flex-end',
-      paddingBottom: insets?.bottom ?? 0
-    }
-  }, /*#__PURE__*/React.createElement(View, {
-    float: true,
-    style: view_mode == 'desktop' ? {
-      width: 500
-    } : {
-      margin: 10
-    }
-  }, /*#__PURE__*/React.createElement(EditPlayerBracket, {
-    player_bracket: editing_player_bracket,
-    onClose: () => setEditingPlayerBracket(undefined),
-    onFocusPosition: onFocusPosition,
-    onUpdatePlayerBracket: new_pb => {
-      setNavData({
-        ...nav_data,
-        active_player_bracket_id: undefined
+      setPlayData({
+        ...play_data,
+        competition_player_brackets: competition_player_brackets.filter(cpb => cpb.competition_player_bracket_id != rem_cpb.competition_player_bracket_id)
       });
-      setMyData({
-        ...my_data,
-        player_brackets: player_brackets.filter(pb => pb.player_bracket_id != new_pb.player_bracket_id).concat(new_pb)
-      });
-      if (new_pb.status != 'deleted') {
-        setTimeout(() => {
-          setNavData({
-            ...nav_data,
-            active_player_bracket_id: new_pb.player_bracket_id
-          });
-        }, 200);
-      }
-      setEditingPlayerBracket(undefined);
-    }
-  })))), loading ? /*#__PURE__*/React.createElement(View, {
+    },
+    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
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null)), loading ? /*#__PURE__*/React.createElement(View, {
     type: "blur",
     style: {
       position: 'absolute',