be-components 7.4.0 → 7.4.2

package/src/MyAction/components/ContestStatRow.tsx

@@ -0,0 +1,153 @@
+import React, { useState } from 'react';
+import { Button, Text, View } from "../../Components/Themed"
+import type { AthleteProps, EventProps, LeagueProps, MatchProps, OrderProps, TeamProps, TournamentProps } from "../../types"
+import { useColors } from '../../constants/useColors';
+import { Icons } from '../../Components';
+import { MyActionHelpers } from '../api';
+import { FlatList, Image } from 'react-native';
+import { AthleteImage, TeamImage } from '../../Components/Jerseys';
+import { MarketComponentHelpers } from '../../MarketComponents/api';
+
+type ContestStatRowProps = {
+    market_type:'FOR_MONEY'|'FREE',
+    contest_label:string,
+    time_detail:string,
+    orders:OrderProps[],
+    leagues:LeagueProps[],
+    events:EventProps[],
+    tournaments:TournamentProps[],
+    matches:MatchProps[],
+    athletes:AthleteProps[],
+    teams:TeamProps[],
+    width:number
+}
+
+const ContestStatRow = ({ market_type, contest_label, orders, width, events, tournaments, matches, athletes, teams, leagues }:ContestStatRowProps) => {
+    const Colors = useColors();
+    const [ expanded, setExpanded ] = useState(false);
+    const stats = MyActionHelpers.calcAllOrderStats(orders);
+    const stake = stats.unresolved_stake + stats.resolved_stake
+    const potential_winnings = stats.unresolved_potential_winnings + stats.resolved_potential_winnings
+    const cl = market_type == 'FOR_MONEY' ? '$' : 'E'
+    //Is this in progress?
+    const in_progress = stats.open_amt > 0 ? true : false
+    const settled = stats.result_ind ? true : false
+
+
+    const renderLegResult = (result_ind?:'win'|'lose'|'draw'|'inprogress') => {
+        switch(result_ind){
+            case 'win':
+                return <Icons.CheckIcon size={14} color={Colors.text.success} />
+            case 'lose':
+                return <Icons.CloseIcon size={14} color={Colors.text.error} />
+            case 'draw':
+                return <Icons.AlertIcon size={14} color={Colors.text.warning}/>
+            default:
+                return <Icons.ActivityIcon size={14} color={Colors.text.h1} />
+        }
+    }
+
+ const renderOrders = (data:{ item:OrderProps, index:number }) => {
+        const { contest_title, athlete, team, league } = MyActionHelpers.getDetailsForOrder(data.item, events, tournaments, matches, athletes, teams, leagues);
+        const result_ind = data.item.positions[0]?.result_ind
+        return (
+            <View type='row' style={{ padding:10, borderBottomWidth:1, borderColor:Colors.borders.light }}>
+                {team ?
+                <TeamImage
+                    team={team}
+                    league={league}
+                    size={10}
+                />
+                :athlete ?
+                <AthleteImage
+                    athlete={athlete}
+                    league={league}
+                    size={24}
+                />
+                :league ?
+                <Image
+                    source={{ uri: league.league_image }}
+                    style={{ height:18, width:18 }}
+                    resizeMode="cover"
+                />
+                :<></>
+                }
+                
+                <View transparent style={{ flex:1, marginLeft:8 }}>
+                    <Text theme='h2'>{data.item.title}</Text>
+                    <View transparent style={{ marginTop:3 }}>                            
+                        <Text theme="description">{contest_title}</Text>
+                    </View>
+                </View>
+                {data.item.resolution_status != 'closed' ?
+                <Button float style={{  marginRight:4, marginLeft:4, padding:10, flexDirection:'row', justifyContent:'center', alignItems:'center' }} onPress={() => console.log('ehy')}>
+                    <Icons.ActivityIcon size={18} color={Colors.text.action} />
+                    <Text theme="action"> View</Text>
+                </Button>
+                :<></>}
+                <View style={{ padding:10 }}>
+                    <Text theme="description">{MarketComponentHelpers.getOddsLabel(data.item.odds)}</Text>
+                </View>
+                {renderLegResult(result_ind)}
+                {result_ind == 'draw' ? 
+                <View type='blur' style={{ position:'absolute', top:0, left:0, right:0, bottom:0, justifyContent:'center' }}>
+                    <View style={{ borderBottomWidth:1, borderColor:Colors.borders.light, marginRight:20, marginLeft:20 }} />
+                </View>
+                :<></>}
+            </View>
+        )
+    }
+
+    return (
+        <View transparent style={{ borderWidth:expanded ? 1: 0, borderColor:expanded ? Colors.text.action: undefined }}>
+            <View type='row' style={{ padding:10, borderBottomWidth:1, borderColor:Colors.borders.light, flexWrap:'wrap' }}>
+                <Button float style={{ padding:5 }}>
+                    <Icons.OrderIcon size={14} color={Colors.text.action} />
+                </Button>
+                <Button transparent style={{ borderRadius:0, padding:0, borderLeftWidth:1, borderColor:Colors.borders.light, flexGrow:1, marginLeft:6, paddingLeft:6, minWidth:75 }} onPress={() => setExpanded(!expanded)}>
+                    <Text theme='h1' style={{ maxWidth: width * 0.5 }}>{contest_label}</Text>
+                    <Text theme='light' color={Colors.text.action} style={{ marginTop:3 }}>See {orders.length} Orders</Text>
+                </Button>
+                {width > 500 ?
+                <View style={{ margin:5, minWidth:40, justifyContent:'center', alignItems:'center' }}>
+                    <Text theme='h1'>{orders.length}</Text>
+                    <Text theme='light'>Orders</Text>
+                </View>
+                :<></>}
+                {in_progress ?
+                <View style={{ margin:5, minWidth:40, justifyContent:'center', alignItems:'center' }}>
+                    <Text theme='h1' color={Colors.text.warning}>{stats.open_amt.toFixed(2)}</Text>
+                    <Text theme='light' color={Colors.text.warning}>Open</Text>
+                </View>
+                :<></>}
+                <View style={{ margin:5, minWidth:40, justifyContent:'center', alignItems:'center' }}>
+                    <Text theme='h1'>{cl}{stake.toFixed(2)}</Text>
+                    <Text theme='light'>Risk</Text>
+                </View>
+                {settled ?
+                <View style={{ margin:5, minWidth:40, justifyContent:'center', alignItems:'center' }}>
+                    <Text theme='h1'>{cl}{stats.winnings.toFixed(2)}</Text>
+                    <Text theme='light'>Winnings</Text>
+                </View>
+                :
+                <View style={{ margin:5, minWidth:40, justifyContent:'center', alignItems:'center' }}>
+                    <Text theme='h1'>{cl}{potential_winnings.toFixed(2)}</Text>
+                    <Text theme='light'>Potential</Text>
+                </View>
+                }
+            </View>
+            {expanded ?
+            <View transparent style={{ padding:10 }}>
+                <FlatList
+                    data={orders}
+                    keyExtractor={item => item.order_id.toString()}
+                    renderItem={renderOrders}
+                    key={`contest_${contest_label}_orders`}
+                    />
+            </View>
+            :<></>}
+        </View>
+    )
+}
+
+export default ContestStatRow

package/src/MyAction/components/FlashRow.tsx

@@ -0,0 +1,74 @@
+import React, { useState } from 'react';
+import { Button, Text, View } from "../../Components/Themed"
+import type { PollOptionProps, PollProps, PollResponseProps } from "../../types"
+import { useColors } from '../../constants/useColors';
+import { Icons } from '../../Components';
+import { FlatList } from 'react-native';
+
+type FlashRowProps = {
+    market_type:'FOR_MONEY'|'FREE',
+    poll:PollProps,
+    poll_responses:PollResponseProps[],
+    poll_options:PollOptionProps[],
+    width:number
+}
+
+const FlashRow = ({ market_type, poll, poll_options, poll_responses, width }:FlashRowProps) => {
+    const Colors = useColors();
+    const [ expanded, setExpanded ] = useState(false);
+
+    const cl = market_type == 'FOR_MONEY' ? '$' : 'E'
+    const risk = poll_responses.reduce((a,b) => a + parseFloat(b.stake as string), 0);
+    const settled = poll.status == 'closed' ? true : false
+    const winnings = poll_responses.reduce((a,b) => a + b.winnings, 0);
+
+    const renderResponses = (data:{ item:PollResponseProps, index:number }) => {
+        const option = poll_options.find(o => o.poll_option_id == data.item.poll_option_id);
+        if(!option){ return <></> }
+        return (
+            <View type='row' style={{ borderBottomWidth:1, borderColor:Colors.borders.light }}>
+                <View transparent style={{ flex:1, marginLeft:10 }}>
+                    <Text theme='h1' size={12}>{option.option_name}</Text>
+                </View>
+                <View style={{ margin:5, minWidth:40, justifyContent:'center', alignItems:'center' }}>
+                    <Text theme='h1' size={12}>{cl}{parseFloat(data.item.stake as string).toFixed(2)}</Text>
+                    <Text theme='light' size={12}>Risk</Text>
+                </View>
+            </View>
+        )
+    }
+
+    return (
+        <View>
+            <View type='row' style={{ padding:10, borderBottomWidth:1, borderColor:Colors.borders.light, flexWrap:'wrap' }}>
+                <Icons.FlameIcon size={25} color={Colors.text.h1} />
+                <Button transparent style={{ borderRadius:0, padding:0, borderLeftWidth:1, borderColor:Colors.borders.light, flexGrow:1, marginLeft:6, paddingLeft:6, minWidth:75 }} onPress={() => setExpanded(!expanded)}>
+                    <Text theme='h1' style={{ maxWidth:width * 0.55 }}>{poll.poll_question}</Text>
+                    <Text theme='light' style={{ marginTop:3 }} color={Colors.text.action}>See {poll_responses.length} Responses</Text>
+                </Button>
+                <View style={{ margin:5, minWidth:40, justifyContent:'center', alignItems:'center' }}>
+                    <Text theme='h1'>{cl}{risk.toFixed(2)}</Text>
+                    <Text theme='light'>Risk</Text>
+                </View>
+                {settled ?
+                <View style={{ margin:5, minWidth:40, justifyContent:'center', alignItems:'center' }}>
+                    <Text theme='h1'>{cl}{winnings.toFixed(2)}</Text>
+                    <Text theme='light'>Winnings</Text>
+                </View>
+                :<></>}
+            </View>
+            {expanded ?
+            <View transparent style={{ padding:10 }}>
+                <FlatList
+                    data={poll_responses}
+                    keyExtractor={item => item.poll_response_id.toString()}
+                    renderItem={renderResponses}
+                    key={`flash_${poll.poll_id}_responses`}
+                    />
+            </View>
+            :<></>}
+        </View>
+    )
+}
+
+export default FlashRow

package/src/MyAction/components/ParlayRow.tsx

@@ -0,0 +1,137 @@
+import React, { useState } from 'react';
+import { Button, Text, View } from "../../Components/Themed"
+import type { AthleteProps, EventProps, LeagueProps, MatchProps, OrderProps, ParlayPositionProps, ParlayProps, TeamProps, TournamentProps } from "../../types"
+import { useColors } from '../../constants/useColors';
+import { Icons } from '../../Components';
+import { MyActionHelpers } from '../api';
+import { FlatList, Image } from 'react-native';
+import { AthleteImage, TeamImage } from '../../Components/Jerseys';
+import { MarketComponentHelpers } from '../../MarketComponents/api';
+
+type ParlayRowProps = {
+    market_type:'FOR_MONEY'|'FREE',
+    leagues:LeagueProps[],
+    events:EventProps[],
+    tournaments:TournamentProps[],
+    matches:MatchProps[],
+    athletes:AthleteProps[],
+    teams:TeamProps[],
+    parlay:ParlayProps,
+    parlay_orders:OrderProps[],
+    parlay_positions:ParlayPositionProps[]
+    width:number
+}
+
+const ParlayRow = ({ market_type, parlay, events, matches, tournaments, athletes, teams, parlay_orders, parlay_positions, leagues }:ParlayRowProps) => {
+    const Colors = useColors();
+    const [ expanded, setExpanded ] = useState(false);
+
+    const cl = market_type == 'FOR_MONEY' ? '$' : 'E'
+    const legs = parlay_orders.length
+    const { stake, result_ind, winnings, potential_winnings } = MyActionHelpers.aggregatePositions(parlay, parlay_positions);
+    const settled = result_ind ? true : false
+
+    const renderLegResult = (result_ind?:'win'|'lose'|'draw'|'inprogress') => {
+        switch(result_ind){
+            case 'win':
+                return <Icons.CheckIcon size={14} color={Colors.text.success} />
+            case 'lose':
+                return <Icons.CloseIcon size={14} color={Colors.text.error} />
+            case 'draw':
+                return <Icons.AlertIcon size={14} color={Colors.text.warning}/>
+            default:
+                return <Icons.ActivityIcon size={14} color={Colors.text.h1} />
+        }
+    }
+
+    const renderOrders = (data:{ item:OrderProps, index:number }) => {
+        const { contest_title, athlete, team, league } = MyActionHelpers.getDetailsForOrder(data.item, events, tournaments, matches, athletes, teams, leagues);
+        const result_ind = data.item.positions[0]?.result_ind
+        return (
+            <View type='row' style={{ padding:10, borderBottomWidth:1, borderColor:Colors.borders.light }}>
+                    {team ?
+                    <TeamImage
+                        team={team}
+                        league={league}
+                        size={10}
+                    />
+                    :athlete ?
+                    <AthleteImage
+                        athlete={athlete}
+                        league={league}
+                        size={18}
+                    />
+                    :league ?
+                    <Image
+                        source={{ uri: league.league_image }}
+                        style={{ height:18, width:18 }}
+                        resizeMode="cover"
+                    />
+                    :<></>
+                    }
+                    
+                    <View transparent style={{ flex:1, marginLeft:8 }}>
+                        <Text theme='h2'>{data.item.title}</Text>
+                        <View transparent style={{ marginTop:3 }}>                            
+                            <Text theme="description">{contest_title}</Text>
+                        </View>
+                    </View>
+                    {data.item.resolution_status != 'closed' ?
+                    <Button transparent style={{  marginRight:4, marginLeft:4, padding:10, flexDirection:'row', justifyContent:'center', alignItems:'center' }} onPress={() => console.log('ehy')}>
+                        <Icons.ActivityIcon size={18} color={Colors.text.action} />
+                        <Text theme="action"> View</Text>
+                    </Button>
+                    :<></>}
+                    <View style={{ padding:10 }}>
+                        <Text theme="description">{MarketComponentHelpers.getOddsLabel(data.item.odds)}</Text>
+                    </View>
+                    {renderLegResult(result_ind)}
+                    {result_ind == 'draw' ? 
+                    <View type='blur' style={{ position:'absolute', top:0, left:0, right:0, bottom:0, justifyContent:'center' }}>
+                        <View style={{ borderBottomWidth:1, borderColor:Colors.borders.light, marginRight:20, marginLeft:20 }} />
+                    </View>
+                    :<></>}
+                </View>
+        )
+    }
+
+
+    return (
+        <View transparent style={{ padding:10, borderBottomWidth:1, borderColor:Colors.borders.light, borderWidth:expanded?1:undefined }}>
+            <View type='row' style={{ flexWrap:'wrap' }}>
+                <Icons.ParlayIcon size={20} color={Colors.text.h1} />
+                <Button transparent style={{ borderRadius:0, padding:0, borderLeftWidth:1, borderColor:Colors.borders.light, flexGrow:1, marginLeft:6, paddingLeft:6, minWidth:75 }} onPress={() => setExpanded(!expanded)}>
+                    <Text theme='h1'>{parlay.name}</Text>
+                    <Text theme='light' style={{ marginTop:3 }} color={Colors.text.action}>See {legs} legs</Text>
+                </Button>
+                <View style={{ margin:5, minWidth:40, justifyContent:'center', alignItems:'center' }}>
+                    <Text theme='h1' color={Colors.text.warning}>{cl}{stake.toFixed(2)}</Text>
+                    <Text theme='light' color={Colors.text.warning}>Risk</Text>
+                </View>
+                {settled ?
+                <View style={{ margin:5, minWidth:40, justifyContent:'center', alignItems:'center' }}>
+                    <Text theme='h1'>{cl}{winnings.toFixed(2)}</Text>
+                    <Text theme='light'>Winnings</Text>
+                </View>
+                :
+                <View style={{ margin:5, minWidth:40, justifyContent:'center', alignItems:'center' }}>
+                    <Text theme='h1'>{cl}{potential_winnings.toFixed(2)}</Text>
+                    <Text theme='light'>Potential</Text>
+                </View>
+                }
+            </View>
+            {expanded ?
+            <View transparent style={{ padding:10 }}>
+                <FlatList
+                    data={parlay_orders}
+                    keyExtractor={item => item.order_id.toString()}
+                    renderItem={renderOrders}
+                    key={`parlay_${parlay.parlay_id}_orders`}
+                    />
+            </View>
+            :<></>}
+        </View>
+    )
+}
+
+export default ParlayRow

package/src/MyAction/components/SquaresRow.tsx

@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+import { Button, Text, View } from "../../Components/Themed"
+import type { PlayerSquareProps, SquaresCompetitionProps } from "../../types"
+import { useColors } from '../../constants/useColors';
+import { Icons } from '../../Components';
+import { FlatList } from 'react-native';
+
+type SquaresRowProps = {
+    market_type:'FOR_MONEY'|'FREE',
+    squares_competition:SquaresCompetitionProps,
+    width:number
+}
+
+const SquaresRow = ({ market_type, squares_competition, width }:SquaresRowProps) => {
+    const Colors = useColors();
+    const [ expanded, setExpanded ] = useState(false);
+    const cl = market_type == 'FOR_MONEY' ? '$' : 'E'
+
+    const renderSquares = (data:{item:PlayerSquareProps, index:number}) => {
+        console.log(data.item)
+        return (
+            <View>
+                <Text>SQUARE</Text>
+            </View>
+        )
+    }
+
+    return (
+        <View>
+            <View type='row' style={{ padding:10, borderBottomWidth:1, borderColor:Colors.borders.light, flexWrap:'wrap' }}>
+                <Icons.SquaresIcon size={22} color={Colors.text.h1} />
+                <Button transparent style={{ borderRadius:0, padding:0, borderLeftWidth:1, borderColor:Colors.borders.light, flexGrow:1, marginLeft:6, paddingLeft:6, minWidth:75 }} onPress={() => setExpanded(!expanded)}>
+                    <Text theme='h1' style={{ maxWidth:width * 0.55 }}>{squares_competition.sq_comp_name}</Text>
+                    <Text theme='light' style={{ marginTop:3 }} color={Colors.text.action}>See My Squares</Text>
+                </Button>
+                <View style={{ margin:5, minWidth:40, justifyContent:'center', alignItems:'center' }}>
+                    <Text theme='h1'>{cl}{(0).toFixed(2)}</Text>
+                    <Text theme='light'>Risk</Text>
+                </View>
+                
+            </View>
+            {expanded ?
+            <View transparent style={{ padding:10 }}>
+                <FlatList
+                    data={[]}
+                    renderItem={renderSquares}
+                    key={`square_${squares_competition.sq_comp_id}_list`}
+                    />
+            </View>
+            :<></>}
+        </View>
+    )
+}
+
+export default SquaresRow