be-components 4.4.1 → 4.4.3

package/src/Bracket/components/RoomHome.tsx

@@ -0,0 +1,543 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { Button, Text, View } from '../../Components/Themed';
+import type { AthleteProps, BracketCompetitionProps, BracketProps, CompetitionPlayerBracketProps, CompetitionResultTypeProps, LeagueProps, MyPlayerProps, PlayerBracketProps, TeamProps } from '../../types';
+import { FlatList, Image } from 'react-native';
+import PlayerBracketCard from './PlayerBracketCard';
+import SearchBox from '../../Components/SearchBox';
+import { Icons, Toggle } from '../../Components';
+import { useColors } from '../../constants/useColors';
+import moment from 'moment-mini';
+import { BracketComeptitionApi } from '../api';
+
+type RoomHomeProps = {
+    player?:MyPlayerProps,
+    visible?:boolean,
+    player_brackets:PlayerBracketProps[],
+    bracket_competitions:BracketCompetitionProps[],
+    competition_player_brackets:CompetitionPlayerBracketProps[],
+    brackets:BracketProps[],
+    onFocusPosition?:(pos:{ x:number, y:number, height:number, width:number }) => void,
+    width:number,
+    public_competitions:BracketCompetitionProps[],
+    active_brackets:BracketProps[],
+    view_mode:'mobile'|'desktop'
+    competition_result_types:CompetitionResultTypeProps[],
+    leagues:LeagueProps[],
+    athletes:AthleteProps[],
+    onUpdatePlayerBracket:(player_bracket:PlayerBracketProps) => void,
+    onEditPlayerBracket:(player_bracket:PlayerBracketProps) => void,
+    onView: (bracket_id:string, player_bracket_id?:string, bracket_competition_id?:string) => void,
+    teams:TeamProps[]
+}
+
+const MIN_CARD_WIDTH = 330
+
+const calcCardWidth = (width:number, margin:number) => {
+    let num_cards_possible = Math.floor((width) / MIN_CARD_WIDTH)
+    let buffer = margin * 2 * num_cards_possible
+    let card_widt = (width - buffer) / num_cards_possible
+    if(card_widt < MIN_CARD_WIDTH){ return MIN_CARD_WIDTH }
+    return card_widt
+}
+
+const sections = [ 'toggle', 'active_brackets', 'past_brackets', 'tournaments', 'competitions']
+
+const RoomHome = ({ visible, width, player, leagues, active_brackets, public_competitions, onView, onUpdatePlayerBracket, onEditPlayerBracket, onFocusPosition, brackets, player_brackets, bracket_competitions, competition_player_brackets, athletes, teams }:RoomHomeProps) => {
+    const Colors = useColors();
+    const [ action_loading, setActionLoading ] = useState<string|undefined>(undefined)//This will be a bracket id
+    const [ active_toggle, setActiveToggle ] = useState('competitions');
+    const [ past_search, setPastSearch ] = useState('');
+    const [ show_active_search, setShowActiveSearch ] = useState(false);
+    const [ expanded_brackets, setExpandedBrackets ] = useState<string[]>([]);
+    const [ expanded_leagues, setExpandedLeagues ] = useState<string[]>([]);
+    const [ expanded_c_leagues, setExpandedCLeagues ] = useState<string[]>([])
+    const [ active_search, setActiveSearch ] = useState('');
+    const [ show_past_search, setShowPastSearch ] = useState(false);
+    const [ show_brackets_search, setShowBracketsSearch ] = useState(false);
+    const [ selected_league, setSelectedLeague ] = useState<string | undefined>(undefined);
+    const [ brackets_search, setBracketsSearch ] = useState('');
+    console.log(brackets_search)
+    const [ competition_search, setCompetitionSearch ] = useState('');
+    console.log(competition_search)
+    const [ show_competition_search, setShowCompetitionSearch ] = useState(false);
+    let visible_active_brackets = [ ...active_brackets ]
+    const unique_leages = [ ...new Set(visible_active_brackets.map(b => b.league_id)) ];
+    if(selected_league){ visible_active_brackets = visible_active_brackets.filter(b => b.league_id == selected_league) }
+    //const inprogress_bracket_ids = [ ...new Set(visible_active_brackets.map(b => b.bracket_id)) ];
+
+
+    const filterPlayerBrackets = (bs:BracketProps[], pbs:PlayerBracketProps[], status:'active'|'closed', search:string) => {
+        let init_pbs = pbs.filter(pb => pb.status == status);
+        if(!search || search == ''){ return init_pbs }
+        let brackets = bs.filter(b => `${b.bracket_name.toLowerCase()}`.includes(search.toLowerCase()));
+        return init_pbs.filter(pb => brackets.map(b => b.bracket_id.toString()).includes(pb.bracket_id.toString()));
+    }
+
+    let visible_player_brackets = useMemo(() => {
+        return filterPlayerBrackets(brackets, player_brackets, 'active', active_search);
+    },[brackets.length, player_brackets.length, active_search]);
+
+    const active_bracket_ids = [ ...new Set(visible_player_brackets.map(pb => pb.bracket_id)) ]
+
+    let past_player_brackets = useMemo(() => {
+        console.log('past rendering')
+        return filterPlayerBrackets(brackets, player_brackets, 'closed', past_search);
+    },[brackets.length, player_brackets.length, past_search])
+    
+    const past_bracket_ids = [ ...new Set(past_player_brackets.map(pb => pb.bracket_id)) ]
+
+    const competition_bracket_ids = [ ...new Set(public_competitions.map(bc => bc.bracket_id)) ]
+    const competition_brackets = brackets.filter(b => competition_bracket_ids.includes(b.bracket_id));
+    const competition_league_ids = [ ...new Set(competition_brackets.map(cb => cb.league_id)) ];
+
+    const pb_width = calcCardWidth(width, 6)
+
+    const renderBrackets = (data:{ item:string, index:number }) => {
+        const bracket = brackets.find(b => b.bracket_id == data.item);
+        if(!bracket){ return <></> }
+        const expanded = expanded_brackets.includes(data.item) ? true : false
+        let my_player_brackets = player_brackets.filter(pb => pb.bracket_id == data.item);
+        let additional = my_player_brackets.length - 1
+        if(!expanded){
+            my_player_brackets = my_player_brackets.slice(0,1);
+        }
+        const league = leagues.find(l => l.league_id == bracket.league_id);
+        const act_loading = action_loading == data.item ? true : false
+        return (
+            <View float style={{ margin:5, width: pb_width }}>
+               <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                    {league ?
+                    <Image
+                        style={{ height:40, width:40, marginRight:5 }}
+                        source={{ uri: league.league_image }}
+                        resizeMode='cover'
+                    />
+                    :<></>}
+                    <View transparent style={{ flex:1 }}>
+                        <Text theme='description'>{league?league.league_name:'Bracket'}</Text>
+                        <Text style={{ marginTop:3 }} theme='h1'>{bracket.bracket_name}</Text>
+                    </View>
+                    <View transparent style={{ alignItems:'center' }}>
+                        <Text theme='success' size={16}>{my_player_brackets.length}</Text>
+                        <Text style={{ marginTop:3 }} theme='success' size={12} textAlign='center'>Brackets</Text>
+                    </View>
+                    {bracket.status == 'scheduled' ?
+                    <Button
+                        title='+'
+                        type='success'
+                        disabled={act_loading}
+                        loading={act_loading}
+                        style={{ padding:10, marginLeft:10, opacity: act_loading?0.5:1 }}
+                        onPress={async() => {
+                            if(action_loading || !player){ return }
+                            setActionLoading(data.item);
+                            const 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: data.item,
+                                completion_pct: 0,
+                                completion_status: 'inprogress',
+                                status: 'active'
+                            })
+                            onUpdatePlayerBracket(new_pb);
+                            setActionLoading(undefined);
+                            if(!expanded){ setExpandedBrackets(expanded_brackets.concat(data.item)) }
+                        }}
+                    />
+                    :<></>}
+                </View>
+                <View style={{ flex:1 }}>
+                    <FlatList
+                        data={my_player_brackets}
+                        key={`${data.item}_brackets`}
+                        keyExtractor={(item) => item.player_bracket_id.toString()}
+                        renderItem={renderPlayerBrackets}
+                    />
+                </View>
+                <Button style={{ flexDirection:'row', alignItems:'center', justifyContent:'flex-end', padding:10, backgroundColor:Colors.views.footer, borderTopRightRadius:0, borderTopLeftRadius:0 }}
+                    onPress={() => expanded ? setExpandedBrackets(expanded_brackets.filter(b => b != data.item)) : setExpandedBrackets(expanded_brackets.concat(data.item))}
+                >   
+                    {additional > 0 ?
+                    <Text theme='action' textAlign='right'>See {additional} More Brackets</Text>
+                    :<></>}
+                </Button>
+            </View>
+        )
+    }
+
+    const renderCompetitions = (data:{ item:BracketCompetitionProps, index:number }) => {
+        return (
+            <Button style={{ padding:10, flexDirection:'row', alignItems:'center', borderRadius:0, borderBottomWidth:1, borderColor:Colors.borders.light }}
+            onPress={() => onView(data.item.bracket_id, player_brackets.find(pb => pb.bracket_id == data.item.bracket_id)?.player_bracket_id, data.item.bracket_competition_id)}>
+                <View transparent>
+                    <Image
+                        source={{ uri: data.item.image?.url }}
+                        style={{ height:40, width:40, borderRadius:4 }}
+                        resizeMode='cover'
+                    />
+                </View>
+                <View transparent style={{ flex:1, marginLeft:5 }}>
+                    <Text size={14} theme='h1' weight='bold'>{data.item.competition_name}</Text>
+                    <Text style={{ marginTop:3 }} size={12} theme='light' weight='regular'>{data.item.competition_description}</Text>
+                </View>
+                <Icons.ChevronIcon size={10} color={Colors.text.h1} direction='right' />
+            </Button>
+        )
+    }
+
+    const renderPlayerBrackets = useCallback((data:{ item:PlayerBracketProps, index:number }) => {
+        const cpbs = competition_player_brackets.filter(cpb => cpb.status != 'deleted' && cpb.player_bracket_id == data.item.player_bracket_id);
+        const comps = bracket_competitions.filter(bc => cpbs.map(cpb => cpb.bracket_competition_id.toString()).includes(bc.bracket_competition_id.toString()));
+        const bracket = brackets.find(b => b.bracket_id == data.item.bracket_id);
+        if(!bracket){ return <></> }
+        const league = leagues.find(l => l.league_id == bracket.league_id);
+        const champion_team = teams.find(t => data.item.champion_id_type == 'team' && t.team_id == data.item.champion_id)
+        const champion_athlete = athletes.find(t => data.item.champion_id_type == 'athlete' && t.athlete_id == data.item.champion_id)
+        return (
+            <View style={{ borderBottomWidth:1, borderColor:Colors.borders.light, padding:5 }}>
+                <PlayerBracketCard
+                    league={league}
+                    champion_athlete={champion_athlete}
+                    champion_team={champion_team}
+                    player_bracket={data.item}
+                    competition_player_brackets={cpbs}
+                    bracket={bracket}
+                    bracket_competitions={comps}
+                    onView={onView}
+                    onEdit={onEditPlayerBracket}
+                />
+            </View>
+        )
+    }, [JSON.stringify(player_brackets)]);
+
+    const renderLeagueFilters = (data:{ item:string, index:number }) => {
+        const league = leagues.find(l => l.league_id == data.item);
+        if(!league){ return <></> }
+        const selected = data.item == selected_league ? true : false
+        return (
+            <Button
+                float
+                style={{ flexDirection:'row', alignItems:'center', padding:5, paddingRight:10, paddingLeft:10, borderRadius:100, margin:5 }}
+                onPress={() => selected ? setSelectedLeague(undefined): setSelectedLeague(data.item)}
+            >
+                <Image
+                    source={{ uri: league.league_image }}
+                    style={{ height:30, width:30 }}
+                    resizeMode='cover'
+                />
+                <Text style={{ marginLeft:5 }}>{league.league_name}</Text>
+            </Button>
+        )
+    }
+
+    const renderLeagueBrackets = (data:{ item:BracketProps, index:number }) => {
+        return (
+            <Button style={{ flexDirection:'row', alignItems:'center', padding:10, borderBottomWidth:1, borderColor:Colors.borders.light }}
+            onPress={() => onView(data.item.bracket_id, player_brackets.find(pb => pb.bracket_id == data.item.bracket_id)?.player_bracket_id, undefined)}>
+                <Icons.BracketIcon size={18} color={Colors.text.h1} />
+                <View transparent style={{ flex:1, marginLeft:10, paddingLeft:5, borderLeftWidth:1, borderColor:Colors.borders.light }}>
+                    <Text theme='h2'>{data.item.bracket_name}</Text>
+                    <Text theme='light' style={{ marginTop:4 }}>{moment(data.item.scheduled_datetime).format('YYYY-MM-DD @ hh:mm a')}</Text>
+                </View>
+                <Icons.ChevronIcon direction='right' color={Colors.text.h1} />
+            </Button>
+        )
+    }
+
+    const renderLeaguesForCompetitions = (data:{ item:string, index:number }) => {
+        const league = leagues.find(l => l.league_id == data.item);
+        if(!league){ return <></> }
+        const expanded = expanded_c_leagues.includes(data.item) ? true : false
+        //Find all the brackets for this league
+        let league_brackets = active_brackets.filter(b => b.league_id == data.item);
+        let league_competitions = public_competitions.filter(bc => league_brackets.map(lb => lb.bracket_id.toString()).includes(bc.bracket_id.toString()));
+        const num_comps = league_competitions.length
+        let additional = league_competitions.length - 1
+        if(!expanded){
+            league_competitions = league_competitions.slice(0,1);
+        }
+        return (
+            <View float style={{ margin:5, width: pb_width }}>
+                <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                    <Image
+                        style={{ height:40, width:40, marginRight:5 }}
+                        source={{ uri: league.league_image }}
+                        resizeMode='cover'
+                    />
+                    <View transparent style={{ flex:1 }}>
+                        <Text theme='description'>{league.league_name}</Text>
+                        <Text style={{ marginTop:3 }} theme='h1'>{league.sport}</Text>
+                    </View>
+                    <View transparent style={{ alignItems:'center' }}>
+                        <Text theme='success' size={16}>{num_comps}</Text>
+                        <Text style={{ marginTop:3 }} theme='success' size={12} textAlign='center'>Comps</Text>
+                    </View>
+                </View>
+                <View style={{ flex:1 }}>
+                    <FlatList
+                        data={league_competitions}
+                        renderItem={renderCompetitions}
+                        keyExtractor={(item) => item.bracket_competition_id.toString()}
+                        key={'league brackets'}
+                    />
+                </View>
+                <Button style={{ flexDirection:'row', alignItems:'center', justifyContent:'flex-end', padding:10, backgroundColor:Colors.views.footer, borderTopRightRadius:0, borderTopLeftRadius:0 }}
+                    onPress={() => expanded ? setExpandedCLeagues(expanded_c_leagues.filter(b => b != data.item)) : setExpandedCLeagues(expanded_c_leagues.concat(data.item))}
+                >   
+                    {additional > 0 ?
+                    <Text theme='action' textAlign='right'>See {additional} More Competitions</Text>
+                    :<></>}
+                </Button>
+            </View>
+        )
+    }
+
+    const renderLeagues = (data:{ item:string, index:number }) => {
+        const league = leagues.find(l => l.league_id == data.item);
+        if(!league){ return <></> }
+        const expanded = expanded_leagues.includes(data.item) ? true : false
+        let league_brackets = active_brackets.filter(b => b.league_id == data.item);
+        let additional = league_brackets.length - 1
+        if(!expanded){
+            league_brackets = league_brackets.slice(0,1);
+        }
+        return (
+            <View float style={{ margin:5, width: pb_width }}>
+                <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                    <Image
+                        style={{ height:40, width:40, marginRight:5 }}
+                        source={{ uri: league.league_image }}
+                        resizeMode='cover'
+                    />
+                    <View transparent style={{ flex:1 }}>
+                        <Text theme='description'>{league.league_name}</Text>
+                        <Text style={{ marginTop:3 }} theme='h1'>{league.sport}</Text>
+                    </View>
+                    <View transparent style={{ alignItems:'center' }}>
+                        <Text theme='success' size={16}>{league_brackets.length}</Text>
+                        <Text style={{ marginTop:3 }} theme='success' size={12} textAlign='center'>Brackets</Text>
+                    </View>
+                </View>
+                <View style={{ flex:1 }}>
+                    <FlatList
+                        data={league_brackets}
+                        renderItem={renderLeagueBrackets}
+                        keyExtractor={(item) => item.bracket_id}
+                        key={'league brackets'}
+                    />
+                </View>
+                <Button style={{ flexDirection:'row', alignItems:'center', justifyContent:'flex-end', padding:10, backgroundColor:Colors.views.footer, borderTopRightRadius:0, borderTopLeftRadius:0 }}
+                    onPress={() => expanded ? setExpandedLeagues(expanded_leagues.filter(b => b != data.item)) : setExpandedLeagues(expanded_leagues.concat(data.item))}
+                >   
+                    {additional > 0 ?
+                    <Text theme='action' textAlign='right'>See {additional} More Brackets</Text>
+                    :<></>}
+                </Button>
+            </View>
+        )
+    }
+
+    const renderSections = (data:{ item:string, index:number }) => {
+        switch(data.item){
+            case 'toggle':
+                return (
+                    <View style={{ margin:5 }}>
+                        <Toggle
+                            options={[
+                            { key: 'my_brackets', label:'My Brackets' },
+                            { key: 'tournaments', label:'Tournments' },
+                            { key: 'competitions', label:'Competitions' }
+                            ]}
+                            selected_option={active_toggle}
+                            onSelectOption={(key) => setActiveToggle(key)}
+        
+                        />
+                    </View>
+                )
+            case 'active_brackets':
+                if(active_toggle != 'my_brackets'){ return <></> }
+                return (
+                    <View nativeID='my_competitions'>
+                        <View type='header' style={{ padding:10, flexDirection:'row', alignItems:'center' }}>
+                            <View transparent style={{ flex:1, marginRight:10 }}>
+                                <Text theme='h1'>My Active Brackets</Text>
+                                <Text style={{ marginTop:4 }}>View / Edit your active brackets</Text>
+                            </View>
+                            <Button
+                                float
+                                style={{ padding:0, height:35, width:35, justifyContent:'center', alignItems:'center' }}
+                                onPress={() => setShowActiveSearch(!show_active_search)}
+                            >
+                                {show_active_search ?
+                                <Icons.CloseIcon size={14} color={Colors.text.error} />
+                                :
+                                <Icons.SearchIcon size={14} color={Colors.text.action} />
+                                }
+                            </Button>
+                        </View>
+                        {show_active_search ?
+                        <SearchBox
+                            onChange={(text) => setActiveSearch(text)}
+                            hide_search_button
+                            placeholder='Search Active Brackets'
+                            onFocusPosition={onFocusPosition}
+                        />
+                        :<></>}
+                        <View type='body' style={{ marginBottom:10, flexDirection:'row', flexWrap:'wrap', justifyContent:'center'}}>
+                            {active_bracket_ids.map((id, index) => {
+                                return renderBrackets({ item:id, index })
+                            })}
+                        </View>
+                    </View>
+                )
+            case 'tournaments':
+                if(active_toggle != 'tournaments'){ return <></> }
+                return (
+                    <View>
+                        <View type='header' style={{ padding:10, flexDirection:'row', alignItems:'center' }}>
+                            <View transparent style={{ flex:1, marginRight:10 }}>
+                                <Text theme='h1'>Active Brackets</Text>
+                                <Text style={{ marginTop:4 }}>View and fill out active brackets</Text>
+                            </View>
+                            <Button
+                                float
+                                style={{ padding:0, height:35, width:35, justifyContent:'center', alignItems:'center' }}
+                                onPress={() => setShowBracketsSearch(!show_brackets_search)}
+                            >
+                                {show_brackets_search ?
+                                <Icons.CloseIcon size={14} color={Colors.text.error} />
+                                :
+                                <Icons.SearchIcon size={14} color={Colors.text.action} />
+                                }
+                            </Button>
+                        </View>
+                        {show_brackets_search ?
+
+                        <View style={{ padding:5 }}>
+                            <FlatList
+                                key='unique_leagues'
+                                keyExtractor={(item) => item}
+                                data={unique_leages}
+                                renderItem={renderLeagueFilters}
+                                horizontal
+                            />
+                        </View>
+                        :<></>}
+
+                        {show_brackets_search ?
+                        <SearchBox
+                            onChange={(text) => setBracketsSearch(text)}
+                            hide_search_button
+                            placeholder='Search Active Tournaments'
+                            onFocusPosition={onFocusPosition}
+                        />
+                        :<></>}
+                        <View type='body' style={{ marginTop:10, marginBottom:10, flexDirection:'row', flexWrap:'wrap', justifyContent:'center'}}>
+                            {unique_leages.map((id, index) => {
+                                return renderLeagues({ item:id, index })
+                            })}
+                        </View>
+                        
+                    </View>
+                )
+            case 'past_brackets':
+                if(active_toggle != 'my_brackets'){ return <></> }
+                return (
+                <View nativeID='past_brackets'>
+                    <View type='header' style={{ padding:10, flexDirection:'row', alignItems:'center' }}>
+                        <View transparent style={{ flex:1, marginRight:10 }}>
+                            <Text theme='h1'>MY PAST BRACKETS</Text>
+                            <Text style={{ marginTop:4 }}>View your past brackets</Text>
+                        </View>
+                        <Button
+                            float
+                            style={{ padding:0, height:35, width:35, justifyContent:'center', alignItems:'center' }}
+                            onPress={() => setShowPastSearch(!show_past_search)}
+                        >
+                            {show_past_search ?
+                            <Icons.CloseIcon size={14} color={Colors.text.error} />
+                            :
+                            <Icons.SearchIcon size={14} color={Colors.text.action} />
+                            }
+                        </Button>
+                    </View>
+                    {show_past_search ?
+                    <SearchBox
+                        onChange={(text) => setPastSearch(text)}
+                        hide_search_button
+                        placeholder='Search Past Brackets'
+                        onFocusPosition={onFocusPosition}  
+                    />
+                    :<></>}
+                    <View type='body' style={{ marginBottom:10, flexDirection:'row', flexWrap:'wrap', justifyContent:'center'}}>
+                        {past_bracket_ids.map((id, index) => {
+                            return renderBrackets({ item:id, index })
+                        })}
+                    </View>
+                </View>
+                )
+            case 'competitions':
+                if(active_toggle != 'competitions'){ return <></> }
+                return (
+                    <View nativeID='competitions'>
+                        <View type='header' style={{ padding:10, flexDirection:'row', alignItems:'center' }}>
+                            <View transparent style={{ flex:1, marginRight:10 }}>
+                                <Text theme='h1'>Active Competitions</Text>
+                                <Text style={{ marginTop:4 }}>Join an active competition</Text>
+                            </View>
+                            <Button
+                                float
+                                style={{ padding:0, height:35, width:35, justifyContent:'center', alignItems:'center' }}
+                                onPress={() => setShowCompetitionSearch(!show_competition_search)}
+                            >
+                                {show_competition_search ?
+                                <Icons.CloseIcon size={12} color={Colors.text.error} />
+                                :
+                                <Icons.SearchIcon size={12} color={Colors.text.action} />
+                                }
+                            </Button>
+                            <Button
+                                type='success'
+                                style={{ flexDirection:'row', alignItems:'center', marginLeft:5, padding:0, height:35, width:40, justifyContent:'center' }}
+                                onPress={() => console.log('create a new competition')}
+                            >
+                                <Text theme='h1' color={Colors.text.white}>+</Text>
+                                <Icons.TrophyIcon color={Colors.text.white} size={14}/>
+                            </Button>
+                        </View>
+                        {show_competition_search ?
+                        <SearchBox
+                            onChange={(text) => setCompetitionSearch(text)}
+                            onSearch={(text) => console.log(text)}
+                            placeholder='Search or Enter Private Code'
+                            onFocusPosition={onFocusPosition}  
+                        />
+                        :<></>}
+                        <View type='body' style={{ marginTop:10, marginBottom:10, flexDirection:'row', flexWrap:'wrap', justifyContent:'center'}}>
+                            {competition_league_ids.map((id, index) => {
+                                return renderLeaguesForCompetitions({ item:id, index })
+                            })}
+                        </View>
+                    </View>
+                )
+            default: return <></>
+        }
+    }
+
+    if(!visible){ return <></> }
+
+    return (
+        <View style={{ flex:1 }}>
+            <FlatList
+                data={sections}
+                key='room_sections'
+                keyExtractor={(item) => item}
+                renderItem={renderSections}
+            />
+        </View>
+    )
+}
+
+export default RoomHome