be-components 1.2.7 → 1.2.8

package/src/CompetitionManager/components/CompetitionMatchMarketCard.tsx

@@ -0,0 +1,155 @@
+//import { TouchableOpacity, View } from "react-native"
+//import { v4 } from 'uuid';
+import React  from "react"
+import type { CompetitionMatchMarketProps, MarketProps } from "../../types";
+//import { ManageCompetitionHelpers } from "../api";
+//import { Text } from "../../Components";
+//import Colors from "../../constants/colors";
+
+
+type CompetitionMatchMarketCardProps = {
+    market:MarketProps,
+    competition_match_id:string,
+    competition_match_markets:CompetitionMatchMarketProps[],
+    side_id?:string,
+    event_id:string,
+    competition_summaries?:any[]
+    event_type:string
+    onSaveMarkets: (cmms:CompetitionMatchMarketProps[]) => void,
+    onUpdateMarkets: (cmms:CompetitionMatchMarketProps[]) => void,
+    onGenerateMarkets: () => void
+}
+
+const CompetitionMatchMarketCard = ({ }:CompetitionMatchMarketCardProps) => {
+    
+    /*
+    const [ setDraftCompetitionMatchMarket ] = useState<CompetitionMatchMarketProps | undefined>(undefined)
+
+    const trade_side = competition_match_markets.find(cmm => cmm.side == market.trade_side);
+    let trade_side_pick_pct = 0, o_side_pick_pct = 0;
+    const o_side = competition_match_markets.find(cmm => cmm.side != market.trade_side);
+    let total_count = 0
+    if(competition_summaries){
+        total_count = competition_summaries.reduce((a,b) => a + parseFloat(b.count), 0)
+        let trade_side_summary = competition_summaries.find(cs => cs.side == market.trade_side)
+        let o_side_summary = competition_summaries.find(cs => cs.side != market.trade_side)
+        if(trade_side_summary){
+            trade_side_pick_pct = trade_side_summary.count / total_count
+        }
+        if(o_side_summary){
+            o_side_pick_pct = o_side_summary.count / total_count
+        }
+    }
+        */
+    /*
+
+    const isCMMValid = (cmm:CompetitionMatchMarketProps) => {
+        if(isNaN(cmm.odds)){ return false }
+        if(isNaN(cmm.var_1)){ return false }
+        if(market.type != 'Spread' && cmm.var_1 < 0){ return false }
+        if(market.var_1_required && cmm.var_1 == 0){ return false }
+        return true
+    }
+*/
+    /*
+    const handleUpdateCMM = () => {
+        if(!draft_competition_match_market){ return }
+        //First check if the draft one is valie
+        if(!isCMMValid(draft_competition_match_market)){ return alert('Please correct any errors') }
+        let cmm = { ...draft_competition_match_market }
+        //cmm.odds = parseFloat(cmm.odds)
+        //cmm.var_1 = parseFloat(cmm.var_1)
+        //now we need to flip sides
+        let other_cmm = competition_match_markets.find(ncm => ncm.side != cmm.side)
+        if(other_cmm){
+            console.log('THERE WAS AN OTHER SIDE')
+            other_cmm.var_1 = cmm.var_1
+            other_cmm.odds = cmm.odds * -1
+            other_cmm.probability = ManageCompetitionHelpers.calcProbabilityFromOdds(other_cmm.odds)
+        } else {
+            return alert('NOT HANDLED.  PLEASE AUTO GENERATE FIRST')
+        }
+        if(market.type == 'Spread'){
+            other_cmm.var_1 = other_cmm.var_1 * -1
+        }
+        onUpdateMarkets([{ ...cmm, probability: ManageCompetitionHelpers.calcProbabilityFromOdds(cmm.odds), status:'pending' }, { ...other_cmm, status:'pending'}])
+        return setDraftCompetitionMatchMarket(undefined)
+    }
+        */
+
+    /*
+
+    if(draft_competition_match_market){
+        return (
+            <View style={{ flexDirection:'row', alignItems:'center' }}>
+                <Text size={14} color={Colors.brand.midnight}>{draft_competition_match_market.side.toUpperCase()}</Text>
+                {market.var_1_required ?
+                <TextInput
+                    style={{ padding:10, borderRadius:4, backgroundColor:Colors.shades.white, marginRight:20 }}
+                    value={draft_competition_match_market.var_1}
+                    onChangeText={(text) => setDraftCompetitionMatchMarket({ ...draft_competition_match_market, var_1: text })}
+                />
+                :<></>}
+                <TextInput
+                    style={{ padding:10, borderRadius:4, backgroundColor:Colors.shades.white }}
+                    value={draft_competition_match_market.odds}
+                    onChangeText={(text) => setDraftCompetitionMatchMarket({ ...draft_competition_match_market, odds: text })}
+                />
+                <Button
+                    title='Submit'
+                    title_color={Colors.shades.white}
+                    backgroundColor={Colors.utility.success}
+                    onPress={() => handleUpdateCMM()}
+                />
+            </View>
+        )
+    }
+        */
+
+    /*
+    if(!trade_side || !o_side){
+        return (
+            <View style={{ flexDirection:'row' }}>
+                <TouchableOpacity style={{ justifyContent:'center', alignItems:'center', padding:5, borderRadius:4, backgroundColor:Colors.shades.shade100 }} onPress={() => {
+                    setDraftCompetitionMatchMarket({ ...ManageCompetitionHelpers.createEmptyCompetitionMatchMarket(market, side_id), event_id, event_type, competition_match_id, competition_match_market_id: v4(), pair_id:v4() })
+                }}>
+                    <Icons.UserIcon size={14} color={Colors.brand.midnight} />
+                    <Text style={{ marginTop:5 }} size={12} color={Colors.brand.midnight} weight='bold'>Enter Manually</Text>
+                </TouchableOpacity>
+                <TouchableOpacity style={{ justifyContent:'center', marginLeft:5, alignItems:'center', padding:5, borderRadius:4, backgroundColor:Colors.shades.shade100 }} onPress={() => onGenerateMarkets()}>
+                    <Icons.SettingsIcon size={14} color={Colors.brand.electric} />
+                    <Text style={{ marginTop:5 }} size={12} color={Colors.brand.electric} weight='bold'>Try Auto</Text>
+                </TouchableOpacity>
+            </View>
+        )
+    }
+
+    */
+
+    return <></>
+    /*
+    if(!o_side || !trade_side){ return <></> }
+
+    return (
+        <View style={{ flexDirection:'row' }}>
+            <View>
+                <Text style={{ marginBottom:2 }} size={12} color={Colors.brand.midnight} weight='semibold' textAlign="center">{(o_side_pick_pct*100).toFixed()} % Picked</Text>
+                <TouchableOpacity style={{ width:75, padding:5, backgroundColor:o_side.status == 'error' ? Colors.highlights.highlight300Faded :Colors.shades.shade600, borderRadius:4, marginRight:3 }} onPress={() => setDraftCompetitionMatchMarket(o_side)}>
+                    <Text textAlign="center" size={12} color={Colors.brand.midnight} weight='semibold'>{o_side.side.toUpperCase()}{market.var_1_required?` ${ManageCompetitionHelpers.getVar1Label(o_side.var_1, market)}`:''}</Text>
+                    <Text textAlign="center" size={12} color={Colors.brand.midnight} weight='semibold'>{ManageCompetitionHelpers.getOddsLabel(o_side.odds)}</Text>
+                </TouchableOpacity>
+            </View>
+            <View>
+                <Text style={{ marginBottom:2 }} size={12} color={Colors.brand.midnight} weight='semibold' textAlign="center">{(trade_side_pick_pct*100).toFixed()} % Picked</Text>
+                <TouchableOpacity style={{ width:75, padding:5, backgroundColor:trade_side.status == 'error' ? Colors.highlights.highlight300Faded :Colors.shades.shade600, borderRadius:4, marginLeft:3 }} onPress={() => setDraftCompetitionMatchMarket(trade_side)}>
+                    <Text textAlign="center" size={12} color={Colors.brand.midnight} weight='semibold'>{trade_side.side.toUpperCase()}{market.var_1_required?` ${ManageCompetitionHelpers.getVar1Label(trade_side.var_1, market)}`:''}</Text>
+                    <Text textAlign="center" size={12} color={Colors.brand.midnight} weight='semibold'>{ManageCompetitionHelpers.getOddsLabel(trade_side.odds)}</Text>
+                </TouchableOpacity>
+            </View>
+            
+        </View>
+    )
+        */
+}
+
+export default CompetitionMatchMarketCard

package/src/CompetitionManager/components/CompetitionSettingsForm.tsx

@@ -0,0 +1,229 @@
+import { FlatList, TextInput, TouchableOpacity, View } from "react-native"
+import React, { useEffect, useState } from "react";
+import type { CompetitionProps, CompetitionResultTypeProps, CompetitionTypeProps, PublicPlayerProps } from "../../types";
+import { ManageCompetitionApi } from "../api";
+import Colors from "../../constants/colors";
+import { Icons, Text } from "../../Components";
+import { view_styles } from "../../constants/styles";
+import DropDown from "../../Components/Dropdown";
+
+type CompetitionSettingsFormProps = {
+    player?: PublicPlayerProps,
+    competition: CompetitionProps,
+    width:number,
+    competition_result_types:CompetitionResultTypeProps[],
+    competition_types:CompetitionTypeProps[],
+    onCompetitionUpdate:(c:CompetitionProps) => void
+}
+
+const market_types = ['FOR_MONEY', 'FREE']
+
+const CompetitionSettingsForm = ({ player, width, competition, competition_types, competition_result_types, onCompetitionUpdate }: CompetitionSettingsFormProps) => {
+    const [ expanded, setExpanded ] = useState(false);
+    //const [ player_selector_visible, setPlayerSelectorVisible ] = useState(false);
+    const [ pacer, setPacer ] = useState<PublicPlayerProps>();
+
+    const competition_type = competition_types.find(ct => ct.competition_type_id == competition?.competition_type_id);
+    const competition_result_type = competition_result_types.find(crt => crt.competition_result_type_id == competition?.competition_result_type_id);
+
+
+
+    useEffect(() => {
+        if(!competition?.pacer_id){ return }
+        if(competition.pacer_id == pacer?.player_id){ return } //Already got him/her
+        getPacerFromServer(competition.pacer_id)
+    },[competition?.pacer_id])
+
+    useEffect(() => {
+        if(!competition_result_type){ return }
+        if(competition_result_type.type == 'outpace' && !competition.pacer_id){
+            setPacer(player)
+            onCompetitionUpdate({ ...competition, pacer_id: player?.player_id })
+        }
+    },[competition_result_type?.type])
+
+    const getPacerFromServer = async(player_id:string) => {
+        const ps = await ManageCompetitionApi.getPlayersByPlayerIds([player_id])
+        setPacer(ps[0])
+    }
+
+    const renderMarketTypes = (data:{ item:string, index:number }) => {
+        const selected = data.item == competition.market_type ? true : false
+        return (
+            <TouchableOpacity style={{ minWidth:75, margin:1, borderRadius:8, padding:10, backgroundColor:selected?Colors.brand.midnight:undefined }} onPress={() => onCompetitionUpdate({ ...competition, market_type: data.item })}>
+                <Text textAlign="center"  color={selected?Colors.shades.white:Colors.brand.midnight} weight={selected?'bold':'regular'} size={14}>{data.item == 'FOR_MONEY'?'USD':'EDGE COINS'}</Text>
+            </TouchableOpacity>
+        )
+    }
+
+    const renderCompetitionTypes = (data:{ item:CompetitionTypeProps, index:number }) => {
+        const selected = data.item.competition_type_id == competition.competition_type_id ? true : false
+        return (
+            <TouchableOpacity style={{ minWidth:75, margin:1, borderRadius:8, padding:10, backgroundColor:selected?Colors.brand.midnight:undefined }} onPress={() => onCompetitionUpdate({ ...competition, competition_type_id: data.item.competition_type_id })}>
+                <Text textAlign="center"  color={selected?Colors.shades.white:Colors.brand.midnight} weight={selected?'bold':'regular'} size={14}>{data.item.type_label}</Text>
+            </TouchableOpacity>
+        )
+    }
+
+    if(!competition){ return <></> }
+    return (
+        <View style={{ ...view_styles.section, flexGrow:1 }}>
+            <TouchableOpacity style={view_styles.section_header} onPress={() => setExpanded(!expanded)}>
+                <View style={{ flex:1 }}>
+                    <Text theme='header'>Competition Settings</Text>
+                    <Text style={{ marginTop:3 }} theme='body'>Manage the high level information of this competition</Text>
+                </View>
+                <Icons.ChevronIcon direction={expanded ? 'up' : 'down'} color={Colors.brand.midnight} size={8} />
+            </TouchableOpacity>
+            {expanded ?
+            <View nativeID="competition_settings" style={{ ...view_styles.section_body, maxWidth:width, backgroundColor:Colors.shades.shade100 }}>
+                
+                    
+                <View nativeID="competition_currency" style={{ ...view_styles.body_row, flexWrap:'wrap', maxWidth:width}}>
+                    <View style={{ flex:1, margin:5, minWidth:200 }}>
+                        <Text theme="header_2">Competition Currency</Text>
+                        <Text style={{ marginTop:3 }} theme="body">Is the ticket price in real-money or edge coins?</Text>
+                    </View>
+                    <View style={{ justifyContent:'flex-end', margin: 5, borderRadius:8, backgroundColor:Colors.shades.white }}>
+                        <FlatList
+                            data={market_types}
+                            renderItem={renderMarketTypes}
+                            keyExtractor={(item) => item}
+                            horizontal
+                        />
+                    </View>
+                </View>
+                    
+                <View nativeID="competition_type" style={{ ...view_styles.body_row, flexWrap:'wrap', maxWidth:width}}>
+                    <View style={{ flex:1, margin:5, minWidth:200 }}>
+                        <Text theme="header_2">Competition Type</Text>
+                        <Text style={{ marginTop:3 }} theme="body">{competition_type?competition_type.description:'Choose the type of competition this is.'}</Text>
+                    </View>
+                    <View style={{ justifyContent:'flex-end', margin:5, borderRadius:8, backgroundColor:Colors.shades.white }}>
+                        <FlatList
+                            data={competition_types}
+                            renderItem={renderCompetitionTypes}
+                            keyExtractor={(item) => item.competition_type_id.toString()}
+                            horizontal
+                        />
+                    </View>
+                </View>
+
+                <View nativeID="competition_payout" style={{ ...view_styles.body_row, flexWrap:'wrap', maxWidth:width}}>
+                    <View style={{ flex:1, margin:5, minWidth:200 }}>
+                        <Text theme="header_2">Competition Payout Type</Text>
+                        <Text style={{ marginTop:3 }} theme="body">{competition_result_type?competition_result_type.description:'Choose the type of payout for this competition'}</Text>
+                    </View>
+                    <View style={{ justifyContent:'flex-end', margin:5, borderRadius:8, backgroundColor:Colors.shades.white }}>
+                        <DropDown
+                            dropdown_options={[
+                                {value: 'competition_result_type_id', eligible_options: competition_result_types.map(t => t.label)}
+                            ]}
+                            selected_value={competition_result_type?.label ?? ''}
+                            onOptionSelect={(type) => {
+                                const new_result_type = competition_result_types.find(crt => crt.label == type);
+                                if(!new_result_type){ return }
+                                onCompetitionUpdate({ ...competition, competition_result_type_id: new_result_type.competition_result_type_id })
+                            }}
+                        />
+                    </View>
+                </View>
+
+                    
+                <View nativeID="buy_in" style={{ ...view_styles.body_row, flexWrap:'wrap', maxWidth:width}}>
+                    <View style={{ flex:1, margin:5, minWidth:200 }}>
+                        <Text theme="header_2">Ticket Price</Text>
+                        <Text style={{ marginTop:3 }} theme="body">Set the amount required to purchase a ticket to participate</Text>
+                    </View>
+                    <TextInput
+                        style={{ ...view_styles.input, textAlign:'center', margin:5, width:100, backgroundColor:Colors.shades.white }}
+                        onChangeText={(text) => onCompetitionUpdate({ ...competition, buy_in: text })}
+                        placeholder="25"
+                        value={competition.buy_in as string}
+                        placeholderTextColor={Colors.brand.slate}
+                    />
+                </View>
+                    
+                    <View nativeID="Max Tickets" style={{ flexDirection:'row', flexWrap:'wrap', padding:10, borderBottomWidth:1, borderBottomColor:Colors.shades.white }}>
+                        <View style={{ flex:1, marginRight:5 }}>
+                            <Text theme="header_2">Max Tickets</Text>
+                            <Text style={{ marginTop:3 }} theme="body">Maximum number of tickets that can be sold</Text>
+                        </View>
+                        <TextInput
+                            style={{ ...view_styles.input, textAlign:'center', width:100, backgroundColor:Colors.shades.white }}
+                            onChangeText={(text) => onCompetitionUpdate({ ...competition, available_tickets: text })}
+                            placeholder="100"
+                            value={competition.available_tickets as string}
+                            placeholderTextColor={Colors.brand.slate}
+                        />
+                    </View>
+                </View>
+            :<></>}
+        </View>
+    )
+}
+
+export default CompetitionSettingsForm
+
+/*
+                    {competition_result_type?.type == 'outpace' ?
+                   <View nativeID="competition_payout_type" style={{ flexDirection:'row', flexWrap:'wrap', padding:10, borderBottomWidth:1, borderBottomColor:Colors.shades.white }}>
+                        <View style={{ flex:1, marginRight:5 }}>
+                            <Text size={16} color={Colors.brand.midnight} weight='bold'>Pacer</Text>
+                            <Text size={14} color={Colors.brand.midnight} weight='regular'>Select the player that must be beat</Text>
+                        </View>
+                        <View style={{ flexDirection:'row', padding:5, backgroundColor:Colors.shades.white, borderRadius:8 }}>
+                            {pacer?
+                            <View style={{ flexDirection:'row', padding:5, backgroundColor:Colors.shades.white, borderRightWidth:1, borderRightColor:Colors.shades.shade600 }}>
+                                <Image 
+                                    source={{ uri: pacer.profile_pic }}
+                                    style={{ height:40, width:40, padding:5 }}
+                                    resizeMode="cover"
+                                />
+                                <View style={{ flex:1, padding:5 }}>
+                                    <Text size={14} color={Colors.brand.midnight}>@{pacer.username}</Text>
+                                </View>
+                            </View>
+                            :<></>}
+                            <Button
+                                title={pacer?'Change':'Add Pacer'}
+                                title_color={Colors.brand.electric}
+                                onPress={() => setPlayerSelectorVisible(true)}
+                            />
+                        </View>
+                    </View>
+                    :<></>}
+*/
+
+
+/*
+            <View style={{ position:'absolute', top:0, left:0, right:0, alignItems:'center' }}>
+                <PlayerSelector
+                    visible={player_selector_visible}
+                    onPlayerSelect={(player) => {
+                        setPacer(player)
+                        onCompetitionUpdate({ ...competition, pacer_id:player.player_id })
+                        setPlayerSelectorVisible(false)
+                    }}
+                    onClose={() => setPlayerSelectorVisible(false)}
+                />
+            </View>
+*/
+
+/*
+{creator?.role == 'admin' ?
+                    <View nativeID="Guaranteed_payout" style={{ flexDirection:'row', flexWrap:'wrap', padding:10, borderBottomWidth:1, borderBottomColor:Colors.shades.white }}>
+                        <View style={{ flex:1, marginRight:5 }}>
+                            <Text size={16} color={Colors.brand.midnight} weight='bold'>Guaranteed Payout (ADMIN ONLY)</Text>
+                            <Text size={14} color={Colors.brand.midnight} weight='regular'>How much payout is guaranteed?</Text>
+                        </View>
+                        <TextInput
+                            style={{ padding:10, borderRadius:8, backgroundColor:Colors.shades.white }}
+                            onChangeText={(text) => onCompetitionUpdate({ ...competition, guaranteed_payout: text })}
+                            placeholder="0"
+                            value={competition.guaranteed_payout}
+                            placeholderTextColor={Colors.brand.slate}
+                        />
+                    </View>
+                    :<></>}
+*/

package/src/CompetitionManager/components/MarketSelector.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { FlatList, ScrollView, TouchableOpacity, View } from "react-native"
+import type { MarketProps } from '../../types';
+import { Button, Switch, Text } from '../../Components';
+import Colors from '../../constants/colors';
+import { view_styles } from '../../constants/styles';
+
+type MarketSelectorProps = {
+    visible:boolean,
+    markets:MarketProps[],
+    selected_markets:string[],
+    onSelectMarket: (market:MarketProps) => void,
+    onDeselectMarket: (market:MarketProps) => void,
+    onClose:() => void
+}
+const MarketSelector = ({ visible, markets, selected_markets, onSelectMarket, onDeselectMarket, onClose } : MarketSelectorProps) => {
+
+
+    const renderMarkets = (data:{item:MarketProps, index:number}) => {
+        const selected = selected_markets.includes(data.item.market_id) ? true : false
+        return (
+            <TouchableOpacity style={{ flexDirection:'row', alignItems:'center', padding:10, borderBottomWidth:1, borderColor:Colors.shades.shade600 }} onPress={() => selected ? onDeselectMarket(data.item) : onSelectMarket(data.item)}>
+                <View style={{ flex:1, marginRight:10 }}>
+                    <Text size={14} color={Colors.brand.midnight} weight='bold'>{data.item.type == 'Stat' ? data.item.stat_label : data.item.type}</Text>
+                    <Text style={{ marginTop:3 }} size={14} color={Colors.brand.midnight} weight='regular'>{data.item.description}</Text>
+                </View>
+                <Switch 
+                    switch_type="on_off"
+                    value={selected}
+                    onChange={() => {
+                        if(!selected){ return onSelectMarket(data.item) }
+                        return onDeselectMarket(data.item)
+                    }}
+                />
+            </TouchableOpacity>
+        )
+    }
+
+    if(!visible){ return <></> }
+
+    return (
+        <View style={{ borderRadius:8, minWidth:250, maxHeight:450, backgroundColor:Colors.shades.white, ...view_styles.float }}>
+            <View style={{ flexDirection:'row' }}>
+                <View style={{ flex:1 }} />
+                <Button
+                        title="CLOSE"
+                        style={{ alignSelf:'flex-end' }}
+                        backgroundColor={Colors.brand.electric}
+                        padding={10}
+                        title_color={Colors.shades.white}
+                        borderRadius={8}
+                        onPress={() => onClose()}
+                    />
+            </View>
+            <ScrollView style={{ flex:1 }}>
+                <FlatList
+                    data={markets}
+                    renderItem={renderMarkets}
+                    keyExtractor={(item) => item.market_id.toString()}
+                />
+            </ScrollView>
+        </View>
+    )
+}
+
+export default MarketSelector

package/src/CompetitionManager/index.tsx

@@ -0,0 +1,163 @@
+import React, { useEffect, useState } from 'react';
+import { ScrollView, View, ActivityIndicator } from "react-native"
+import { view_styles } from '../constants/styles';
+import CompetitionInfoForm from './components/CompetitionInfoForm';
+import type { AthleteProps, CompetitionMatchMarketProps, CompetitionMatchProps, CompetitionPayoutTypeProps, CompetitionProps, CompetitionResultTypeProps, CompetitionTypeProps, EventProps, LeagueProps, MarketProps, MatchProps, TeamProps, TournamentProps } from '../types';
+import Colors from '../constants/colors';
+import { ManageCompetitionApi, ManageCompetitionMatchApi } from './api';
+import CompetitionSettingsForm from './components/CompetitionSettingsForm';
+import CompetitionContestsForm from './components/CompetitionContestsForm';
+
+type CompetitionManagerProps = {
+    player_id?:string,
+    competition_id:string
+}
+
+const CompetitionManager = ({ competition_id }:CompetitionManagerProps) => {
+    const [ module_size, setModuleSize ] = useState({ height:0, width:0 });
+    const [ competition_data, setCompetitionData ] = useState<{
+        loaded:boolean,
+        loading:boolean,
+        competition?:CompetitionProps,
+        draft_competition?:CompetitionProps,
+        competition_result_types:CompetitionResultTypeProps[],
+        competition_payout_types:CompetitionPayoutTypeProps[],
+        competition_types:CompetitionTypeProps[],
+        competition_matches:CompetitionMatchProps[],
+        competition_match_markets:CompetitionMatchMarketProps[],
+        markets:MarketProps[],
+        leagues:LeagueProps[],
+        events:EventProps[],
+        tournaments:TournamentProps[],
+        matches:MatchProps[],
+        teams:TeamProps[],
+        athletes:AthleteProps[]
+        
+    }>({
+        loaded:false,
+        loading:false,
+        competition_result_types: [],
+        competition_types: [],
+        competition_matches: [],
+        competition_payout_types:[],
+        competition_match_markets:[],
+        markets: [],
+        leagues:[],
+        events: [],
+        tournaments: [],
+        matches:[],
+        teams:[],
+        athletes:[]
+    })
+
+    const { loaded, competition, competition_result_types, competition_types, draft_competition, competition_matches, competition_match_markets, markets, leagues, events, tournaments, matches, teams, athletes } = competition_data;
+
+
+    useEffect(() => {
+        if(!loaded){ ManageCompetitionApi.setEnvironment() }
+        getDataFromServer(competition_id);
+    },[competition_id])
+
+    const getDataFromServer = async(id:string) => {
+        const c = await ManageCompetitionApi.getCompetitionById(id);
+        const cm_resp = await ManageCompetitionMatchApi.getCompetitionMatchesByCompetitionId(id);
+        const options = await ManageCompetitionApi.getCompetitionOptions()
+        const lgs = await ManageCompetitionApi.getLeagues();
+        const mks = await ManageCompetitionApi.getMarkets();
+        //Get unique contests
+        let event_ids = cm_resp.competition_matches.filter(cm => cm.event_type == 'team').map(cm => cm.event_id);
+        let tournament_ids = cm_resp.competition_matches.filter(cm => cm.event_type == 'tournament').map(cm => cm.event_id);
+        let match_ids = cm_resp.competition_matches.filter(cm => cm.event_type == 'match').map(cm => cm.event_id);
+        //Get unique side ids
+        let athlete_ids = cm_resp.competition_matches.filter(cm => cm.side_type_override == 'athlete').map(cm => cm.side_id_override ?? '0');
+        let team_ids = cm_resp.competition_matches.filter(cm => cm.side_type_override == 'team').map(cm => cm.side_id_override ?? '0');
+
+        let c_events:EventProps[] = []
+        if(event_ids.length > 0){ c_events = await ManageCompetitionMatchApi.getEventsByEventIds(event_ids) }
+
+        let c_tournaments:TournamentProps[] = []
+        if(tournament_ids.length > 0){ c_tournaments = await ManageCompetitionMatchApi.getTournamentsByTournamentIds(tournament_ids) }
+
+        let c_matches:MatchProps[] = []
+        if(match_ids.length > 0){ c_matches = await ManageCompetitionMatchApi.getMatchesByMatchIds(match_ids) }
+
+        let c_teams:TeamProps[] = []
+        if(team_ids.length > 0){ c_teams = await ManageCompetitionMatchApi.getTeamsByIds(team_ids) }
+
+        let c_athletes:AthleteProps[] = []
+        if(athlete_ids.length > 0){ c_athletes = await ManageCompetitionMatchApi.getAthletesByIds(athlete_ids) }
+
+        setCompetitionData({
+            ...competition_data,
+            loading: false,
+            competition: c,
+            leagues: lgs,
+            competition_types: options.competition_types,
+            competition_payout_types: options.competition_payout_types,
+            competition_result_types: options.competition_result_types,
+            draft_competition: c,
+            competition_matches: cm_resp.competition_matches,
+            competition_match_markets: cm_resp.competition_match_markets,
+            events: c_events,
+            markets: mks,
+            tournaments: c_tournaments,
+            matches: c_matches,
+            teams: c_teams,
+            athletes: c_athletes,
+        })
+
+    }
+
+
+    if(!competition || !draft_competition){
+        return (
+            <View style={{flex:1}}>
+                <ActivityIndicator size='large' color={Colors.brand.midnight} style={{ padding:20, alignSelf:'center' }} />
+            </View>
+        )
+    }
+    console.log(module_size)
+    return (
+        <View style={{ flex:1 }}>
+            <ScrollView style={{ flex:1 }} onLayout={(ev) => {
+                const { width, height } = ev.nativeEvent.layout;
+                setModuleSize({ height, width })
+            }}>
+                <View style={{ ...view_styles.wrapper }}>
+                    <CompetitionInfoForm
+                        competition={draft_competition}
+                        width={module_size.width - 20}
+                        onCompetitionUpdate={(comp) => setCompetitionData({ ...competition_data, draft_competition: comp})}
+                    />
+                    <CompetitionSettingsForm
+                        competition={draft_competition}
+                        width={module_size.width - 20}
+                        competition_result_types={competition_result_types}
+                        competition_types={competition_types}
+                        onCompetitionUpdate={(comp) => setCompetitionData({ ...competition_data, draft_competition: comp})}
+                    />
+                    <CompetitionContestsForm
+                        width={module_size.width - 20}
+                        competition={draft_competition}
+                        competition_matches={competition_matches}
+                        competition_match_markets={competition_match_markets}
+                        events={events}
+                        teams={teams}
+                        athletes={athletes}
+                        tournaments={tournaments}
+                        matches={matches}
+                        leagues={leagues}
+                        markets={markets}
+                        onSaveCompetitionMatch={() => console.log('SAVE EVENT')}
+                        onDeleteCompetitionMatch={() => console.log('DELEVE')}
+                        onUpdateCompetitionMatch={() => console.log('UPDATE')}
+                        onSaveCompetitionMatchMarkets={(smms) => console.log(smms)}
+                        onDeleteCompetitionMatchMarkets={(cmms) => console.log(cmms)}  
+                    />
+                </View>
+            </ScrollView>
+        </View>
+    )
+}
+
+export default CompetitionManager