be-components 1.0.3 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "be-components",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Components for BettorEdge Apps",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/Bracket/api/index.ts

@@ -160,6 +160,11 @@ const BracketCompetitionHelpers = {
         if(moment().isBefore(moment(bc.scheduled_datetime))){ return true }
         return false
     },
+    canMakePick: (bracket?:BracketProps) => {
+        if(!bracket){ return false }
+        if(moment().isAfter(moment(bracket.scheduled_datetime))){ return false }
+        return true
+    },
     isEnoughBalance: (bc:BracketCompetitionProps, player_balance?:PlayerBalanceProps) => {
         if(!player_balance) return false
         if(bc.market_type == 'FREE' && player_balance.free_market_balance < bc.buy_in){ return false }

package/src/Bracket/components/BracketCompetitionSelector.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { FlatList, TouchableOpacity, View, Image } from 'react-native';
 import type { BracketCompetitionProps, BracketProps, LeagueProps } from '../../types';
-import { Icons, Text } from '../../Components';
+import { Button, Icons, Text, TextInput } from '../../Components';
 import { BracketComeptitionApi } from '../api';
 import Colors from '../../constants/colors';
 import moment from 'moment-mini';
@@ -14,6 +14,8 @@ type BracketCompetitionSelectorProps = {
     onCompetitionSelect:(bracket_competition:BracketCompetitionProps) => void
 }
 const BracketCompetitionSelector = ({ visible, leagues, brackets, onClose, onCompetitionSelect }:BracketCompetitionSelectorProps) => {
+    const [ search_value, setSearchValue ] = useState('');
+    const [ search_error, setSearchError ] = useState<string|undefined>(undefined);
     const [ card_data, setData ] = useState<{
         loading:boolean,
         shown_brackets:string[]
@@ -24,8 +26,11 @@ const BracketCompetitionSelector = ({ visible, leagues, brackets, onClose, onCom
         bracket_competitions: []
     })
     const { loading, bracket_competitions, shown_brackets } = card_data;
-
-    const unique_bracket_ids = [ ...new Set(bracket_competitions.map(bc => bc.bracket_id)) ]
+    let visible_competitions = [ ...bracket_competitions ];
+    if(search_value){
+        visible_competitions = visible_competitions.filter(c => `${c.competition_name.toLowerCase()}`.includes(search_value.toLowerCase()))
+    }
+    const unique_bracket_ids = [ ...new Set(visible_competitions.map(bc => bc.bracket_id)) ]
 
     useEffect(() => {
         if(!visible){ return }
@@ -40,6 +45,12 @@ const BracketCompetitionSelector = ({ visible, leagues, brackets, onClose, onCom
         })
     }
 
+    const handleFindPrivate = async() => {
+        const bc = await BracketComeptitionApi.getBracketcompetitionByCode(search_value)
+        if(!bc){ return setSearchError(`Unable to find competition with the provided code`) }
+        return onCompetitionSelect(bc)
+    }
+
     const renderCompetitions = (data: { item:BracketCompetitionProps, index:number } ) => {
         return (
             <TouchableOpacity style={{ padding:10, flexDirection:'row', alignItems:'center', borderBottomWidth:1, borderColor:Colors.shades.shade600 }}
@@ -64,7 +75,7 @@ const BracketCompetitionSelector = ({ visible, leagues, brackets, onClose, onCom
         const bracket = brackets.find(b => b.bracket_id == data.item);
         if(!bracket){ return <></> }
         const league = leagues.find(l => l.league_id == bracket.league_id);
-        const comps = bracket_competitions.filter(bc => bc.bracket_id == data.item);
+        const comps = visible_competitions.filter(bc => bc.bracket_id == data.item);
         const selected = shown_brackets.includes(data.item)
         const started = moment().isAfter(moment(bracket.scheduled_datetime)) ? true : false;
         return (
@@ -111,11 +122,44 @@ const BracketCompetitionSelector = ({ visible, leagues, brackets, onClose, onCom
                     <Text style={{ marginTop:4 }} size={14} color={Colors.brand.slate} weight='regular'>Select a competition below to see more details</Text>
                 </View>
             </TouchableOpacity>
-            <FlatList
-                data={unique_bracket_ids}
-                renderItem={renderBrackets}
-                keyExtractor={(item) => item.toString()}
-            />
+            <View>
+                <View style={{ padding:20 }}>
+                    <View style={{ marginBottom:10 }}>
+                        <Text size={14} color={Colors.brand.midnight} weight='semibold'>Have a private code?</Text>
+                        <Text style={{ marginTop:3 }} size={12} color={Colors.brand.slate}>Enter it below and select search.  If found, we will send you to the competition.</Text>
+                    </View>
+                    <View style={{ flexDirection:'row', alignItems:'center' }}>
+                        <TextInput
+                            style={{ flex:1 }}
+                            value={search_value}
+                            onChangeText={(text) => {
+                                if(search_error){ setSearchError(undefined) }
+                                setSearchValue(text)
+                            }}
+                            placeholder='Search or Enter Private Code'
+                            placeholderTextColor={Colors.brand.slate}
+                        />
+                        {search_value ?
+                        <Button
+                            title='Find Private'
+                            style={{ marginLeft:5 }}
+                            padding={15}
+                            title_color={Colors.shades.white}
+                            backgroundColor={Colors.brand.electric}
+                            onPress={() => handleFindPrivate()}
+                        />
+                        :<></>}
+                    </View>
+                    {search_error ?
+                    <Text style={{ padding:10 }} size={14} color={Colors.utility.warning} weight='regular' textAlign='center'>{search_error}</Text>
+                    :<></>}
+                </View>
+                <FlatList
+                    data={unique_bracket_ids}
+                    renderItem={renderBrackets}
+                    keyExtractor={(item) => item.toString()}
+                />
+            </View>
         </View>
     )
 }

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { View, ActivityIndicator, TouchableOpacity, ScrollView, Image } from "react-native";
 import type { AthleteProps, BracketGroupProps, BracketProps, BracketRoundProps, CompetitionPlayerBracketProps, EventProps, MyPlayerProps, PlayerBracketPickProps, PlayerBracketProps, RoundEventProps, TeamProps } from '../../../types';
-import { BracketApi, BracketComeptitionApi } from '../../api';
+import { BracketApi, BracketComeptitionApi, BracketCompetitionHelpers } from '../../api';
 import { Button, Icons, Text } from '../../../Components';
 import Colors from '../../../constants/colors';
 import BracketRoundSection from './BracketRound';
@@ -88,6 +88,7 @@ const BracketPlay = ({ visible, player, room_size, bracket_id, player_bracket_id
     }
 
     const handlePick = async(pick:PlayerBracketPickProps) => {
+        if(!BracketCompetitionHelpers.canMakePick(bracket)){ return alert('Bracket as already started') }
         if(!player){ return onRequestAuthenticate() }
         if(!bracket_id){ return }
         setRoundEventLoading(pick.round_event_id);

package/src/Bracket/components/PlayerBracketManager.tsx

@@ -20,6 +20,8 @@ type PlayerBracketManagerProps = {
 }
 
 const PlayerBracketManager = ({ visible, teams, athletes, player_bracket, bracket_competitions, competition_player_brackets, onEditPicks, onSelectCompetition, onUpdateBracket, onClose }:PlayerBracketManagerProps) => {
+    const [ search_value, setSearchValue ] = useState('');
+    const [ search_error, setSearchError ] = useState<string|undefined>(undefined)
     const [ info_expanded, setInfoExpanded ] = useState(true);
     const [ manage_data, setData ] = useState<{
         loading:boolean,
@@ -31,12 +33,23 @@ const PlayerBracketManager = ({ visible, teams, athletes, player_bracket, bracke
         active_comp_toggle: 'entered'
     })
     const { draft_bracket, active_comp_toggle } = manage_data;
+    let visible_competitions = [ ...bracket_competitions ];
+    if(search_value){
+        visible_competitions = visible_competitions.filter(c => `${c.competition_name.toLowerCase()}`.includes(search_value.toLowerCase()))
+    }
 
     useEffect(() => {
         setData({ ...manage_data, draft_bracket: player_bracket })
     },[player_bracket])
 
 
+    const handleFindPrivate = async() => {
+        const bc = await BracketComeptitionApi.getBracketcompetitionByCode(search_value)
+        if(!bc){ return setSearchError(`Unable to find competition with the provided code`) }
+        return onSelectCompetition(bc)
+    }
+
+
     const renderCompetitions = (data: { item:BracketCompetitionProps, index:number }) => {
         const payout = BracketCompetitionHelpers.getPayout(data.item)
         return (
@@ -213,11 +226,44 @@ const PlayerBracketManager = ({ visible, teams, athletes, player_bracket, bracke
                         keyExtractor={(item) => item.competition_player_bracket_id.toString()}
                     />
                     : active_comp_toggle == 'eligible' ?
+                    <View>
+                    <View style={{ padding:20, borderBottomWidth:1, borderBottomColor:Colors.shades.shade600 }}>
+                    <View style={{ marginBottom:10 }}>
+                        <Text size={14} color={Colors.brand.midnight} weight='semibold'>Have a private code?</Text>
+                        <Text style={{ marginTop:3 }} size={12} color={Colors.brand.slate}>Enter it below and select search.  If found, we will send you to the competition.</Text>
+                    </View>
+                    <View style={{ flexDirection:'row', alignItems:'center' }}>
+                        <TextInput
+                            style={{ flex:1 }}
+                            value={search_value}
+                            onChangeText={(text) => {
+                                if(search_error){ setSearchError(undefined) }
+                                setSearchValue(text)
+                            }}
+                            placeholder='Search or Enter Private Code'
+                            placeholderTextColor={Colors.brand.slate}
+                        />
+                        {search_value ?
+                        <Button
+                            title='Find Private'
+                            style={{ marginLeft:5 }}
+                            padding={15}
+                            title_color={Colors.shades.white}
+                            backgroundColor={Colors.brand.electric}
+                            onPress={() => handleFindPrivate()}
+                        />
+                        :<></>}
+                    </View>
+                    {search_error ?
+                    <Text style={{ padding:10 }} size={14} color={Colors.utility.warning} weight='regular' textAlign='center'>{search_error}</Text>
+                    :<></>}
+                    </View>
                     <FlatList
-                        data={bracket_competitions}
+                        data={visible_competitions}
                         keyExtractor={(item) => item.bracket_competition_id.toString()}
                         renderItem={renderCompetitions}
                     />
+                    </View>
                     :<></>}
                 </View>
             </View>

package/src/Bracket/components/RoomMenu.tsx

@@ -21,7 +21,7 @@ const RoomMenu = ({ visible, onOptionSelect, onClose }: RoomMenuProps ) => {
 
     const renderOptions = (data: { item:OptionType, index:number }) => {
         return (
-            <TouchableOpacity style={{ flexDirection:'row', padding:10, alignItems:'center', borderBottomWidth:1, borderColor:Colors.shades.shade600 }}
+            <TouchableOpacity style={{ flexDirection:'row', padding:20, alignItems:'center', borderBottomWidth:1, borderColor:Colors.shades.shade600 }}
             onPress={() => onOptionSelect(data.item)}>
                 <View style={{ flex:1 }}>
                     <Text size={16} color={Colors.brand.midnight} weight='bold'>{data.item.label}</Text>