be-components 6.7.7 → 6.7.9

package/src/CompetitionManager/components/AdminCompetitionList.tsx

@@ -1,13 +1,17 @@
 import React, { useEffect, useState } from "react"
-import { View, FlatList, TouchableOpacity, Image, ActivityIndicator, ScrollView } from "react-native"
+import { FlatList, Image, ActivityIndicator, type ViewStyle } from "react-native"
 import { ManageCompetitionApi, ManageCompetitionHelpers } from "../api"
-import Colors from "../../constants/colors"
-import { view_styles } from "../../constants/styles"
-import { Button, Icons, Text } from "../../Components"
+import { Icons, Toggle } from "../../Components"
 import type { BracketCompetitionProps, CompetitionPlayerBracketProps, CompetitionPlayerProps, CompetitionProps, CompetitionRecordProps, CompetitionResultProps, CompetitionSeasonPlayerProps, CompetitionSeasonProps, CompetitionSeasonResultProps, PlayerBracketProps, SquaresCompetitionProps } from "../../types"
+import { Button, Text, View } from "../../Components/Themed"
+import { useColors } from "../../constants/useColors"
+import Pagination from "../../Components/Pagination"
 
 type AdminCompetitionListProps = {
     width:number,
+    header_style?:ViewStyle,
+    footer_style?:ViewStyle,
+    float?:boolean,
     height?:number,
     onSelectCompetition:(competition:CompetitionProps) => void,
     onSelectSquaresCompetition:(squares_competition:SquaresCompetitionProps) => void,
@@ -15,14 +19,20 @@ type AdminCompetitionListProps = {
     onClose: () => void,
     onCreateNew: (engagement_type:'competitions'|'brackets'|'squares') => void
 }
-
-const AdminCompetitionList = ({ width, height, onClose, onCreateNew, onSelectCompetition, onSelectBracketCompetition, onSelectSquaresCompetition }:AdminCompetitionListProps) => {
+const sections = ['header','toggle', 'active_past_toggle', 'pagination', 'loading', 'admin_competitions','competitions','admin_squares','squares', 'admin_brackets', 'brackets']
+const AdminCompetitionList = ({ header_style, float, footer_style, onClose, onCreateNew, onSelectCompetition, onSelectBracketCompetition, onSelectSquaresCompetition }:AdminCompetitionListProps) => {
+    const Colors = useColors();
     const [ list_data, setData ] = useState<{
         loading: boolean,
         active_engagement: 'competitions'|'squares'|'brackets'
         active_tab:'active'|'closed',
         offset:number,
+        show_admin_competitions:boolean,
+        show_admin_squares:boolean,
+        show_admin_brackets:boolean,
         admin_competitions:CompetitionProps[],
+        admin_squares:SquaresCompetitionProps[],
+        admin_brackets:BracketCompetitionProps[],
         competitions:CompetitionProps[],
         competition_players:CompetitionPlayerProps[],
         competition_records:CompetitionRecordProps[],
@@ -42,8 +52,13 @@ const AdminCompetitionList = ({ width, height, onClose, onCreateNew, onSelectCom
         competitions: [],
         competition_players:[],
         competition_records:[],
+        show_admin_brackets: false,
+        show_admin_competitions: false,
+        show_admin_squares: false,
         competition_results:[],
+        admin_brackets:[],
         admin_competitions:[],
+        admin_squares:[],
         competition_seasons: [],
         competition_season_players:[],
         competition_season_results:[],
@@ -52,7 +67,7 @@ const AdminCompetitionList = ({ width, height, onClose, onCreateNew, onSelectCom
         player_brackets: [],
         squares_competitions: []
     })
-    const { offset, active_tab, active_engagement, loading, competitions, admin_competitions, competition_results, bracket_competitions, squares_competitions, competition_player_brackets } = list_data;
+    const { offset, active_tab, active_engagement, show_admin_brackets, show_admin_competitions, show_admin_squares, admin_squares, admin_brackets, loading, competitions, admin_competitions, competition_results, bracket_competitions, squares_competitions, competition_player_brackets } = list_data;
 
     useEffect(() => {
         ManageCompetitionApi.setEnvironment();
@@ -96,20 +111,24 @@ const AdminCompetitionList = ({ width, height, onClose, onCreateNew, onSelectCom
                 return
             case 'brackets':
                 if(active_tab == 'active'){
+                    const admin_bracks_active = await ManageCompetitionApi.getMyActiveAdminBracketCompetitions()
                     const b_resp = await ManageCompetitionApi.getMyActiveBracketCompetitions();
                     setData({
                         ...list_data,
                         loading:false,
+                        admin_brackets: admin_bracks_active,
                         bracket_competitions: b_resp.bracket_competitions,
                         player_brackets: b_resp.player_brackets,
                         competition_player_brackets: b_resp.competition_player_brackets,
                         offset
                     })
                 } else {
+                    const admin_bracks_history = await ManageCompetitionApi.getMyHistoryAdminBracketCompetitions(offset);
                     const b_resp = await ManageCompetitionApi.getMyHistoryBracketCompetitions(offset);
                     setData({
                         ...list_data,
                         loading:false,
+                        admin_brackets: admin_bracks_history,
                         bracket_competitions: b_resp.bracket_competitions,
                         player_brackets: b_resp.player_brackets,
                         competition_player_brackets: b_resp.competition_player_brackets,
@@ -119,18 +138,22 @@ const AdminCompetitionList = ({ width, height, onClose, onCreateNew, onSelectCom
                 return
             case 'squares':
                 if(active_tab == 'active'){
+                    const active_admin_squares = await ManageCompetitionApi.getMyActiveAdminSquares();
                     const s_resp = await ManageCompetitionApi.getMyActiveSquaresCompetitions();
                     setData({
                         ...list_data,
                         loading:false,
                         offset,
+                        admin_squares: active_admin_squares,
                         squares_competitions: s_resp.squares_competitions
                     })
                 } else {
+                    const past_admin_squares = await ManageCompetitionApi.getMyHistoryAdminSquares(offset);
                     const s_resp = await ManageCompetitionApi.getMyHistorySquaresCompetitions(offset);
                     setData({
                         ...list_data,
                         loading:false,
+                        admin_squares: past_admin_squares,
                         offset,
                         squares_competitions: s_resp.squares_competitions
                     })
@@ -144,56 +167,41 @@ const AdminCompetitionList = ({ width, height, onClose, onCreateNew, onSelectCom
         const competition_result = competition_results.find(cr => cr.competition_id == data.item.competition_id);
         const cl = data.item.market_type == 'FOR_MONEY' ? '$' : 'E'
         return (
-            <TouchableOpacity style={{ ...view_styles.body_row, padding:15, borderBottomWidth:1, borderColor:Colors.shades.shade600 }} onPress={() => onSelectCompetition(data.item)}>
+            <Button style={{ flexDirection:'row', alignItems:'center', borderRadius:0, padding:15, borderBottomWidth:1, borderColor:Colors.borders.light }} onPress={() => onSelectCompetition(data.item)}>
                 <Image
                     source={{ uri: data.item.image?.url }}
                     style={{ height:30, width:30, borderRadius:4 }}
                     resizeMode="cover"
                 />
                 <View style={{ flex:1, marginLeft:10 }}>
-                    <Text theme="header_2">{data.item.competition_name}</Text>
-                    <Text style={{ marginTop:3 }} theme="body">{data.item.competition_description}</Text>
+                    <Text theme="h2">{data.item.competition_name}</Text>
+                    <Text style={{ marginTop:3 }} theme="description">{data.item.competition_description}</Text>
                 </View>
                 {competition_result ?
                 <View style={{ marginRight:10, marginLeft:10, justifyContent:'center' }}>
-                    <Text size={12} color={Colors.brand.midnight} weight="bold" textAlign="center">{ManageCompetitionHelpers.formatPlace(competition_result.place)}</Text>
-                    <Text size={12} color={Colors.brand.midnight} textAlign="center" style={{ marginTop:3 }}>{cl}{competition_result.winnings.toFixed(2)}</Text>
+                    <Text size={12}>{ManageCompetitionHelpers.formatPlace(competition_result.place)}</Text>
+                    <Text size={12} style={{ marginTop:3 }}>{cl}{competition_result.winnings.toFixed(2)}</Text>
                 </View>
                 :<></>}
-                <Icons.ChevronIcon direction='right' size={8} color={Colors.brand.midnight}/>
-            </TouchableOpacity>
-        )
-    }
-
-    const renderAdminCompetitions = (data: { item:CompetitionProps, index:number }) => {
-        return (
-            <TouchableOpacity style={{ borderRadius:8, backgroundColor:Colors.shades.white, width: width / 3, borderWidth:1, borderColor:Colors.shades.shade600 }} onPress={() => onSelectCompetition(data.item)}>
-                <Image
-                    source={{ uri: data.item.image?.url }}
-                    style={{ height:width/3*0.5, width:width/3, borderRadius:4, borderBottomRightRadius:0, borderBottomLeftRadius:0 }}
-                    resizeMode="cover"
-                />
-                <View style={{ marginTop:5, padding:10 }}>
-                    <Text size={14} textAlign="center" weight='bold'>{data.item.competition_name}</Text>
-                </View>
-            </TouchableOpacity>
+                <Icons.ChevronIcon direction='right' size={8} color={Colors.text.h1}/>
+            </Button>
         )
     }
 
     const renderSquares = (data: { item:SquaresCompetitionProps, index:number }) => {
         return (
-            <TouchableOpacity style={{ ...view_styles.body_row, padding:10, borderBottomWidth:1, borderColor:Colors.shades.shade600 }} onPress={() => onSelectSquaresCompetition(data.item)}>
+            <Button style={{ flexDirection:'row', alignItems:'center', borderRadius:0, padding:10, borderBottomWidth:1, borderColor:Colors.borders.light }} onPress={() => onSelectSquaresCompetition(data.item)}>
                 <Image
                     source={{ uri: data.item.image?.url }}
                     style={{ height:30, width:30, borderRadius:4 }}
                     resizeMode="cover"
                 />
                 <View style={{ flex:1, marginLeft:10 }}>
-                    <Text theme="header_2">{data.item.sq_comp_name}</Text>
-                    <Text style={{ marginTop:3 }} theme="body">{data.item.sq_comp_description}</Text>
+                    <Text theme="h2">{data.item.sq_comp_name}</Text>
+                    <Text style={{ marginTop:3 }} theme="description">{data.item.sq_comp_description}</Text>
                 </View>
-                <Icons.ChevronIcon direction='right' size={8} color={Colors.brand.midnight}/>
-            </TouchableOpacity>
+                <Icons.ChevronIcon direction='right' size={8} color={Colors.text.h1}/>
+            </Button>
         )
     }
 
@@ -201,175 +209,238 @@ const AdminCompetitionList = ({ width, height, onClose, onCreateNew, onSelectCom
         const competition_player_bracket = competition_player_brackets.find(cpb => cpb.bracket_competition_id == data.item.bracket_competition_id);
         const cl = data.item.market_type == 'FOR_MONEY' ? '$' : 'E'
         return (
-            <TouchableOpacity style={{ ...view_styles.body_row, padding:10, borderBottomWidth:1, borderColor:Colors.shades.shade600 }} onPress={() => onSelectBracketCompetition(data.item)}>
+            <Button style={{ flexDirection:'row', alignItems:'center', borderRadius:0, padding:10, borderBottomWidth:1, borderColor:Colors.borders.light }} onPress={() => onSelectBracketCompetition(data.item)}>
                 <Image
                     source={{ uri: data.item.image?.url }}
                     style={{ height:30, width:30, borderRadius:4 }}
                     resizeMode="cover"
                 />
                 <View style={{ flex:1, marginLeft:10 }}>
-                    <Text theme="header_2">{data.item.competition_name}</Text>
-                    <Text style={{ marginTop:3 }} theme="body">{data.item.competition_description}</Text>
+                    <Text theme="h2">{data.item.competition_name}</Text>
+                    <Text style={{ marginTop:3 }} theme="description">{data.item.competition_description}</Text>
                 </View>
                 {competition_player_bracket ?
                 <View style={{ marginRight:10, marginLeft:10, justifyContent:'center' }}>
-                    <Text size={12} color={Colors.brand.midnight} weight="bold" textAlign="center">{ManageCompetitionHelpers.formatPlace(competition_player_bracket.place)}</Text>
-                    <Text size={12} color={Colors.brand.midnight} textAlign="center" style={{ marginTop:3 }}>{cl}{competition_player_bracket.winnings.toFixed(2)}</Text>
+                    <Text size={12}>{ManageCompetitionHelpers.formatPlace(competition_player_bracket.place)}</Text>
+                    <Text size={12} style={{ marginTop:3 }}>{cl}{competition_player_bracket.winnings.toFixed(2)}</Text>
                 </View>
                 :<></>}
-                <Icons.ChevronIcon direction='right' size={8} color={Colors.brand.midnight}/>
-            </TouchableOpacity>
+                <Icons.ChevronIcon direction='right' size={8} color={Colors.text.h1}/>
+            </Button>
         )
     }
 
-    return (
-        <View style={{ maxWidth:width, minWidth:300, minHeight:400, height:height, backgroundColor:Colors.shades.white }}>
-            <View style={{ ...view_styles.section_header }}>
-                <View style={{ flex:1 }}>
-                    <Text theme='header'>MY ENGAGEMENTS</Text>
-                    <Text style={{ marginTop:3 }} theme="body">Use the buttons below to see your active and past engagements (competitions, brackets, squares, etc)</Text>
-                </View>
-            </View>
-            <View style={{ flexDirection:'row', margin:10, borderRadius:22, borderWidth:4, borderColor:Colors.shades.shade100 }}>
-                <Button
-                    title="COMPETITIONS"
-                    title_color={active_engagement == 'competitions' ? Colors.shades.white : Colors.brand.midnight}
-                    backgroundColor={active_engagement == 'competitions' ? Colors.brand.midnight: Colors.shades.white}
-                    title_weight={active_engagement == 'competitions' ? 'bold' : 'regular'}
-                    borderRadius={0}
-                    padding={10}
-                    style={{ flex:1, borderTopLeftRadius:22, borderBottomLeftRadius:22 }}
-                    onPress={() => setData({ ...list_data, active_engagement: 'competitions' })}
-                />
-                <Button
-                    title="SQUARES"
-                    title_color={active_engagement == 'squares' ? Colors.shades.white : Colors.brand.midnight}
-                    backgroundColor={active_engagement == 'squares' ? Colors.brand.midnight: Colors.shades.white}
-                    title_weight={active_engagement == 'squares' ? 'bold' : 'regular'}
-                    borderRadius={0}
-                    padding={10}
-                    style={{ flex:1 }}
-                    onPress={() => setData({ ...list_data, active_engagement: 'squares' })}
-                />
-                <Button
-                    title="BRACKETS"
-                    title_color={active_engagement == 'brackets' ? Colors.shades.white : Colors.brand.midnight}
-                    backgroundColor={active_engagement == 'brackets' ? Colors.brand.midnight: Colors.shades.white}
-                    title_weight={active_engagement == 'brackets' ? 'bold' : 'regular'}
-                    borderRadius={0}
-                    padding={10}
-                    style={{ flex:1, borderTopRightRadius:22, borderBottomRightRadius:22 }}
-                    onPress={() => setData({ ...list_data, active_engagement: 'brackets' })}
-                />
-            </View>
-            <ScrollView style={{ ...view_styles.section_body, padding:0 }}>
-                
-                <View style={{ ...view_styles.section_header, backgroundColor:Colors.shades.shade100 }}>
-                    <View style={{ flex:1, marginRight:10 }}>
-                        <Text theme="header">Showing {active_tab} {active_engagement}</Text>
-                        <Text style={{ marginTop: 3}} theme="body">Use the toggle to the right to see active / closed engagements</Text>
-                    </View>
-                    <View style={{ flexDirection:'row' }}>
+    const renderSections = (data:{ item:string, index:number }) => {
+        switch(data.item){
+            case 'header':
+                return (
+                    <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, ...header_style }}>
+                        <View transparent style={{ flex:1 }}>
+                            <Text theme="h1">My Admin Engagements</Text>
+                            <Text theme="description" style={{ marginTop:3 }}>Use the buttons below to see your active and past engagements (competitions, brackets, squares, etc)</Text>
+                        </View>
                         <Button
-                            title="ACTIVE"
-                            title_color={active_tab == 'active' ? Colors.shades.white : Colors.brand.midnight}
-                            backgroundColor={active_tab == 'active' ? Colors.utility.success: Colors.shades.white}
-                            title_weight={active_tab == 'active' ? 'bold' : 'regular'}
-                            borderRadius={0}
-                            style={{ borderTopLeftRadius:22, borderBottomLeftRadius:22 }}
-                            padding={10}
-                            onPress={() => setData({ ...list_data, active_tab: 'active' })}
+                            title="X"
+                            float
+                            title_color={Colors.text.error}
+                            onPress={() => onClose()}
                         />
-                        <Button
-                            title="CLOSED"
-                            title_color={active_tab == 'closed' ? Colors.shades.white : Colors.brand.midnight}
-                            backgroundColor={active_tab == 'closed' ? Colors.utility.error: Colors.shades.white}
-                            title_weight={active_tab == 'closed' ? 'bold' : 'regular'}
-                            borderRadius={0}
-                            padding={10}
-                            style={{ borderTopRightRadius:22, borderBottomRightRadius:22 }}
-                            onPress={() => setData({ ...list_data, active_tab: 'closed' })}
+                    </View>
+                )
+            case 'toggle':
+                return (
+                    <View style={{padding:10}}>
+                        <Toggle
+                            options={[
+                                { key: 'competitions', label:'Competitions' },
+                                { key: 'squares', label: 'Squares' },
+                                { key: 'brackets', label: 'Brackets' }
+                            ]}
+                            selected_option={active_engagement}
+                            onSelectOption={(o) => setData({ ...list_data, active_engagement: o as 'competitions'|'brackets'|'squares' })}
                         />
                     </View>
-                </View>
-                {active_tab == 'closed' ?
-                <View style={{ ...view_styles.section_footer }}>
-                    {offset > 0 ?
-                    <Button
-                        title='PREV'
-                        title_color={Colors.brand.electric}
-                        backgroundColor='transparent'
-                        onPress={() =>  getDataFromServer(offset - 1)}
-                    />
-                    :<View/>}
-                    <View style={{ flex:1 }} />
-                    <Button
-                        title='NEXT'
-                        title_color={Colors.brand.electric}
-                        backgroundColor='transparent'
-                        onPress={() => getDataFromServer(offset + 1)}
-                    />
-                </View>
-                :<></>}
-                {loading ?
-                <ActivityIndicator style={{ padding:20, alignSelf:'center' }} size='large' color={Colors.brand.midnight} />
-                :<></>}
-                {active_engagement == 'competitions' ?
-                <View>
-                    {admin_competitions.length > 0 ?
-                    <View style={{ padding:10, backgroundColor:Colors.incentive.gold_faded }}>
-                        <View style={{ padding:10 }}>
-                            <Text theme="header_2">Admin Competitions</Text>
-                            <Text style={{ marginTop:4 }} theme="body">These are the competitions you are an admin of</Text>
+                )
+            case 'active_past_toggle':
+                return (
+                    <View style={{ padding:10 }}>
+                        <Toggle
+                            options={[
+                                { key: 'closed', label:'Closed' },
+                                { key: 'active', label: 'Active' }
+                            ]}
+                            selected_option={active_tab}
+                            onSelectOption={(o) => setData({ ...list_data, active_tab: o as 'active'|'closed' })}
+                        />
+                    </View>
+                )
+            case 'pagination':
+                if(active_tab != 'closed'){ return <></> }
+                return (
+                    <View transparent>
+                        <Pagination
+                            offset={offset}
+                            onNext={() => getDataFromServer(offset + 1)}
+                            onPrevious={() => getDataFromServer(offset - 1)}
+                        />
+                    </View>
+                )
+            case 'loading':
+                if(!loading){ return <></> }
+                return (
+                    <View transparent>
+                        <ActivityIndicator style={{ alignSelf:'center', padding:20 }} size='large' color={Colors.text.h1} />
+                    </View>
+                )
+            case 'admin_competitions':
+                if(active_engagement != 'competitions'){ return <></> }
+                if(admin_competitions.length == 0){ return <></> }
+                return (
+                    <View>
+                        <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                            <View transparent style={{ flex:1 }}>
+                                <Text theme="h1">Admin Competitions</Text>
+                                <Text theme="description" style={{ marginTop:3 }}>Below are the competitions that you are the admin of</Text>
+                            </View>
+                            <Button transparent onPress={() => setData({ ...list_data, show_admin_competitions:!show_admin_competitions })}>
+                                <Icons.ChevronIcon size={10} direction={show_admin_competitions ? 'up' : 'down'} color={Colors.text.action} />
+                            </Button>
                         </View>
+                        {show_admin_competitions ?
                         <FlatList
-                            key='admin_competition'
                             data={admin_competitions}
-                            horizontal
-                            renderItem={renderAdminCompetitions}
-                            keyExtractor={(item) => item.competition_id.toString()}
+                            key={'admin_comps_list'}
+                            keyExtractor={item => `admin_${item.competition_id}`}
+                            renderItem={renderCompetitions}
                         />
+                        :<></>}
                     </View>
-                    :<></>}
-                    <FlatList
-                        key={'my_competitions'}
-                        data={competitions}
-                        renderItem={renderCompetitions}
-                        keyExtractor={(item) => item.competition_id.toString()}
-                    />
-                </View>
-                :active_engagement == 'brackets' ?
-                <FlatList
-                    data={bracket_competitions}
-                    renderItem={renderBrackets}
-                    keyExtractor={(item) => item.bracket_competition_id.toString()}
-                />
-                :active_engagement == 'squares' ?
+                )
+            case 'competitions':
+                if(active_engagement != 'competitions'){ return <></> }
+                if(competitions.length == 0){ return <></> }
+                return (
+                    <View>
+                        <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                            <View transparent style={{ flex:1 }}>
+                                <Text theme="h1">My Competitions</Text>
+                                <Text theme="description" style={{ marginTop:3 }}>Below are the competitions that you have joined</Text>
+                            </View>
+                        </View>
+                        <FlatList
+                            data={competitions}
+                            key={'competitions_list'}
+                            keyExtractor={item => item.competition_id.toString()}
+                            renderItem={renderCompetitions}
+                        />
+                    </View>
+                )
+            case 'admin_squares':
+                if(active_engagement != 'squares'){ return <></> }
+                if(admin_squares.length == 0){ return <></> }
+                return (
+                    <View>
+                        <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                            <View transparent style={{ flex:1 }}>
+                                <Text theme="h1">Admin Squares Competitions</Text>
+                                <Text theme="description" style={{ marginTop:3 }}>Below are the squares competitions that you are the admin of</Text>
+                            </View>
+                            <Button transparent onPress={() => setData({ ...list_data, show_admin_squares:!show_admin_squares })}>
+                                <Icons.ChevronIcon size={10} direction={show_admin_squares ? 'up' : 'down'} color={Colors.text.action} />
+                            </Button>
+                        </View>
+                        {show_admin_squares ?
+                        <FlatList
+                            data={admin_squares}
+                            key={'admin_squares_list'}
+                            keyExtractor={item => `admin_${item.sq_comp_id}`}
+                            renderItem={renderSquares}
+                        />
+                        :<></>}
+                    </View>
+                )
+            case 'squares':
+                if(active_engagement != 'squares'){ return <></> }
+                if(squares_competitions.length == 0){ return <></> }
+                return (
+                    <View>
+                        <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                            <View transparent style={{ flex:1 }}>
+                                <Text theme="h1">Squares Competitions</Text>
+                                <Text theme="description" style={{ marginTop:3 }}>Below are the squares competitions that you are participating in</Text>
+                            </View>
+                        </View>
+                        <FlatList
+                            data={squares_competitions}
+                            key={'squares_list'}
+                            keyExtractor={item => `${item.sq_comp_id}`}
+                            renderItem={renderSquares}
+                        />
+                    </View>
+                )
+            case 'admin_brackets':
+                if(active_engagement != 'brackets'){ return <></> }
+                if(admin_brackets.length == 0){ return <></> }
+                return (
+                    <View>
+                        <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                            <View transparent style={{ flex:1 }}>
+                                <Text theme="h1">Admin Bracket Competitions</Text>
+                                <Text theme="description" style={{ marginTop:3 }}>Below are the bracket competitions that you are the admin of</Text>
+                            </View>
+                            <Button transparent onPress={() => setData({ ...list_data, show_admin_brackets:!show_admin_brackets })}>
+                                <Icons.ChevronIcon size={10} direction={show_admin_brackets ? 'up' : 'down'} color={Colors.text.action} />
+                            </Button>
+                        </View>
+                        {show_admin_brackets ?
+                        <FlatList
+                            data={admin_brackets}
+                            key={'admin_brackets_list'}
+                            keyExtractor={item => `admin_${item.bracket_competition_id}`}
+                            renderItem={renderBrackets}
+                        />
+                        :<></>}
+                    </View>
+                )
+            case 'brackets':
+                if(active_engagement != 'brackets'){ return <></> }
+                if(bracket_competitions.length == 0){ return <></> }
+                return (
+                    <View>
+                        <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                            <View transparent style={{ flex:1 }}>
+                                <Text theme="h1">Bracket Competitions</Text>
+                                <Text theme="description" style={{ marginTop:3 }}>Below are the bracket competitions that you have participated in</Text>
+                            </View>
+                        </View>
+                        <FlatList
+                            data={bracket_competitions}
+                            key={'brackets_list'}
+                            keyExtractor={item => `${item.bracket_competition_id}`}
+                            renderItem={renderBrackets}
+                        />
+                    </View>
+                )
+            default: return <></>
+        }
+    }
+
+    return (
+        <View float={float} style={{ flex:1 }}>
+            <View transparent style={{ flex:1 }}>
                 <FlatList
-                    data={squares_competitions}
-                    renderItem={renderSquares}
-                    keyExtractor={(item) => item.sq_comp_id.toString()}
+                    data={sections}
+                    key={'admin_list'}
+                    keyExtractor={item => item}
+                    renderItem={renderSections}
                 />
-                :<></>}
-            </ScrollView>
-
-
-            <View style={{ ...view_styles.section_footer }}>
+            </View>
+            <View type='footer' style={{ flexDirection:'row', alignItems:'center', padding:10, ...footer_style }}>
                 <Button
-                    title="CREATE NEW"
-                    style={{ flex:1, marginRight:5 }}
-                    title_color={Colors.shades.white}
-                    backgroundColor={Colors.utility.success}
-                    padding={15}
+                    style={{ flex:1 }}
                     onPress={() => onCreateNew(active_engagement)}
-                />
-                <Button
-                    title="CLOSE"
-                    title_color={Colors.shades.white}
-                    style={{ flex:2, marginRight:8 }}
-                    padding={15}
-                    backgroundColor={Colors.utility.error}
-                    onPress={() => onClose()}
+                    type="success"
+                    title="CREATE NEW ENGAGEMENT"
                 />
             </View>
         </View>

package/src/CompetitionManager/components/AthleteSelector.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { FlatList, Image, ActivityIndicator } from 'react-native';
 import { Switch, Toggle } from '../../Components';
 import SearchBox from '../../Components/SearchBox';
-import type { AthleteProps, EventProps, MatchProps, TournamentProps } from '../../types';
+import type { AthleteProps, EventProps, MatchProps, TournamentProps, TradeProps } from '../../types';
 import { ManageCompetitionMatchApi } from '../api';
 import { Button, Text, View } from '../../Components/Themed';
 import { useColors } from '../../constants/useColors';
@@ -12,28 +12,32 @@ type AthleteSelectorProps = {
     tournament?:TournamentProps,
     match?:MatchProps,
     selected_athletes: string[],
+    trades:TradeProps[],
     filtered_athletes:string[],
     filtered_positions:string[],
+    active_market?:string,
     onSelectAthlete:(athlete:AthleteProps) => void,
     onDeselectAthlete:(athlete:AthleteProps) => void,
     onClose:() => void
 }
 
-const AthleteSelector = ({ event, tournament, match, filtered_athletes, selected_athletes, filtered_positions, onSelectAthlete, onDeselectAthlete, onClose }:AthleteSelectorProps) => {
+const AthleteSelector = ({ event, tournament, match, trades, active_market, filtered_athletes, selected_athletes, filtered_positions, onSelectAthlete, onDeselectAthlete, onClose }:AthleteSelectorProps) => {
     const Colors = useColors();
     const [ search_value, setSearchValue ] = useState('');
     const [ selector_data, setSelectorData ] = useState<{
         loading:boolean,
         athletes:AthleteProps[],
+        trade_athletes:AthleteProps[],
         event_side:string
     }>({
         loading: false,
         athletes: [],
+        trade_athletes: [],
         event_side: 'away'
     })
-    const { athletes, loading, event_side } = selector_data;
+    const { loading, event_side, trade_athletes } = selector_data;
     
-    let available_athletes = athletes.filter(a => `${a.first_name} ${a.last_name}`.toLowerCase().includes(search_value.toLowerCase()));
+    let available_athletes = trade_athletes.filter(a => `${a.first_name} ${a.last_name}`.toLowerCase().includes(search_value.toLowerCase()));
     if(filtered_athletes.length > 0){
         available_athletes = available_athletes.filter(a => filtered_athletes.map(a => a.toString()).includes(a.athlete_id.toString()))
     }
@@ -54,11 +58,16 @@ const AthleteSelector = ({ event, tournament, match, filtered_athletes, selected
         if(event){
             let away_athletes = await ManageCompetitionMatchApi.getAthletesByTeamId(event.away_team_id);
             let home_athletes = await ManageCompetitionMatchApi.getAthletesByTeamId(event.home_team_id);
-            avail_athletes = away_athletes.concat(home_athletes)
+            avail_athletes = away_athletes.concat(home_athletes);
         }
+        //Get all the side ids for this market
+        let trade_athlete_ids = [ ...new Set(trades.filter(t => t.event_type == 'team' && t.event_id == event?.event_id && t.market_id == active_market && t.side_type == 'athlete').map(t => t.side_id)) ]
+        let trade_athletes_avail = avail_athletes.filter(a => trade_athlete_ids.includes(a.athlete_id))
+        //Lets filter
         setSelectorData({
             ...selector_data,
             loading:false,
+            trade_athletes: trade_athletes_avail,
             athletes: avail_athletes
         })
     }