be-components 4.4.1 → 4.4.3

package/lib/module/Bracket/index.js

@@ -1,364 +1,947 @@
 import React, { useEffect, useState } from 'react';
-import PlayerBrackets from './components/PlayerBrackets';
-import { BracketApi, BracketComeptitionApi } from './api';
+import { BracketApi, BracketComeptitionApi, BracketCompetitionHelpers } from './api';
 import BracketPlay from './components/BracketPlay';
-import PlayerBracketManager from './components/PlayerBracketManager';
-import BracketSelector from './components/BracketSelector';
-import RoomMenu from './components/RoomMenu';
-import moment from 'moment-mini';
-import BracketCompetitionCard from './components/BracketCompetitionCard';
-import BracketCompetitionSelector from './components/BracketCompetitionSelector';
-import { View } from '../Components/Themed';
+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;
 const BracketRoom = ({
   player_id,
+  width,
+  view_mode,
   bracket_id,
+  insets,
   bracket_competition_id,
   player_balance,
   onRequestAuthenticate,
-  onShareCompetition,
-  onClose,
-  onNotEnoughBalance
+  onFocusPosition,
+  onShareCompetition
 }) => {
-  const [room_size, setRoomSize] = useState({
-    width: 0,
-    height: 0
-  });
-  const [local_balance, setLocalBalance] = useState(undefined);
-  const [room_data, setData] = useState({
-    loaded: false,
+  const Colors = useColors();
+  const [loading, setLoading] = useState(undefined);
+  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 [local_balance, setLocalBalance] = useState(player_balance);
+  const [static_data, setStaticData] = useState({
+    static_loaded: false,
     leagues: [],
-    competitions: [],
-    competition_result_types: [],
-    active_view: 'home',
-    brackets: []
+    competition_result_types: []
+  });
+  const {
+    competition_result_types,
+    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_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({
-    my_data_loaded: false,
+    teams: [],
+    athletes: [],
     player_brackets: [],
-    champion_athletes: [],
-    champion_teams: [],
+    brackets: [],
     bracket_competitions: [],
     competition_player_brackets: []
   });
   const {
-    my_data_loaded,
-    player,
-    player_brackets,
+    teams,
+    athletes,
+    brackets,
     bracket_competitions,
+    player_brackets,
     competition_player_brackets,
-    champion_teams,
-    champion_athletes
+    player
   } = my_data;
-  const {
-    loaded,
-    active_competition_id,
-    brackets,
-    active_view,
-    active_bracket_id,
-    active_player_bracket,
-    competition_result_types,
-    leagues
-  } = room_data;
-  const visible_player_brackets = player_brackets.filter(pb => pb.status != 'deleted');
-  useEffect(() => {
-    getData();
-  }, []);
+  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(() => {
-    if (!loaded) {
-      return;
+    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 = [];
+    if (!static_loaded) {
+      setLoading('Setting up the bracket room ...');
+      await getStaticData();
     }
-    getMyData();
-  }, [player_id, loaded]);
-  useEffect(() => {
-    if (!player_balance) {
-      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 ?? [];
     }
-    setLocalBalance(player_balance);
-  }, [player_balance]);
-  useEffect(() => {
-    if (!bracket_competition_id || !loaded) {
+    if (!room_loaded) {
+      setLoading('Building the bracket ...');
+      await getRoomData(pbs, bracket_id, bracket_competition_id);
+    }
+    setLoading(undefined);
+  };
+  const getStaticData = async () => {
+    setLoading('Loading Bracket Data ...');
+    const comp_options = await BracketComeptitionApi.getCompetitionOptions();
+    const lgs = await BracketApi.getLeagues();
+    setStaticData({
+      ...static_data,
+      static_loaded: true,
+      leagues: lgs,
+      competition_result_types: comp_options.competition_result_types
+    });
+  };
+  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);
+      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
+      });
+      if (mode == 'small') {
+        return setShowCompetitionActions(true);
+      }
       return;
     }
-    setData({
+    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,
-      active_competition_id: bracket_competition_id
+      room_loaded: true,
+      active_brackets: pub_brackets,
+      public_competitions: pub_competitions
     });
-  }, [bracket_competition_id]);
-
-  /*
-  useEffect(() => {
-      if(active_brackets.length == 0){ return }
-      setData({ ...room_data, active_player_bracket: active_brackets[0], active_view:'manage_bracket' })
-  },[active_brackets])
-  */
-
-  const getMyData = async () => {
+  };
+  const getMyData = async (player_id, bracket_id, bracket_competition_id) => {
     if (!player_id) {
-      setMyData({
-        ...my_data,
-        my_data_loaded: true
-      });
+      return;
     }
-    let player = await BracketComeptitionApi.getMyDetails();
-    let pbs = await BracketComeptitionApi.getMyPlayerBrackets();
-    let champ_team_ids = pbs.player_brackets.filter(pb => pb.champion_id_type == 'team').map(b => b.champion_id ?? '');
+    let p = await BracketComeptitionApi.getMyDetails();
+    let pb = await BracketComeptitionApi.getMyBalance();
+    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 = pbs.player_brackets.filter(pb => pb.champion_id_type == 'athlete').map(b => b.champion_id ?? '');
+    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,
-      player: player,
-      my_data_loaded: true,
-      player_brackets: pbs.player_brackets.filter(pb => pb.status != 'deleted').sort((a, b) => moment(a.create_datetime).unix() - moment(b.create_datetime).unix()),
-      bracket_competitions: pbs.bracket_competitions,
-      champion_athletes: champ_athletes,
-      champion_teams: champ_teams,
-      competition_player_brackets: pbs.competition_player_brackets
+      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 pb = await BracketComeptitionApi.getMyBalance();
-    setLocalBalance(pb);
+    return my_resp;
   };
-  const getData = async () => {
-    BracketApi.setEnvironment();
-    const b = await BracketApi.getActiveBrackets();
-    const ls = await BracketApi.getLeagues();
-    const res = await BracketComeptitionApi.getCompetitionOptions();
-    let comps = await BracketComeptitionApi.getBracketCompetitions();
-    setData({
-      ...room_data,
-      brackets: b,
-      leagues: ls,
-      competition_result_types: res.competition_result_types,
-      loaded: true,
-      active_bracket_id: bracket_id,
-      competitions: comps,
-      active_competition_id: bracket_competition_id,
-      active_view: bracket_competition_id ? 'competition' : bracket_id ? 'play_bracket' : 'home'
-    });
+  const renderSections = data => {
+    switch (data.item) {
+      case 'header':
+        return /*#__PURE__*/React.createElement(BracketHeader, {
+          view_mode: view_mode,
+          active_nav: active_nav,
+          bracket: active_bracket,
+          bracket_competition: active_competition,
+          onGoHome: () => setNavData({
+            ...nav_data,
+            active_bracket_id: undefined,
+            active_nav: 'home',
+            active_competition_id: undefined,
+            active_player_bracket_id: undefined
+          })
+        });
+      case 'home':
+        return /*#__PURE__*/React.createElement(RoomHome, {
+          player: player,
+          width: section_width,
+          brackets: brackets,
+          onUpdatePlayerBracket: new_pb => {
+            setMyData({
+              ...my_data,
+              player_brackets: player_brackets.filter(pb => pb.player_bracket_id != new_pb.player_bracket_id).concat(new_pb)
+            });
+          },
+          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
+        });
+      case 'bracket':
+        if (active_nav != 'bracket') {
+          return /*#__PURE__*/React.createElement(React.Fragment, null);
+        }
+        if (!active_bracket_id) {
+          return /*#__PURE__*/React.createElement(React.Fragment, null);
+        }
+        return /*#__PURE__*/React.createElement(BracketPlay, {
+          width: section_width
+          //player={player}
+          ,
+          onRequestAuthenticate: () => onRequestAuthenticate(active_competition?.auth_strategy_id),
+          onEditPlayerBracket: pb => {
+            setEditingPlayerBracket(pb);
+          },
+          onChangePlayerBracket: () => {
+            setShowPBSelector(true);
+          },
+          onPlayerBracketUpdate: (newpb, ncpbs) => {
+            setMyData({
+              ...my_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)
+            });
+          },
+          bracket_id: active_bracket_id,
+          player_bracket_id: active_player_bracket_id
+        });
+      default:
+        return /*#__PURE__*/React.createElement(React.Fragment, null);
+    }
   };
-  if (!loaded || !my_data_loaded) {
-    return;
-  }
   return /*#__PURE__*/React.createElement(View, {
+    style: {
+      flex: 1
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    style: {
+      flex: 1,
+      flexDirection: 'row'
+    }
+  }, /*#__PURE__*/React.createElement(View, {
     style: {
       flex: 1,
-      maxWidth: 600
+      alignItems: mode != 'small' ? 'center' : undefined
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    style: {
+      flex: 1,
+      width: section_width
+    }
+  }, /*#__PURE__*/React.createElement(FlatList, {
+    data: sections,
+    keyExtractor: item => item,
+    key: 'bracket_sections',
+    renderItem: renderSections
+  })), mode == 'small' && active_bracket_id ? /*#__PURE__*/React.createElement(Button, {
+    float: true,
+    style: {
+      padding: 0,
+      backgroundColor: Colors.text.action,
+      borderBottomRightRadius: 0,
+      borderBottomLeftRadius: 0
     },
-    onLayout: ev => {
-      const {
-        width,
-        height
-      } = ev.nativeEvent.layout;
-      setRoomSize({
-        width,
-        height
-      });
+    onPress: () => setShowCompetitionActions(true)
+  }, active_competition ? /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    style: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      padding: 10
     }
-  }, /*#__PURE__*/React.createElement(RoomMenu, {
-    visible: active_view == 'home' ? true : false,
-    onClose: onClose,
-    onOptionSelect: option => {
-      switch (option.key) {
-        case 'brackets':
-          return setData({
-            ...room_data,
-            active_view: 'select_bracket'
-          });
-        case 'my_brackets':
-          {
-            if (!player_id) {
-              return onRequestAuthenticate();
-            }
-            return setData({
-              ...room_data,
-              active_view: 'select_player_bracket'
-            });
-          }
-        case 'competitions':
-          return setData({
-            ...room_data,
-            active_view: 'select_competition'
-          });
-        default:
-          return;
-      }
+  }, /*#__PURE__*/React.createElement(Image, {
+    source: {
+      uri: active_competition.image?.url
+    },
+    style: {
+      height: 40,
+      width: 40
+    },
+    resizeMode: "cover"
+  }), /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    style: {
+      flex: 1,
+      marginLeft: 10
     }
-  }), /*#__PURE__*/React.createElement(BracketSelector, {
-    visible: active_view == 'select_bracket' ? true : false,
-    brackets: brackets,
-    leagues: leagues,
-    onClose: () => setData({
-      ...room_data,
-      active_view: 'home'
-    }),
-    onSelectBracket: async brack => {
-      let my_p_b = visible_player_brackets.find(b => b.bracket_id == brack.bracket_id);
-      setData({
-        ...room_data,
-        active_player_bracket: my_p_b,
-        active_bracket_id: brack.bracket_id,
-        active_view: 'play_bracket'
-      });
+  }, /*#__PURE__*/React.createElement(Text, {
+    theme: "h2",
+    color: Colors.text.white
+  }, active_competition.competition_name), /*#__PURE__*/React.createElement(Text, {
+    style: {
+      marginTop: 3
+    },
+    theme: "description",
+    color: Colors.text.white
+  }, active_competition.competition_name)), /*#__PURE__*/React.createElement(Button, {
+    float: true,
+    disabled: true,
+    type: "action",
+    title: "VIEW",
+    onPress: () => console.log('')
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null)) : /*#__PURE__*/React.createElement(React.Fragment, null)), mode != 'small' && active_bracket_id ? /*#__PURE__*/React.createElement(View, {
+    type: "header",
+    style: {
+      width: 300
     }
-  }), /*#__PURE__*/React.createElement(PlayerBrackets, {
-    visible: active_view == 'select_player_bracket' ? true : false,
-    brackets: brackets,
-    leagues: leagues,
-    teams: champion_teams,
-    athletes: champion_athletes,
-    player_brackets: visible_player_brackets,
-    competition_player_brackets: competition_player_brackets,
-    bracket_competitions: bracket_competitions,
-    onClose: () => setData({
-      ...room_data,
-      active_view: 'home'
-    }),
-    onSelect: pb => setData({
-      ...room_data,
-      active_view: 'manage_bracket',
-      active_player_bracket: pb,
-      active_bracket_id: pb.bracket_id
-    })
-  }), /*#__PURE__*/React.createElement(BracketCompetitionSelector, {
-    brackets: brackets,
-    leagues: leagues,
-    visible: active_view == 'select_competition' ? true : false,
-    onCompetitionSelect: bc => {
-      setData({
-        ...room_data,
-        active_view: 'competition',
+  }, /*#__PURE__*/React.createElement(BracketCompetitionActions, {
+    view_mode: view_mode,
+    player: player,
+    insets: insets,
+    onRequestAuthenticate: () => onRequestAuthenticate(active_competition?.auth_strategy_id),
+    onSelectCompetition: bc => {
+      setNavData({
+        ...nav_data,
         active_competition_id: bc.bracket_competition_id
       });
     },
-    onClose: () => setData({
-      ...room_data,
-      active_view: 'home'
-    })
-  }), /*#__PURE__*/React.createElement(BracketCompetitionCard, {
-    player: player,
-    onNotEnoughBalance: onNotEnoughBalance,
-    player_balance: local_balance,
-    bracket_competition_id: active_competition_id,
-    competition_result_types: competition_result_types,
-    height: room_size.height,
-    onUpdateMyData: data => {
-      setMyData({
-        ...my_data,
-        player_brackets: player_brackets.filter(pb => !data.player_brackets.find(npb => npb.player_bracket_id == pb.player_bracket_id)).concat(data.player_brackets),
-        competition_player_brackets: competition_player_brackets.filter(cpb => !data.competition_player_brackets.find(ncpb => ncpb.competition_player_bracket_id == cpb.competition_player_bracket_id)).concat(data.competition_player_brackets)
-      });
-      setData({
+    onFoundCompetition: bc => {
+      setRoomData({
         ...room_data,
-        active_bracket_id: data.bracket_id
+        public_competitions: public_competitions.filter(pc => pc.bracket_competition_id != bc.bracket_competition_id).concat(bc)
       });
-    },
-    onEnterCompetition: result => {
-      setMyData({
-        ...my_data,
-        competition_player_brackets: competition_player_brackets.filter(cpb => cpb.competition_player_bracket_id != result.competition_player_bracket.competition_player_bracket_id).concat(result.competition_player_bracket)
+      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
       });
     },
-    onLeaveCompetition: result => {
+    onFocusPosition: onFocusPosition,
+    player_brackets: player_brackets,
+    onEnterCompetition: (new_bc, new_cpb, new_pb) => {
       setMyData({
         ...my_data,
-        competition_player_brackets: competition_player_brackets.filter(cpb => cpb.competition_player_bracket_id != result.competition_player_bracket.competition_player_bracket_id)
+        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)
       });
-    },
-    onShareCompetition: onShareCompetition,
-    onViewBracket: bracket_id => {
-      const cpb = competition_player_brackets.find(cpb => cpb.bracket_competition_id == active_competition_id);
-      let my_pb = visible_player_brackets.find(pb => pb.player_bracket_id == cpb?.player_bracket_id);
-      if (!my_pb) {
-        my_pb = visible_player_brackets.find(pb => pb.bracket_id == bracket_id);
+      if (new_pb) {
+        setNavData({
+          ...nav_data,
+          active_player_bracket_id: new_pb.player_bracket_id
+        });
       }
-      setData({
-        ...room_data,
-        active_view: 'play_bracket',
-        active_bracket_id: bracket_id,
-        active_player_bracket: my_pb
-      });
     },
-    my_comp_player_brackets: competition_player_brackets.filter(cpb => cpb.bracket_competition_id == active_competition_id),
-    my_player_brackets: visible_player_brackets.filter(pb => pb.bracket_id == active_bracket_id),
-    onClose: () => setData({
-      ...room_data,
-      active_view: 'select_competition',
-      active_competition_id: undefined
+    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)
     }),
-    visible: active_view == 'competition' ? true : false
-  }), /*#__PURE__*/React.createElement(PlayerBracketManager, {
-    visible: active_view == 'manage_bracket' ? true : false,
+    competition_result_types: competition_result_types,
+    bracket_id: active_bracket_id,
+    player_balance: local_balance,
     player_bracket: active_player_bracket,
-    width: room_size.width,
-    teams: champion_teams,
-    athletes: champion_athletes,
-    onEditPicks: pb => {
-      setData({
+    competition_player_brackets: competition_player_brackets
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null)), /*#__PURE__*/React.createElement(Modal, {
+    visible: show_competition_actions,
+    transparent: true,
+    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, {
+    float: true,
+    style: {
+      maxHeight: 650
+    }
+  }, active_competition ? /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    style: {
+      backgroundColor: Colors.text.action,
+      flexDirection: 'row',
+      alignItems: 'center',
+      padding: 10,
+      borderTopRightRadius: 8,
+      borderTopLeftRadius: 8
+    }
+  }, /*#__PURE__*/React.createElement(Image, {
+    source: {
+      uri: active_competition.image?.url
+    },
+    style: {
+      height: 40,
+      width: 40
+    },
+    resizeMode: "cover"
+  }), /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    style: {
+      flex: 1,
+      marginLeft: 10
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    theme: "h2",
+    color: Colors.text.white
+  }, active_competition.competition_name), /*#__PURE__*/React.createElement(Text, {
+    style: {
+      marginTop: 3
+    },
+    theme: "description",
+    color: Colors.text.white
+  }, active_competition.competition_name)), /*#__PURE__*/React.createElement(Button, {
+    type: "text",
+    float: true,
+    style: {
+      padding: 10,
+      flexDirection: 'row',
+      alignItems: 'center'
+    },
+    onPress: () => {
+      setShowCompetitionActions(false);
+      setTimeout(() => {
+        onShareCompetition(active_competition);
+      }, 500);
+    }
+  }, /*#__PURE__*/React.createElement(Icons.ShareIcon, {
+    size: 14,
+    color: Colors.text.white
+  }))) : /*#__PURE__*/React.createElement(React.Fragment, null), active_bracket_id ? /*#__PURE__*/React.createElement(BracketCompetitionActions, {
+    view_mode: view_mode,
+    onRequestAuthenticate: () => onRequestAuthenticate(active_competition?.auth_strategy_id),
+    player: player,
+    hide_image: true,
+    insets: insets,
+    onFoundCompetition: bc => {
+      setRoomData({
         ...room_data,
-        active_player_bracket: pb,
-        active_view: 'play_bracket'
+        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
       });
     },
-    competition_player_brackets: competition_player_brackets.filter(cpb => cpb.player_bracket_id == active_player_bracket?.player_bracket_id),
     onSelectCompetition: bc => {
-      setData({
-        ...room_data,
-        active_view: 'competition',
+      setNavData({
+        ...nav_data,
         active_competition_id: bc.bracket_competition_id
       });
     },
-    bracket_competitions: bracket_competitions.filter(bc => bc.bracket_id == active_player_bracket?.bracket_id),
-    onClose: () => setData({
-      ...room_data,
-      active_view: 'select_player_bracket'
-    }),
-    onUpdateBracket: pb => {
+    onFocusPosition: onFocusPosition,
+    player_brackets: player_brackets,
+    onEnterCompetition: (new_bc, new_cpb, new_pb) => {
       setMyData({
         ...my_data,
-        player_brackets: player_brackets.filter(b => b.player_bracket_id != pb.player_bracket_id).concat(pb).sort((a, b) => moment(a.create_datetime).unix() - moment(b.create_datetime).unix())
-      });
-      setData({
-        ...room_data,
-        active_player_bracket: pb
+        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)
       });
-    }
-  }), /*#__PURE__*/React.createElement(BracketPlay, {
-    visible: active_view == 'play_bracket' ? true : false,
-    player: player,
-    onClose: () => {
-      if (active_competition_id) {
-        return setData({
-          ...room_data,
-          active_view: 'competition'
+      if (new_pb) {
+        setNavData({
+          ...nav_data,
+          active_player_bracket_id: new_pb.player_bracket_id
         });
       }
-      setData({
-        ...room_data,
-        active_view: 'select_bracket'
+    },
+    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)
       });
     },
-    onRequestAuthenticate: onRequestAuthenticate,
-    onChangePlayerBracket: () => {
-      setData({
-        ...room_data,
-        active_view: 'select_player_bracket'
+    teams: teams,
+    athletes: athletes,
+    bracket_competitions: bracket_competitions,
+    competition_player_brackets: competition_player_brackets,
+    onClose: () => setShowPBSelector(false),
+    onSelect: pb => {
+      setShowPBSelector(false);
+      setNavData({
+        ...nav_data,
+        active_player_bracket_id: pb.player_bracket_id
       });
+    }
+  })))), /*#__PURE__*/React.createElement(Modal, {
+    visible: editing_player_bracket ? true : false,
+    style: {
+      flex: 1
     },
-    onPlayerBracketUpdate: (pb, ncpbs) => {
-      setData({
-        ...room_data,
-        active_player_bracket: pb
+    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
       });
       setMyData({
         ...my_data,
-        player_brackets: player_brackets.filter(opb => opb.player_bracket_id != pb.player_bracket_id).concat(pb),
-        competition_player_brackets: competition_player_brackets.filter(cpb => !ncpbs.find(ncpb => ncpb.competition_player_bracket_id == cpb.competition_player_bracket_id)).concat(ncpbs)
+        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, {
+    type: "blur",
+    style: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    float: true,
+    style: {
+      width: 300,
+      height: 300
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    type: "header",
+    style: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      borderTopRightRadius: 8,
+      borderTopLeftRadius: 8,
+      padding: 10
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    theme: "h1"
+  }, "Bettor Brackets")), /*#__PURE__*/React.createElement(View, {
+    type: "body",
+    style: {
+      flex: 1,
+      justifyContent: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(ActivityIndicator, {
+    size: "large",
+    color: Colors.text.h1
+  }), /*#__PURE__*/React.createElement(Text, {
+    theme: "h2",
+    style: {
+      marginTop: 10
     },
-    bracket_id: active_bracket_id,
-    room_size: room_size,
-    player_bracket_id: active_player_bracket?.player_bracket_id
-  }));
+    textAlign: "center"
+  }, loading)))) : /*#__PURE__*/React.createElement(React.Fragment, null));
 };
 export default BracketRoom;
+
+/*
+{view_mode == 'desktop' ?
+                <View type='header'>
+                    <Navigator
+                        onOptionSelect={(option) => setData({ ...room_data, active_navigation: option.key })}
+                        active_option={active_navigation}
+                        visible={true}
+                    />
+                </View>
+                :<></>}
+*/
+
+/*
+                    <BracketPlay
+                        player={player}
+                        onRequestAuthenticate={onRequestAuthenticate}
+                        onChangePlayerBracket={() => {
+
+                        }}
+                        onPlayerBracketUpdate={(pb, ncpbs) => {
+
+                        }}
+                        bracket_id={active_bracket_id}
+                        room_size={room_size}
+                        player_bracket_id={active_player_bracket}
+                    />
+*/
+
+/*
+
+    const getMyData = async() => {
+        if(!player_id){ setMyData({ ...my_data, my_data_loaded:true }) }
+        //Lets set the local balance
+        const pb = await BracketComeptitionApi.getMyBalance();
+        setLocalBalance(pb);
+
+        //Lets grab what I need from the player
+        const player = await BracketComeptitionApi.getMyDetails();
+        
+        //Grab all their player brackets
+        let pbs = await BracketComeptitionApi.getMyPlayerBrackets();
+
+        let champ_team_ids = pbs.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 = pbs.player_brackets.filter(pb => pb.champion_id_type == 'athlete').map(b => b.champion_id ?? '')
+        const champ_athletes = await BracketApi.getAthletesByIds(champ_athlete_ids);
+        setMyData({
+            ...my_data,
+            player: player,
+            my_data_loaded: true,
+            player_brackets: pbs.player_brackets.filter(pb => pb.status != 'deleted').sort((a,b) => moment(a.create_datetime).unix() - moment(b.create_datetime).unix()),
+            champion_athletes: champ_athletes,
+            champion_teams: champ_teams,
+            competition_player_brackets: pbs.competition_player_brackets
+        })
+        return pbs
+    }
+
+*/
+/*
+const [ local_balance, setLocalBalance ] = useState<PlayerBalanceProps|undefined>(undefined);
+    const [ room_data, setData ] = useState<{
+        loaded:boolean,
+        active_navigation:'home'|'brackets'|'competitions',
+        leagues:LeagueProps[],
+        competition_result_types:CompetitionResultTypeProps[],
+       
+    }>({
+        loaded:false,
+        leagues: [],
+        active_navigation: 'brackets',
+        competition_result_types: [],
+    });
+    const [ play_data, setPlayData ] = useState<{
+        active_player_bracket?:string,
+        active_action?:string
+        active_bracket_id?:string,
+        active_competition_id?:string
+    }>({});
+    const { active_bracket_id, active_player_bracket, active_competition_id } = play_data;
+    const { loaded, active_navigation,  competition_result_types, leagues } = room_data;
+
+    const [ bracket_data, setBracketData ] = useState<{
+        brackets:BracketProps[],
+        bracket_competitions:BracketCompetitionProps[]
+    }>({
+        brackets:[],
+        bracket_competitions:[]
+    });
+    const { brackets, bracket_competitions } = bracket_data;
+*/
+
+/*
+{view_mode == 'desktop' && active_bracket ?
+                <View type='header' style={{ width:300 }}>
+                    <BracketCompetitionActions
+                        bracket={active_bracket}
+                        competition_id={active_competition_id}
+                        competition_player_brackets={competition_player_brackets}
+                    />
+                </View>
+                :<></>}
+*/
+
+/*
+ 
+            
+            <PlayerBrackets
+                visible={active_view == 'select_player_bracket' ? true : false}
+                brackets={brackets}
+                leagues={leagues}
+                teams={champion_teams}
+                athletes={champion_athletes}
+                player_brackets={visible_player_brackets}
+                competition_player_brackets={competition_player_brackets}
+                bracket_competitions={bracket_competitions}
+                onClose={() => setData({ ...room_data, active_view:'home' })}
+                onSelect={(pb) => setData({ ...room_data, active_view: 'manage_bracket', active_player_bracket: pb, active_bracket_id:pb.bracket_id })}
+            />
+            <BracketSelector
+                            brackets={brackets}
+                            view_mode={view_mode}
+                            leagues={leagues}
+                            onSelectBracket={async(brack) => {
+                                let my_p_b = visible_player_brackets.find(b => b.bracket_id == brack.bracket_id);
+                                setData({
+                                    ...room_data,
+                                    active_player_bracket:my_p_b,
+                                    active_bracket_id: brack.bracket_id,
+                                    active_action:'bracket'
+                                })
+                            }}
+                        />
+                        <BracketPlay
+                        player={player}
+                        onClose={() => {
+                            if(active_competition_id){ return setData({ ...room_data, active_toggle: 'brackets' }) }
+                            setData({ ...room_data, active_toggle:'brackets' })
+                        }}
+                        onRequestAuthenticate={onRequestAuthenticate}
+                        onChangePlayerBracket={() => {
+                            setData({
+                                ...room_data,
+                                active_toggle: 'brackets'
+                            })
+                        }}
+                        onPlayerBracketUpdate={(pb, ncpbs) => {
+                            setData({ ...room_data, active_player_bracket:pb })
+                            setMyData({ 
+                                ...my_data, 
+                                player_brackets: player_brackets.filter(opb => opb.player_bracket_id != pb.player_bracket_id).concat(pb),
+                                competition_player_brackets: competition_player_brackets.filter(cpb => !ncpbs.find(ncpb => ncpb.competition_player_bracket_id == cpb.competition_player_bracket_id)).concat(ncpbs)
+                            })
+                        }}
+                        bracket_id={active_bracket_id}
+                        room_size={room_size}
+                        player_bracket_id={active_player_bracket?.player_bracket_id}
+                    />
+            <BracketCompetitionSelector
+                brackets={brackets}
+                leagues={leagues}
+                visible={active_view == 'select_competition' ? true: false}
+                onCompetitionSelect={(bc) => {
+                    setData({ ...room_data, active_view: 'competition', active_competition_id:bc.bracket_competition_id })
+                }}
+                onClose={() => setData({ ...room_data, active_view:'home' })}
+            />
+            <BracketCompetitionCard
+                player={player}
+                onNotEnoughBalance={onNotEnoughBalance}
+                player_balance={local_balance}
+                bracket_competition_id={active_competition_id}
+                competition_result_types={competition_result_types}
+                height={room_size.height}
+                onUpdateMyData={(data) => {
+
+                    setMyData({
+                        ...my_data,
+                        player_brackets: player_brackets.filter(pb => !data.player_brackets.find(npb => npb.player_bracket_id == pb.player_bracket_id)).concat(data.player_brackets),
+                        competition_player_brackets: competition_player_brackets.filter(cpb => !data.competition_player_brackets.find(ncpb => ncpb.competition_player_bracket_id == cpb.competition_player_bracket_id)).concat(data.competition_player_brackets)
+                    })
+                    setData({
+                        ...room_data,
+                        active_bracket_id: data.bracket_id
+                    })
+                }}
+                onEnterCompetition={(result) => {
+                    setMyData({
+                        ...my_data,
+                        competition_player_brackets: competition_player_brackets.filter(cpb => cpb.competition_player_bracket_id != result.competition_player_bracket.competition_player_bracket_id).concat(result.competition_player_bracket)
+                    })
+                }}
+                onLeaveCompetition={(result) => {
+                    setMyData({
+                        ...my_data,
+                        competition_player_brackets: competition_player_brackets.filter(cpb => cpb.competition_player_bracket_id != result.competition_player_bracket.competition_player_bracket_id)
+                    })
+                }}
+                onShareCompetition={onShareCompetition}
+                onViewBracket={(bracket_id) => {
+                    const cpb = competition_player_brackets.find(cpb => cpb.bracket_competition_id == active_competition_id);
+                    let my_pb = visible_player_brackets.find(pb => pb.player_bracket_id == cpb?.player_bracket_id);
+                    if(!my_pb){
+                        my_pb = visible_player_brackets.find(pb => pb.bracket_id == bracket_id);
+                    } 
+                    setData({
+                        ...room_data,
+                        active_view: 'play_bracket',
+                        active_bracket_id: bracket_id,
+                        active_player_bracket: my_pb
+                    })
+                }}
+                my_comp_player_brackets={competition_player_brackets.filter(cpb => cpb.bracket_competition_id == active_competition_id)}
+                my_player_brackets={visible_player_brackets.filter(pb => pb.bracket_id == active_bracket_id)}
+                onClose={() => setData({ ...room_data, active_view: 'select_competition', active_competition_id:undefined })}
+                visible={active_view == 'competition' ? true : false}
+            />
+            <PlayerBracketManager
+                visible={active_view == 'manage_bracket' ? true : false}
+                player_bracket={active_player_bracket}
+                width={room_size.width}
+                teams={champion_teams}
+                athletes={champion_athletes}
+                onEditPicks={(pb) => {
+                    setData({ ...room_data, active_player_bracket: pb, active_view: 'play_bracket' })
+                }}
+                competition_player_brackets={competition_player_brackets.filter(cpb => cpb.player_bracket_id == active_player_bracket?.player_bracket_id)}
+                onSelectCompetition={(bc) => {
+                    setData({ ...room_data, active_view:'competition', active_competition_id: bc.bracket_competition_id })
+                }}
+                bracket_competitions={bracket_competitions.filter(bc => bc.bracket_id == active_player_bracket?.bracket_id)}
+                onClose={() => setData({ ...room_data, active_view: 'select_player_bracket' })}
+                onUpdateBracket={(pb) => {
+                    setMyData({ ...my_data, player_brackets: player_brackets.filter(b => b.player_bracket_id != pb.player_bracket_id).concat(pb).sort((a,b) => moment(a.create_datetime).unix() - moment(b.create_datetime).unix()) })
+                    setData({ ...room_data, active_player_bracket: pb })
+                }}
+            />
+            <BracketPlay
+                visible={active_view == 'play_bracket' ? true : false}
+                player={player}
+                onClose={() => {
+                    if(active_competition_id){ return setData({ ...room_data, active_view: 'competition' }) }
+                    setData({ ...room_data, active_view:'select_bracket' })
+                }}
+                onRequestAuthenticate={onRequestAuthenticate}
+                onChangePlayerBracket={() => {
+                    setData({
+                        ...room_data,
+                        active_view: 'select_player_bracket'
+                    })
+                }}
+                onPlayerBracketUpdate={(pb, ncpbs) => {
+                    setData({ ...room_data, active_player_bracket:pb })
+                    setMyData({ 
+                        ...my_data, 
+                        player_brackets: player_brackets.filter(opb => opb.player_bracket_id != pb.player_bracket_id).concat(pb),
+                        competition_player_brackets: competition_player_brackets.filter(cpb => !ncpbs.find(ncpb => ncpb.competition_player_bracket_id == cpb.competition_player_bracket_id)).concat(ncpbs)
+                    })
+                }}
+                bracket_id={active_bracket_id}
+                room_size={room_size}
+                player_bracket_id={active_player_bracket?.player_bracket_id}
+            />
+*/
 //# sourceMappingURL=index.js.map