be-components 6.6.1 → 6.6.2

package/src/Group/index.tsx

@@ -0,0 +1,497 @@
+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 { ActivityIndicator, FlatList, Image } from 'react-native';
+import { Icons, Toggle } from '../Components';
+import { useColors } from '../constants/useColors';
+import moment from 'moment-mini';
+import ManageGroupForm from './components/ManageGroupForm';
+import GroupPlayerActionForm from './components/GroupPlayerActionForm';
+import CompetitionCard from '../Engage/components/CompetitionCard';
+import { PostCard } from '../SocialComponents';
+import Pagination from '../Components/Pagination';
+import GroupCTAButton from './components/GroupCTAButton';
+
+type GroupComponentProps = {
+    group_id:string,
+    mode:'desktop'|'mobile',
+    onSelectChat?:(group:GroupProps) => void
+    onInvitePlayer:() => void,
+    onSelectPlayer:(p:PublicPlayerProps) => void,
+    onSelectCompetition:(c:CompetitionProps) => void,
+    player?:MyPlayerProps
+}
+type GroupStateProps = {
+    group?:GroupProps,
+    loading:boolean,
+    editing:boolean,
+    show_player_status:boolean,
+    active_toggle:string,
+    group_players:GroupPlayerProps[],
+    players:PublicPlayerProps[],
+    group_messages: GroupMessageProps[],
+    my_group_player?:GroupPlayerProps
+}
+type TimeOptionProps = {
+    to: number,
+    from:number,
+    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 Colors = useColors();
+    const leader_options:TimeOptionProps[] = [
+        { to: moment().subtract(1, 'days').unix(), from: moment().unix(), option: '24_hours', label: '24 Hours'  },
+        { to: moment().subtract(7, 'days').unix(), from: moment().unix(), option: '7_days', label: '7 Days'  },
+        { to: moment().subtract(30, 'days').unix(), from: moment().unix(), option: '30_days', label: '30 Days'  },
+        { to: moment().subtract(60, 'days').unix(), from: moment().unix(), option: '60_days', label: '60 Days'  },
+    ]
+    const [ activity_data, setActivityData ] = useState<{
+        loading:boolean,
+        orders:OrderProps[],
+        posts:PostProps[],
+        offset:number
+    }>({
+        loading: false,
+        posts:[],
+        orders:[],
+        offset:0
+    });
+    const [ comp_data, setCompData ] = useState<{
+        loading:boolean,
+        toggle: 'upcoming'|'history',
+        competition_types:CompetitionTypeProps[],
+        competition_result_types:CompetitionResultTypeProps[],
+        competition_payout_types:CompetitionPayoutTypeProps[],
+        active_competitions:CompetitionProps[],
+        competition_results:CompetitionResultProps[],
+        competition_records:CompetitionRecordProps[],
+        competition_players:CompetitionPlayerProps[],
+        offset:number
+    }>({
+        loading:false,
+        toggle: 'upcoming',
+        competition_payout_types:[],
+        competition_result_types:[],
+        competition_types:[],
+        active_competitions: [],
+        competition_players:[],
+        competition_records:[],
+        competition_results:[],
+        offset:0
+    });
+
+    const [ group_analytics, setGroupAnalytics ] = useState<{
+        loading:boolean,
+        time_option?: TimeOptionProps,
+        order_analytics:OrderAnalyticsProps[]
+    }>({
+        loading:false,
+        time_option: leader_options[0],
+        order_analytics: []
+    });
+
+    const { time_option, order_analytics } = group_analytics;
+    const [ group_data, setGroupData ] = useState<GroupStateProps>({
+        loading: false,
+        group_messages: [],
+        editing:false,
+        show_player_status:false,
+        active_toggle: 'members',
+        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);
+    useEffect(() => {
+        getGroupData(group_id);
+    },[group_id]);
+
+
+    useEffect(() => {
+        getToggleData(active_toggle);
+    },[active_toggle])
+
+    const getToggleData = async(toggle:string) => {
+        switch(toggle){
+            case 'members':
+                if(!time_option){ return }
+                return getGroupAnalytics(group_id, time_option);
+            case 'competitions':
+                return getCompetitionData(comp_data.toggle, 0);
+            case 'activity':
+                return getActitiyData(0);
+            default: return
+        }
+    }
+
+    const getActitiyData = async(page:number) => {
+        setActivityData({ ...activity_data, loading: false });
+        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)));
+        let activity_orders = await GroupApi.getBulkOrders(order_ids);
+        setActivityData({
+            ...activity_data,
+            loading: false,
+            offset: page,
+            orders: activity_orders,
+            posts: activity.sort((a,b) => moment(a.create_datetime).unix() - moment(b.create_datetime).unix())
+        });
+    }
+
+    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:[]
+        }
+        if(type == 'upcoming'){
+            resp = await GroupApi.getActiveCompetitions(group_id);
+        } else {
+            resp = await GroupApi.getHistoryCompetitions(group_id, page);
+        }
+        const opts = await GroupApi.getCompetitionOptions();
+        setCompData({
+            ...comp_data,
+            loading:false,
+            toggle: type,
+            competition_players: resp.competition_players,
+            competition_records: resp.competition_records,
+            competition_results: resp.competition_results,
+            competition_payout_types: opts.competition_payout_types,
+            competition_result_types: opts.competition_result_types,
+            competition_types: opts.competition_types,
+            active_competitions: resp.competitions,
+            offset:page
+        })
+    }
+
+    const getGroupAnalytics = async(id:string, time_option:TimeOptionProps) => {
+        setGroupAnalytics({ ...group_analytics, loading: true });
+        let analytics = await GroupApi.getGroupAnalytics(id, time_option.to, time_option.from);
+        setGroupAnalytics({
+            ...group_analytics,
+            loading:false,
+            time_option: time_option,
+            order_analytics: analytics
+        })
+    }
+
+    const getGroupData = async(id:string) => {
+        GroupApi.setEnvironment();
+        setGroupData({ ...group_data, loading: true });
+        const g_data = await GroupApi.getGroupById(id);
+        if(!g_data){ 
+            setGroupData({ ...group_data, loading: false });
+            return alert('Unable to get group information.  Please try again later') 
+        }
+        let player_ids = [ ...new Set(g_data.group_players.map(p => p.player_id).concat(g_data.group_messages.map(m => m.player_id)))]
+        let plyers = await GroupApi.getPlayersByIds(player_ids);
+        setGroupData({
+            ...group_data,
+            loading: false,
+            players: plyers,
+            group: g_data.group,
+            show_player_status: !g_data.my_group_player ? true : g_data.my_group_player.status == 'active' ? false : true, //Show to join if we can
+            group_messages: g_data.group_messages,
+            group_players: g_data.group_players,
+            my_group_player: g_data.my_group_player
+        });
+    }
+
+    const renderPlayers = (data:{ item:GroupPlayerProps, index:number }) => {
+        const player = players.find(p => p.player_id == data.item.player_id);
+        if(!player){ return <></> }
+        const player_analytic = player_analytics[data.item.player_id]
+        return (
+            <Button transparent style={{ flexDirection:'row', alignItems:'center', padding:10, borderBottomWidth:1, borderColor:Colors.borders.light, borderRadius:0 }} onPress={() => onSelectPlayer(player)}>
+                <View float style={{ borderRadius:100, padding:2 }}>
+                    <Image
+                        source={{ uri: player.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>
+                </View>
+                {player_analytic ?
+                <Text theme='h2'>ROI {(player_analytic.roi_pct*100).toFixed(2)}%</Text>
+                :<></>}
+            </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 renderPosts = (data:{ item:PostProps, index:number }) => {
+        let player = players.find(p => p.player_id == data.item.player_id);
+        let orders = activity_data.orders.filter(o => data.item.memo_orders.includes(o.order_id));
+        return (
+            <View style={{ padding:5 }}>
+                <PostCard
+                    post={data.item}
+                    player={player}
+                    orders={orders}
+                    onRequestAuthenticate={() => console.log('')}
+                    onSelectArticle={() => console.log('')}
+                    articles={[]}
+                    width={300}
+                    onSelectImage={() => console.log('')}
+                    onSelectPlayer={onSelectPlayer}
+                    onSelectTag={() => console.log('')}
+                />
+            </View>
+        )
+    }
+
+    const renderSections = (data:{ item:string, index:number }) => {
+        switch(data.item){
+            case 'header':
+                if(!group){ return <></> }
+                return (
+                    <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, borderBottomWidth:1, borderColor:Colors.borders.light }}>
+                        <Image
+                            source={{ uri: group.group_image?.url }}
+                            style={{ height:50, width: 50 }}
+                            resizeMode='cover'
+                        />
+                        <View transparent style={{ flex:1, marginLeft:10, marginRight:10 }}>
+                            <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} />
+                        </Button>
+                        :<></>}
+                    </View>
+                )
+            case 'chat':
+                if(!group || !onSelectChat){ return <></> }
+                return (
+                    <View type='header' style={{ padding:10, borderBottomWidth:1, borderColor:Colors.borders.light }}>
+                        <GroupCTAButton 
+                            group={group}
+                            message_length={100}
+                            players={players}
+                            group_messages={group_messages}
+                            group_players={group_players}
+                            onSelectChat={onSelectChat}
+                        />
+                    </View>
+                )
+            case 'me':
+                return (
+                    <View type='row' style={{ padding:10 }}>
+                        {player ?
+                        <View style={{ flex:1 }} type='row' transparent>
+                            <View float style={{ borderRadius:100, padding:2 }}>
+                                <Image
+                                    style={{ height:30, width:30, borderRadius:100 }}
+                                    source={{ uri: player.profile_pic }}
+                                    resizeMode='contain'
+                                />
+                            </View>
+                            <View transparent style={{ flex:1, marginLeft:10 }}>
+                                <Text theme='h1'>@{player.username}</Text>
+                                <Text theme='description' style={{ marginTop:3 }}>Member since {moment(player.create_datetime).format('MM/DD/YYYY')}</Text>
+                            </View>
+                            {my_group_player?.status == 'invited' ?
+                                <Button
+                                    type='action'
+                                    title='INVTED'
+                                    style={{ padding:10 }}
+                                    onPress={() => setGroupData({ ...group_data, show_player_status: true })}
+                                />
+                            :<></>}
+                            {!my_group_player || my_group_player.status == 'inactive' ?
+                                <Button
+                                    type='success'
+                                    title='JOIN'
+                                    style={{ padding:10 }}
+                                    onPress={() => setGroupData({ ...group_data, show_player_status: true })}
+                                />
+                            : my_group_player?.status != 'invited' ?
+                             <Button
+                                type='error'
+                                title='LEAVE'
+                                style={{ padding:10 }}
+                                onPress={() => setGroupData({ ...group_data, show_player_status: true })}
+                            />
+                            :<></>}
+                        </View>
+                        :<></>}
+                    </View>
+                )
+            case 'toggle':
+                return (
+                    <View style={{ padding:10 }}>
+                        <Toggle
+                            options={[
+                                { key: 'members', label: 'Members' },
+                                { key: 'activity', label: 'Activity' },
+                                { key: 'competitions', label: 'Competitions' }
+                            ]}
+                            selected_option={active_toggle}
+                            onSelectOption={(option) => setGroupData({ ...group_data, active_toggle: option })}
+                        />
+                        {loading ?
+                        <ActivityIndicator
+                            size='large'
+                            color={Colors.text.h1}
+                            style={{ padding:20, alignSelf:'center' }}
+                        />
+                        :<></>}
+                    </View>
+                )
+            case 'activity':
+                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)}
+                        />
+                        <FlatList
+                            data={activity_data.posts}
+                            key={'post_list'}
+                            keyExtractor={item => item.memo_post_id.toString()}
+                            renderItem={renderPosts}
+                        />
+                    </View>
+                )
+            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>
+                )
+            case 'competition_toggle':
+                if(active_toggle != 'competitions'){ return <></> }
+                return (
+                    <View style={{ padding:10 }}>
+                        <Toggle
+                            options={[
+                                { key: 'upcoming', label: 'Upcoming' },
+                                { key: 'history', label: 'History' }
+                            ]}
+                            selected_option={comp_data.toggle}
+                            onSelectOption={(option) => getCompetitionData(option as 'upcoming' | 'history', 0)}
+                        />
+                    </View>
+                )
+            case 'competitions':
+                if(active_toggle != 'competitions'){ return <></> }
+                return (
+                    <View transparent style={{ padding:10 }}>
+                        <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}
+                        />
+                    </View>
+                )
+            default: return <></>
+        }
+    }
+
+    return (
+        <View style={{ flex:1 }}>
+            <View style={{ flex:1 }}>
+                <FlatList
+                    data={sections}
+                    key={'group_list'}
+                    keyExtractor={item => item}
+                    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 == '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 ?
+            <View type='blur' style={{ position:'absolute', top:0, left:0, right:0, bottom:0 }}>
+                <View type='blur' style={mode == 'desktop'?{ justifyContent:'center', alignItems:'center', width: 500, height:500 }: { flex:1, justifyContent:'flex-end', padding:10 }}>
+                    <ManageGroupForm
+                        group={group}
+                        onInvitePlayer={onInvitePlayer}
+                        onClose={() => setGroupData({ ...group_data, editing: false })}
+                        onUpdateGroup={(g) => setGroupData({ ...group_data, group: g })}
+                    />
+                </View>
+            </View>
+            :<></>}
+            {show_player_status && group && player ?
+            <View type='blur' style={{ position:'absolute', top:0, left:0, right:0, bottom:0 }}>
+                <View type='blur' style={mode == 'desktop'?{ justifyContent:'center', alignItems:'center', width: 500, height:500 }: { flex:1, justifyContent:'flex-end', padding:10 }}>
+                    <GroupPlayerActionForm
+                        group={group}
+                        group_player={my_group_player}
+                        me={player}
+                        onResponse={(new_gp) => {
+                            setGroupData({
+                                ...group_data,
+                                group_players: group_players.filter(gp => gp.group_player_id != new_gp.group_player_id).concat(new_gp),
+                                my_group_player: new_gp,
+                                show_player_status: false
+                            })
+                        }}
+                        onClose={() => setGroupData({ ...group_data, show_player_status: false })}
+                    />
+                </View>
+            </View>
+            :<></>}
+        </View>
+    )
+}
+
+export default GroupComponent

package/src/index.tsx

@@ -57,6 +57,7 @@ import ManageFilter from './BetMatch/components/ManageFilter';
 import ClaritySmartEvents from './Clarity/SmartEvents';
 import RankingsCard from './RankingsCard';
 import GuideView from './Guide';
+import GroupComponent from './Group';
 
 export {
   Authenticator,
@@ -70,6 +71,7 @@ export {
   Ticker,
   Premium,
   LeaderboardCard,
+  GroupComponent,
   LocationTracker,
   BEClarity,
   FlashMarket,