be-components 4.4.0 → 4.4.2

package/src/Bracket/components/BracketPlay/BracketRound.tsx

@@ -17,7 +17,6 @@ type BracketRoundSectionProps = {
     orientation:'left'|'right',
     active_bracket_group_id?:string,
     onPick: (player_bracket_pick:PlayerBracketPickProps) => void,
-    bracket_size: { width:number, height:number },
     left_bar?:boolean,
     right_bar?:boolean
 }
@@ -38,8 +37,8 @@ const BracketRoundSection = ({ bracket_round, round_event_loading, teams, round_
         const away_team = teams.find(t => t.team_id == data.item.away_side_id);
         const loading = round_event_loading == data.item.round_event_id ? true : false
         return (
-            <View style={{ margin:2, flex:1, flexGrow:1, justifyContent:'center' }}>
-                <View style={{ margin:1, ...view_styles.float }}>
+            <View transparent style={{ margin:2, flex:1, flexGrow:1, justifyContent:'center' }}>
+                <View transparent style={{ margin:1, ...view_styles.float }}>
                     <RoundEventCard
                         round_event={data.item}
                         loading={loading}
@@ -65,9 +64,9 @@ const BracketRoundSection = ({ bracket_round, round_event_loading, teams, round_
 
 
     return (
-        <View style={{ }}>
+        <View transparent style={{ }}>
             {!hide_titles ?
-            <View style={{ padding:10 }}>
+            <View transparent style={{ padding:10 }}>
                 <Text size={14} theme='h1' textAlign="center">{bracket_round.round_name}</Text>
             </View>
             :<></>}

package/src/Bracket/components/BracketPlay/RoundEvent.tsx

@@ -142,14 +142,14 @@ const RoundEventCard = ({ event, loading, away_team, away_placeholder_team, home
         switch(side){
             case 'away':
                 return (
-                    <View style={{  }}>
+                    <View transparent>
                         {round_event?.away_side_id && away_placeholder_pick && away_placeholder_team ?
-                        <View style={{ padding:4, borderTopRightRadius:4, borderTopLeftRadius:4 }}>
-                            <Text size={10} weight='semibold' color={away_placeholder_pick.result_ind=='win'?Colors.text.success:Colors.text.error}>{away_placeholder_team.market_name} {away_placeholder_team.name}</Text>
+                        <View transparent style={{ padding:7, borderTopRightRadius:8, borderTopLeftRadius:8, borderBottomWidth:1, borderBottomColor:Colors.borders.light }}>
+                            <Text size={10} theme='h2' color={away_placeholder_pick.result_ind=='win'?Colors.text.success:Colors.text.error}>{away_placeholder_team.market_name} {away_placeholder_team.name}</Text>
                         </View>
                         :<></>}
-                        <View style={{ flexDirection:'row', alignItems:'center', padding:8 }}>
-                            <View style={{ flex:1, marginRight:10, marginLeft:0 }}>
+                        <View style={{ flexDirection:'row', alignItems:'center', padding:8, borderTopRightRadius:!away_placeholder_pick?8:0, borderTopLeftRadius:!away_placeholder_pick?8:0 }}>
+                            <View transparent style={{ flex:1, marginRight:10, marginLeft:0 }}>
                                 {round_event.away_side_id && away_team ?
                                 <View style={{ flexGrow:1, flexDirection:'row', alignItems:'center' }}>
                                     <Image
@@ -158,12 +158,12 @@ const RoundEventCard = ({ event, loading, away_team, away_placeholder_team, home
                                         resizeMode="cover"
                                     />
                                     <Text style={{ paddingRight: 5, borderRightWidth:1, borderColor:Colors.borders.light }} size={10} theme='description'>{round_event.away_seed}</Text>
-                                    <Text style={{ flex:1 }} size={10} color={getPickColor('away', player_bracket_pick)} weight={'semibold'}>{away_team.market_name} {away_team.name}</Text>                                
+                                    <Text style={{ flex:1 }} size={10} color={getPickColor('away', player_bracket_pick)} theme='h2'>{away_team.market_name} {away_team.name}</Text>                                
                                 </View>
                                 :
-                                <View>
+                                <View transparent>
                                     {away_placeholder_pick && away_placeholder_team ?
-                                    <View style={{ flexGrow:1, flexDirection:'row', alignItems:'center' }}>
+                                    <View transparent style={{ flexGrow:1, flexDirection:'row', alignItems:'center' }}>
                                         <Image
                                             source={{ uri: away_placeholder_team.image?.url }}
                                             style={{ height:20, width:20, marginRight:2 }}
@@ -178,7 +178,7 @@ const RoundEventCard = ({ event, loading, away_team, away_placeholder_team, home
                                 </View>
                                 }
                             </View>
-                            <View style={{ flexDirection:'row', alignItems:'center', borderLeftWidth:1, borderLeftColor:Colors.borders.light }}>
+                            <View transparent style={{ flexDirection:'row', alignItems:'center', borderLeftWidth:1, borderLeftColor:Colors.borders.light }}>
                                 {round_event.event_id ?
                                     <Text style={{ margin:5}} size={10} theme='h2'>{getScore(away_team?.team_id)}</Text>
                                 :<></>}
@@ -189,22 +189,22 @@ const RoundEventCard = ({ event, loading, away_team, away_placeholder_team, home
                 )
             case 'home':
                 return (
-                    <View style={{  }}>
-                        <View style={{ flexDirection:'row', alignItems:'center', padding:8}}>
+                    <View transparent>
+                        <View style={{ flexDirection:'row', alignItems:'center', padding:8, borderBottomRightRadius:!home_placeholder_pick?8:0, borderBottomLeftRadius:!home_placeholder_pick?8:0 }}>
 
-                            <View style={{ flex:1, marginRight:10 }}>
+                            <View transparent style={{ flex:1, marginRight:10 }}>
                                 {round_event.home_side_id && home_team ?
-                                <View style={{ flexGrow:1, flexDirection:'row', alignItems:'center' }}>
+                                <View transparent style={{ flexGrow:1, flexDirection:'row', alignItems:'center' }}>
                                     <Image
                                         source={{ uri: home_team.image?.url }}
                                         style={{ height:20, width:20, marginRight:2 }}
                                         resizeMode="cover"
                                     />
                                     <Text style={{ paddingRight: 5, borderRightWidth:1, borderColor:Colors.borders.light }} size={10} theme='description'>{round_event.home_seed}</Text>
-                                    <Text style={{ flex:1 }} size={10} color={getPickColor('home', player_bracket_pick)} weight={'semibold'}>{home_team.market_name} {home_team.name}</Text>
+                                    <Text style={{ flex:1 }} size={10} color={getPickColor('home', player_bracket_pick)} theme='h2'>{home_team.market_name} {home_team.name}</Text>
                                 </View>
                                 :
-                                <View>
+                                <View transparent>
                                     {home_placeholder_pick && home_placeholder_team ?
                                     <View style={{ flexGrow:1, flexDirection:'row', alignItems:'center' }}>
                                         <Image
@@ -221,7 +221,7 @@ const RoundEventCard = ({ event, loading, away_team, away_placeholder_team, home
                                 </View>
                                 }
                             </View>
-                            <View style={{ flexDirection:'row', alignItems:'center', borderLeftWidth:1, borderLeftColor:Colors.borders.light }}>
+                            <View transparent style={{ flexDirection:'row', alignItems:'center', borderLeftWidth:1, borderLeftColor:Colors.borders.light }}>
                                 {round_event.event_id ?
                                     <Text style={{ margin:5}} size={10} theme='h2'>{getScore(home_team?.team_id)}</Text>
                                 :<></>}
@@ -229,8 +229,8 @@ const RoundEventCard = ({ event, loading, away_team, away_placeholder_team, home
                             </View>
                         </View>
                         {round_event?.home_side_id && home_placeholder_pick && home_placeholder_team?
-                        <View style={{ padding:4, borderBottomRightRadius:4, borderBottomLeftRadius:4 }}>
-                            <Text size={10} weight='semibold' color={home_placeholder_pick.result_ind=='win'?Colors.text.success:Colors.text.error}>{home_placeholder_team.market_name} {home_placeholder_team.name}</Text>
+                        <View transparent style={{ padding:7, borderBottomRightRadius:4, borderBottomLeftRadius:4, borderTopWidth:1, borderTopColor:Colors.borders.light }}>
+                            <Text size={10} theme='h2' color={home_placeholder_pick.result_ind=='win'?Colors.text.success:Colors.text.error}>{home_placeholder_team.market_name} {home_placeholder_team.name}</Text>
                         </View>
                         :<></>}
                     </View>
@@ -240,11 +240,11 @@ const RoundEventCard = ({ event, loading, away_team, away_placeholder_team, home
 
 
     return (
-        <View float style={{ minWidth:125, width:round_width, backgroundColor:no_pick?'blue':'black', borderRadius:4 }}>
-            <Button style={{ borderBottomWidth:1, borderColor:Colors.borders.light, padding:5 }} onPress={() => handleSelectAway()}>
+        <View float type='header' style={{ minWidth:125, width:round_width  }}>
+            <Button transparent style={{ padding:0, borderBottomWidth:1, borderColor:Colors.borders.light}} onPress={() => handleSelectAway()}>
                 {renderSide('away')}
             </Button>
-            <Button style={{ padding:5 }} onPress={() => handleSelectHome()}>
+            <Button transparent style={{ padding:0 }} onPress={() => handleSelectHome()}>
                 {renderSide('home')}
             </Button>
             {loading ?

package/src/Bracket/components/BracketPlay/index.tsx

@@ -4,27 +4,23 @@ import type { AthleteProps, BracketGroupProps, BracketProps, BracketRoundProps,
 import { BracketApi, BracketComeptitionApi, BracketCompetitionHelpers } from '../../api';
 import { Icons } from '../../../Components';
 import BracketRoundSection from './BracketRound';
-import BracketNavigator from './BracketNavigator';
 import { Button, Text, View } from '../../../Components/Themed';
 import { useColors } from '../../../constants/useColors';
 
 type BracketPlayProps = {
-    visible: boolean,
     player?:MyPlayerProps
-    room_size:{ width:number, height:number },
     player_bracket_id?:string,
     bracket_id?:string,
+    width:number,
+    onEditPlayerBracket: (pb:PlayerBracketProps) => void,
     onRequestAuthenticate: () => void,
     onChangePlayerBracket: (bracket_id:string) => void,
-    onClose: () => void
     onPlayerBracketUpdate: (pb:PlayerBracketProps, cpbs:CompetitionPlayerBracketProps[]) => void,
 }
-const MIN_ROUND_WIDTH = 175
-const MAX_ROUND_WIDTH = 200;
-const BracketPlay = ({ visible, player, room_size, bracket_id, player_bracket_id, onClose, onPlayerBracketUpdate, onChangePlayerBracket, onRequestAuthenticate }:BracketPlayProps) => {
+
+const BracketPlay = ({ player, width, bracket_id, player_bracket_id, onEditPlayerBracket, onPlayerBracketUpdate, onChangePlayerBracket, onRequestAuthenticate }:BracketPlayProps) => {
     const Colors = useColors();
     const [ round_event_loading, setRoundEventLoading ] = useState<string|undefined>(undefined);
-    const [ show_filter, setShowFilter ] = useState(false);
     const [ play_data, setPlayData ] = useState<{
         play_loading:boolean,
         player_bracket?:PlayerBracketProps,
@@ -54,7 +50,7 @@ const BracketPlay = ({ visible, player, room_size, bracket_id, player_bracket_id
         events: []
     })
     const { play_loading, player_bracket, player_bracket_picks } = play_data;
-    const { loading, bracket_groups, bracket_rounds, round_events, bracket, teams, athletes, selected_group, selected_round } = bracket_data;
+    const { loading, bracket_rounds, round_events, bracket, teams, athletes, selected_round } = bracket_data;
 
     const champion_team = player_bracket?.champion_id_type == 'team' ? teams.find(t => t.team_id == player_bracket?.champion_id) : undefined
     const champion_athlete = player_bracket?.champion_id_type == 'athlete' ? athletes.find(a => a.athlete_id == player_bracket?.champion_id) : undefined
@@ -65,15 +61,18 @@ const BracketPlay = ({ visible, player, room_size, bracket_id, player_bracket_id
         visible_rounds = bracket_rounds.filter((_, i) => i == next_round || i == next_round + 1)
     }
 
-    let round_width = (room_size.width / 2) - 15
-    if(round_width < MIN_ROUND_WIDTH){ round_width = MIN_ROUND_WIDTH }
-    if(round_width > MAX_ROUND_WIDTH){ round_width = MAX_ROUND_WIDTH }
-    useEffect(() => {
-        if(!bracket_id || !visible){ return }
+   let round_width = BracketCompetitionHelpers.calcRoundWidth(width, bracket_rounds.length, 4)
+
+   useEffect(() => {
+        if(!bracket_id){ return }
         getData(bracket_id)
-    },[visible, bracket_id])
+    },[bracket_id])
 
     useEffect(() => {
+        if(!player_bracket_id && !player_bracket){ return }
+        if(!player_bracket_id && player_bracket){
+            return setPlayData({ ...play_data, player_bracket: undefined, player_bracket_picks: [] })
+        }
         if(!player_bracket_id){ return }
         getPlayData(player_bracket_id);
     },[player_bracket_id])
@@ -124,7 +123,6 @@ const BracketPlay = ({ visible, player, room_size, bracket_id, player_bracket_id
         const b = await BracketApi.getBracketById(id);
         let team_ids:string[] = []
         let athlete_ids:string[] = []
-        
         b.round_events.map(re => {
             if(re.away_side_type == 'team' && re.away_side_id){ team_ids.push(re.away_side_id) }
             if(re.home_side_type == 'team' && re.home_side_id){ team_ids.push(re.home_side_id) }
@@ -133,7 +131,6 @@ const BracketPlay = ({ visible, player, room_size, bracket_id, player_bracket_id
         })
         let ts = await BracketApi.getTeamsByIds(team_ids);
         let aths = await BracketApi.getAthletesByIds(athlete_ids);
-
         setData({
             ...bracket_data,
             bracket: b.bracket,
@@ -158,15 +155,11 @@ const BracketPlay = ({ visible, player, room_size, bracket_id, player_bracket_id
                 width={round_width}
                 orientation='right'
                 onPick={(pick) => handlePick(pick)}
-                bracket_size={room_size}
             
             />
         )
     }
 
-
-    if(!visible){ return <></> }
-
     if(!bracket || loading || play_loading){
         return (
             <View type='blur'>
@@ -175,35 +168,7 @@ const BracketPlay = ({ visible, player, room_size, bracket_id, player_bracket_id
         )
     }
     return (
-        <View style={{ flexGrow:1 }}>
-            <View style={{ zIndex:10, flexDirection:'row', alignItems:'center', padding:20, borderBottomWidth:1, borderColor:Colors.borders.light }}>
-                <Button style={{ flex:1, flexDirection:'row', alignItems: 'center' }} onPress={() => onClose()}>
-                    <Icons.ChevronIcon direction='left' size={12} color={Colors.text.h1} />
-                    <View style={{ flex:1, marginLeft:20, marginRight:10 }}>
-                        <Text size={18} theme='h1'>{bracket.bracket_name}</Text>
-                    </View>
-                </Button>
-                <View style={{ zIndex:10 }}>
-                    <Button
-                        title='Filter'
-                        type='info'
-                        onPress={() => setShowFilter(true)}
-                    />
-                    {show_filter ?
-                    <View style={{ position:'absolute', top:5, right:5, borderRadius:8 }}>
-                        <BracketNavigator
-                            bracket_groups={bracket_groups}
-                            bracket_rounds={bracket_rounds}
-                            selected_group={selected_group}
-                            selected_round={selected_round}
-                            onSelectGroup={(g) => setData({ ...bracket_data, selected_group: selected_group?.bracket_group_id == g.bracket_group_id ? undefined : g })}
-                            onSelectRound={(r) => setData({ ...bracket_data, selected_round: selected_round?.bracket_round_id == r.bracket_round_id ? undefined : r })}
-                            onClose={() => setShowFilter(false)}
-                        />
-                    </View>
-                    :<></>}
-                </View>
-            </View>
+        <View transparent style={{ flex:1 }}>
             {player_bracket ?
             <View float style={{ padding:10, borderRadius:0, flexDirection:'row', alignItems:'center' }}>
                 {champion_team ?
@@ -229,13 +194,31 @@ const BracketPlay = ({ visible, player, room_size, bracket_id, player_bracket_id
                     <Text size={14} theme='h1'>{player_bracket.bracket_name}</Text>
                     <Text style={{ marginTop:3 }} size={12} theme='description'>{(player_bracket.completion_pct*100).toFixed(2)}% Complete</Text>
                 </View>
+                <Button transparent onPress={() => onEditPlayerBracket(player_bracket)}>
+                    <Icons.EditIcon size={14} color={Colors.text.action} />
+                </Button>
                 <Button
                     title='Change'
+                    style={{ padding:10 }}
                     type='info'
                     onPress={() => onChangePlayerBracket(bracket.bracket_id)}
                 />
             </View>
-            :<></>}
+            :
+            <View style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                 <View transparent style={{ flex:1 }}>
+                    <Text size={14} theme='h1'>No Bracket Selected</Text>
+                    <Text style={{ marginTop:3 }} size={12} theme='description'>{0.00}% Complete</Text>
+                </View>
+                <Button
+                    style={{ padding:10 }}
+                    title='Select Bracket'
+                    onPress={() => onChangePlayerBracket(bracket.bracket_id)}
+                    type='success'
+                />
+            </View>
+            }
+
             
             <ScrollView>
                 <ScrollView horizontal style={{ flexDirection:'row', padding:10 }}>
@@ -248,4 +231,26 @@ const BracketPlay = ({ visible, player, room_size, bracket_id, player_bracket_id
     )
 }
 
-export default BracketPlay
+export default BracketPlay
+
+
+/*
+                    <Button
+                        title='Filter'
+                        type='info'
+                        onPress={() => setShowFilter(true)}
+                    />
+                    {show_filter ?
+                    <View style={{ position:'absolute', top:5, right:5, borderRadius:8 }}>
+                        <BracketNavigator
+                            bracket_groups={bracket_groups}
+                            bracket_rounds={bracket_rounds}
+                            selected_group={selected_group}
+                            selected_round={selected_round}
+                            onSelectGroup={(g) => setData({ ...bracket_data, selected_group: selected_group?.bracket_group_id == g.bracket_group_id ? undefined : g })}
+                            onSelectRound={(r) => setData({ ...bracket_data, selected_round: selected_round?.bracket_round_id == r.bracket_round_id ? undefined : r })}
+                            onClose={() => setShowFilter(false)}
+                        />
+                    </View>
+                    :<></>}
+*/

package/src/Bracket/components/BracketSelector.tsx

@@ -1,22 +1,22 @@
-import React from 'react';
-import { FlatList, Image, ScrollView } from "react-native"
+import React, { useState } from 'react';
+import { FlatList, Image } from "react-native"
 import type { BracketProps, LeagueProps } from '../../types';
-import { Icons } from '../../Components';
 import moment from 'moment-mini';
 import { Button, Text, View } from '../../Components/Themed';
 import { useColors } from '../../constants/useColors';
+import SearchBox from '../../Components/SearchBox';
 
 type BracketSelectorProps = {
-    visible: boolean,
     brackets: BracketProps[],
     leagues:LeagueProps[],
     onSelectBracket:(bracket:BracketProps) => void,
-    onClose:() => void
 }
 
-const BracketSelector = ({ visible, leagues, brackets, onSelectBracket, onClose }:BracketSelectorProps) => {
+const BracketSelector = ({ leagues, brackets, onSelectBracket }:BracketSelectorProps) => {
     const Colors = useColors();
-    const unique_league_ids = [ ...new Set(brackets.map(b => b.league_id)) ]
+    const [ active_search, setActiveSearch ] = useState('');
+    let visible_brackets = brackets.filter(b => `${b.bracket_name.toLowerCase()}`.includes(active_search.toLowerCase()))
+    const unique_league_ids = [ ...new Set(visible_brackets.map(b => b.league_id)) ]
 
 
     const renderBrackets = (data: { item:BracketProps, index:number }) => {
@@ -65,23 +65,18 @@ const BracketSelector = ({ visible, leagues, brackets, onSelectBracket, onClose
         )
     }
 
-    if(!visible){ return <></> }
     return (
         <View style={{ flex:1 }}>
-             <Button style={{ flexDirection:'row', alignItems:'center', padding:20, borderBottomWidth:1, borderColor:Colors.borders.light }} onPress={() => onClose()}>
-                <Icons.ChevronIcon direction='left' size={12} color={Colors.text.h1} />
-                <View style={{ flex:1, marginLeft:20 }}>
-                    <Text size={18} theme='h1' weight='bold'>Active Brackets</Text>
-                    <Text style={{ marginTop:4 }} size={14} theme='light' weight='regular'>Select a bracket below to make or edit picks</Text>
-                </View>
-            </Button>
-            <ScrollView style={{ flex:1 }}>
-                <FlatList
-                    data={unique_league_ids}
-                    renderItem={renderLeagues}
-                    keyExtractor={(item) => item.toString()}
+            <View>
+                <SearchBox
+                    onChange={(text) => setActiveSearch(text)}
                 />
-            </ScrollView>
+            </View>
+            <FlatList
+                data={unique_league_ids}
+                renderItem={renderLeagues}
+                keyExtractor={(item) => item.toString()}
+            />
         </View>
     )
 }

package/src/Bracket/components/CompetitionLeaderboard.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { FlatList, Image, ScrollView, ActivityIndicator } from 'react-native';
+import { FlatList, Image, ActivityIndicator } from 'react-native';
 import type { AthleteProps, CompetitionPlayerBracketProps, PlayerBracketProps, PublicPlayerProps, TeamProps } from '../../types';
 import { BracketApi, BracketComeptitionApi } from '../api';
 import { CompetitionHelpers } from '../../Competition/api';
@@ -10,13 +10,15 @@ type CompetitionLeaderboardProps = {
     bracket_competition_id:string,
     my_competition_player_brackets:CompetitionPlayerBracketProps[],
     my_player_brackets:PlayerBracketProps[],
-    view_mode: 'short'|'full',
+    view_mode: 'mobile'|'desktop',
+    can_enter?:boolean,
     show_champions?:boolean,
+    onEnterCompetition:() => void,
     onViewFull?: () => void,
     onClose?:() => void
 }
 
-const CompetitionLeaderboard = ({ bracket_competition_id, my_competition_player_brackets, my_player_brackets, view_mode, show_champions, onViewFull, onClose }:CompetitionLeaderboardProps) => {
+const CompetitionLeaderboard = ({ bracket_competition_id, onEnterCompetition, can_enter, my_competition_player_brackets, my_player_brackets, show_champions, onClose }:CompetitionLeaderboardProps) => {
     const Colors = useColors();
     const [ leaders_data, setData ] = useState<{
         loading:boolean,
@@ -36,9 +38,7 @@ const CompetitionLeaderboard = ({ bracket_competition_id, my_competition_player_
         players:[]
     })
     const { loading, offset, competition_player_brackets, players, player_brackets, teams, athletes } = leaders_data;
-
     let visible_leaders = competition_player_brackets.sort((a,b) => a.place - b.place);
-    if(view_mode == 'short'){ visible_leaders = competition_player_brackets.slice(0, 3) }
 
     useEffect(() => {
         if(!bracket_competition_id){ return }
@@ -114,21 +114,28 @@ const CompetitionLeaderboard = ({ bracket_competition_id, my_competition_player_
     }
 
     return (
-        <View style={{ flex:1 }}>
-            <ScrollView style={{ flex:1 }}>
-            {my_competition_player_brackets.length > 0 ?
-            <View style={{ padding:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+        <View transparent style={{ flex:1 }}>
+            
+            <View type='header' style={{ padding:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
                 <View transparent style={{ marginBottom:5 }}>
-                    <Text size={14} color={Colors.text.h1}>MY RESULTS</Text>
+                    <Text size={14} theme='h1'>MY RESULTS</Text>
                 </View>
+                {my_competition_player_brackets.length > 0 ?
                 <FlatList
                     data={my_competition_player_brackets}
                     renderItem={renderLeaders}
                     keyExtractor={(item) => item.competition_player_bracket_id.toString()}
                 />
-            </View>
+                : can_enter ?
+                <Button
+                    title='ENTER COMPETITION'
+                    type='success'
+                    onPress={() => onEnterCompetition()}
+                />
             :<></>}
-            <View style={{ padding:10, borderRadius:8 }}>
+
+            </View>
+            <View style={{ flex:1, padding:10, borderRadius:8 }}>
                 <View style={{ marginBottom:5 }}>
                     <Text size={14} theme='h2'>RESULTS</Text>
                 </View>
@@ -141,16 +148,6 @@ const CompetitionLeaderboard = ({ bracket_competition_id, my_competition_player_
                     keyExtractor={(item) => item.competition_player_bracket_id.toString()}
                 />}
             </View>
-            {view_mode == 'short' && onViewFull ?
-            <View style={{ padding:10 }}>
-                <Button
-                    title='View Full Leaderboard'
-                    type='text'
-                    onPress={() => onViewFull()}
-                />
-            </View>
-            :<></>}
-            </ScrollView>
             {onClose ?
             <View>
                 <View style={{ padding:10, flexDirection:'row', alignItems:'center', justifyContent:'space-between' }}>

package/src/Bracket/components/EditPlayerBracket.tsx

@@ -0,0 +1,81 @@
+import React, { useState } from 'react';
+import { Button, Text, TextInput, View } from "../../Components/Themed"
+import type { PlayerBracketProps } from "../../types"
+import { BracketComeptitionApi } from '../api';
+
+type EditPlayerBracketProps = {
+    player_bracket?:PlayerBracketProps,
+    onUpdatePlayerBracket:(pb:PlayerBracketProps) => void,
+    onClose:() => void
+}
+const EditPlayerBracket = ({ player_bracket, onUpdatePlayerBracket, onClose }:EditPlayerBracketProps) => {
+    const [ draft_pb, setDraftPb ] = useState(player_bracket);
+    const [ action_loading, setActionLoading ] = useState(false);
+
+    const is_changed = JSON.stringify(draft_pb) != JSON.stringify(player_bracket) ? true : false
+
+    const handleUpdate = async() => {
+        if(action_loading || !draft_pb){ return }
+        setActionLoading(true);
+        let new_pb = await BracketComeptitionApi.updatePlayerBracket(draft_pb)
+        setActionLoading(false);
+        onUpdatePlayerBracket(new_pb)
+    }
+
+    const handleDelete = async() => {
+        if(action_loading || !draft_pb){ return }
+        setActionLoading(true);
+        let new_pb = await BracketComeptitionApi.deletePlayerBracket(draft_pb.player_bracket_id);
+        console.log(new_pb)
+        setActionLoading(false);
+        onUpdatePlayerBracket(new_pb)
+    }
+
+    if(!player_bracket || !draft_pb){ return <></> }
+
+    return (
+        <View transparent>
+            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+                <View transparent style={{ flex:1 }}>
+                    <Text theme='h1'>EDIT MY BRACKET</Text>
+                    <Text style={{ marginTop:3 }} theme='description'>{player_bracket.bracket_name}</Text>
+                </View>
+                <Button
+                    title='DELETE'
+                    type='error'
+                    loading={action_loading}
+                    style={{ padding:10, opacity:action_loading?0.5:1 }}
+                    disabled={action_loading}
+                    onPress={() => handleDelete()}
+                />
+            </View>
+            <View type='body' style={{ padding:10 }}>
+                <View>
+                    <Text style={{ marginBottom:10 }} theme='h2'>Update Bracket Name</Text>
+                    <TextInput
+                        value={draft_pb?.bracket_name}
+                        onChangeText={(text) => setDraftPb({ ...draft_pb, bracket_name: text })}
+                    />
+                </View>
+            </View>
+            <View type='footer' style={{ flexDirection:'row', padding:10, borderBottomLeftRadius:8, borderBottomRightRadius:8 }}>
+                <Button
+                    style={{ flex:1 }}
+                    title='CANCEL'
+                    type='close'
+                    onPress={() => onClose()}
+                />
+                <Button
+                    style={{ flex:2, marginLeft:5, opacity: is_changed?1:0.5 }}
+                    title='UPDATE'
+                    loading={action_loading}
+                    type='success'
+                    disabled={!is_changed || action_loading}
+                    onPress={handleUpdate}
+                />
+            </View>
+        </View>
+    )
+}
+
+export default EditPlayerBracket