be-components 1.0.4 → 1.0.6

package/src/Bracket/components/CompetitionLeaderboard.tsx

@@ -1,10 +1,11 @@
 import React, { useEffect, useState } from 'react';
-import { FlatList, View, TouchableOpacity, Image } from 'react-native';
+import { FlatList, View, TouchableOpacity, Image, ScrollView, ActivityIndicator } from 'react-native';
 import type { AthleteProps, CompetitionPlayerBracketProps, PlayerBracketProps, PublicPlayerProps, TeamProps } from '../../types';
 import { BracketApi, BracketComeptitionApi } from '../api';
 import Colors from '../../constants/colors';
 import { Button, Text } from '../../Components';
 import { CompetitionHelpers } from '../../Competition/api';
+import { view_styles } from '../../constants/styles';
 
 type CompetitionLeaderboardProps = {
     bracket_competition_id:string,
@@ -34,7 +35,7 @@ const CompetitionLeaderboard = ({ bracket_competition_id, my_competition_player_
         player_brackets:[],
         players:[]
     })
-    const {  competition_player_brackets, players, player_brackets, teams, athletes } = leaders_data;
+    const { loading, offset, competition_player_brackets, players, player_brackets, teams, athletes } = leaders_data;
 
     let visible_leaders = competition_player_brackets.sort((a,b) => a.place - b.place);
     if(view_mode == 'short'){ visible_leaders = competition_player_brackets.slice(0, 3) }
@@ -59,6 +60,7 @@ const CompetitionLeaderboard = ({ bracket_competition_id, my_competition_player_
             competition_player_brackets: resp.competition_player_brackets,
             player_brackets: resp.player_brackets.filter(pb => !my_player_brackets.find(mpb => mpb.player_bracket_id == pb.player_bracket_id)).concat(my_player_brackets),
             teams:ts,
+            offset: page,
             athletes: aths,
             players: ps
         })
@@ -72,7 +74,7 @@ const CompetitionLeaderboard = ({ bracket_competition_id, my_competition_player_
         if(show_champions && player_bracket.champion_id_type == 'team'){ champ_team = teams.find(t => t.team_id == player_bracket.champion_id) }
         if(show_champions && player_bracket.champion_id_type == 'athlete'){ champ_athlete = athletes.find(t => t.athlete_id == player_bracket.champion_id) }
         return (
-            <TouchableOpacity style={{ flexDirection:'row', alignItems:'center', borderRadius:22, borderTopLeftRadius:4, borderBottomLeftRadius:4, margin:3, backgroundColor:Colors.shades.white, padding:4 }}>
+            <TouchableOpacity style={{ flexDirection:'row', alignItems:'center', borderRadius:22, margin:6, backgroundColor:Colors.shades.white, padding:4 }}>
                  <View style={{ padding:5 }}>
                     <Text size={14} color={Colors.brand.midnight} weight='bold'>{CompetitionHelpers.formatPlace(data.item.place)}</Text>
                 </View>
@@ -113,7 +115,7 @@ const CompetitionLeaderboard = ({ bracket_competition_id, my_competition_player_
 
     return (
         <View style={{ flex:1 }}>
-            <View style={{ flex:1 }}>
+            <ScrollView style={{ flex:1 }}>
             {my_competition_player_brackets.length > 0 ?
             <View style={{ backgroundColor:Colors.brand.midnight, padding:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
                 <View style={{ marginBottom:5 }}>
@@ -130,11 +132,14 @@ const CompetitionLeaderboard = ({ bracket_competition_id, my_competition_player_
                 <View style={{ marginBottom:5 }}>
                     <Text size={14} color={Colors.brand.midnight}>RESULTS</Text>
                 </View>
+                {loading ?
+                <ActivityIndicator size='large' color={Colors.brand.midnight} style={{ padding:25, alignSelf:'center' }} />
+                :
                 <FlatList
                     data={visible_leaders}
                     renderItem={renderLeaders}
                     keyExtractor={(item) => item.competition_player_bracket_id.toString()}
-                />
+                />}
             </View>
             {view_mode == 'short' && onViewFull ?
             <View style={{ padding:10 }}>
@@ -146,9 +151,25 @@ const CompetitionLeaderboard = ({ bracket_competition_id, my_competition_player_
                 />
             </View>
             :<></>}
-            </View>
+            </ScrollView>
             {onClose ?
-            <View style={{ padding:10 }}>
+            <View style={{ padding:10, ...view_styles.float }}>
+                <View style={{ padding:10, flexDirection:'row', alignItems:'center', justifyContent:'space-between' }}>
+                    {offset > 0 ?
+                    <Button
+                        title='PREV'
+                        title_color={Colors.brand.electric}
+                        backgroundColor='transparent'
+                        onPress={() => getLeaders(bracket_competition_id, offset - 1)}
+                    />
+                    :<View/>}
+                    <Button
+                        title='NEXT'
+                        title_color={Colors.brand.electric}
+                        backgroundColor='transparent'
+                        onPress={() => getLeaders(bracket_competition_id, offset + 1)}
+                    />
+                </View>
                 <Button
                     title='Close'
                     style={{ padding:15 }}

package/src/Bracket/components/JoinCompetitionCard.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
-import { View, Image } from "react-native";
-import { Button, Text } from '../../Components';
+import React, { useState } from 'react';
+import { View, Image, TouchableOpacity, Linking } from "react-native";
+import { Button, Checkbox, Text } from '../../Components';
 import type { BracketCompetitionProps, CompetitionPlayerBracketProps, MyPlayerProps, PlayerBalanceProps, PlayerBracketProps } from '../../types';
 import { BracketCompetitionHelpers } from '../api';
 import Colors from '../../constants/colors';
@@ -18,7 +18,8 @@ type JoinCompetitionCardProps = {
 }
 
 const JoinCompetitionCard = ({ player, player_balance, loading, player_bracket, bracket_competition, onNotEnoughBalance, onEnterCompetition, onClose }:JoinCompetitionCardProps) => {
-    
+    const [ disclaimed, setDisclaimed ] = useState(true);
+
     const buy_in_label = BracketCompetitionHelpers.getBuyInTitle(bracket_competition)
 
     const handleEnter = () => {
@@ -54,6 +55,12 @@ const JoinCompetitionCard = ({ player, player_balance, loading, player_bracket,
                     <Text style={{ marginTop:3 }} size={12} color={Colors.brand.slate} weight='regular'>{(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)}>
+                <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>
+            :<></>}
             <View style={{ flexDirection:'row', alignItems:'center', padding:10, backgroundColor:Colors.shades.shade100, borderBottomRightRadius:8, borderBottomLeftRadius:8 }}>
                 <Button
                     title='Close'
@@ -66,8 +73,8 @@ const JoinCompetitionCard = ({ player, player_balance, loading, player_bracket,
                 />
                 <Button
                     title={buy_in_label}
-                    disabled={loading}
-                    style={{ flex:2, opacity: loading?0.5:1  }}
+                    disabled={loading || !disclaimed}
+                    style={{ flex:2, opacity: !disclaimed||loading?0.5:1  }}
                     loading={loading}
                     padding={15}
                     title_color={Colors.shades.white}

package/src/Bracket/components/PlayerBracketManager.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { View, TouchableOpacity, FlatList, Image } from "react-native";
+import { View, TouchableOpacity, FlatList, Image, ScrollView } from "react-native";
 import type { AthleteProps, BracketCompetitionProps, CompetitionPlayerBracketProps, PlayerBracketProps, TeamProps } from '../../types';
 import Colors from '../../constants/colors';
 import { Button, Icons, Text, TextInput } from '../../Components';
@@ -109,7 +109,7 @@ const PlayerBracketManager = ({ visible, teams, athletes, player_bracket, bracke
     const can_delete = BracketCompetitionHelpers.canDeletePlayerBracket(player_bracket, competition_player_brackets)
 
     return (
-        <View>
+        <View style={{ flex:1 }}>
               <TouchableOpacity style={{ flexDirection:'row', alignItems:'center', padding:20, borderBottomWidth:1, borderColor:Colors.shades.shade100 }} onPress={() => onClose()}>
                 <Icons.ChevronIcon direction='left' size={12} color={Colors.brand.midnight} />
                 <View style={{ flex:1, marginLeft:20 }}>
@@ -117,6 +117,8 @@ const PlayerBracketManager = ({ visible, teams, athletes, player_bracket, bracke
                     <Text style={{ marginTop:4 }} size={14} color={Colors.brand.slate} weight='regular'>Manage your bracket and enter competitions</Text>
                 </View>
             </TouchableOpacity>
+            <ScrollView style={{ flex:1}}>
+
             <View nativeID='bracket_info'>
                 <TouchableOpacity style={{ padding:20, flexDirection:'row', alignItems:'center', backgroundColor:Colors.shades.shade100 }} onPress={() => setInfoExpanded(!info_expanded)}>
                     <Text style={{flex:1}} size={16} color={Colors.brand.midnight} weight='bold'>Bracket Details</Text>
@@ -268,6 +270,7 @@ const PlayerBracketManager = ({ visible, teams, athletes, player_bracket, bracke
                 </View>
             </View>
             :<></>}
+            </ScrollView>
         </View>
     )
 }

package/src/Bracket/components/PlayerBrackets.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { View, FlatList, TouchableOpacity, Image } from "react-native"
+import { View, FlatList, TouchableOpacity, Image, ScrollView } from "react-native"
 import type { AthleteProps, BracketCompetitionProps, BracketProps, CompetitionPlayerBracketProps, LeagueProps, PlayerBracketProps, TeamProps } from '../../types';
 import { Button, Icons, Text } from '../../Components';
 import Colors from '../../constants/colors';
@@ -97,7 +97,7 @@ const PlayerBracketSelector = ({ visible, brackets, leagues, teams, athletes, pl
     if(!visible){ return <></> }
 
     return (
-        <View>
+        <View style={{ flex:1 }}>
             <TouchableOpacity style={{ flexDirection:'row', alignItems:'center', padding:20, borderBottomWidth:1, borderColor:Colors.shades.shade100 }} onPress={() => onClose()}>
                 <Icons.ChevronIcon direction='left' size={12} color={Colors.brand.midnight} />
                 <View style={{ flex:1, marginLeft:20 }}>
@@ -105,13 +105,13 @@ const PlayerBracketSelector = ({ visible, brackets, leagues, teams, athletes, pl
                     <Text style={{ marginTop:4 }} size={14} color={Colors.brand.slate} weight='regular'>Select a filled bracket below to manage it</Text>
                 </View>
             </TouchableOpacity>
-            <View>
+            <ScrollView style={{flex:1}}>
                 <FlatList
                     data={unique_bracket_ids}
                     renderItem={renderBrackets}
                     keyExtractor={(item) => item.toString()}
                 />
-            </View>
+            </ScrollView>
         </View>
     )
 }

package/src/Bracket/index.tsx

@@ -194,8 +194,6 @@ const BracketRoom = ({ player_id, bracket_id, bracket_competition_id, player_bal
                 competition_result_types={competition_result_types}
                 height={room_size.height}
                 onUpdateMyData={(data) => {
-                    console.log('updating data')
-                    console.log(data)
 
                     setMyData({
                         ...my_data,