be-components 4.4.1 → 4.4.2

package/src/Bracket/components/JoinCompetitionCard.tsx

@@ -1,19 +1,19 @@
 import React, { useState } from 'react';
-import { View, Image, TouchableOpacity, Linking } from "react-native";
-import { Button, Checkbox, Text } from '../../Components';
+import { Image, Linking } from "react-native";
+import { Checkbox } from '../../Components';
 import type { BracketCompetitionProps, CompetitionPlayerBracketProps, MyPlayerProps, PlayerBalanceProps, PlayerBracketProps } from '../../types';
-import { BracketCompetitionHelpers } from '../api';
-import Colors from '../../constants/colors';
+import { BracketComeptitionApi, BracketCompetitionHelpers } from '../api';
 import PlayerBalanceCard from './PlayerBalanceCard';
+import { Button, Text, View } from '../../Components/Themed';
 
 type JoinCompetitionCardProps = {
     player?:MyPlayerProps,
     loading?:boolean,
-    player_bracket:PlayerBracketProps,
+    player_bracket?:PlayerBracketProps,
     player_balance?:PlayerBalanceProps,
     bracket_competition:BracketCompetitionProps,
     onNotEnoughBalance:(data:{ bracket_competition:BracketCompetitionProps }) => void,
-    onEnterCompetition:(cpb:CompetitionPlayerBracketProps) => void,
+    onEnterCompetition:(cpb:CompetitionPlayerBracketProps, player_bracket?:PlayerBracketProps) => void,
     onClose:() => void
 }
 
@@ -22,26 +22,34 @@ const JoinCompetitionCard = ({ player, player_balance, loading, player_bracket,
 
     const buy_in_label = BracketCompetitionHelpers.getBuyInTitle(bracket_competition)
 
-    const handleEnter = () => {
+    const handleEnter = async() => {
+        if(!player){ return }
+        let player_bracket_id = player_bracket?.player_bracket_id
+        let new_pb:PlayerBracketProps | undefined = undefined
+        if(!player_bracket_id){
+            new_pb = await BracketComeptitionApi.createPlayerBracket({
+                player_bracket_id: '',
+                player_id: '',
+                bracket_name: `${player.username} Bracket ${Math.floor(Math.random() * (100 - 1 + 1) + 1)}`,
+                create_datetime: '', last_update_datetime: '',
+                bracket_id: bracket_competition.bracket_id,
+                completion_pct: 0,
+                completion_status: 'inprogress',
+                status: 'active'
+            })
+            player_bracket_id = new_pb.player_bracket_id
+        }
         const is_enough_balance = BracketCompetitionHelpers.isEnoughBalance(bracket_competition, player_balance);
         if(!is_enough_balance){ return onNotEnoughBalance({ bracket_competition }) }
-        const cpb = BracketCompetitionHelpers.generateCompetitionPlayerBracket(bracket_competition.bracket_competition_id, player_bracket.player_bracket_id)
-        onEnterCompetition(cpb)
+        const cpb = BracketCompetitionHelpers.generateCompetitionPlayerBracket(bracket_competition.bracket_competition_id, player_bracket_id)
+        onEnterCompetition(cpb, new_pb)
     }
 
     return (
-        <View style={{ minWidth:300, backgroundColor:Colors.shades.white, borderRadius:8 }}>
-            <View style={{ borderTopRightRadius:8, borderTopLeftRadius:8, backgroundColor:Colors.shades.shade100, padding:15 }}>
-                <Text size={16} color={Colors.brand.midnight} weight='bold'>{bracket_competition.competition_name}</Text>
+        <View float style={{ borderRadius:8 }}>
+            <View type='header' style={{ borderTopRightRadius:8, borderTopLeftRadius:8, padding:15 }}>
+                <Text size={16} theme='h1'>{bracket_competition.competition_name}</Text>
             </View>
-            {player && player_balance ?
-            <View style={{ padding:5, backgroundColor:Colors.incentive.gold_faded }}>
-                <PlayerBalanceCard 
-                    player={player}
-                    player_balance={player_balance}
-                />
-            </View>
-            :<></>}
             <View style={{ justifyContent:'center', alignItems:'center' }}>
                 <Image
                     source={{ uri: bracket_competition.image?.url }}
@@ -51,24 +59,31 @@ const JoinCompetitionCard = ({ player, player_balance, loading, player_bracket,
             </View>
             <View style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
                 <View style={{ flex:1 }}>
-                    <Text size={14} color={Colors.brand.midnight} weight='bold'>{player_bracket.bracket_name}</Text>
-                    <Text style={{ marginTop:3 }} size={12} color={Colors.brand.slate} weight='regular'>{(player_bracket.completion_pct*100).toFixed(2)}% Complete</Text>
+                    <Text size={14} theme='h1'>{player_bracket?.bracket_name ?? 'New Bracket'}</Text>
+                    {player_bracket ?
+                    <Text style={{ marginTop:3 }} size={12} theme='light'>{(player_bracket.completion_pct*100).toFixed(2)}% Complete</Text>
+                    :<></>}
                 </View>
             </View>
             {bracket_competition.opt_in_url ?
-            <TouchableOpacity style={{ flexDirection:'row', alignItems:'center', padding:20, backgroundColor:Colors.shades.shade100 }} onPress={() => setDisclaimed(!disclaimed)}>
+            <Button style={{ flexDirection:'row', alignItems:'center', padding:20 }} onPress={() => setDisclaimed(!disclaimed)}>
                 <Checkbox size={24} checked={disclaimed} disabled onSelect={() => console.log('')}/>
-                <Text color={Colors.brand.midnight} weight='regular' size={14} style={{ flex:1, marginLeft:10 }}>I agree to the terms and conditiions outlined <TouchableOpacity onPress={() => Linking.openURL(bracket_competition.opt_in_url??'')}><Text size={14} color={Colors.brand.electric} weight='bold'>HERE</Text></TouchableOpacity></Text>
-            </TouchableOpacity>
+                <Text theme='description' size={14} style={{ flex:1, marginLeft:10 }}>I agree to the terms and conditiions outlined <Button style={{ padding:0 }} onPress={() => Linking.openURL(bracket_competition.opt_in_url??'')}><Text size={14} theme='action'>HERE</Text></Button></Text>
+            </Button>
+            :<></>}
+            {player && player_balance ?
+            <View type='header' style={{ padding:5, marginBottom:1}}>
+                <PlayerBalanceCard 
+                    player={player}
+                    player_balance={player_balance}
+                />
+            </View>
             :<></>}
-            <View style={{ flexDirection:'row', alignItems:'center', padding:10, backgroundColor:Colors.shades.shade100, borderBottomRightRadius:8, borderBottomLeftRadius:8 }}>
+            <View type='footer' style={{ flexDirection:'row', alignItems:'center', padding:10, borderBottomRightRadius:8, borderBottomLeftRadius:8 }}>
                 <Button
                     title='Close'
                     style={{ flex:1, marginRight:5 }}
-                    padding={15}
-                    title_color={Colors.brand.electric}
-                    borderWidth={1}
-                    borderColor={Colors.brand.electric}
+                    type='close'
                     onPress={() => onClose()}
                 />
                 <Button
@@ -76,9 +91,7 @@ const JoinCompetitionCard = ({ player, player_balance, loading, player_bracket,
                     disabled={loading || !disclaimed}
                     style={{ flex:2, opacity: !disclaimed||loading?0.5:1  }}
                     loading={loading}
-                    padding={15}
-                    title_color={Colors.shades.white}
-                    backgroundColor={Colors.utility.success}
+                    type='success'
                     onPress={() => handleEnter()}
 
                 />

package/src/Bracket/components/Navigator.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { FlatList } from 'react-native';
+import { Icons } from '../../Components';
+import { Button, Text, View } from '../../Components/Themed';
+import { useColors } from '../../constants/useColors';
+
+type OptionType = { key:string, label:string, description: string, icon:any }
+
+type NavigatorProps = {
+    visible: boolean,
+    mode: 'large'|'small'|'medium',
+    active_option?:string,
+    onOptionSelect:(option:OptionType) => void
+}
+
+const Navigator = ({ visible, mode, active_option, onOptionSelect }: NavigatorProps ) => {
+    const Colors = useColors();
+
+    const options:OptionType[] = [
+        { key: 'home', label: 'My Bracket Room', description: 'View all my filled out brackets', icon: <Icons.UserIcon size={18} color={active_option == 'home' ? Colors.text.h1 : Colors.text.highlight} />},
+        { key: 'competitions', label: 'Bracket Competitions', description: 'View all bracket competitions', icon: <Icons.TrophyIcon size={18} color={active_option == 'competitions' ? Colors.text.h1 : Colors.text.highlight} /> },
+        { key: 'brackets', label: 'Active League Brackets', description: 'View all brackets that are currently active', icon: <Icons.BracketIcon size={18} color={active_option == 'brackets' ? Colors.text.h1 : Colors.text.highlight} /> }
+    ]
+    
+
+    const renderOptions = (data: { item:OptionType, index:number }) => {
+        const active = active_option == data.item.key ? true : false
+        return (
+            <Button float style={{ flexDirection:'row', padding:10, alignItems:'center', backgroundColor:active?Colors.text.highlight:Colors.views.header, margin:4 }}
+            onPress={() => onOptionSelect(data.item)}>
+                {data.item.icon}
+                {mode == 'large' ?
+                <View transparent style={{ flex:1, marginLeft:10 }}>
+                    <Text size={14} theme='h1' weight='bold' color={active_option == data.item.key ? Colors.text.h1 : Colors.text.highlight}>{data.item.label}</Text>
+                    <Text style={{ marginTop:3 }} size={10} theme='description' color={active_option == data.item.key ? Colors.text.h1 : Colors.text.highlight}>{data.item.description}</Text>
+                </View>
+                :<View style={{flex:1}} />}
+                <Icons.ChevronIcon direction='right' color={active_option == data.item.key ? Colors.text.h1 : Colors.text.highlight} size={12} />
+            </Button>
+        )
+    }
+
+    if(!visible){ return <></> }
+    return (
+        <View transparent>
+            <View transparent style={{ padding:10 }}>
+                <FlatList
+                    data={options}
+                    renderItem={renderOptions}
+                    keyExtractor={(item) => item.key}
+                />
+            </View>
+        </View>
+    )
+}
+
+export default Navigator

package/src/Bracket/components/PlayerBalanceCard.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
-import { Image, View } from "react-native"
+import { Image } from "react-native"
 import type { MyPlayerProps, PlayerBalanceProps } from "../../types"
-import Colors from '../../constants/colors';
-import { Text } from '../../Components';
+import { Text, View } from '../../Components/Themed';
 
 type PlayerBalanceCardProps = {
     player_balance:PlayerBalanceProps,
@@ -12,20 +11,20 @@ type PlayerBalanceCardProps = {
 const PlayerBalanceCard = ({ player, player_balance }:PlayerBalanceCardProps) => {
 
     return (
-        <View style={{ flexDirection:'row', alignItems:'center' }}>
-            <View>
+        <View transparent style={{ flexDirection:'row', alignItems:'center' }}>
+            <View transparent>
                 <Image
                     source={{ uri: player.profile_pic }}
                     style={{ height:35, width:35, borderRadius:100 }}
                     resizeMode='cover'
                 />
             </View>
-            <View style={{ flex:1, marginLeft:10 }}>
-                <Text size={14} color={Colors.brand.midnight} weight='bold'>{player.first_name} {player.last_name}</Text>
-                <Text style={{ marginTop:3 }} size={12} color={Colors.brand.slate}>P{player_balance.promo_balance.toFixed(2)} - E{player_balance.free_market_balance.toFixed(2)}</Text>
+            <View transparent style={{ flex:1, marginLeft:10 }}>
+                <Text size={14} theme='h1'>{player.first_name} {player.last_name}</Text>
+                <Text style={{ marginTop:3 }} size={12} theme='light'>P{player_balance.promo_balance.toFixed(2)} - E{player_balance.free_market_balance.toFixed(2)}</Text>
             </View>
-            <View>
-                <Text size={14} color={Colors.brand.midnight} weight='bold'>${player_balance.balance.toFixed(2)}</Text>
+            <View transparent>
+                <Text size={14} theme='h1'>${player_balance.balance.toFixed(2)}</Text>
             </View>
         </View>
     )

package/src/Bracket/components/PlayerBracketCard.tsx

@@ -0,0 +1,105 @@
+import { Image } from "react-native";
+import { Button, Text, View } from "../../Components/Themed";
+import type { AthleteProps, BracketCompetitionProps, BracketProps, CompetitionPlayerBracketProps, LeagueProps, PlayerBracketProps, TeamProps } from "../../types"
+import React from 'react';
+import { Icons } from "../../Components";
+import { useColors } from "../../constants/useColors";
+
+type PlayerBracketCardProps = {
+    league?:LeagueProps,
+    bracket:BracketProps,
+    champion_team?:TeamProps,
+    champion_athlete?:AthleteProps,
+    onEdit: (player_bracket:PlayerBracketProps) => void,
+    onView: (bracket_id:string, player_bracket_id?:string, bracket_competition_id?:string) => void,
+    bracket_competitions:BracketCompetitionProps[],
+    player_bracket:PlayerBracketProps,
+    competition_player_brackets:CompetitionPlayerBracketProps[]
+}
+
+const PlayerBracketCard = ({ onEdit, champion_team, onView, player_bracket, bracket }:PlayerBracketCardProps) => {
+    const Colors = useColors();
+    
+
+    //const cl = bracket_competition.market_type == 'FOR_MONEY' ? '$' : 'E'
+    return (
+        <View type='row' style={{ flex:1 }}>
+            {player_bracket.champion_id ?
+            <View style={{ borderBottomLeftRadius:8, borderRightWidth:1, borderColor:Colors.borders.light }}>
+                {champion_team ? 
+                <View transparent style={{ flex:1, padding:10, justifyContent:'space-between' }}>
+                    <Image
+                        source={{ uri: champion_team.image?.url }}
+                        style={{ height:30, width:30 }}
+                        resizeMode='cover'
+                    />
+                    <Text theme="description" textAlign="center">{champion_team.abbr}</Text>
+                </View>
+                :<></>}
+            </View>
+            :
+            <View style={{ borderBottomLeftRadius:8, borderRightWidth:1, borderColor:Colors.borders.light }}>
+                    <View transparent style={{ flex:1, padding:10, justifyContent:'space-between' }}>
+                    <Icons.BracketIcon size={16} color={Colors.text.h1} />
+                    <Text theme="h1" textAlign="center">...</Text>
+                </View>
+            </View>
+            }
+            <View style={{ flex:1, marginLeft:8, marginRight:8 }}>
+               <Text theme="h1">{player_bracket.bracket_name}</Text>
+               <Text style={{ marginTop:4 }} theme="description">{(player_bracket.completion_pct * 100).toFixed(2)}%</Text>
+            </View>
+            {player_bracket.status != 'closed' ?
+            <Button
+                type='text'
+                style={{ padding:10, marginRight:5 }}
+                onPress={() => onEdit(player_bracket)}
+            >
+                <Icons.EditIcon size={14} color={Colors.text.action} />
+            </Button>
+            :<></>}
+            <Button
+                title="VIEW"
+                type='text'
+                style={{ padding:10 }}
+                onPress={() => onView( bracket.bracket_id, player_bracket.player_bracket_id)}
+            />
+        </View>
+    )
+}
+
+export default React.memo(PlayerBracketCard, (left, right) => {
+    if(JSON.stringify(left) != JSON.stringify(right)){return false }
+    return true
+})
+
+
+/*
+<View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+                {league ?
+                <Image
+                    source={{ uri: league?.league_image }}
+                    style={{ height:40, width:40 }}
+                    resizeMode="cover"
+                />
+                :
+               <></>
+                }
+                <View transparent style={{ flex:1, marginLeft:10 }}>
+                    <Text theme="h1">{player_bracket.bracket_name}</Text>
+                    <Text style={{ marginTop:3 }} theme="description">{bracket.bracket_name}</Text>
+                </View>
+                <Button
+                    type='text'
+                    title="EDIT"
+                    style={{ padding:10, marginRight:5 }}
+                    onPress={() => onEdit(player_bracket)}
+                />
+                <Button
+                    title="VIEW"
+                    style={{ padding:10 }}
+                    type='action'
+                    onPress={() => onView( bracket.bracket_id, player_bracket.player_bracket_id)}
+                />
+            </View>
+*/

package/src/Bracket/components/PlayerBrackets.tsx

@@ -1,37 +1,48 @@
-import React from 'react';
-import { FlatList, Image, ScrollView } from "react-native"
+import React, { useState } from 'react';
+import { FlatList, Image } from "react-native"
 import type { AthleteProps, BracketCompetitionProps, BracketProps, CompetitionPlayerBracketProps, LeagueProps, PlayerBracketProps, TeamProps } from '../../types';
-import { Icons } from '../../Components';
 import moment from 'moment-mini';
 import { Button, Text, View } from '../../Components/Themed';
 import { useColors } from '../../constants/useColors';
+import { BracketComeptitionApi, BracketCompetitionHelpers } from '../api';
 
 type PlayerBracketSelectorProps = {
-    visible:boolean,
     brackets:BracketProps[],
+    player_id?:string,
+    bracket_id?:string,
     leagues:LeagueProps[],
     teams:TeamProps[],
     athletes:AthleteProps[],
     player_brackets:PlayerBracketProps[],
     bracket_competitions:BracketCompetitionProps[],
     competition_player_brackets:CompetitionPlayerBracketProps[]
+    onCreateNew?:(pb:PlayerBracketProps) => void,
     onClose:() => void,
     onSelect:(pb:PlayerBracketProps) => void,
 }
 
-const PlayerBracketSelector = ({ visible, brackets, leagues, teams, athletes, player_brackets, onSelect, onClose }:PlayerBracketSelectorProps) => {
+const PlayerBracketSelector = ({ brackets, bracket_id, leagues, teams, athletes, player_brackets, onSelect, onClose, onCreateNew }:PlayerBracketSelectorProps) => {
     const Colors = useColors();
-
+    const [ action_loading, setActionLoading ] = useState(false);
     const active_brackets = player_brackets.filter(pb => pb.status == 'active');
 
     const unique_bracket_ids = [ ...new Set(active_brackets.map(b => b.bracket_id)) ]
 
+    const handleCreateNew = async() => {
+        if(!bracket_id || !onCreateNew){ return }
+        if(action_loading){ return }
+        setActionLoading(true);
+        let new_pb = BracketCompetitionHelpers.createEmptyPlayerBracket('', bracket_id);
+        new_pb = await BracketComeptitionApi.createPlayerBracket(new_pb);
+        onCreateNew(new_pb);
+        setActionLoading(false);
+    }
 
     const renderPlayerBrackets = (data : { item:PlayerBracketProps, index:number }) => {
         const champion_team = data.item.champion_id_type == 'team' ? teams.find(t => t.team_id == data.item.champion_id) : undefined
         const champion_athlete = data.item.champion_id_type == 'athlete' ? athletes.find(t => t.team_id == data.item.champion_id) : undefined
         return (
-            <Button style={{ padding:10, flexDirection:'row', alignItems:'center', borderBottomWidth:1, borderColor:Colors.borders.light }} onPress={() => onSelect(data.item)}>
+            <Button transparent style={{ padding:10, flexDirection:'row', alignItems:'center', borderRadius:0, borderBottomWidth:1, borderColor:Colors.borders.light }} onPress={() => onSelect(data.item)}>
                 {champion_team ?
                 <View transparent style={{ marginRight:5 }}>
                     <Image
@@ -55,7 +66,8 @@ const PlayerBracketSelector = ({ visible, brackets, leagues, teams, athletes, pl
                 </View>
                 <Button
                     title='VIEW'
-                    type='info'
+                    type='action'
+                    style={{ padding:10 }}
                     disabled
                     onPress={() => console.log('')}
                 />
@@ -95,24 +107,40 @@ const PlayerBracketSelector = ({ visible, brackets, leagues, teams, athletes, pl
         )
     }
 
-    if(!visible){ return <></> }
 
     return (
-        <View style={{ flex:1 }}>
-            <Button style={{ flexDirection:'row', alignItems:'center', padding:20, borderBottomWidth:1, borderColor:Colors.borders.light }} onPress={() => onClose()}>
-                <Icons.ChevronIcon direction='left' size={12} color={Colors.text.h1} />
-                <View style={{ flex:1, marginLeft:20 }}>
-                    <Text size={18} theme='h1' weight='bold'>My Brackets</Text>
-                    <Text style={{ marginTop:4 }} size={14} theme='light' weight='regular'>Select a filled bracket below to manage it</Text>
+        <View transparent style={{ flex:1 }}>
+            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+                <View transparent style={{ flex:1 }}>
+                    <Text theme='h1'>My Brackets</Text>
                 </View>
-            </Button>
-            <ScrollView style={{flex:1}}>
+                {bracket_id && onCreateNew ?
+                <Button 
+                    type='success' 
+                    disabled={action_loading}
+                    loading={action_loading}
+                    style={{ flexDirection:'row', alignItems:'center', padding:10, opacity: action_loading?0.5:1 }} 
+                    onPress={() => handleCreateNew()}
+                    >
+                    <Text size={14} color={Colors.text.white}>NEW</Text>
+                </Button>
+                :<></>}
+            </View> 
+            <View transparent style={{ marginTop:1 }}>
                 <FlatList
                     data={unique_bracket_ids}
                     renderItem={renderBrackets}
                     keyExtractor={(item) => item.toString()}
                 />
-            </ScrollView>
+            </View>
+            <View type='footer' style={{ flexDirection:'row', padding:10 }}>
+                <Button
+                    type='close'
+                    title='CLOSE'
+                    style={{ flex:1 }}
+                    onPress={() => onClose()}
+                />
+            </View>
         </View>
     )
 }