be-components 6.6.3 → 6.6.4

package/src/Group/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { Button, Text, View } from "../Components/Themed"
 import { GroupApi, GroupHelpers } from './api';
-import type { CompetitionPayoutTypeProps, CompetitionPlayerProps, CompetitionProps, CompetitionRecordProps, CompetitionResultProps, CompetitionResultTypeProps, CompetitionTypeProps, GroupMessageProps, GroupPlayerProps, GroupProps, MyPlayerProps, OrderAnalyticsProps, OrderProps, PostProps, PublicPlayerProps } from '../types';
+import type { CompetitionPayoutTypeProps, CompetitionPlayerProps, CompetitionProps, CompetitionRecordProps, CompetitionResultProps, CompetitionResultTypeProps, CompetitionTypeProps, EventProps, GroupMessageProps, GroupPlayerProps, GroupProps, MyPlayerProps, NewOverallAnalytics, OrderAnalyticsProps, OrderProps, PollCampaignProps, PostProps, PublicPlayerProps, SquaresCompetitionProps } from '../types';
 import { ActivityIndicator, FlatList, Image } from 'react-native';
 import { Icons, Toggle } from '../Components';
 import { useColors } from '../constants/useColors';
@@ -12,24 +12,34 @@ import CompetitionCard from '../Engage/components/CompetitionCard';
 import { PostCard } from '../SocialComponents';
 import Pagination from '../Components/Pagination';
 import GroupCTAButton from './components/GroupCTAButton';
+import PollCampaignCard from '../Engage/components/PollCampaignCard';
+import SquaresCompetitionCard from '../Engage/components/SquaresCompetitionCard';
+import { showConfirmAlert } from '../Components/ConfirmAlert';
 
 type GroupComponentProps = {
     group_id:string,
     mode:'desktop'|'mobile',
+    refresh_key:string,
     onSelectChat?:(group:GroupProps) => void
     onInvitePlayer:() => void,
+    onNudgePlayer:(p:PublicPlayerProps, gp:GroupPlayerProps) => void,
     onSelectPlayer:(p:PublicPlayerProps) => void,
     onSelectCompetition:(c:CompetitionProps) => void,
+    onSelectPollCampaign:(pc:PollCampaignProps) => void,
+    onSelectSquaresCompetition:(sq:SquaresCompetitionProps) => void,
     player?:MyPlayerProps
 }
 type GroupStateProps = {
     group?:GroupProps,
     loading:boolean,
     editing:boolean,
+    action_loading?:string,
     show_player_status:boolean,
     active_toggle:string,
+    stats_expanded:boolean,
     group_players:GroupPlayerProps[],
     players:PublicPlayerProps[],
+    active_stat?: { stat_key:string, label:string, multiplier:number, prefix?:string, suffix?:string },
     group_messages: GroupMessageProps[],
     my_group_player?:GroupPlayerProps
 }
@@ -39,8 +49,16 @@ type TimeOptionProps = {
     option:string,
     label:string
 }
-const sections = ['header','chat','me','toggle', 'competition_toggle', 'members', 'competitions', 'activity']
-const GroupComponent = ({ group_id, player, mode, onInvitePlayer, onSelectCompetition, onSelectChat, onSelectPlayer } : GroupComponentProps) => {
+const sections = ['header','chat','toggle','me', 'competition_toggle', 'new_competition', 'members', 'competitions', 'activity']
+const member_stat_options:{ stat_key:string, label:string, multiplier:number, prefix?:string, suffix?:string }[] = [
+    { stat_key: 'roi_pct', label: 'ROI Percent', multiplier:100, suffix: '%' },
+    { stat_key: 'winnings', label: 'Winnings', multiplier:1 , prefix: '$'},
+    { stat_key: 'win_pct', label: 'Win Percent', multiplier: 100, suffix: '%' },
+    { stat_key: 'fulfilled_positions', label: 'Matched Bets', multiplier:1, suffix: ' Bets' },
+    { stat_key: 'original_stake', label: 'Betting Volume', multiplier: 1, prefix: '$' }
+]
+
+const GroupComponent = ({ refresh_key, group_id, player, mode, onInvitePlayer, onSelectCompetition, onSelectChat, onSelectPlayer, onNudgePlayer, onSelectPollCampaign, onSelectSquaresCompetition } : GroupComponentProps) => {
     const Colors = useColors();
     const leader_options:TimeOptionProps[] = [
         { to: moment().subtract(1, 'days').unix(), from: moment().unix(), option: '24_hours', label: '24 Hours'  },
@@ -62,7 +80,10 @@ const GroupComponent = ({ group_id, player, mode, onInvitePlayer, onSelectCompet
     const [ comp_data, setCompData ] = useState<{
         loading:boolean,
         toggle: 'upcoming'|'history',
+        poll_campaigns:PollCampaignProps[],
+        squares_competitions:SquaresCompetitionProps[],
         competition_types:CompetitionTypeProps[],
+        events:EventProps[],
         competition_result_types:CompetitionResultTypeProps[],
         competition_payout_types:CompetitionPayoutTypeProps[],
         active_competitions:CompetitionProps[],
@@ -75,6 +96,9 @@ const GroupComponent = ({ group_id, player, mode, onInvitePlayer, onSelectCompet
         toggle: 'upcoming',
         competition_payout_types:[],
         competition_result_types:[],
+        events:[],
+        squares_competitions:[],
+        poll_campaigns: [],
         competition_types:[],
         active_competitions: [],
         competition_players:[],
@@ -99,16 +123,20 @@ const GroupComponent = ({ group_id, player, mode, onInvitePlayer, onSelectCompet
         group_messages: [],
         editing:false,
         show_player_status:false,
+        stats_expanded: false,
         active_toggle: 'members',
+        active_stat: member_stat_options[0],
         group_players: [],
         players: []
     });
-    const { loading, group, active_toggle, editing,show_player_status, group_messages, group_players, my_group_player, players } = group_data;
-    const { sorted_players, player_analytics } = GroupHelpers.sortMembers(group_players, order_analytics);
+    const { loading, group, action_loading, stats_expanded, active_toggle, editing,show_player_status, active_stat, group_messages, group_players, my_group_player, players } = group_data;
+    const admin = player?.player_id == group?.group_admin ? true : false;
+    const { sorted_players, player_analytics } = GroupHelpers.sortMembers(group_players, order_analytics, active_stat?.stat_key);
+    const sorted_engagements = GroupHelpers.sortCompetitionAction([], comp_data.active_competitions, [], comp_data.squares_competitions, comp_data.poll_campaigns);
+
     useEffect(() => {
         getGroupData(group_id);
-    },[group_id]);
-
+    },[group_id, refresh_key]);
 
     useEffect(() => {
         getToggleData(active_toggle);
@@ -126,9 +154,8 @@ const GroupComponent = ({ group_id, player, mode, onInvitePlayer, onSelectCompet
             default: return
         }
     }
-
     const getActitiyData = async(page:number) => {
-        setActivityData({ ...activity_data, loading: false });
+        setActivityData({ ...activity_data, loading: true });
         const activity = await GroupApi.getPostsByGroupId(group_id, page);
         let order_ids:string[] = []
         activity.filter(a => a.memo_orders).map(mo => mo.memo_orders.map(o => order_ids.push(o)));
@@ -145,18 +172,31 @@ const GroupComponent = ({ group_id, player, mode, onInvitePlayer, onSelectCompet
     const getCompetitionData = async(type:'upcoming' | 'history', page:number) => {
         setCompData({ ...comp_data, loading:true });
         let resp:undefined | { competitions:CompetitionProps[], competition_players:CompetitionPlayerProps[], competition_records:CompetitionRecordProps[], competition_results:CompetitionResultProps[] } = {
-            competitions:[], competition_players:[], competition_records:[], competition_results:[]
-        }
+            competitions:[], competition_players:[], competition_records:[], competition_results:[] }
+        let server_polls:PollCampaignProps[] = []
+        let server_sq: SquaresCompetitionProps[] = []
+        let server_events:EventProps[] = []
         if(type == 'upcoming'){
             resp = await GroupApi.getActiveCompetitions(group_id);
+            server_polls = await GroupApi.getActivePolls(group_id);
+            server_sq = await GroupApi.getActiveSquares(group_id);
+            let event_ids = server_sq.map(sq => sq.event_id);
+            server_events = await GroupApi.getEventsByIds(event_ids);
         } else {
             resp = await GroupApi.getHistoryCompetitions(group_id, page);
+            server_polls = await GroupApi.getHistoryPolls(group_id, page);
+            server_sq = await GroupApi.getHistorySquares(group_id, page);
+            let event_ids = server_sq.map(sq => sq.event_id);
+            server_events = await GroupApi.getEventsByIds(event_ids);
         }
         const opts = await GroupApi.getCompetitionOptions();
         setCompData({
             ...comp_data,
             loading:false,
             toggle: type,
+            poll_campaigns: server_polls,
+            squares_competitions: server_sq,
+            events: server_events,
             competition_players: resp.competition_players,
             competition_records: resp.competition_records,
             competition_results: resp.competition_results,
@@ -202,46 +242,144 @@ const GroupComponent = ({ group_id, player, mode, onInvitePlayer, onSelectCompet
     }
 
     const renderPlayers = (data:{ item:GroupPlayerProps, index:number }) => {
-        const player = players.find(p => p.player_id == data.item.player_id);
-        if(!player){ return <></> }
+        const pl = players.find(p => p.player_id == data.item.player_id);
+        if(!pl){ return <></> }
         const player_analytic = player_analytics[data.item.player_id]
+        const analytic = player_analytic ? player_analytic[active_stat?.stat_key as keyof NewOverallAnalytics] : 0
+        const is_loading = action_loading == data.item.group_player_id ? true : false
         return (
-            <Button transparent style={{ flexDirection:'row', alignItems:'center', padding:10, borderBottomWidth:1, borderColor:Colors.borders.light, borderRadius:0 }} onPress={() => onSelectPlayer(player)}>
+            <Button transparent style={{ flexDirection:'row', alignItems:'center', padding:10, borderBottomWidth:1, borderColor:Colors.borders.light, borderRadius:0 }} onPress={() => onSelectPlayer(pl)}>
+                {admin && data.item.player_id != player?.player_id?
+                <Button
+                    title='X'
+                    title_color={Colors.text.error}
+                    loading={is_loading}
+                    style={{ padding:10, opacity: is_loading ? 0.5 : 1 }}
+                    onPress={() => {
+                        showConfirmAlert('Are you sure?', 'This will boot and ban this player from the group.  You can unban the player later', 
+                            async() => {
+                                //Ok we have confirmed it!
+                                let new_pl = await GroupApi.bootPlayer(data.item.group_player_id);
+                                if(!new_pl){
+                                    setGroupData({ ...group_data, action_loading: undefined });
+                                    return alert('Unable to boot player at this time.  Please try again')
+                                }
+                                setGroupData({
+                                    ...group_data,
+                                    action_loading: undefined,
+                                    group_players: group_players.filter(gp => gp.group_player_id != new_pl.group_player_id).concat(new_pl)
+                                })
+                            }
+                        ),
+                        () => { console.log('cancelled') }
+                    }}
+                />
+                :<></>}
                 <View float style={{ borderRadius:100, padding:2 }}>
                     <Image
-                        source={{ uri: player.profile_pic }}
+                        source={{ uri: pl.profile_pic }}
                         style={{ height:45, width:45, borderRadius:100 }}
                         resizeMode='contain'
                     />
                 </View>
                 <View transparent style={{ flex:1, marginLeft:10 }}>
-                    <Text theme='h1'>@{player.username}</Text>
-                    <Text theme='description' style={{ marginTop:3 }}>Joined {moment(data.item.create_datetime).fromNow()}</Text>
+                    <Text theme='h1'>@{pl.username}</Text>
+                    <Text theme='description' style={{ marginTop:3 }}>{data.item.status == 'active' ? 'Joined' : 'Invited'} {moment(data.item.last_update_datetime).fromNow()}</Text>
+                </View>
+                {active_stat && player_analytic && data.item.status == 'active' ?
+                <View style={{ alignItems:'flex-end' }}>
+                    <Text theme='h1'>{active_stat.prefix}{(parseFloat(analytic as string) * active_stat.multiplier).toFixed(2)}{active_stat.suffix}</Text>
+                    <Text theme='light' style={{ marginTop:3 }}>{active_stat.label}</Text>
                 </View>
-                {player_analytic ?
-                <Text theme='h2'>ROI {(player_analytic.roi_pct*100).toFixed(2)}%</Text>
+                :<></>}
+                {data.item.status == 'invited' ?
+                <Button
+                    disabled={!admin}
+                    type='text'
+                    style={{ padding:10, opacity:is_loading ? 0.5: 1 }}
+                    loading={is_loading}
+                    title_color={Colors.text.action}
+                    title={admin?'Nudge':'Invited'}
+                    onPress={() => onNudgePlayer(pl, data.item)}
+                />
+                :<></>}
+                {admin && data.item.status == 'invited' ?
+                <Button
+                    transparent
+                    style={{ padding:10, opacity: is_loading ? 0.5:1 }}
+                    title_color={Colors.text.error}
+                    loading={is_loading}
+                    title='Uninvite'
+                    onPress={async() => {
+                        setGroupData({ ...group_data, action_loading: data.item.group_player_id });
+                        const new_pl = await GroupApi.uninvitePlayer(data.item.group_player_id);
+                        if(!new_pl){
+                            setGroupData({ ...group_data, action_loading: undefined });
+                            return alert('Unable to uninvite player.  Please try again')
+                        }
+                        setGroupData({
+                            ...group_data,
+                            action_loading: undefined,
+                            group_players: group_players.filter(gp => gp.group_player_id != new_pl.group_player_id).concat(new_pl)
+                        })
+                    }}
+                />
                 :<></>}
             </Button>
         )
     }
 
-    const renderCompetitions = (data:{ item:CompetitionProps, index:number }) => {
-        const type = comp_data.competition_types.find(t => t.competition_type_id == data.item.competition_type_id);
-        const result = comp_data.competition_result_types.find(r => r.competition_result_type_id == data.item.competition_result_type_id);
-        if(!type || !result){ return <></> }
-        const my_result = comp_data.competition_results.find(cr => cr.player_id == player?.player_id && cr.competition_id == data.item.competition_id)
-        const my_record = comp_data.competition_records.find(cr => cr.player_id == player?.player_id && cr.competition_id == data.item.competition_id)
-        return (
-            <CompetitionCard
-                competition={data.item}
-                player={player}
-                competition_type={type}
-                competition_record={my_record}
-                competition_result={my_result}
-                competition_result_type={result}
-                onCompetitionSelect={onSelectCompetition}
-            />
-        )
+    const renderEngagements = (data: { item:{id:string, type:string, scheduled_datetime:any}, index: number }) => {
+        switch (data.item.type){
+            case 'competition':
+                const competition = comp_data.active_competitions.find(c => c.competition_id == data.item.id);
+                if(!competition){ return <></> }
+                const type = comp_data.competition_types.find(t => t.competition_type_id == competition.competition_type_id);
+                const result = comp_data.competition_result_types.find(r => r.competition_result_type_id == competition.competition_result_type_id);
+                if(!type || !result){ return <></> }
+                const my_result = comp_data.competition_results.find(cr => cr.player_id == player?.player_id && cr.competition_id == competition.competition_id)
+                const my_record = comp_data.competition_records.find(cr => cr.player_id == player?.player_id && cr.competition_id == competition.competition_id)
+                return (
+                    <View style={{ padding:5 }}>
+                        <CompetitionCard
+                            competition={competition}
+                            player={player}
+                            competition_type={type}
+                            competition_record={my_record}
+                            competition_result={my_result}
+                            competition_result_type={result}
+                            onCompetitionSelect={onSelectCompetition}
+                        />
+                    </View>
+                )
+            case 'bracket':
+                return <></>
+            case 'squares':
+                const squares_comp = comp_data.squares_competitions.find(sc => sc.sq_comp_id == data.item.id);
+                if(!squares_comp){ return <></> }
+                const event = comp_data.events.find(e => e.event_id == squares_comp.event_id);
+                return (
+                    <View style={{ padding:5 }}>
+                        <SquaresCompetitionCard
+                            squares_competition={squares_comp}
+                            event={event}
+                            onSelectCompetition={onSelectSquaresCompetition}
+                        />
+                    </View>
+                )
+            case 'poll_campaign':
+                const poll_campaign = comp_data.poll_campaigns.find(pc => pc.poll_campaign_id == data.item.id);
+                if(!poll_campaign){ return <></> }
+                return (
+                    <View style={{ padding:5 }}>
+                        <PollCampaignCard
+                            poll_campaign={poll_campaign}
+                            onSelectPollCampaign={onSelectPollCampaign}
+                        />
+                    </View>
+                )
+            default:return <></>
+        }
     }
 
     const renderPosts = (data:{ item:PostProps, index:number }) => {
@@ -280,6 +418,7 @@ const GroupComponent = ({ group_id, player, mode, onInvitePlayer, onSelectCompet
                             <Text theme='h1'>{group.name}</Text>
                             <Text theme='description' style={{ marginTop:3 }}>{group.description}</Text>
                         </View>
+
                         {player?.player_id == group.group_admin ?
                         <Button float style={{ padding:10 }} onPress={() => setGroupData({ ...group_data, editing:true })}>
                             <Icons.EditIcon size={14} color={Colors.text.h1} />
@@ -293,7 +432,8 @@ const GroupComponent = ({ group_id, player, mode, onInvitePlayer, onSelectCompet
                     <View type='header' style={{ padding:10, borderBottomWidth:1, borderColor:Colors.borders.light }}>
                         <GroupCTAButton 
                             group={group}
-                            message_length={100}
+                            hide_from_player
+                            message_length={20}
                             players={players}
                             group_messages={group_messages}
                             group_players={group_players}
@@ -301,7 +441,24 @@ const GroupComponent = ({ group_id, player, mode, onInvitePlayer, onSelectCompet
                         />
                     </View>
                 )
+            case 'new_competition':
+                if(active_toggle != 'competitions'){ return <></> }
+                return (
+                    <View type='footer' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                        <View transparent style={{ flex:1, marginRight:10 }}>
+                            <Text theme='h2'>CREATE A NEW COMPETITION</Text>
+                            <Text theme='description' style={{ marginTop:3 }}>Create a new pick-em or other engagement for this group!</Text>
+                        </View>
+                        <Button
+                            type='success'
+                            style={{ padding:10 }}
+                            title='CREATE'
+                            onPress={() => console.log('New competition!')}
+                        />
+                    </View>
+                )
             case 'me':
+                if(active_toggle != 'members'){ return <></> }
                 return (
                     <View type='row' style={{ padding:10 }}>
                         {player ?
@@ -332,13 +489,15 @@ const GroupComponent = ({ group_id, player, mode, onInvitePlayer, onSelectCompet
                                     style={{ padding:10 }}
                                     onPress={() => setGroupData({ ...group_data, show_player_status: true })}
                                 />
-                            : my_group_player?.status != 'invited' ?
+                            : my_group_player?.status != 'invited' && !admin ?
                              <Button
                                 type='error'
                                 title='LEAVE'
                                 style={{ padding:10 }}
                                 onPress={() => setGroupData({ ...group_data, show_player_status: true })}
                             />
+                            :my_group_player?.status != 'invited' && admin ?
+                            <Text theme='h1' color={Colors.text.gold}>ADMIN</Text>
                             :<></>}
                         </View>
                         :<></>}
@@ -351,7 +510,7 @@ const GroupComponent = ({ group_id, player, mode, onInvitePlayer, onSelectCompet
                             options={[
                                 { key: 'members', label: 'Members' },
                                 { key: 'activity', label: 'Activity' },
-                                { key: 'competitions', label: 'Competitions' }
+                                { key: 'competitions', label: 'Engagements' }
                             ]}
                             selected_option={active_toggle}
                             onSelectOption={(option) => setGroupData({ ...group_data, active_toggle: option })}
@@ -369,13 +528,11 @@ const GroupComponent = ({ group_id, player, mode, onInvitePlayer, onSelectCompet
                 if(active_toggle != 'activity'){ return <></> }
                 return (
                     <View style={{ padding:10 }}>
-                        <Pagination
-                            offset={activity_data.offset}
-                            onNext={() => getActitiyData(activity_data.offset + 1)}
-                            onPrevious={() => getActitiyData(activity_data.offset - 1)}
-                        />
+                        {activity_data.loading ?
+                        <ActivityIndicator style={{ padding:20, alignSelf:'center' }} size={'large'} color={Colors.text.h1} />
+                        :<></>}
                         <FlatList
-                            data={activity_data.posts}
+                            data={activity_data.posts.sort((a,b) => moment(b.create_datetime).unix() - moment(a.create_datetime).unix())}
                             key={'post_list'}
                             keyExtractor={item => item.memo_post_id.toString()}
                             renderItem={renderPosts}
@@ -385,13 +542,51 @@ const GroupComponent = ({ group_id, player, mode, onInvitePlayer, onSelectCompet
             case 'members':
                 if(active_toggle != 'members'){ return <></> }
                 return (
-                    <View style={{ padding:10 }}>
-                        <FlatList
-                            data={sorted_players}
-                            keyExtractor={item => item.group_player_id.toString()}
-                            renderItem={renderPlayers}
-                            key={'group_members'}
+                    <View>
+                        <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, zIndex: 10 }}>
+                            <View transparent style={{ flex:1, marginRight:10 }}>
+                                <Text theme='h1'>Group Members</Text>
+                                <Text theme='description'>Active and invited members are show below.  You can sort the members by different leaderboards using the dropdown on the right.</Text>
+                            </View>
+                            <View float>
+                                <Button transparent style={{ flexDirection:'row', alignItems:'center', padding:10 }} onPress={() => setGroupData({ ...group_data, stats_expanded: !stats_expanded })}>
+                                    <Text style={{ marginRight:5 }} theme='h2'>{active_stat?.label ?? 'Select'}</Text>
+                                    <Icons.ChevronIcon direction={stats_expanded?'up':'down'} color={Colors.text.h1} size={8} />
+                                </Button>
+                                {stats_expanded ?
+                                <View float style={{ position:'absolute', top:0, right:0, width:200 }}>
+                                    {member_stat_options.map(so => {
+                                        return (
+                                            <Button transparent style={{ padding:10, borderRadius:0, borderBottomWidth:1, borderColor:Colors.borders.light }} onPress={() => setGroupData({ ...group_data, active_stat: so, stats_expanded: false })}>
+                                                <Text theme='h1'>{so.label}</Text>
+                                            </Button>
+                                        )
+                                    })}
+                                </View>
+                                :<></>}
+                            </View>
+                        </View>
+                        <View style={{ padding:10}}>
+                        <Toggle
+                            options={leader_options.map(o => { return { key: o.option, label: o.label } })}
+                            selected_option={time_option?.option}
+                            onSelectOption={(option) => {
+                                const selected = leader_options.find(o => o.option == option)
+                                if(!selected){ return }
+                                getGroupAnalytics(group_id, selected);
+                            }}
                         />
+                        </View>
+                        <View style={{ padding:10, zIndex: -10 }}>
+                            <FlatList
+                                data={sorted_players}
+                                keyExtractor={item => item.group_player_id.toString()}
+                                renderItem={renderPlayers}
+                                initialNumToRender={10}
+                                windowSize={4}
+                                key={'group_members'}
+                            />
+                        </View>
                     </View>
                 )
             case 'competition_toggle':
@@ -412,11 +607,14 @@ const GroupComponent = ({ group_id, player, mode, onInvitePlayer, onSelectCompet
                 if(active_toggle != 'competitions'){ return <></> }
                 return (
                     <View transparent style={{ padding:10 }}>
+                        {comp_data.loading ?
+                        <ActivityIndicator style={{ padding:20, alignSelf:'center' }} size={'large'} color={Colors.text.h1} />
+                        :<></>}
                         <FlatList
                             key={'competition_list'}
-                            keyExtractor={item => item.competition_id.toString()}
-                            data={comp_data.active_competitions.sort((a,b) => moment(a.scheduled_datetime).unix() - moment(b.scheduled_datetime).unix())}
-                            renderItem={renderCompetitions}
+                            keyExtractor={item => item.id.toString()}
+                            data={sorted_engagements.sort((a,b) => moment(a.scheduled_datetime).unix() - moment(b.scheduled_datetime).unix())}
+                            renderItem={renderEngagements}
                         />
                     </View>
                 )
@@ -434,28 +632,13 @@ const GroupComponent = ({ group_id, player, mode, onInvitePlayer, onSelectCompet
                     renderItem={renderSections}
                 />
                 {active_toggle == 'members' ?
-                <Toggle
-                    options={leader_options.map(o => { return { key: o.option, label: o.label } })}
-                    selected_option={time_option?.option}
-                    onSelectOption={(option) => {
-                        const selected = leader_options.find(o => o.option == option)
-                        if(!selected){ return }
-                        getGroupAnalytics(group_id, selected);
-                    }}
+                <></>
+                :active_toggle == 'activity' ?
+                <Pagination
+                    offset={activity_data.offset}
+                    onNext={() => getActitiyData(activity_data.offset + 1)}
+                    onPrevious={() => getActitiyData(activity_data.offset - 1)}
                 />
-                :active_toggle == 'competitions' ?
-                <View type='footer' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
-                    <View transparent style={{ flex:1, marginRight:10 }}>
-                        <Text theme='h2'>CREATE A NEW COMPETITION</Text>
-                        <Text theme='description' style={{ marginTop:3 }}>Create a new pick-em or other engagement for this group!</Text>
-                    </View>
-                    <Button
-                        type='success'
-                        style={{ padding:10 }}
-                        title='CREATE'
-                        onPress={() => console.log('New competition!')}
-                    />
-                </View>
                 :<></>}
             </View>
             {editing && group ?