be-components 1.2.7 → 1.2.9

package/src/CompetitionManager/components/CompetitionContestsForm.tsx

@@ -0,0 +1,473 @@
+import React, { } from 'react';
+//import { FlatList, Image, TouchableOpacity, View } from "react-native"
+import type { AthleteProps, CompetitionMatchMarketProps, CompetitionMatchProps, CompetitionProps, EventProps, LeagueProps, MarketProps, MatchProps, TeamProps, TournamentProps } from '../../types';
+//import { ManageCompetitionApi } from '../api';
+//import Colors from '../../constants/colors';
+//import { Button, Icons, Text } from '../../Components';
+//import CompetitionMatchMarketCard from './CompetitionMatchMarketCard';
+//import moment from 'moment-mini';
+//import { view_styles } from '../../constants/styles';
+//import MarketSelector from './MarketSelector';
+
+
+
+type CompetitionContestsFormProps = {
+    width:number,
+    competition:CompetitionProps,
+    markets:MarketProps[],
+    leagues:LeagueProps[],
+    events:EventProps[],
+    tournaments:TournamentProps[],
+    matches:MatchProps[],
+    athletes:AthleteProps[],
+    teams:TeamProps[],
+    competition_matches: CompetitionMatchProps[],
+    competition_match_markets:CompetitionMatchMarketProps[],
+    onSaveCompetitionMatch:(competition_id:string, event_id:string, event_type:string, match_type:string, event:EventProps, market_id_override?:string, side_type_override?:string, side_id_override?:string) => void,
+    onUpdateCompetitionMatch:(cm:CompetitionMatchProps) => void,
+    onSaveCompetitionMatchMarkets: (cmms:CompetitionMatchMarketProps[]) => void,
+    onDeleteCompetitionMatchMarkets:(cmms:CompetitionMatchMarketProps[]) => void,
+    onDeleteCompetitionMatch: (competition_match_id:string) => void
+}
+
+
+const CompetitionContestsForm = ({ }:CompetitionContestsFormProps) => {
+    
+    /*
+    const [ expanded, setExpanded ] = useState(true);
+    const [ contests_visible, setContestsVisible ] = useState(false);
+    const [ show_match_markets, setShowMatchMarkets ] = useState<string[]>([]);
+    const [ selectable_athletes, setAthletes ] = useState<AthleteProps[]>([]);
+    const [ selectable_events, setTeamEvents ] = useState<EventProps[]>([]);
+    const [ competition_summaries, setCompetitionSummaries ] = useState<any[]>([]);
+    const [ show_athletes, setShowAthletes ] = useState<{
+        visible:boolean,
+        event_id?:string,
+        event_type?:string,
+        market_id?:string,
+        team_ids:string[],
+        restricted_ids?:string[],
+        top:number,
+        right:number,
+        positions:string[],
+        selected_athletes:string[],
+
+    }>({
+        visible:false,
+        positions:[],
+        top:0,
+        right:0,
+        selected_athletes:[],
+        team_ids:[]
+    })
+    const [ show_markets, setShowMarkets ] = useState<{
+        visible:boolean,
+        event_id?:string,
+        event_type?: string,
+        selected_markets:string[],
+        supported_markets:MarketProps[],
+    }>({
+        visible:false,
+        supported_markets: [],
+        selected_markets: [],
+    });
+    const unique_team_events = [ ...new Set(competition_matches.filter(cm => cm.event_type == 'team').map(cm => cm.event_id)) ]
+
+*/
+
+/*
+    const handleSelectEvent = async(event:EventProps) => {
+        onSaveCompetitionMatch(competition.competition_id, event.event_id, 'team', 'event', event)
+        //setTeamEvents(team_events.concat(event))
+    }
+*/
+/*
+    const handleSelectAthlete = async(athlete:AthleteProps) => {
+        
+        if(!show_athletes?.event_id){ return alert('Unable to process') }
+        setAthletes(athletes.concat(athlete))
+        let latest_trades = await MarketApi.getLatestTradesByEventIds([show_athletes.event_id], show_athletes.event_type);
+        latest_trades = latest_trades.filter(lt => lt.market_id == show_athletes.market_id && lt.market_type == 'FOR_MONEY' && lt.side_type == 'athlete' && lt.side_id == athlete.athlete_id);
+        if(latest_trades.length !== 2){ return alert('We do not have data for this athlete') }
+        //First we need to check if we have an empty competition match (match with no side_id_override)
+        const existing_cm = competition_matches.find(cm => cm.event_id == show_athletes.event_id && cm.event_type == show_athletes.event_type && cm.market_id_override == show_athletes.market_id && !cm.side_id_override);
+        if(existing_cm){
+            //Then we just need to add the side_id override to the cm and then create the cmms
+            onUpdateCompetitionMatch({ ...existing_cm, side_id_override: athlete.athlete_id })
+            //Create the cmms
+            const cmms:CompetitionMatchMarketProps[] = []
+            latest_trades.map(t => cmms.push({ ...createCompetitionMatchMarketFromTrade(t), competition_match_id: existing_cm.competition_match_id }))
+            if(cmms.length != 2){ return alert('Unable to process') }
+            onSaveCompetitionMatchMarkets(cmms)
+        } else {
+            //There was not an existing placeholder - we now need to auto create a match
+            switch(show_athletes.event_type){
+                case 'team':
+                    const event = team_events.find(e => e.event_id == show_athletes.event_id)
+                    if(!event){ return alert('Unable to process') }
+                    const new_cm = await onSaveCompetitionMatch(competition.competition_id, show_athletes.event_id, show_athletes.event_type, 'athlete', event, show_athletes.market_id, 'athlete', athlete.athlete_id);
+                    const cmms:CompetitionMatchMarketProps[] = []
+                    latest_trades.map(t => cmms.push({ ...createCompetitionMatchMarketFromTrade(t), competition_match_id: new_cm.competition_match_id }))
+                    if(cmms.length != 2){ return alert('Unable to process') }
+                    onSaveCompetitionMatchMarkets(cmms)
+                    break
+                default: return alert('Not handled for this!')
+            }
+        }
+        setShowAthletes({
+            ...show_athletes,
+            selected_athletes: show_athletes.selected_athletes.concat(athlete.athlete_id)
+        })
+        
+    }
+    */
+
+    /*
+
+    const handleSelectMarket = async(market:MarketProps) => {
+        
+        if(!show_markets){ return alert('Unable to process') }
+        if(market.level == 'event' && market.primary_market){
+            let competition_match = competition_matches.find(cm => cm.event_id == show_markets.event_id && cm.event_type == show_markets.event_type && !cm.market_id_override)
+            if(!competition_match){ return alert('Unable to process this primary market!') }
+            //HERE IS HWERE WE WILL CREATE THE EMPTY MATCH MARKET!
+            let latest_trades = await MarketApi.getLatestTradesByEventIds([show_markets.event_id], show_markets.event_type);
+            latest_trades = latest_trades.filter(lt => lt.market_id == market.market_id && lt.market_type == 'FOR_MONEY');
+            if(latest_trades.length != 2){ return alert('Unable to add this market') }
+            const cmms:CompetitionMatchMarketProps[] = []
+            latest_trades.map(t => cmms.push({ ...createCompetitionMatchMarketFromTrade(t), competition_match_id: competition_match.competition_match_id }))
+            if(cmms.length != 2){ return alert('Unable to process') }
+            onSaveCompetitionMatchMarkets(cmms)
+            setShowMarkets({ ...show_markets, selected_markets: show_markets.selected_markets.concat(market.market_id)})
+            return
+        }
+        //Okay! This was a non-primary market
+        //There will not be an existing competition match so we need to create a new one!
+        if(market.event_type == 'team'){
+            let event = team_events.find(e => e.event_id == show_markets.event_id);
+            if(!event){ return alert('Unable to process this') }
+            onSaveCompetitionMatch(competition.competition_id, show_markets.event_id, show_markets.event_type, market.level, event, market.market_id, market.level, undefined);
+            setShowMarkets({ ...show_markets, selected_markets: show_markets.selected_markets.concat(market.market_id)})
+            return
+        }
+        
+    }
+        */
+
+    /*
+
+    const renderMarkets = (data: { item:string, index:number, event_id:string, event_type:string }) => {
+        const market = markets.find(m => m.market_id == data.item);
+        if(!market){ return <></> }
+        const show_details = show_match_markets.includes(`${data.event_type}:${data.event_id}:${data.item}`) ? true : false
+
+        return (
+            <TouchableOpacity style={{ flex:1,borderRadius:8, borderWidth:1, borderColor:Colors.shades.shade600, padding:10, margin:3, maxWidth:125, minWidth:75, backgroundColor:show_details ? Colors.brand.midnight : Colors.shades.white }}
+            onPress={() => {
+                if(show_details){ return setShowMatchMarkets(show_match_markets.filter(smm => smm != `${data.event_type}:${data.event_id}:${data.item}`)) }
+                return setShowMatchMarkets(show_match_markets.concat(`${data.event_type}:${data.event_id}:${data.item}`))
+            }}>
+                <Text size={14} color={show_details?Colors.shades.white:Colors.brand.midnight} weight="bold" textAlign="center">{market.stat_label ?? market.type}</Text>
+                <Text style={{ marginTop:3 }} size={12} color={show_details?Colors.shades.white:Colors.brand.midnight} textAlign="center">{market.description}</Text>
+                {market.level == 'athlete' && show_details ?
+                <Button
+                    title="Add Athlete"
+                    title_size={10}
+                    style={{ marginTop:5 }}
+                    title_color={Colors.brand.electric}
+                    backgroundColor={Colors.shades.white}
+                    onPress={async(evt) => {
+                        
+                        if(data.event_type != 'team'){ return alert('Only supported for team based events currently') }
+
+                        let latest_trades = await MarketApi.getLatestTradesByEventIds([data.event_id], data.event_type);
+                        latest_trades = latest_trades.filter(lt => lt.market_id == data.item && lt.market_type == 'FOR_MONEY' && lt.side_type == 'athlete');
+                        let restricted_ids = [ ...new Set(latest_trades.map(t => t.side_id)) ]
+                        const event = team_events.find(e => e.event_id == data.event_id)
+                        let team_ids = [event.away_team_id, event.home_team_id]
+
+                        const selected_athletes = competition_matches.filter(cm => cm.event_id == data.event_id && cm.event_type == data.event_type && cm.market_id_override == data.item && cm.side_type_override=='athlete').map(cm => cm.side_id_override);
+
+                        setShowAthletes({
+                            visible: true,
+                            selected_athletes,
+                            team_ids,
+                            market_id:data.item,
+                            restricted_ids,
+                            positions:market.supported_positions ?? [],
+                            event_id:data.event_id,
+                            event_type: data.event_type,
+                            top:evt.nativeEvent.offsetX,
+                            right:evt.nativeEvent.offsetY
+                        })
+                        
+                    }}
+                />
+                :<></>}
+            </TouchableOpacity>
+                
+        )
+    }
+    */
+
+    /*
+    const showDetails = (show_event_id:string, show_event_type:string) => {
+        
+        let show_cms:CompetitionMatchProps[] = []
+        show_match_markets.map(smm => {
+            let split_smm = smm.split(':')
+            let event_type = split_smm[0]
+            let event_id = split_smm[1]
+            let market_id = split_smm[2]
+            if(event_id != show_event_id){ return }
+            if(show_event_type != event_type){ return }
+            const market = markets.find(m => m.market_id == market_id);
+            if(market.level == 'event' && market.primary_market){
+                const primary_cm = competition_matches.find(cm => cm.event_id == event_id && cm.event_type == event_type && !cm.market_id_override);
+                const primary_cmms = competition_match_markets.filter(cmm => cmm.competition_match_id == primary_cm?.competition_match_id && cmm.market_id == market_id);
+                show_cms.push({ ...primary_cm, competition_match_markets:primary_cmms })
+            }
+            if(market.level == 'athlete'){
+                const cms = competition_matches.filter(cm => cm.event_id == event_id && cm.event_type == event_type && cm.market_id_override == market_id)
+                cms.map(cm => {
+                    let cmm = competition_match_markets.filter(cmm => cmm.competition_match_id == cm.competition_match_id);
+                    if(cmm.length == 2){
+                        show_cms.push({ ...cm, competition_match_markets: cmm })
+                    }
+                })
+            }
+            
+        })
+        return show_cms
+        
+       return []
+    }
+       */
+
+    /*
+
+    const getMatchTitle = (cm:CompetitionMatchProps, market:MarketProps):{image_url?:string, header:string, description:string} => {
+        
+        let error = { header: 'Market', description:market.description }
+        switch(cm.event_type){
+            case 'team':
+                const event = team_events.find(e => e.event_id == cm.event_id)
+                if(!event){ return error }
+                if(!cm.market_id_override){
+                    //This is a primary one that we can just do the market name and event title
+                    return { header: event.event_title, description: market.description }
+                }
+                switch(cm.side_type_override){
+                    case 'athlete':
+                        const athlete = athletes.find(a => a.athlete_id == cm.side_id_override)
+                        if(!athlete){ return error }
+                        return { image_url:athlete.image?.url, header: `${athlete.first_name} ${athlete.last_name} ${market.stat_label}`, description:market.description }
+                    default: return error
+                }
+            default: return error
+        }
+        
+    }
+        */
+
+    /*
+
+    const renderCompetitionMatches = (data: { item:CompetitionMatchProps, index:number }) => {
+        if(!data.item.competition_match_markets){ return }
+        const market = markets.find(m => data.item.competition_match_markets && m.market_id == data.item.competition_match_markets[0]?.market_id)
+        if(!market){ return <></> }
+
+        const { image_url, header, description } = getMatchTitle(data.item, market)
+        let match_summaries = competition_summaries.filter(cs => cs.competition_match_id == data.item.competition_match_id && cs.market_id == market.market_id)
+        if(data.item.side_id_override){
+            match_summaries = match_summaries.filter(ms => ms.side_id == data.item.side_id_override);
+        }
+        return (
+            <View style={{ padding:10, flexDirection:'row', alignItems:'center', borderBottomWidth:1, borderColor:Colors.shades.shade600 }}>
+                <Button
+                    title="X"
+                    style={{ marginRight:5 }}
+                    borderWidth={0}
+                    title_size={12}
+                    title_color={Colors.utility.error}
+                    onPress={() => {
+                        if(data.item.market_id_override){
+                            //return onDeleteCompetitionMatch(data.item.competition_match_id)
+                        }
+                        //return onDeleteCompetitionMatchMarkets(data.item.competition_match_markets)
+                    }}
+                />
+                {image_url ?
+                <View style={{ padding:5 }}>
+                    <Image
+                        source={{ uri:image_url }}
+                        style={{ marginRight:10, height:40, width:40, borderRadius:100 }}
+                        resizeMode="center"
+                    />
+                </View>
+                :<></>}
+                <View style={{ flex:1 }}>
+                    <Text size={14} weight='bold'>{header}</Text>
+                    <Text style={{ marginTop:3 }} size={12} weight='bold'>{description}</Text>
+                </View>
+                <CompetitionMatchMarketCard
+                    event_id={data.item.event_id}
+                    event_type={data.item.event_type}
+                    competition_match_id={data.item.competition_match_id}
+                    competition_match_markets={data.item.competition_match_markets}
+                    competition_summaries={match_summaries}
+                    market={market}
+                    onSaveMarkets={(cmms) => console.log(cmms)}
+                    onUpdateMarkets={(cmms) => console.log(cmms)}
+                    onGenerateMarkets={() => console.log('Blah')}
+                />
+            </View>
+        )
+    }
+        
+    const renderTeamEvents = (data: { item:string, index:number }) => {
+        const event = events.find(e => e.event_id == data.item);
+        if(!event){ return <></> }
+        if(!event.supported_markets){ return <></> }
+        const supported_markets = markets.filter(m => event.supported_markets?.map(sm => sm.market_id.toString()).includes(m.market_id.toString()));
+        const cms = competition_matches.filter(cm => cm.event_id == data.item && cm.event_type == 'team');
+        const cmms = competition_match_markets.filter(cmm => cms.map(cm => cm.competition_match_id.toString()).includes(cmm.competition_match_id));
+        const unique_market_ids = [ ...new Set(cmms.map(cmm => cmm.market_id).concat(cms.filter(cm => cm.market_id_override).map(cm => cm.market_id_override))) ]
+        const league = leagues.find(l => l.league_id == event.league_id);
+        const visible_matches = showDetails(data.item, 'team')
+
+        return (
+            <View style={{ borderWidth:1, borderColor:Colors.shades.shade600, borderRadius:8, margin:10, zIndex: data.index * -1 }}>
+                <View style={{ flexDirection:'row', padding:15, zIndex:1}}>
+                    {['pending','paused'].includes(competition.status) && cms.length == 1 && cmms.length == 0 ? 
+                    <Button
+                        title="X"
+                        title_color={Colors.utility.error}
+                        borderRadius={8}
+                        borderWidth={1}
+                        borderColor={Colors.utility.error}
+                        onPress={() => onDeleteCompetitionMatch(cms[0]?.competition_match_id)}
+                    />
+                    :<></>}
+                    <View style={{ flex:1, flexDirection:'row', alignItems:'center' }}>
+                        {league?.league_image ?
+                        <Image
+                            source={{ uri: league.league_image }}
+                            style={{ height:30, width:30, marginRight:10 }}
+                            resizeMode="cover"
+                        />
+                        :<></>}
+                        <View>
+                            <Text size={14} color={Colors.brand.midnight} weight='bold'>{event.away.market_name} {event.away.name} vs {event.home.market_name} {event.home.name}</Text>
+                            <Text style={{ marginTop:4 }} size={12} color={Colors.brand.midnight}>{moment(event.scheduled_datetime).format('MMMM DD hh:mm a')}</Text>
+                        </View>
+                    </View>
+                    <Button
+                        title="Add Markets"
+                        title_color={Colors.shades.white}
+                        backgroundColor={Colors.brand.midnight}
+                        onPress={() => {
+                            setShowMarkets({
+                                visible:true,
+                                event_id: data.item,
+                                event_type: 'team',
+                                selected_markets:unique_market_ids,
+                                supported_markets,
+                            })
+                        }}
+                    />
+                    <View style={{ position:'absolute', top:0, right:0, ...view_styles.section, maxWidth:300 }}>
+                        <MarketSelector
+                            visible={show_markets.event_id == data.item ? true : false}
+                            markets={show_markets.supported_markets}
+                            selected_markets={show_markets.selected_markets}
+                            onSelectMarket={(market) => handleSelectMarket(market)}
+                            onDeselectMarket={(market) => console.log(market)}
+                            onClose={() => setShowMarkets({ visible: false, supported_markets:[], selected_markets:[] })}
+                        />
+                    </View>
+                </View>
+                {unique_market_ids.length > 0 ?
+                <View style={{ padding:10, backgroundColor:Colors.shades.shade100 }}>
+                    <Text style={{ marginBottom:5 }} size={16} weight='bold'>Selected Markets</Text>
+                     <View style={{ flexDirection:'row', flexWrap: 'wrap', padding:10 }}>
+                        {unique_market_ids.map((market_id, index) => {
+                            return (
+                                renderMarkets({ item: market_id, index, event_id:data.item, event_type:'team' })
+                            )
+                        })}
+                    </View>
+                </View>
+                :<></>}
+                {visible_matches.length > 0 ?
+                    <FlatList
+                        data={visible_matches}
+                        renderItem={renderCompetitionMatches}
+                        keyExtractor={(item) => item.competition_match_id.toString()}
+                    />
+                :<></>}
+            </View>
+        )
+    }
+
+    */
+
+    return (<></>)
+/*
+    return (
+        <View style={{ ...view_styles.section, minWidth:350, flexGrow:1, maxWidth:width }}>
+            <TouchableOpacity style={{ ...view_styles.section_header }} onPress={() => setExpanded(!expanded)}>
+                <View style={{ flex:1, marginRight:10 }}>
+                    <Text theme='header'>Competition Contests</Text>
+                    <Text style={{ marginTop:3 }} theme='body'>Competitions require contests for users to make picks / wagers.  Select 'Add Contests' to get started.</Text>
+                </View>
+                <Icons.ChevronIcon direction={expanded ? 'up' : 'down'} size={8} color={Colors.brand.midnight} />
+            </TouchableOpacity>
+            {expanded ?
+            <View style={{ ...view_styles.section_body }}>
+                {unique_team_events.map((id, index) => {
+                    return renderTeamEvents({ item:id, index })
+                })}
+            </View>
+            :<></>}
+        </View>
+    )
+        */
+}
+
+export default CompetitionContestsForm
+
+
+
+/*
+<View style={{ position:'absolute', top:show_athletes.top, right:show_athletes.right }}>
+                    <AthleteSelector
+                        onClose={() => setShowAthletes({ visible:false, positions:[], selected_athletes: [], top:0, right:0, team_ids:[] })}
+                        onDeselectAthlete={(athlete) => console.log(athlete)}
+                        onSelectAthlete={(athlete) => handleSelectAthlete(athlete)}
+                        team_ids={show_athletes.team_ids}
+                        restricted_ids={show_athletes.restricted_ids}
+                        selected_athletes={show_athletes.selected_athletes}
+                        visible={show_athletes.visible}
+                    />
+                </View>
+*/
+
+
+/*
+<Button
+                    title="Add Contests"
+                    backgroundColor={Colors.brand.electric}
+                    title_color={Colors.shades.white}
+                    onPress={() => setContestsVisible(true)}
+                />
+                <View style={{ position:'absolute', top:0, right:0 }}>
+                    <ContestSelector 
+                        visible={contests_visible}
+                        selected_events={unique_team_events}
+                        onSelectEvent={(event) => handleSelectEvent(event)}
+                        onDeselectEvent={(event) => console.log(event)}
+                        onClose={() => setContestsVisible(false)}
+                    />
+                </View>
+*/

package/src/CompetitionManager/components/CompetitionInfoForm.tsx

@@ -0,0 +1,171 @@
+import React, { useState } from 'react';
+import { View, TouchableOpacity } from "react-native"
+import { view_styles } from "../../constants/styles"
+//import ImageUploader from '../../Components/ImageUploader';
+import type { CompetitionProps } from '../../types';
+import { Icons, Switch, Text, TextInput } from '../../Components';
+import Colors from '../../constants/colors';
+//import DropDown from '../../Components/Dropdown';
+
+type CompetitionInfoFormProps = {
+    competition:CompetitionProps,
+    width: number,
+    onCompetitionUpdate:(competition:CompetitionProps) => void
+}
+
+const CompetitionInfoForm = ({ competition, width, onCompetitionUpdate }:CompetitionInfoFormProps) => {
+    const [ expanded, setExpanded ] = useState(false);
+
+
+
+    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 Information</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_info" style={{ ...view_styles.section_body, minWidth:300, maxWidth:width }}>
+                
+                <View nativeID="competition_name" style={{ ...view_styles.body_row, flexWrap:'wrap', maxWidth:width}}>
+                    <View style={{ flex:1, margin:5, minWidth:200 }}>
+                        <Text theme='header_2'>Competition Name</Text>
+                        <Text style={{ marginTop:3 }} theme='body'>Give the competition a memorable name that aligns with the type and payout.</Text>
+                    </View>
+                    <TextInput
+                        style={{ ...view_styles.input, flexGrow:1, margin:5 }}
+                        onChangeText={(text) => onCompetitionUpdate({ ...competition, competition_name:text })}
+                        value={competition.competition_name}
+                        placeholder="Competition Name"
+                        placeholderTextColor={Colors.brand.slate}
+                    />
+                </View>
+
+                <View nativeID="competition_description" style={{ ...view_styles.body_row, flexWrap:'wrap', maxWidth:width}}>
+                    <View style={{ flex:1, margin:5, minWidth:200 }}>
+                        <Text theme='header_2'>Competition Description</Text>
+                        <Text style={{ marginTop:3 }} theme='body'>Give the competition a memorable description that would entice users to participate.</Text>
+                    </View>
+                    <TextInput
+                        style={{ ...view_styles.input, flexGrow:1, margin:5 }}
+                        onChangeText={(text) => onCompetitionUpdate({ ...competition, competition_description:text })}
+                        value={competition.competition_description}
+                        placeholder="Pick 5 games ATS from NFL Week 6 matchups"
+                        placeholderTextColor={Colors.brand.slate}
+                    />
+                </View>
+
+                <View nativeID="invite_only" style={{ ...view_styles.body_row, flexWrap:'wrap' }}>
+                    <View style={{ flex:1, margin:5, marginRight:15 }}>
+                        <Text theme='header_2'>Make Private</Text>
+                        <Text style={{ marginTop:3 }} theme='body'>Only access this competition using an invite code.</Text>
+                    </View>
+                    <Switch
+                        value={competition.invite_only}
+                        switch_type="on_off"
+                        onChange={(value) => onCompetitionUpdate({ ...competition, invite_only: value })}
+                    />
+                </View>
+                {false ?
+                <View nativeID="competition_description" style={{ ...view_styles.body_row, flexWrap:'wrap', maxWidth:width}}>
+                    <View style={{ flex:1, margin:5, minWidth:200 }}>
+                        <Text theme='header_2'>League Name</Text>
+                        <Text style={{ marginTop:3 }} theme='body'>Set the name of the league</Text>
+                    </View>
+                    <TextInput
+                        style={{ ...view_styles.input, flexGrow:1 }}
+                        onChangeText={(text) => onCompetitionUpdate({ ...competition, league_name:text })}
+                        value={competition.league_name}
+                        placeholder="Add a league name"
+                        placeholderTextColor={Colors.brand.slate}
+                    />
+                </View>
+                :<></>}
+                {false ?
+                <View nativeID="invite_only" style={{ ...view_styles.body_row, flexWrap:'wrap' }}>
+                    <View style={{ flex:1, margin:5, minWidth:200 }}>
+                        <Text theme='header_2'>Additional Prize</Text>
+                        <Text style={{ marginTop:3 }} theme='body'>Is there an additional prize that will be delivered?</Text>
+                    </View>
+                    <Switch
+                        value={competition.prize_override ? true : false}
+                        switch_type="on_off"
+                        onChange={(value) => onCompetitionUpdate({ ...competition, prize_override: value ? 'Additional Prize!': undefined })}
+                    />
+                </View>
+                :<></>}
+            </View>
+            :<></>}
+        </View>
+    )
+}
+
+export default CompetitionInfoForm
+
+
+/*
+{competition.prize_override || competition.prize_override == '' ?
+            <View nativeID="competition_info" style={{ margin:10, flex:4, flexGrow:4, minWidth:300, padding:10, borderRadius:4, marginRight:5, ...styles.float }}>
+                <View nativeID="header_row" style={{ flexDirection:'row', alignItems:'center', padding:5, borderBottomWidth:1, borderBottomColor:Colors.shades.shade600 }}>
+                    <Text style={{ flex:1, marginRight:10 }} size={22} color={Colors.brand.slate} weight='bold'>Competition Prize Details</Text>
+                </View>
+                <View nativeID="competition_prize" style={{ flexDirection:'row', flexWrap:'wrap', alignItems:'center', padding:10 }}>
+                    <View nativeID="prize_image">
+                        <View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
+                        {competition.prize_image?.url ?
+                        <Image
+                            source={{ uri : competition.prize_image.url }}
+                            style={{ height: 100, width:100 }}
+                            resizeMode="center"
+                        />
+                        :
+                        <Text>NO IMAGE!!</Text>
+                        }
+                    </View>
+                    <ImageUploader
+                        public_id={`comp_prize_${competition.competition_id}_image_${Math.random()}`}
+                        label="Change Image"
+                        onFinishUpload={(obj) => onCompetitionUpdate({ ...competition, prize_image: { ...obj, url: obj.secure_url } })}
+                    />
+                    </View>
+                    <View style={{ flex:1, minWidth:200 }}>
+                        <View style={{ margin:5 }}>
+                            <Text size={16} color={Colors.brand.midnight} weight='bold'>Prize Override</Text>
+                            <Text size={14} color={Colors.brand.midnight} weight='regular'>Add details for the prize that will be delivered</Text>
+                        </View>
+                        <TextInput
+                            style={{ minWidth:300, margin:5, padding:10, borderRadius:8,borderWidth:1, borderColor:Colors.shades.shade600 }}
+                            onChangeText={(text) => onCompetitionUpdate({ ...competition, prize_override:text })}
+                            value={competition.prize_override}
+                            placeholder="Add a league name"
+                            placeholderTextColor={Colors.brand.slate}
+                        />
+                    </View>
+                </View>
+            </View>
+            :<></>}
+*/
+
+
+/*
+<View style={{ ...view_styles.body_row, flexWrap:'wrap' }}>
+    <View style={{ flex:1, margin:5, minWidth:250 }}>
+        <Text theme='header_2'>Authenticate Strategy</Text>
+        <Text style={{ marginTop:3 }} theme='body'>What data would you like to collect in order to participate in this competition?</Text>
+    </View>
+    <DropDown
+        dropdown_options={[
+            {value: 'Strategy', eligible_options: auth_strategies.map(as => as.name)}
+        ]}
+        selected_value={selected_strategy}
+        onOptionSelect={(option) => {
+            let strategy = auth_strategies.find(as => as.name == option)
+            if(competition.status != 'pending'){ return alert('Auth strategy cannot be changed after competition is activated') }
+            onCompetitionUpdate({ ...competition, auth_strategy_id: strategy.auth_strategy_id })
+        }}
+    />
+</View>
+*/