be-components 2.0.0 → 2.0.2

package/src/MarketComponents/components/ContestStats.tsx

@@ -0,0 +1,194 @@
+import React, { useEffect, useState } from 'react';
+import { View, FlatList, TouchableOpacity, Image, ActivityIndicator } from 'react-native';
+import type { AthleteProps, ContestStatProps, EventProps } from '../../types';
+import { MarketComponentApi, MarketComponentHelpers } from '../api';
+import { Button, Icons, Text } from '../../Components';
+import EventScoringCard from './EventScoringCard';
+import { view_styles } from '../../constants/styles';
+import Colors from '../../constants/colors';
+
+type ContestStatsCardProps = {
+    event:EventProps
+}
+
+const ContestStatsCard = ({ event }:ContestStatsCardProps) => {
+    const [ show_stats, setShowStats ] = useState(false);
+    const [ card_data, setData ] = useState<{
+        loading:boolean,
+        contest_stats:ContestStatProps[],
+        athletes:AthleteProps[],
+        active_stat_label?:string,
+        active_team_id?:string,
+    }>({
+        loading:false,
+        contest_stats: [],
+        athletes: []
+    })
+    const { loading, contest_stats, athletes, active_stat_label, active_team_id } = card_data;
+
+    const home_team = event.home
+    const away_team = event.away
+    const away_athletes = athletes.filter(a => a.team_id == away_team?.team_id);
+    const home_athletes = athletes.filter(a => a.team_id == home_team?.team_id);
+
+    const unique_stats = [ ...new Set(contest_stats.map(s => s.stat_label)) ]
+    
+    let filtered_stats = contest_stats.filter(s => s.stat_label == active_stat_label);
+    if(active_team_id == away_team?.team_id){
+        filtered_stats = filtered_stats.filter(s => away_athletes.map(a => a.athlete_id.toString()).includes(s.participant_id.toString()))
+    }
+    if(active_team_id == home_team?.team_id){
+        filtered_stats = filtered_stats.filter(s => home_athletes.map(a => a.athlete_id.toString()).includes(s.participant_id.toString()))
+    }
+
+
+    useEffect(() => {
+        console.log('gettin it!')
+        getDataFromServer(event.event_id)
+    },[event.event_id])
+
+    const getDataFromServer = async(contest_id:string) => {
+        const stats = await MarketComponentApi.getContestStatsByEvent(contest_id);
+        const active_stats = [ ...new Set(stats.map(s => s.stat_label)) ]
+
+        const athlete_ids = [ ...new Set(stats.filter(s => s.participant_type == 'athlete').map(s => s.participant_id)) ]
+        const ps = await MarketComponentApi.getAthletesByIds(athlete_ids)
+        setData({
+            ...card_data,
+            athletes: ps,
+            contest_stats: stats,
+            active_stat_label: active_stats[0],
+            loading:false,
+            active_team_id:event.away_team_id
+        })
+    }
+
+    const renderAthletes = (data: { item:ContestStatProps, index:number }) => {
+        const athlete = athletes.find(a => a.athlete_id == data.item.participant_id);
+        if(!athlete){ return <></> }
+        return (
+            <View style={{ ...view_styles.body_row, padding:10, borderBottomWidth:1, borderColor:Colors.shades.shade600 }}>
+                <View style={{ flex:1 }}>
+                    <Text theme='header_2'>{athlete.first_name} {athlete.last_name} ({athlete.position})</Text>
+                </View>
+                <Text theme='header_2'>{data.item.value}</Text>
+            </View>
+        )
+    }
+
+    const renderStatOptions = (data: { item:string, index:number }) => {
+        return (
+            <TouchableOpacity 
+                style={{  ...view_styles.body_row, padding:10, borderBottomWidth:1, borderBottomColor:Colors.shades.shade600 }} 
+                onPress={() => {
+                    setData({ ...card_data, active_stat_label: data.item })
+                    setShowStats(false)
+                }}>
+                <Text theme='header_2'>{MarketComponentHelpers.prettyKey(data.item)}</Text>
+            </TouchableOpacity>
+        )
+    }
+
+    return (
+        <View style={{ ...view_styles.section_body, padding:0 }}>
+            <View style={{ padding:10 }}>
+                <EventScoringCard
+                    event={event}
+                />
+                <View style={{ ...view_styles.body_row, marginTop:10, padding:0, borderWidth:3, borderColor:Colors.shades.shade100, borderRadius:22 }}>
+                    {away_team?
+                    <TouchableOpacity 
+                        style={{ 
+                            flex:1, 
+                            padding:10,
+                            flexDirection:'row',
+                            alignItems:'center',
+                            backgroundColor:active_team_id == away_team.team_id ? Colors.brand.midnight : Colors.shades.white,
+                            borderRadius:22
+                        }}
+                        onPress={() => setData({ ...card_data, active_team_id:away_team.team_id })}    
+                    >
+                        <View style={{ height:30, width:30, borderRadius:100, marginRight:10, backgroundColor:Colors.shades.white, justifyContent:'center', alignItems:'center' }}>
+                            <Image
+                                source={{ uri: away_team.image?.url }}
+                                style={{ height:22, width:22, borderRadius:4 }}
+                                resizeMode='cover'
+                            />
+                        </View>
+                        <Text style={{ flex:1, marginRight:30 }} textAlign='center' size={12} color={active_team_id == away_team.team_id ? Colors.shades.white : Colors.brand.midnight} weight={active_team_id == away_team.team_id ? 'bold' : 'regular'}>{away_team.abbr}</Text>
+                    </TouchableOpacity>
+                    :<></>}
+                    {home_team ?
+                    <TouchableOpacity 
+                    style={{ 
+                        flex:1, 
+                        padding:10,
+                        flexDirection:'row',
+                        alignItems:'center',
+                        backgroundColor:active_team_id == home_team.team_id ? Colors.brand.midnight : Colors.shades.white,
+                        borderRadius:22
+                    }}
+                    onPress={() => setData({ ...card_data, active_team_id:home_team.team_id })}    
+                >
+                    <View style={{ height:30, width:30, borderRadius:100, marginRight:10, backgroundColor:Colors.shades.white, justifyContent:'center', alignItems:'center' }}>
+                        <Image
+                            source={{ uri: home_team.image?.url }}
+                            style={{ height:22, width:22, borderRadius:4 }}
+                            resizeMode='cover'
+                        />
+                    </View>
+                    <Text style={{ flex:1, marginRight:30 }} textAlign='center' size={12} color={active_team_id == home_team.team_id ? Colors.shades.white : Colors.brand.midnight} weight={active_team_id == home_team.team_id ? 'bold' : 'regular'}>{home_team.abbr}</Text>
+                </TouchableOpacity>
+                    :<></>}
+                </View>  
+                <View style={{ ...view_styles.body_row, borderTopRightRadius:8, borderTopLeftRadius:8, backgroundColor:Colors.shades.shade100, marginTop:5, marginBottom:5 }}>
+                    <View style={{ flex:1 }}>
+                        <Text theme='header'>Box Score</Text>
+                    </View>
+                    <TouchableOpacity style={{ padding:10, borderWidth:1, borderColor:Colors.brand.electric, borderRadius:8, flexDirection:'row', alignItems:'center' }}
+                        onPress={() => setShowStats(!show_stats)}
+                    >
+                        <Text style={{ marginRight:8 }} size={12} color={Colors.brand.electric}>{active_stat_label ? MarketComponentHelpers.prettyKey(active_stat_label) : 'Select'}</Text>
+                        <Icons.ChevronIcon size={8} direction={show_stats ? 'up' : 'down'} color={Colors.brand.electric} />
+                    </TouchableOpacity>
+                    {show_stats ?
+                    <View style={{ position:'absolute', bottom:0, right:0, backgroundColor:Colors.shades.white, ...view_styles.float, minWidth:250, borderRadius:8, borderWidth:1, borderColor:Colors.shades.shade600, maxHeight: 250 }}>
+                        <View style={{ ...view_styles.section_header, backgroundColor:Colors.shades.shade100 }}>
+                            <View style={{ flex:1 }}>
+                                <Text theme='header'>Select Stat</Text>
+                            </View>
+                            <Button
+                                title='X'
+                                backgroundColor={Colors.shades.white}
+                                borderWidth={1}
+                                title_color={Colors.utility.error}
+                                borderRadius={8}
+                                borderColor={Colors.utility.error}
+                                onPress={() => setShowStats(false)}
+                            />
+                        </View>
+                        <FlatList
+                            data={unique_stats}
+                            renderItem={renderStatOptions}
+                            keyExtractor={(item) => item}
+
+                        />
+                    </View>
+                    :<></>}
+                </View>
+                {loading ?
+                <ActivityIndicator style={{ padding:10, alignSelf:'center' }} color={Colors.brand.midnight} size='large' />
+                :<></>}
+                <FlatList
+                    data={filtered_stats.sort((a,b) => b.value - a.value)}
+                    renderItem={renderAthletes}
+                    keyExtractor={(item) => `${item.stat}:${item.participant_id}`}
+                />
+            </View>
+              
+            
+        </View>
+    )
+}
+
+export default ContestStatsCard

package/src/MarketComponents/components/EventScoringCard.tsx

@@ -0,0 +1,53 @@
+import { Image, View } from "react-native"
+import { view_styles } from "../../constants/styles"
+import { Text } from "../../Components"
+import type { EventProps } from "../../types"
+import React from "react"
+
+type EventScoringCardProps = {
+    event:EventProps
+}
+const EventScoringCard = ({ event }:EventScoringCardProps) => {
+    const overtime_occurred = event.event_scoring && event.event_scoring.length > 4 ? true : false;
+    if(!event.event_scoring){ return <></> }
+    return (
+        <View>
+            <View style={view_styles.body_row}>
+                <Image
+                    source={{ uri: event.away?.image?.url }}
+                    style={{ height:20, width:20, borderRadius:4, marginRight:5 }}
+                    resizeMode="cover"
+                />
+                <Text style={{ flex:1 }} theme="body">{event.away?.abbr}</Text>
+                <View style={{ flex:1, flexDirection:'row', alignItems:'center' }}>
+                    {event.event_scoring.sort((a,b) => a.period - b.period).map(s => {
+                        return (
+                            <View style={{ flex:1 }}>
+                                <Text theme={overtime_occurred && s.period == 4 ? 'error_header_2': 'header_2'}>{s.away_cumulative_score}</Text>
+                            </View>
+                        )
+                    })}
+                </View>
+            </View>
+            <View style={view_styles.body_row}>
+                <Image
+                    source={{ uri: event.home?.image?.url }}
+                    style={{ height:20, width:20, borderRadius:4, marginRight:5 }}
+                    resizeMode="cover"
+                />
+                <Text style={{ flex:1 }} theme="body">{event.home?.abbr}</Text>
+                <View style={{ flex:1, flexDirection:'row', alignItems:'center' }}>
+                    {event.event_scoring.map(s => {
+                        return (
+                            <View style={{ flex:1 }}>
+                                <Text theme={overtime_occurred && s.period == 4 ? 'error_header_2': 'header_2'}>{s.home_cumulative_score}</Text>
+                            </View>
+                        )
+                    })}
+                </View>
+            </View>
+        </View>
+    )
+}
+
+export default EventScoringCard

package/src/MarketComponents/components/TeamEventMarket/index.tsx

@@ -14,6 +14,7 @@ import { MarketButtonHelpers } from '../MarketButton/api';
 import LinearGradient from 'react-native-linear-gradient';
 import { useIsInViewport } from '../../../Components/ViewportObserver';
 import type { BEEventProps } from '../../../Observer/api/types';
+import ContestStatsCard from '../ContestStats';
 
 type TeamEventMarketProps = {
     event:EventProps,
@@ -50,6 +51,7 @@ const TeamEventMarket = ({ event, init_expanded, show_id, activate_loading, comp
         expanded:false,
         athletes:[]
     })
+    const [ show_stats, setShowStats ] = useState(false);
     const [ sponsor, setSponsor ] = useState<CompanyProps|undefined>(undefined);
     const [ competitions_expanded, setCompetitionsExpanded ] = useState(false);
     const { expanded, athletes, loaded, loading } = expanded_data;
@@ -314,10 +316,24 @@ const TeamEventMarket = ({ event, init_expanded, show_id, activate_loading, comp
             }
             <View nativeID='primary_markets' style={{ flexDirection:'row' }}>
                 <View nativeID='team_details' style={{ flex:1, padding:5, paddingRight:0 }}>
-                    <View style={{ flexDirection:'row', alignItems:'center', marginTop:5, marginBottom:5, marginLeft:10 }}>
-                        <View style={{ marginRight:5, height:10, width:10, borderRadius:100, backgroundColor:event_status=='active'?Colors.utility.success:event_status=='inactive'?Colors.brand.electric:Colors.utility.error }} />
-                        <Text size={12} color={Colors.brand.midnight}>{TeamEventMarketHelpers.getTimeDetail(event)}</Text>
-                    </View>
+                    <TouchableOpacity style={{ flexDirection:'row', alignItems:'center', marginTop:5, marginBottom:5, marginLeft:10 }} onPress={() => setShowStats(!show_stats)}>
+                        {show_stats ?
+                        <Button
+                            title='X'
+                            title_size={10}
+                            padding={0}
+                            style={{ marginRight:5 }}
+                            disabled={true}
+                            title_color={Colors.utility.error}
+                            onPress={() => console.log('')}
+                        />
+                        :<></>}
+                        {!show_stats ?
+                            <View style={{ marginRight:5, height:10, width:10, borderRadius:100, backgroundColor:event_status=='active'?Colors.utility.success:event_status=='inactive'?Colors.brand.electric:Colors.utility.error }} />
+                        :<></>}
+                        
+                        <Text size={12} color={show_stats ? Colors.utility.error : Colors.brand.electric}>{show_stats ? 'Hide Boxscore': `${TeamEventMarketHelpers.getTimeDetail(event)}`}</Text>
+                    </TouchableOpacity>
                     <View nativeID='away_details' style={{ ...view_styles.body_row, minHeight:48 }}>
                         <Image
                             source={{ uri: event.away.image?.url }}
@@ -476,6 +492,13 @@ const TeamEventMarket = ({ event, init_expanded, show_id, activate_loading, comp
                 />
             </View>
             :<></>}
+            {show_stats ?
+            <View style={{ borderTopWidth:1, borderColor:Colors.shades.shade600 }}>
+                <ContestStatsCard
+                    event={event}
+                />
+            </View>
+            :<></>}
         </View>
     )
 }

package/src/Poll/components/CampaignLeaderboard.tsx

@@ -72,7 +72,7 @@ const CampaignLeaderboard = ({ poll_campaign, height, view_mode, onShowFullLeade
         const player = players.find(p => p.player_id == data.item.player_id);
         if(!player){ return <></> }
         return (
-            <View style={{ flexDirection:'row', alignItems:'center', margin:4, padding:10, borderRadius:22, backgroundColor:Colors.shades.white, borderWidth:1, borderColor:Colors.shades.shade600 }}>
+            <View style={{ flexDirection:'row', alignItems:'center', margin:4, padding:5, borderRadius:22, backgroundColor:Colors.shades.white, borderWidth:1, borderColor:Colors.shades.shade600 }}>
                 <View nativeID="place" style={{ margin:5, height:20, width:20, justifyContent:'center', alignItems:'center', borderRadius:100, borderWidth:1, borderColor:Colors.brand.slate }}>
                     <Text size={10} color={Colors.brand.midnight} weight='bold' textAlign="center">{offset > 0 ? offset:''}{data.index+1}</Text>
                 </View>
@@ -80,7 +80,7 @@ const CampaignLeaderboard = ({ poll_campaign, height, view_mode, onShowFullLeade
                     <View nativeID="profile_pic" style={{ marginRight:10 }}>
                         <Image
                             source={{ uri: player.profile_pic && player.profile_pic != '' ? player.profile_pic : 'https://res.cloudinary.com/hoabts6mc/image/upload/v1689262384/default-avatar_bbkn2t.png' }}
-                            style={{ height:40, width:40, borderRadius:100 }}
+                            style={{ height:35, width:35, borderRadius:100 }}
                             resizeMode='cover'
                         />
                     </View>
@@ -99,16 +99,14 @@ const CampaignLeaderboard = ({ poll_campaign, height, view_mode, onShowFullLeade
     return (
         <View style={{ flex:1, height:height, backgroundColor:Colors.shades.shade100 }}>
             {my_leader && me ?
-            <View nativeID="my_results">
-                    <View style={{ flexDirection:'row', alignItems:'center', margin:4, padding:10, borderRadius:22, backgroundColor:Colors.shades.white }}>
-                    <View nativeID="place" style={{ margin:5, height:20, width:20, justifyContent:'center', alignItems:'center', borderRadius:100, borderWidth:1, borderColor:Colors.brand.slate }}>
-                        <Text size={10} color={Colors.brand.midnight} weight='bold' textAlign="center">{my_leader.place}</Text>
-                    </View>
+            <View nativeID="my_results" style={{ backgroundColor:Colors.brand.midnight, padding:10 }}>
+                <Text style={{ padding:10 }} size={14} color={Colors.shades.white} weight='bold'>My Results</Text>
+                <View style={{ flexDirection:'row', alignItems:'center', margin:4, padding:5, borderRadius:22, backgroundColor:Colors.shades.white }}>
                     <View nativeID="player" style={{ flex:1, flexDirection:'row', alignItems:'center' }}>
                         <View nativeID="profile_pic" style={{ marginRight:10 }}>
                             <Image
                                 source={{ uri: me.profile_pic && me.profile_pic != '' ? me.profile_pic : 'https://res.cloudinary.com/hoabts6mc/image/upload/v1689262384/default-avatar_bbkn2t.png' }}
-                                style={{ height:40, width:40, borderRadius:100 }}
+                                style={{ height:35, width:35, borderRadius:100 }}
                                 resizeMode='cover'
                             />
                         </View>
@@ -123,7 +121,7 @@ const CampaignLeaderboard = ({ poll_campaign, height, view_mode, onShowFullLeade
                 </View>
             </View>
             :<></>}
-            <ScrollView style={{flex:1}}>
+            <ScrollView style={{flex:1, padding:10}}>
                 {loading ?
                     <ActivityIndicator size='large' color={Colors.brand.midnight} style={{ padding:10, alignSelf:'center' }} />
                 :<></>}

package/src/Poll/components/CampaignPlay.tsx

@@ -292,7 +292,7 @@ const CampaignPlay = ({ player_id, poll_campaign_id, onActiveViewChange, onReque
                 : active_view == 'respond_poll' && active_poll ?
                         <View nativeID='respond_poll' style={{ flex:1 }}>
                             <PollCard
-                                poll={active_poll}
+                                poll_id={active_poll.poll_id}
                                 view={init_view == 'result' ? 'result' : 'play'}
                                 question_number={active_index + 1}
                                 onShowAuthenticate={() => {
@@ -306,10 +306,7 @@ const CampaignPlay = ({ player_id, poll_campaign_id, onActiveViewChange, onReque
                                 }}
                                 total_questions={playable_polls.length}
                                 onSkip={() => handleSkip()}
-                                onSeeResults={() => {
-                                    if(campaign_complete){ return setActiveView('campaign_results') }
-                                    return handleSkip()
-                                }}
+                                
                                 onCancel={() => {
                                     setActivePoll(undefined)
                                     setActiveView('select_poll')

package/src/Poll/components/CampaignResult.tsx

@@ -12,7 +12,7 @@ type CampaignResultProps = {
 }
 
 const CampaignResult = ({ poll_campaign, onShowFullLeaderboard } : CampaignResultProps) => {
-    const [ expanded, setExpanded ] = useState(true);
+    const [ expanded, setExpanded ] = useState(false);
 
     return (
         <View style={{ flex:1, ...view_styles.section }}>
@@ -37,23 +37,4 @@ const CampaignResult = ({ poll_campaign, onShowFullLeaderboard } : CampaignResul
     )
 }
 
-
-/*
-<View style={{ borderRadius:22, backgroundColor:Colors.highlights.highlight200Faded, padding:10, marginTop:10 }}>
-                    <TouchableOpacity style={{ flexDirection:'row', alignItems:'center' }} onPress={() => setPointsExpanded(!points_expanded)}>
-                        <View style={{ flexDirection:'row', alignItems:'center', flex:1 }}>
-                            <Icons.AlertIcon color={Colors.brand.midnight} size={14}/>
-                            <Text style={{ marginLeft:5 }} size={14} color={Colors.brand.midnight} weight='semibold'>How are points calculated?</Text>
-                        </View>
-                        <Icons.ChevronIcon direction={points_expanded ? 'up' : 'down'} color={Colors.brand.midnight}/>
-                    </TouchableOpacity>
-                    {points_expanded ?
-                    <View>
-                        <Text size={12} color={Colors.brand.midnight} style={{ marginTop:10 }} weight='regular'>Points are calculated based on the total responses by all participants.  Each response is worth 1 point.  The responders that selected the winning option will split the total point pool.</Text>
-                        <Text size={12} color={Colors.brand.midnight} style={{ marginTop:5 }} weight='regular'>Therefore, points earned will not be updated until the question is closed!</Text>
-                    </View>
-                    :<></>}
-                </View>
-*/
-
 export default CampaignResult