be-components 4.4.7 → 4.4.9

package/src/Bracket/components/RoomHome.tsx

@@ -23,6 +23,7 @@ type RoomHomeProps = {
     view_mode:'mobile'|'desktop'
     competition_result_types:CompetitionResultTypeProps[],
     leagues:LeagueProps[],
+    onCreateNewCompetition?:(bracket_id?:string) => void,
     athletes:AthleteProps[],
     onUpdatePlayerBracket:(player_bracket:PlayerBracketProps) => void,
     onEditPlayerBracket:(player_bracket:PlayerBracketProps) => void,
@@ -42,7 +43,7 @@ const calcCardWidth = (width:number, margin:number) => {
 
 const sections = [ 'toggle', 'active_brackets', 'past_brackets', 'tournaments', 'competitions']
 
-const RoomHome = ({ visible, width, player, leagues, active_brackets, public_competitions, onView, onUpdatePlayerBracket, onEditPlayerBracket, onFocusPosition, brackets, player_brackets, bracket_competitions, competition_player_brackets, athletes, teams }:RoomHomeProps) => {
+const RoomHome = ({ visible, width, player, leagues, active_brackets, public_competitions, onCreateNewCompetition, onView, onUpdatePlayerBracket, onEditPlayerBracket, onFocusPosition, brackets, player_brackets, bracket_competitions, competition_player_brackets, athletes, teams }:RoomHomeProps) => {
     const Colors = useColors();
     const [ action_loading, setActionLoading ] = useState<string|undefined>(undefined)//This will be a bracket id
     const [ active_toggle, setActiveToggle ] = useState('competitions');
@@ -498,14 +499,16 @@ const RoomHome = ({ visible, width, player, leagues, active_brackets, public_com
                                 <Icons.SearchIcon size={12} color={Colors.text.action} />
                                 }
                             </Button>
+                            {onCreateNewCompetition ?
                             <Button
                                 type='success'
                                 style={{ flexDirection:'row', alignItems:'center', marginLeft:5, padding:0, height:35, width:40, justifyContent:'center' }}
-                                onPress={() => console.log('create a new competition')}
+                                onPress={() => onCreateNewCompetition()}
                             >
                                 <Text theme='h1' color={Colors.text.white}>+</Text>
                                 <Icons.TrophyIcon color={Colors.text.white} size={14}/>
                             </Button>
+                            :<></>}
                         </View>
                         {show_competition_search ?
                         <SearchBox

package/src/Bracket/index.tsx

@@ -24,12 +24,13 @@ type BracketRoomProps = {
     onShareCompetition:(bracket_competition:BracketCompetitionProps) => void,
     onRequestAuthenticate: (auth_strategy_id?:string) => void,
     onNotEnoughBalance:(data:{ bracket_competition:BracketCompetitionProps }) => void,
-    onClose?:() => void
+    onClose?:() => void,
+    onCreateNewCompetition?:(bracket_id?:string) => void
 }
 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, onFocusPosition, onShareCompetition }:BracketRoomProps) => {
+const BracketRoom = ({ player_id, width, view_mode, bracket_id, insets, onCreateNewCompetition, bracket_competition_id, player_balance, onRequestAuthenticate, onFocusPosition, onShareCompetition }:BracketRoomProps) => {
     const Colors = useColors();
     const [ loading, setLoading ] = useState<string|undefined>(undefined);
     const [ show_competition_actions, setShowCompetitionActions ] = useState(false);
@@ -132,6 +133,7 @@ const BracketRoom = ({ player_id, width, view_mode, bracket_id, insets, bracket_
         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({
@@ -231,6 +233,7 @@ const BracketRoom = ({ player_id, width, view_mode, bracket_id, insets, bracket_
                                 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}
@@ -336,12 +339,14 @@ const BracketRoom = ({ player_id, width, view_mode, bracket_id, insets, bracket_
                     </Button>
                     :<></>}
                 </View>
+                
                 {mode != 'small' && active_bracket_id ?
                 <View type='header' style={{ width:300 }}>
                     <BracketCompetitionActions
                         view_mode={view_mode}
                         player={player}
                         insets={insets}
+                        onCreateNewCompetition={onCreateNewCompetition}
                         onRequestAuthenticate={() => onRequestAuthenticate(active_competition?.auth_strategy_id)}
                         onSelectCompetition={(bc) => {
                             setNavData({
@@ -430,6 +435,7 @@ const BracketRoom = ({ player_id, width, view_mode, bracket_id, insets, bracket_
                             onRequestAuthenticate={() => onRequestAuthenticate(active_competition?.auth_strategy_id)}
                             player={player}
                             hide_image
+                            onCreateNewCompetition={onCreateNewCompetition}
                             insets={insets}
                             onFoundCompetition={(bc) => {
                                 setRoomData({
@@ -572,270 +578,3 @@ const BracketRoom = ({ player_id, width, view_mode, bracket_id, insets, bracket_
 }
 
 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}
-            />
-*/

package/src/Components/Switch.tsx

@@ -7,9 +7,10 @@ type SwitchProps = {
     value: boolean, 
     switch_type: 'binary' | 'on_off', 
     disabled?:boolean,
+    size?:number,
     onChange:(value:boolean) => void 
 }
-const Switch = ({ value, disabled, switch_type, onChange }:SwitchProps) => {
+const Switch = ({ value, disabled, size, switch_type, onChange }:SwitchProps) => {
 
     const handleChange = () => {
         if(onChange){
@@ -17,20 +18,24 @@ const Switch = ({ value, disabled, switch_type, onChange }:SwitchProps) => {
         }
     }
 
+    const dot_size = size ?? 18
+    const switch_size = dot_size + 6
+    const switch_width = switch_size * 2
+
     return (
         <View style={{ flexDirection:'row', alignItems:'flex-start' }}>
             {switch_type == 'on_off' ?
             <TouchableOpacity 
             disabled={disabled}
-            style={{flexDirection:'row', justifyContent:'space-between', alignItems:'center', backgroundColor:value?Colors.highlights.highlight400:Colors.brand.slate, padding:3, borderRadius:12, width:48,height:24}} onPress={() => handleChange()}>
+            style={{flexDirection:'row', justifyContent:'space-between', alignItems:'center', backgroundColor:value?Colors.highlights.highlight400:Colors.brand.slate, padding:3, borderRadius:12, width:switch_width,height:switch_size}} onPress={() => handleChange()}>
             { value ? 
                 <>
                 <View />
-                <View style={{ borderRadius:100, width:18, height:18, backgroundColor:Colors.shades.white}} />
+                <View style={{ borderRadius:100, width:dot_size, height:dot_size, backgroundColor:Colors.shades.white}} />
                 </>
             :
                 <>
-                <View style={{ borderRadius:100, width:18, height:18, backgroundColor:Colors.shades.white}} />
+                <View style={{ borderRadius:100, width:dot_size, height:dot_size, backgroundColor:Colors.shades.white}} />
                 <View/>
                 </>
             }
@@ -38,15 +43,15 @@ const Switch = ({ value, disabled, switch_type, onChange }:SwitchProps) => {
         :
         <TouchableOpacity 
         disabled={disabled}
-        style={{flexDirection:'row', justifyContent:'space-between', alignItems:'center', backgroundColor:Colors.shades.white, padding:3, borderRadius:12, width:48,height:24}} onPress={() => handleChange()}>
+        style={{flexDirection:'row', justifyContent:'space-between', alignItems:'center', backgroundColor:Colors.shades.white, padding:3, borderRadius:12, width:switch_width,height:switch_size}} onPress={() => handleChange()}>
             { value ? 
                 <>
                 <View />
-                <View style={{ borderRadius:100, width:18, height:18, backgroundColor:Colors.highlights.highlight400}} />
+                <View style={{ borderRadius:100, width:dot_size, height:dot_size, backgroundColor:Colors.highlights.highlight400}} />
             </>
             :
             <>
-                <View style={{ borderRadius:100, width:18, height:18, backgroundColor:Colors.highlights.highlight400}} />
+                <View style={{ borderRadius:100, width:dot_size, height:dot_size, backgroundColor:Colors.highlights.highlight400}} />
                 <View />
             </>
             }

package/src/index.tsx

@@ -38,13 +38,14 @@ import BracketCompetitionCard from './Engage/components/BracketCompetitionCard';
 import SeasonCard from './Engage/components/SeasonCard';
 import NotificationModule from './Notifications';
 import { useNotifications } from './Notifications/useNotifications';
-
+import ManageBracketCompetitionForm from './Bracket/components/ManageBracketCompetitionForm';
 export {
   Authenticator,
   Observer,
   BEEventApi,
   BELinkApi,
   LocationTracker,
+  ManageBracketCompetitionForm,
   NotificationModule,
   useNotifications,
   ProfileManager,