be-components 4.7.3 → 4.7.4

package/src/Engage/components/EngageHeader.tsx

@@ -13,12 +13,13 @@ import { Button, Text, View } from '../../Components/Themed';
 type EngageHeaderProps = {
     companies:CompanyProps[],
     width:number,
+    view_mode?:'desktop'|'mobile',
     onEvent?:(be_event:BEEventProps) => void,
     onSelectCompany?:(company:CompanyProps) => void,
     onManage?:() => void
 }
 
-const EngageHeader = ({ companies, width, onManage, onEvent, onSelectCompany }:EngageHeaderProps) => {
+const EngageHeader = ({ companies, width, view_mode, onManage, onEvent, onSelectCompany }:EngageHeaderProps) => {
     const [ active_company, setActiveComany ] = useState<number>(0);
     const [ search, setSearch ] = useState<{
         loading:boolean,
@@ -80,27 +81,25 @@ const EngageHeader = ({ companies, width, onManage, onEvent, onSelectCompany }:E
     return (
         <View type = 'header'>
             <LinearGradient colors={[Colors.views.background, Colors.views.header ]} style={{ padding:20, flexDirection:'row', alignItems:'center' }}>
-                <View float style={{ borderRadius:100, height:75, width:75, backgroundColor:Colors.text.white, justifyContent:'center', alignItems:'center', ...view_styles.float }}>
+                <View float style={{ borderRadius:100,  width:view_mode == 'desktop' ? 75: 50, height:view_mode == 'desktop' ? 75: 50, justifyContent:'center', alignItems:'center', ...view_styles.float }}>
                     {company ?
                     <Image
                         source={{ uri: company.company_image?.url }}
-                        style={{ height:50, width:50 }}
+                        style={{ height:view_mode=='desktop'?50:30, width:view_mode=='desktop'?50:30 }}
                         resizeMode='cover'
                     />
                     :<></>}
                 </View>
                 <View transparent style={{ flex:1, marginLeft:20 }}>
-                    <Text size={20} weight='bold' color={Colors.text.h1}>Engage with our partners</Text>
-                    <Text style={{ marginTop:10 }} size={14} weight='regular' color={Colors.text.h1}>Competitions, squares, brackets are all brought to you without fees thanks to our amazing partners.</Text>
+                    <Text theme='h1' color={Colors.text.h1}>Engage with our partners</Text>
+                    <Text style={{ marginTop:5 }} size={14} theme='description'>Competitions, squares, brackets are all brought to you without fees thanks to our amazing partners.</Text>
                 </View>
-                {onManage ?
-                <View style={{ position:'absolute', bottom:5, right:10 }}>
+                {onManage && view_mode == 'desktop' ?
                     <Button
-                        title='MANAGE'
+                        title='Manage'
                         type='success'
                         onPress={() => onManage()}
                     />
-                </View>
                 :<></>}
             </LinearGradient>
             <View transparent style={{ padding:10 }}>

package/src/Engage/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { ActivityIndicator, FlatList, KeyboardAvoidingView, Modal, Platform } from 'react-native';
+import { ActivityIndicator, FlatList, Image, KeyboardAvoidingView, Modal, Platform } from 'react-native';
 import type { BEEventProps, BracketCompetitionProps, BracketProps, CompanyProps, CompetitionPayoutTypeProps, CompetitionProps, CompetitionResultTypeProps, CompetitionSeasonProps, CompetitionTypeProps, EventProps, FocusPositionProps, LeagueProps, PublicPlayerProps, SquaresCompetitionProps } from '../types';
 import { EngageApi, EngageHelpers } from './api';
 import CompetitionCard from './components/CompetitionCard';
@@ -18,9 +18,11 @@ import { useColors } from '../constants/useColors';
 type EngageModuleProps = {
     player_id?:string,
     insets?: { top:number, bottom:number },
+    view_mode?:'desktop'|'mobile'
     onEvent?:(be_event:BEEventProps) => void,
     onFocusPosition?:(pos:FocusPositionProps) => void,
-    onManage:() => void,
+    onManage?:() => void,
+    onBracketRoom?:() => void,
     onCreateSeason?:() => void,
     onSelectCompany?:(c:CompanyProps) => void,
     onCreateCompetition?:() => void,
@@ -34,7 +36,7 @@ type EngageModuleProps = {
 
 const engage_sections = ['header','toggle', 'private','engagements']
 
-const EngageModule = ({ insets, onSelectBracketCompetition, onSelectCompetition, onSelectSquaresCompetition, onSelectCompetitionSeason,
+const EngageModule = ({ view_mode, insets, onBracketRoom, onSelectBracketCompetition, onSelectCompetition, onSelectSquaresCompetition, onSelectCompetitionSeason,
     onCreateSeason, onCreateCompetition, onCreateBracketCompetition, onCreateSquares, onFocusPosition, onManage, onEvent, onSelectCompany
  }:EngageModuleProps) => {
     const [ module_size, setModuleSize ] = useState({ width:0, height:0 });
@@ -45,7 +47,7 @@ const EngageModule = ({ insets, onSelectBracketCompetition, onSelectCompetition,
     }>({
         connected: false
     });
-    const [ active_tab, setActiveTab ] = useState('competitions');
+    const [ active_tab, setActiveTab ] = useState('brackets');
     const [ module_data, setModuleData ] = useState<{
         loading:boolean,
         competitions:CompetitionProps[],
@@ -53,6 +55,7 @@ const EngageModule = ({ insets, onSelectBracketCompetition, onSelectCompetition,
         competition_types:CompetitionTypeProps[],
         competition_result_types:CompetitionResultTypeProps[],
         competition_payouts:CompetitionPayoutTypeProps[],
+        selected_bracket?:BracketProps,
         events:EventProps[],
         leagues:LeagueProps[],
         brackets:BracketProps[],
@@ -75,10 +78,14 @@ const EngageModule = ({ insets, onSelectBracketCompetition, onSelectCompetition,
         bracket_competitions:[],
         players:[]
     });
-    const { loading, competitions, competition_seasons, competition_result_types, squares_competitions, brackets, leagues, bracket_competitions, events, competition_types, companies, players } = module_data;
-
+    const { loading, competitions, selected_bracket, competition_seasons, competition_result_types, squares_competitions, brackets, leagues, bracket_competitions, events, competition_types, companies, players } = module_data;
     const Colors = useColors();
-
+    const available_brackets = brackets.filter(b => bracket_competitions.map(bc => bc.bracket_id).includes(b.bracket_id))
+    let visible_bracket_competitions = [ ...bracket_competitions ]
+    if(selected_bracket){
+        visible_bracket_competitions = visible_bracket_competitions.filter(bc => bc.bracket_id == selected_bracket.bracket_id);
+    }
+    const engagement_width = view_mode == 'mobile' ? module_size.width - 20 : (module_size.width / 3) - 20
     useEffect(() => {
         EngageApi.setEnvironment();
         getDataFromServer()
@@ -135,7 +142,7 @@ const EngageModule = ({ insets, onSelectBracketCompetition, onSelectCompetition,
         const company = companies.find(c => c.company_id == data.item.company_id);
         const event = events.find(e => e.event_id == data.item.event_id)
         return (
-            <View transparent style={{ margin:10 }}>
+            <View key={data.item.sq_comp_id.toString()} transparent style={{ margin:10, width: engagement_width }}>
                 <SquaresCompetitionCard
                     squares_competition={data.item}
                     company={company}
@@ -156,7 +163,7 @@ const EngageModule = ({ insets, onSelectBracketCompetition, onSelectCompetition,
         const league = leagues.find(e => e.league_id == bracket?.league_id)
         if(!competition_result_type){ return <></> }
         return (
-            <View transparent style={{ margin:10 }}>
+            <View key={data.item.bracket_competition_id.toString()} transparent style={{ margin:10, width: engagement_width }}>
                 <BracketCompetitionCard
                     bracket_competition={data.item}
                     company={company}
@@ -182,6 +189,28 @@ const EngageModule = ({ insets, onSelectBracketCompetition, onSelectCompetition,
         )
     }
 
+    const renderBrackets = (data: { item:BracketProps, index:number }) => {
+        const selected = selected_bracket?.bracket_id == data.item.bracket_id ? true : false
+        const league = leagues.find(l => l.league_id == data.item.league_id);
+        return (
+            <Button
+                float
+                type={selected ? 'action' : 'text'}
+                style={{ padding:10, flexDirection:'row', alignItems:'center', margin:4, borderRadius:100 }}
+                onPress={() => selected ? setModuleData({ ...module_data, selected_bracket: undefined }): setModuleData({ ...module_data, selected_bracket:data.item })}
+            >
+                {league ?
+                <Image
+                    source={{ uri: league.league_image }}
+                    style={{ height:25, width:25, marginRight:10 }}
+                    resizeMode='cover'
+                />
+                :<></>}
+                <Text style={{ maxWidth:150 }} textAlign='center' theme='h2' color={selected?Colors.text.white : Colors.text.h1}>{data.item.bracket_name}</Text>
+            </Button>
+        )
+    }
+
     const renderCompetitions = (data: { item:CompetitionProps, index:number }) => {
         const admin = players.find(p => p.player_id == data.item.admin_id);
         const pacer = players.find(p => p.player_id == data.item.pacer_id);
@@ -190,7 +219,7 @@ const EngageModule = ({ insets, onSelectBracketCompetition, onSelectCompetition,
         const competition_result_type = competition_result_types.find(t => t.competition_result_type_id == data.item.competition_result_type_id);
         if(!competition_type || !competition_result_type){ return <></> }
         return (
-            <View transparent style={{ margin:10 }}>
+            <View key={data.item.competition_id.toString()} transparent style={{ margin:10, width:engagement_width }}>
                 <CompetitionCard 
                     competition={data.item}
                     company={company}
@@ -211,6 +240,7 @@ const EngageModule = ({ insets, onSelectBracketCompetition, onSelectCompetition,
                     <EngageHeader
                     companies={companies}
                     width={module_size.width}
+                    view_mode={view_mode}
                     onManage={onManage}
                     onEvent={onEvent}
                     onSelectCompany={onSelectCompany}
@@ -218,7 +248,15 @@ const EngageModule = ({ insets, onSelectBracketCompetition, onSelectCompetition,
                 )
             case 'toggle':
                 return (
-                    <View float style={{ margin:10 }}>
+                    <View transparent style={{ margin:10 }}>
+                        {onManage && view_mode == 'mobile' ?
+                            <Button
+                            title='Manage competitions you have created'
+                            style={{ paddingRight:20, alignSelf:'flex-end' }}
+                            type='text'
+                            onPress={() => onManage()}
+                        />
+                        :<></>}
                         <Toggle
                             background_color={Colors.views.header}
                             inactive_title_color={Colors.text.h1}
@@ -290,11 +328,12 @@ const EngageModule = ({ insets, onSelectBracketCompetition, onSelectCompetition,
                                     :<></>}
                                     
                                 </View>
-                                <FlatList
-                                    data={competitions.sort((a,b) => moment(a.scheduled_datetime).unix() - moment(b.scheduled_datetime).unix())}
-                                    renderItem={renderCompetitions}
-                                    keyExtractor={(item) => item.competition_id.toString()}
-                                />
+                                <View style={{ flexDirection:'row', flexWrap:'wrap', justifyContent:'center' }}>
+                                    {competitions.sort((a,b) => moment(a.scheduled_datetime).unix() - moment(b.scheduled_datetime).unix()).map((c, i) => {
+                                        return renderCompetitions({ item: c, index: i })
+                                    })}
+                                </View>
+                                
                             </View>
                         </View>
                         :active_tab == 'squares' ?
@@ -314,15 +353,30 @@ const EngageModule = ({ insets, onSelectBracketCompetition, onSelectCompetition,
                                     :<></>}
                                 </View>
                             </View>
-                            <FlatList
-                                data={squares_competitions.sort((a,b) => moment(a.begin_datetime).unix() - moment(b.begin_datetime).unix())}
-                                renderItem={renderSquaresCompetitions}
-                                keyExtractor={(item) => item.sq_comp_id.toString()}
-                            />
+                            <View style={{ flexDirection:'row', flexWrap:'wrap', justifyContent:'center' }}>
+
+                            {squares_competitions.sort((a,b) => moment(a.begin_datetime).unix() - moment(b.begin_datetime).unix()).map((c, i) => {
+                                return renderSquaresCompetitions({ item: c, index: i })
+                            })}
+                            </View>
                         </View>
                         :active_tab == 'brackets' ?
                         <View transparent>
-                            <View transparent style={{ marginBottom:15, marginTop:10 }}>
+                            <View transparent>
+                                {view_mode == 'mobile' && onBracketRoom ?
+                                <View float style={{ flexDirection:'row', alignItems:'center', margin:4, padding:10, marginBottom:10 }}>
+                                    <View style={{ flex:1, marginRight:10 }}>
+                                        <Text theme='h1'>Bracket Home</Text>
+                                        <Text theme='description'>Go to bracket room to manage all your brackets and find new ones to complete.</Text>
+                                    </View>
+                                    <Button
+                                        type='action'
+                                        title='Bracket Room'
+                                        onPress={() => onBracketRoom()}
+                                    />
+                                </View>
+
+                                :<></>}
                                 <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
                                     <View transparent style={{ flex:1 }}>
                                         <Text theme='h1'>Public Bracket Competitions</Text>
@@ -335,13 +389,29 @@ const EngageModule = ({ insets, onSelectBracketCompetition, onSelectCompetition,
                                         onPress={() => onCreateBracketCompetition()}
                                     />
                                     :<></>}
+                                    {view_mode == 'desktop' && onBracketRoom ?
+                                    <Button
+                                        type='action'
+                                        title='Bracket Room'
+                                        onPress={() => onBracketRoom()}
+                                    />
+                                    :<></>}
+                                </View>
+                            </View>
+                            <View style={{ marginTop:10 }}>
+                                <FlatList
+                                    data={available_brackets}
+                                    key={'bracket_list'}
+                                    horizontal
+                                    renderItem={renderBrackets}
+                                    keyExtractor={(item) => item.bracket_id.toString()}
+                                />
+                                <View style={{ flexDirection:'row', flexWrap:'wrap', justifyContent:'center' }}>
+                                    {visible_bracket_competitions.sort((a,b) => moment(a.scheduled_datetime).unix() - moment(b.scheduled_datetime).unix()).map((c, i) => {
+                                        return renderBracketCompetitions({ item: c, index: i })
+                                    })}
                                 </View>
                             </View>
-                            <FlatList
-                                data={bracket_competitions.sort((a,b) => moment(a.scheduled_datetime).unix() - moment(b.scheduled_datetime).unix())}
-                                renderItem={renderBracketCompetitions}
-                                keyExtractor={(item) => item.bracket_competition_id.toString()}
-                            />
                         </View>
                         :<></>}
                     </View>
@@ -367,14 +437,15 @@ const EngageModule = ({ insets, onSelectBracketCompetition, onSelectCompetition,
             {show_code_prompt ?
             <Modal
                 transparent
-                animationType='slide'
+                animationType={view_mode == 'desktop' ? 'fade': 'slide'}
                 style={{ flex:1 }}
             >
                 <KeyboardAvoidingView
                     style={{ flex:1 }}
                     behavior={Platform.OS == 'ios' ? 'padding' : 'height'}
                 >
-                <View type='blur' style={{ flex:1, justifyContent:'flex-end', paddingBottom:insets?.bottom }}>
+                <View type='blur' style={view_mode == 'desktop'?{ flex:1, justifyContent:'center', alignItems:'center' }:{ flex:1, justifyContent:'flex-end', paddingBottom:insets?.bottom }}>
+                    <View transparent style={view_mode=='desktop'?{ width:500 }: {}}>
                     <PrivateCodePrompt
                         onFocusPosition={onFocusPosition}
                         onFoundBracket={(b) => {
@@ -396,6 +467,7 @@ const EngageModule = ({ insets, onSelectBracketCompetition, onSelectCompetition,
                         }}
                         onClose={() => setShowCodePrompt(false)}
                     />
+                    </View>
                 </View>
                 </KeyboardAvoidingView>
             </Modal>