be-components 1.3.0 → 1.3.2

package/src/CompetitionManager/components/CompetitionSettingsForm.tsx

@@ -1,9 +1,9 @@
 import { FlatList, TextInput, TouchableOpacity, View } from "react-native"
 import React, { useEffect, useState } from "react";
-import type { CompetitionProps, CompetitionResultTypeProps, CompetitionTypeProps, PublicPlayerProps } from "../../types";
+import type { CompetitionProps, CompetitionResultTypeProps, PublicPlayerProps } from "../../types";
 import { ManageCompetitionApi } from "../api";
 import Colors from "../../constants/colors";
-import { Icons, Text } from "../../Components";
+import { Button, Icons, Text } from "../../Components";
 import { view_styles } from "../../constants/styles";
 import DropDown from "../../Components/Dropdown";
 
@@ -11,22 +11,24 @@ type CompetitionSettingsFormProps = {
     player?: PublicPlayerProps,
     competition: CompetitionProps,
     width:number,
+    is_valid?:boolean,
     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 CompetitionSettingsForm = ({ is_valid, player, width, competition, competition_result_types, onCompetitionUpdate }: CompetitionSettingsFormProps) => {
     const [ expanded, setExpanded ] = useState(false);
+    const [ draft_competition, setDraftCompetition ] = useState<CompetitionProps | undefined>(undefined);
     //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(() => {
+        setDraftCompetition(competition);
+    },[competition])
 
     useEffect(() => {
         if(!competition?.pacer_id){ return }
@@ -48,32 +50,42 @@ const CompetitionSettingsForm = ({ player, width, competition, competition_types
     }
 
     const renderMarketTypes = (data:{ item:string, index:number }) => {
+        if(!draft_competition){ return <></> }
         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 })}>
+            <TouchableOpacity style={{ minWidth:75, margin:1, borderRadius:8, padding:10, backgroundColor:selected?Colors.brand.midnight:undefined }} onPress={() => onCompetitionUpdate({ ...draft_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 <></> }
+    if(!competition || !draft_competition){ return <></> }
+    const is_changed = JSON.stringify(competition) != JSON.stringify(draft_competition) ? true : false
+
     return (
         <View style={{ ...view_styles.section, flexGrow:1 }}>
-            <TouchableOpacity style={view_styles.section_header} onPress={() => setExpanded(!expanded)}>
-                <View style={{ flex:1 }}>
+            <TouchableOpacity style={{ ...view_styles.section_header, maxWidth: width }} onPress={() => setExpanded(!expanded)}>
+                {is_valid ?
+                <Icons.CheckCirlceIcon size={16} color={Colors.utility.success} />
+                :
+                <Icons.AlertIcon size={16} color={Colors.utility.warning} />
+                }
+                <View style={{ flex:1, marginLeft:10 }}>
                     <Text theme='header'>Competition Settings</Text>
                     <Text style={{ marginTop:3 }} theme='body'>Manage the high level information of this competition</Text>
                 </View>
+                {is_changed ?
+                <Button
+                    title='SAVE'
+                    padding={10}
+                    title_color={Colors.shades.white}
+                    backgroundColor={Colors.utility.success}
+                    onPress={() => onCompetitionUpdate(draft_competition)}
+                />
+                :
                 <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 }}>
@@ -93,21 +105,6 @@ const CompetitionSettingsForm = ({ player, width, competition, competition_types
                         />
                     </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 }}>
@@ -123,12 +120,11 @@ const CompetitionSettingsForm = ({ player, width, competition, competition_types
                             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 })
+                                onCompetitionUpdate({ ...draft_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 }}>
@@ -137,9 +133,9 @@ const CompetitionSettingsForm = ({ player, width, competition, competition_types
                     </View>
                     <TextInput
                         style={{ ...view_styles.input, textAlign:'center', margin:5, width:100, backgroundColor:Colors.shades.white }}
-                        onChangeText={(text) => onCompetitionUpdate({ ...competition, buy_in: text })}
+                        onChangeText={(text) => setDraftCompetition({ ...draft_competition, buy_in: text })}
                         placeholder="25"
-                        value={competition.buy_in as string}
+                        value={draft_competition.buy_in as string}
                         placeholderTextColor={Colors.brand.slate}
                     />
                 </View>
@@ -151,9 +147,9 @@ const CompetitionSettingsForm = ({ player, width, competition, competition_types
                         </View>
                         <TextInput
                             style={{ ...view_styles.input, textAlign:'center', width:100, backgroundColor:Colors.shades.white }}
-                            onChangeText={(text) => onCompetitionUpdate({ ...competition, available_tickets: text })}
+                            onChangeText={(text) => setDraftCompetition({ ...draft_competition, available_tickets: text })}
                             placeholder="100"
-                            value={competition.available_tickets as string}
+                            value={draft_competition.available_tickets as string}
                             placeholderTextColor={Colors.brand.slate}
                         />
                     </View>
@@ -163,67 +159,4 @@ const CompetitionSettingsForm = ({ player, width, competition, competition_types
     )
 }
 
-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>
-                    :<></>}
-*/
+export default CompetitionSettingsForm

package/src/CompetitionManager/components/ContestSelector.tsx

@@ -0,0 +1,269 @@
+import React, { useEffect, useState } from 'react';
+import { View, FlatList, TouchableOpacity, ScrollView, Image, ActivityIndicator } from "react-native"
+import Colors from '../../constants/colors';
+import { view_styles } from '../../constants/styles';
+import { Button, Switch, Text } from '../../Components';
+import DropDown from '../../Components/Dropdown';
+import type { EventProps, LeagueProps } from '../../types';
+import { ManageCompetitionMatchApi } from '../api';
+import moment from 'moment-mini';
+import SearchBox from '../../Components/SearchBox';
+
+type ContestSelectorProps = {
+    width: number,
+    action_loading:boolean,
+    height:number,
+    leagues:LeagueProps[],
+    selected_team_events:EventProps[],
+    onSelectTeamEvent:(event:EventProps) => void,
+    onSelectTeamEvents: (events:EventProps[]) => void,
+    onDeselectTeamEvent: (event:EventProps) => void,
+    onClose:() => void
+}
+
+const ContestSelector = ({ action_loading, width, height, leagues, selected_team_events, onClose, onSelectTeamEvent, onDeselectTeamEvent, onSelectTeamEvents }:ContestSelectorProps) => {
+    const [ search_value, setSearchValue ] = useState('');
+    const [ filters, setFilters ] = useState<{
+        ranked?:boolean,
+        division?:string,
+        sub_division?:string
+    }>({})
+    const [ selector_data, setData ] = useState<{
+        loading:boolean,
+        events:EventProps[],
+        range_dates:string[],
+        active_league?:LeagueProps,
+        active_date: string
+    }>({
+        loading:false,
+        events: [],
+        range_dates: [],
+        active_date: moment().format('YYYY/MM/DD')
+    })
+
+    const { loading, events, range_dates, active_league, active_date } = selector_data;
+
+    let filtered_events = events.filter(e => `${e.event_id} ${e.away?.market_name} ${e.away?.name} ${e.home?.market_name} ${e.home?.name}`.toLowerCase().includes(search_value.toLowerCase()))
+    .filter(e => moment(e.scheduled_datetime).format('YYYY/MM/DD') == active_date)
+    .sort((a,b) => moment(a.scheduled_datetime).unix() - moment(b.scheduled_datetime).unix());
+
+    const divisions = [ ...new Set(filtered_events.map(e => e.away?.division ?? '').concat(filtered_events.map(e => e.home?.division ?? ''))) ].sort((a,b) => {
+        return (a < b) ? -1 : (a > b) ? 1 : 0;
+    })
+    const show_ranked = filtered_events.find(e => e.away?.rank || e.home?.rank) ? true : false
+
+
+    if(filters.division){
+        filtered_events = filtered_events.filter(e => `${e.away?.division}` == filters.division || `${e.home?.division}` == filters.division)
+    }
+    const sub_divisions = [ ...new Set(filtered_events.filter(e => e.away?.division == filters.division || e.home?.division == filters.division).map(e => e.away?.sub_division ?? '').concat(filtered_events.map(e => e.home?.sub_division ?? ''))) ].sort((a,b) => {
+        return (a < b) ? -1 : (a > b) ? 1 : 0;
+    })
+
+    if(filters.sub_division){
+        filtered_events = filtered_events.filter(e => `${e.away?.sub_division}` == filters.sub_division || `${e.home?.sub_division}` == filters.sub_division)
+    }
+    if(filters.ranked){
+        console.log('filtering to ranked')
+        filtered_events = filtered_events.filter(e => e.away?.rank || e.home?.rank)
+    }
+
+    const show_add_all = filtered_events.filter(e => !selected_team_events.map(e => e.event_id.toString()).includes(e.event_id)).length > 0 ? true : false
+
+
+    useEffect(() => {
+        if(leagues.length == 0){ return }
+        if(!active_league){ setData({ ...selector_data, active_league: leagues.sort((a,b) => a.priority - b.priority)[0] }) }
+    },[leagues])
+
+    useEffect(() => {
+        if(!active_league){ return }
+        getDataFromServer(active_league.league_id)
+    },[active_league])
+
+    const getDataFromServer = async(league_id:string) => {
+        setData({ ...selector_data, loading:true })
+        const resp = await ManageCompetitionMatchApi.getEventsByDate(moment().format('YYYY/MM/DD'), league_id);
+        const unique_dates = [ ...new Set(resp.range_dates.filter(d => moment(d).isAfter(moment().subtract(1, 'days'))).sort((a,b) => moment(a).unix() - moment(b).unix()).map(d => moment(d).format('YYYY/MM/DD'))) ]
+        //Check to see if we have an event on today's date
+        let best_day = unique_dates.find(d => d == moment().format('YYYY/MM/DD'))
+        if(!best_day){
+            best_day = unique_dates[0] ?? moment().format('YYYY/MM/DD')
+        }
+        setData({ ...selector_data, loading:false, events: resp.events, range_dates: unique_dates, active_date: best_day })
+    }
+
+    const renderDivisions = (data: { item:string, index:number }) => {
+        const selected = filters.division == data.item ? true : false
+        return (
+            <TouchableOpacity style={{ padding:10 }} onPress={() => selected ? setFilters({ ...filters, division: undefined }) : setFilters({ ...filters, division:data.item })}>
+                <Text color={selected ? Colors.brand.midnight : Colors.brand.slate} weight={selected ? 'bold': 'regular'}>{data.item}</Text>
+            </TouchableOpacity>
+        )
+    }
+    const renderSubDivisions = (data: { item:string, index:number }) => {
+        const selected = filters.sub_division == data.item ? true : false
+        return (
+            <TouchableOpacity style={{ padding:10 }} onPress={() => selected ? setFilters({ ...filters, sub_division: undefined }) : setFilters({ ...filters, sub_division:data.item })}>
+                <Text color={selected ? Colors.brand.midnight : Colors.brand.slate} weight={selected ? 'bold': 'regular'}>{data.item}</Text>
+            </TouchableOpacity>
+        )
+    }
+
+    const renderDates = (data: { item: string, index:number }) => {
+        const formatted_date = moment(data.item, 'YYYY/MM/DD')
+        const active = active_date == data.item ? true : false
+        return (
+            <TouchableOpacity style={{ padding:10, justifyContent:'center', alignItems:'center' }} onPress={() => setData({ ...selector_data, active_date: data.item })}>
+                <Text size={12} color={Colors.brand.midnight} textAlign='center' weight={active ? 'bold' : 'regular'}>{formatted_date.format('ddd')}</Text>
+                <Text style={{ marginTop:3 }} size={12} color={Colors.brand.midnight} textAlign='center' weight={active ? 'bold' : 'regular'}>{formatted_date.format('MMM DD')}</Text>
+            </TouchableOpacity>
+        )
+    }
+
+    const renderEvents = (data: { item:EventProps, index:number }) => {
+        const selected = selected_team_events.map(e => e.event_id.toString()).includes(data.item.event_id.toString()) ? true : false
+        const is_live = moment(data.item.scheduled_datetime).isBefore(moment()) ? true : false
+        return (
+            <View style={{ ...view_styles.body_row, padding:10, borderBottomWidth:1, borderColor:Colors.shades.shade600 }}>
+                <View style={{ flexDirection:'row', alignItems:'center', paddingRight:10, borderRightWidth:1, borderColor:Colors.shades.shade600 }}>
+                    <Image
+                        source={{ uri: data.item.away?.image?.url }}
+                        style={{ height:34, width:34, borderRadius:4 }}
+                        resizeMode='cover'
+                    />
+                    <Text style={{ padding:5 }} theme='body'>VS</Text>
+                    <Image
+                        source={{ uri: data.item.home?.image?.url }}
+                        style={{ height:34, width:34, borderRadius:4 }}
+                        resizeMode='cover'
+                    />
+                </View>
+                <View style={{ flex:1, marginLeft: 10 }}>
+                    <Text theme='header_2'>{data.item.event_title}</Text>
+                    <Text style={{ marginTop:3 }} theme='body'>{data.item.time_detail == 'scheduled' ? moment(data.item.scheduled_datetime).format('MMM DD hh:mm a'): data.item.time_detail}</Text>
+                </View>
+                {!is_live ?
+                <Switch
+                    switch_type='on_off'
+                    value={selected}
+                    onChange={() => {
+                        if(action_loading){ return }
+                        if(selected){ return onDeselectTeamEvent(data.item) } 
+                        return onSelectTeamEvent(data.item)
+                    }}
+                />
+                :<></>}
+            </View>
+        )
+    }
+
+    return (
+        <View style={{ ...view_styles.section, margin:0, width, height }}>
+            <View style={{ ...view_styles.section_header, zIndex: 1}}>
+                {active_league ?
+                <Image
+                    source={{ uri: active_league.league_image }}
+                    style={{ height:50, width:50, marginRight:10, borderRadius:4 }}
+                    resizeMode='cover'
+                />
+                :<></>}
+                <View style={{ flex:1, marginRight:50 }}>
+                    <Text theme='header'>MANAGE CONTESTS</Text>
+                    <Text style={{ marginTop:3 }} theme='body'>Add / Remove contests from the competition</Text>
+                </View>
+                <View style={{ position: 'absolute', top:10, right:10, justifyContent:'center', alignItems:'center' }}>
+                    <DropDown
+                        dropdown_options={[
+                            {value:'league_id', eligible_options: leagues.sort((a,b) => a.priority - b.priority).map(l => l.league_name)}
+                        ]}
+                        selected_value={active_league?.league_name ?? 'Select League'}
+                        onOptionSelect={(league_name) => { 
+                            const league = leagues.find(l => l.league_name == league_name);
+                            setData({ ...selector_data, active_league: league })
+                        }}
+                    />
+                </View>
+            </View> 
+            <ScrollView style={{ flex:1 }}>
+                <View style={{ padding:10 }}>
+                    <FlatList
+                        data={range_dates}
+                        renderItem={renderDates}
+                        horizontal
+                        keyExtractor={(item) => item}
+                    />
+                </View>
+                <View style={{ marginTop:0 }}>
+                    <SearchBox 
+                        onChange={(text) => setSearchValue(text)}
+                        hide_search_button
+                    />
+                </View>
+                {divisions.length > 1 ?
+                <View nativeID='filters' style={{ flexDirection:'row' }}>
+                    {show_ranked ?
+                    <TouchableOpacity style={{ padding:10 }} onPress={() => filters.ranked ? setFilters({ ...filters, ranked: false }) : setFilters({ ...filters, ranked: true })}>
+                        <Text color={filters.ranked ? Colors.brand.midnight : Colors.brand.slate} weight={filters.ranked ? 'bold': 'regular'}>Top 25</Text>
+                    </TouchableOpacity>
+                    :<></>}
+                    <FlatList
+                        data={divisions}
+                        renderItem={renderDivisions}
+                        horizontal
+                        keyExtractor={(item) => item}
+                    />
+                </View>
+                :<></>}
+                {filters.division && sub_divisions.length > 1 ?
+                <View>
+                     <FlatList
+                        data={sub_divisions}
+                        renderItem={renderSubDivisions}
+                        horizontal
+                        keyExtractor={(item) => item}
+                    />
+                </View>
+                :<></>}
+                <View style={{ padding:10 }}>
+                    {loading ?
+                    <ActivityIndicator style={{ padding:20, alignSelf:'center' }} size='large' color={Colors.brand.midnight} />
+                    :<></>}
+                    <FlatList
+                        data={filtered_events}
+                        renderItem={renderEvents}
+                        keyExtractor={(item) => item.event_id.toString()}
+                    />
+                </View>
+            </ScrollView>
+            <View style={{ ...view_styles.section_footer, flexDirection:'row' }}>
+                {filtered_events.length > 0 ?
+                <Button
+                    title='ADD ALL'
+                    style={{ flex:2, marginRight:10, opacity:!show_add_all || action_loading?0.5:1 }}
+                    loading={action_loading}
+                    disabled={!show_add_all || action_loading}
+                    padding={15}
+                    title_color={Colors.shades.white}
+                    backgroundColor={Colors.brand.electric}
+                    onPress={() => {
+                        ///First remove any event that is already selected
+                        let add_events = filtered_events.filter(e => !selected_team_events.map(e => e.event_id.toString()).includes(e.event_id))
+                        onSelectTeamEvents(add_events);
+                    }}
+                />
+                :<></>}
+                <Button
+                    style={{ flex:1 }}
+                    padding={15}
+                    title='CLOSE'
+                    title_color={Colors.shades.white}
+                    backgroundColor={Colors.utility.error}
+                    onPress={() => onClose()}
+                />
+            </View>
+        </View>
+    )
+}
+
+export default ContestSelector