be-components 6.6.1 → 6.6.2

package/src/Engage/components/CompetitionCard.tsx

@@ -1,21 +1,25 @@
 import React from 'react';
 import { Image } from 'react-native';
-import type { CompanyProps, CompetitionProps, CompetitionResultTypeProps, CompetitionTypeProps, PublicPlayerProps } from '../../types';
+import type { CompanyProps, CompetitionProps, CompetitionRecordProps, CompetitionResultProps, CompetitionResultTypeProps, CompetitionTypeProps, MyPlayerProps, PublicPlayerProps } from '../../types';
 import { Icons } from '../../Components';
 import moment from 'moment-mini';
 import { useColors } from '../../constants/useColors';
 import { Button, Text, View } from '../../Components/Themed';
+import { CompetitionHelpers } from '../../Competition/api';
 
 type CompetitionCardProps = {
     competition:CompetitionProps,
+    player?:MyPlayerProps,
     competition_type:CompetitionTypeProps,
+    competition_result?:CompetitionResultProps,
+    competition_record?:CompetitionRecordProps,
     competition_result_type:CompetitionResultTypeProps,
     company?:CompanyProps,
     admin?:PublicPlayerProps,
     pacer?:PublicPlayerProps,
     onCompetitionSelect:(c:CompetitionProps) => void
 }
-const CompetitionCard = ({ competition, competition_type, company, admin, onCompetitionSelect }:CompetitionCardProps) => {
+const CompetitionCard = ({ competition, competition_record, player, competition_result, competition_type, company, admin, onCompetitionSelect }:CompetitionCardProps) => {
     const Colors = useColors();
     const cl = competition.market_type == 'FOR_MONEY' ? '$' : 'E'
     let current_payout = competition.ticket_revenue
@@ -79,6 +83,29 @@ const CompetitionCard = ({ competition, competition_type, company, admin, onComp
                     </View>
                 </View>
             </View>
+            {player && competition_result && competition_record ?
+            <View type='footer' style={{ padding:10, flexDirection:'row', alignItems:'center', borderBottomWidth:1, borderColor:Colors.borders.light }}>
+                <Image
+                    source={{ uri: player.profile_pic }}
+                    style={{ height:30, width:30, borderRadius:100 }}
+                    resizeMode='contain'
+                />
+                <View transparent style={{ flex:1, marginLeft:10 }}>
+                    <Text theme='h1'>@{player.username}</Text>
+                    <View transparent style={{ marginTop:3 }}>
+                        {competition_type.type == 'pick' ?
+                        <Text theme="description">{competition_record.wins} - {competition_record.losses} - {competition_record.draws} ({competition_record.remaining_picks} Remaining)</Text>
+                        :competition_type.type == 'wager' ?
+                        <Text theme="description">{competition_record.earnings.toFixed(2)} Earned ({competition_record.remaining_stakes.toFixed(2)} at risk)</Text>
+                        :<></>}
+                    </View>
+                </View>
+                <View transparent style={{ alignItems:'flex-end' }}>
+                    <Text theme='h2' color={competition_result.winnings > 0 ? Colors.text.success : Colors.text.warning}>{cl}{competition_result.winnings.toFixed(2)}</Text>
+                    <Text theme='description' style={{ marginTop:3 }}>{CompetitionHelpers.formatPlace(competition_result.place)} / {competition.tickets_sold}</Text>
+                </View>
+            </View>
+            :<></>}
             <View type='footer' style={{ flexDirection:'row', alignItems:'center', padding:10, borderBottomRightRadius:8, borderBottomLeftRadius:8 }}>
                 {company ?
                 <Image

package/src/Group/api/index.ts

@@ -0,0 +1,176 @@
+import axios from "axios";
+import { APIOverrides } from "../../ApiOverrides"
+import type { CompetitionPayoutTypeProps, CompetitionPlayerProps, CompetitionProps, CompetitionRecordProps, CompetitionResultProps, CompetitionResultTypeProps, CompetitionTypeProps, GroupMessageProps, GroupPlayerProps, GroupProps, NewOverallAnalytics, OrderAnalyticsProps, OrderProps, PostProps, PublicPlayerProps } from "../../types";
+
+
+//let EVENT_SVC_API = ''
+let AUTH_SVC_API = ''
+let MK_SVC_API = ''
+let SOCIAL_SVC_API = ''
+let TP_SVC_API = ''
+
+export { GroupApi, GroupHelpers }
+
+const GroupApi = {
+    setEnvironment: () => {
+        const endpoints = APIOverrides.getEndpoints();
+        //EVENT_SVC_API = endpoints['EVENT_SVC_API'] as string;
+        MK_SVC_API = endpoints['MK_SVC_API'] as string;
+        TP_SVC_API = endpoints['TP_SVC_API'] as string;
+        AUTH_SVC_API = endpoints['AUTH_SVC_API'] as string;
+        SOCIAL_SVC_API = endpoints['SOCIAL_SVC_API'] as string;
+    },
+    getGroupById: async(group_id:string):Promise<undefined|{ group:GroupProps, group_messages:GroupMessageProps[], group_players:GroupPlayerProps[], my_group_player?:GroupPlayerProps }> => {
+        try {
+            const resp = await axios.get(`${SOCIAL_SVC_API}/v2/groups/group/${group_id}`);
+            return resp.data
+        } catch (e) {
+            console.log(e);
+            return undefined
+        }
+    },
+    acceptInvite:async(group_player_id:string):Promise<GroupPlayerProps | undefined> => {
+        try {
+            const resp = await axios.post(`${SOCIAL_SVC_API}/v2/groups/player/accept`, { group_player_id });
+            return resp.data.group_player
+        } catch (e) {
+            return undefined
+        }
+    },
+    declineInvite:async(group_player_id:string):Promise<GroupPlayerProps | undefined> => {
+        try {
+            const resp = await axios.post(`${SOCIAL_SVC_API}/v2/groups/player/decline`, { group_player_id });
+            return resp.data.group_player
+        } catch (e) {
+            return undefined
+        }
+    },
+    join:async(group_id:string):Promise<GroupPlayerProps | undefined> => {
+        try {
+            const resp = await axios.post(`${SOCIAL_SVC_API}/v2/groups/player/join`, { group_id });
+            return resp.data.group_player
+        } catch (e) {
+            return undefined
+        }
+    },
+    leave:async(group_player_id:string):Promise<GroupPlayerProps | undefined> => {
+        try {
+            const resp = await axios.post(`${SOCIAL_SVC_API}/v2/groups/player/leave`, { group_player_id });
+            return resp.data.group_player
+        } catch (e) {
+            return undefined
+        }
+    },
+    updateGroup: async(group:GroupProps):Promise<GroupProps|undefined> => {
+        try {
+            const resp = await axios.post(`${SOCIAL_SVC_API}/v2/groups/group/update`, {group});
+            return resp.data.group
+        } catch (e) {
+            console.log(e);
+            return undefined
+        }
+    },
+    getPlayersByIds: async(player_ids:string[]):Promise<PublicPlayerProps[]> => {
+        try {
+            if(player_ids.length == 0){ return [] }
+            const resp = await axios.post(`${AUTH_SVC_API}/v1/players/bulk/get`, { player_ids });
+            return resp.data.players
+        } catch (e) {
+            return []
+        }
+    },
+    getGroupAnalytics: async(group_id:string, to:number, from:number):Promise<OrderAnalyticsProps[]> => {
+        try {
+            const resp = await axios.get(`${MK_SVC_API}/v1/analytics/group/details/${group_id}?to=${to}&from=${from}`);
+            console.log(resp.data)
+            return resp.data.analytics
+        } catch (e) {
+            return []
+        }
+    },
+    getCompetitionOptions: async():Promise<{competition_types:CompetitionTypeProps[], competition_result_types:CompetitionResultTypeProps[], competition_payout_types:CompetitionPayoutTypeProps[]}> => {
+        const resp = await axios.get(`${TP_SVC_API}/v1/competitions/options`)
+        return resp.data
+    },
+    getActiveCompetitions: async(group_id:string):Promise<{ competitions:CompetitionProps[], competition_players:CompetitionPlayerProps[], competition_records:CompetitionRecordProps[], competition_results:CompetitionResultProps[] }> => {
+        try {
+            const resp = await axios.get(`${TP_SVC_API}/v2/competitions/group/active/${group_id}`);
+            return resp.data
+        } catch (e) {
+            console.log(e);
+            return { competition_players:[], competition_records:[], competition_results:[], competitions:[] }
+        }
+    },
+    getHistoryCompetitions: async(group_id:string, offset:number):Promise<{ competitions:CompetitionProps[], competition_players:CompetitionPlayerProps[], competition_records:CompetitionRecordProps[], competition_results:CompetitionResultProps[] }> => {
+        try {
+            const resp = await axios.get(`${TP_SVC_API}/v2/competitions/group/history/${group_id}?offset=${offset}`);
+            return resp.data
+        } catch (e) {
+            console.log(e);
+            return { competition_players:[], competition_records:[], competition_results:[], competitions:[] }
+        }
+    },
+    getPostsByGroupId: async(group_id:string, offset:number):Promise<PostProps[]> => {
+        try {
+            const resp = await axios.get(`${SOCIAL_SVC_API}/v1/posts/group/${group_id}?offset=${offset}`);
+            return resp.data.posts
+        } catch (e) {
+            console.log(e)
+            return []
+        }
+    },
+    getBulkOrders: async(order_ids:string[]):Promise<OrderProps[]> => {
+        try {
+            const resp = await axios.post(`${MK_SVC_API}/v1/orders/bulk/get`, { order_ids })
+            return resp.data.orders
+        } catch (e) {
+            console.log(e);
+            return []
+        }
+    },
+}
+
+
+const GroupHelpers = {
+    sortMembers: (group_players:GroupPlayerProps[], order_analytics:OrderAnalyticsProps[]) => {
+        let player_analytics: { [key:string]: NewOverallAnalytics } = {}
+        group_players.map(p => {
+            let my_analytics = order_analytics.filter(oa => oa.player_id == p.player_id);
+            player_analytics[p.player_id] = GroupHelpers.aggregateAnalytics(my_analytics);
+        });
+
+        let sorted_players = group_players.filter(gp => gp.status == 'active').sort((a,b) => {
+            let a_analytics = player_analytics[a.player_id]?.roi_pct ?? 0
+            let b_analytcs = player_analytics[b.player_id]?.roi_pct ?? 0
+            return b_analytcs - a_analytics
+        });
+        return { sorted_players, player_analytics }
+    },
+     aggregateAnalytics: (analytics:OrderAnalyticsProps[]):NewOverallAnalytics => {
+        const wins = analytics.reduce((a,b) => a + b.wins, 0);
+        const losses = analytics.reduce((a,b) => a + b.losses, 0);
+        const draws = analytics.reduce((a,b) => a + b.draws, 0);
+        const fulfilled_positions = analytics.reduce((a,b) => a + parseFloat(b.fulfilled_positions as any), 0);
+        const winnings = analytics.reduce((a,b) => a + b.winnings, 0);
+        const original_stake = analytics.reduce((a,b) => a + b.original_stake, 0);
+        const cash_rcvd = analytics.reduce((a,b) => a + b.cash_rcvd, 0);
+        
+        const win_pct = (wins + (draws / 2)) / fulfilled_positions
+        const earnings = (winnings + cash_rcvd) - original_stake
+        const roi_pct = original_stake > 0 ? earnings / original_stake : 0
+        return {
+            winnings,
+            original_stake,
+            wins,
+            losses,
+            draws,
+            net_winnings: 0,
+            player_id: '',
+            fulfilled_positions,
+            cash_rcvd,
+            earnings,
+            win_pct,
+            roi_pct
+        }
+    }
+}

package/src/Group/components/GroupCTAButton.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import moment from "moment-mini"
+import { useEffect } from "react"
+import type { GroupMessageProps, GroupPlayerProps, GroupProps, PublicPlayerProps } from "../../types"
+import { useColors } from "../../constants/useColors"
+import { Button, Text, View } from "../../Components/Themed"
+import { Icons } from '../../Components';
+import { Image } from 'react-native';
+
+type GroupCTAButtonProps = {
+    group:GroupProps,
+    message_length?:number,
+    group_messages:GroupMessageProps[],
+    players:PublicPlayerProps[],
+    group_players:GroupPlayerProps[],
+    onSelectChat:(group:GroupProps) => void
+}
+
+const GroupCTAButton = ({ group, players, message_length, group_messages, onSelectChat }:GroupCTAButtonProps) => {
+    const Colors = useColors();
+
+    useEffect(( ) => {
+        if(!group){ return }
+        //setUpCta();
+    },[group.group_id]);
+
+
+    let last_message = group_messages.sort((a,b) => moment(b.create_datetime).unix() - moment(a.create_datetime).unix())[0]
+    let cta_message = group.name
+    if(last_message?.message){ cta_message = `${last_message.message.slice(0, message_length ?? 15)}...` }
+    const last_player = players.find(p => p.player_id == last_message?.player_id)
+    return (
+        <View transparent>
+            <Button transparent style={{ flexDirection:'row', alignItems:'center', padding:2 }} onPress={() => onSelectChat(group)}>
+                {last_player ?
+                <Image
+                    source={{ uri: last_player.profile_pic }}
+                    style={{ height:30, width:30, borderRadius:100 }}
+                    resizeMode='contain'
+                />
+                :<></>}
+                <View transparent style={{ flex:1, marginLeft:10, marginRight:10 }}>
+                    <Text theme='h2'>{cta_message}</Text>
+                    {last_player ?
+                    <Text theme='description' style={{ marginTop:3 }}>@{last_player.username}</Text>
+                    :<></>}
+                </View>
+                 <View float style={{ padding:10, flexDirection:'row', alignItems:'center' }}>
+                    <Icons.ChatIcon size={16} color={Colors.text.h1}/>
+                    <Text theme='h2' size={12}> Chat</Text>
+                </View>
+            </Button>
+        </View>
+
+    )
+}
+export default GroupCTAButton

package/src/Group/components/GroupPlayerActionForm.tsx

@@ -0,0 +1,137 @@
+import React, { useState } from 'react';
+import { Button, Text, View } from "../../Components/Themed"
+import type { GroupPlayerProps, GroupProps, MyPlayerProps } from '../../types';
+import { GroupApi } from '../api';
+
+type GroupPlayerActionFormProps = {
+    me:MyPlayerProps,
+    group:GroupProps,
+    group_player?:GroupPlayerProps,
+    onResponse:(gp:GroupPlayerProps) => void,
+    onClose:() => void
+}
+const GroupPlayerActionForm = ({ group, group_player, onResponse, onClose }:GroupPlayerActionFormProps) => {
+    const [ action_loading, setActionLoading ] = useState(false);
+    
+    const handleAccept = async() => {
+        if(!group_player){ return }
+        setActionLoading(true)
+        const new_gp = await GroupApi.acceptInvite(group_player.group_player_id);
+        if(!new_gp){ alert('Unable to process') }
+        else {
+            onResponse(new_gp);
+        }
+        setActionLoading(false)
+    }
+
+    const handleDecline = async() => {
+        if(!group_player){ return }
+        setActionLoading(true)
+        const new_gp = await GroupApi.declineInvite(group_player.group_player_id);
+        if(!new_gp){ alert('Unable to process') }
+        else {
+            onResponse(new_gp);
+        }
+        setActionLoading(false)
+    }
+
+    const handleJoin= async() => {
+        setActionLoading(true)
+        const new_gp = await GroupApi.join(group.group_id);
+        if(!new_gp){ alert('Unable to process') }
+        else {
+            onResponse(new_gp);
+        }
+        setActionLoading(false)
+    }
+
+    const handleLeave = async() => {
+        if(!group_player){ return }
+        setActionLoading(true)
+        const new_gp = await GroupApi.leave(group_player.group_player_id);
+        if(!new_gp){ alert('Unable to process') }
+        else {
+            onResponse(new_gp);
+        }
+        setActionLoading(false)
+    }
+    return (
+        <View float>
+            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+                <View transparent style={{ flex:1 }}>
+                    <Text theme='h1'>{group.name}</Text>
+                    <Text theme='description' style={{ marginTop:3 }}>{group.description}</Text>
+                </View>
+                <Button
+                    title='X'
+                    float
+                    style={{ padding:10 }}
+                    onPress={() => onClose()}
+                />
+            </View>
+            <View type='body' style={{ padding:10 }}>
+                {group_player ?
+                <View>
+                    {group_player.status == 'invited' ?
+                    <Text theme='h1'>YOU HAVE BEEN INVITED</Text>
+                    :<></>}
+                    {group_player.status == 'active' ?
+                    <Text theme='h1'>YOU ARE A MEMBER OF THIS GROUP</Text>
+                    :<></>}
+                    {group_player.status == 'inactive' ?
+                    <Text theme='h1'>JOIN THIS GROUP NOW</Text>
+                    :<></>}
+                </View>
+                :
+                <View>                    
+                    <Text theme='h1'>JOIN THIS GROUP NOW</Text>
+                </View>
+                }
+            </View>
+            <View type='footer' style={{ flexDirection:'row', alignItems:'center', padding:5, borderBottomRightRadius:8, borderBottomLeftRadius:8 }}>
+                {group_player?.status == 'invited' ?
+                <Button
+                    title='DECLINE'
+                    type='error'
+                    loading={action_loading}
+                    style={{ flex:1, opacity: action_loading ? 0.5:1, margin:5 }}
+                    disabled={action_loading}
+                    onPress={() => handleDecline()}
+                />
+                :<></>}
+                {group_player?.status == 'invited' ?
+                <Button
+                    title='ACCEPT'
+                    type='success'
+                    loading={action_loading}
+                    style={{ flex:1, opacity: action_loading ? 0.5:1, margin:5 }}
+                    disabled={action_loading}
+                    onPress={() => handleAccept()}
+                />
+                :<></>}
+                {group_player?.status == 'active' ?
+                <Button
+                    title='LEAVE GROUP'
+                    type='error'
+                    loading={action_loading}
+                    style={{ flex:1, opacity: action_loading ? 0.5:1, margin:5 }}
+                    disabled={action_loading}
+                    onPress={() => handleLeave()}
+                />
+                :<></>}
+                {!group_player || group_player.status == 'inactive' ?
+                <Button
+                    title='JOIN GROUP'
+                    type='success'
+                    loading={action_loading}
+                    style={{ flex:1, opacity: action_loading ? 0.5:1, margin:5 }}
+                    disabled={action_loading}
+                    onPress={() => handleJoin()}
+                />
+                :<></>}
+            </View>
+        </View>
+    )
+}
+
+export default GroupPlayerActionForm

package/src/Group/components/ManageGroupForm.tsx

@@ -0,0 +1,239 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Text, TextInput, View } from "../../Components/Themed";
+import { FlatList } from 'react-native';
+import type { FocusPositionProps, GroupProps } from '../../types';
+import { Switch, Toggle } from '../../Components';
+import { GroupApi } from '../api';
+
+const sections = ['header','toggle','information', 'settings', 'invite', 'options']
+type ManageGroupFormProps = {
+    group:GroupProps,
+    onUpdateGroup:(group:GroupProps) => void,
+    onInvitePlayer: () => void,
+    onClose:() => void,
+    onFocusPosition?:(position:FocusPositionProps) => void,
+}
+const ManageGroupForm = ({ group, onFocusPosition, onUpdateGroup, onClose, onInvitePlayer }: ManageGroupFormProps ) => {
+    const [ manage_state, setState ] = useState<{
+        loading:boolean,
+        draft_group:GroupProps,
+        active_toggle:string
+    }>({
+        draft_group: group,
+        loading:false,
+        active_toggle: 'information'
+    });
+    const { loading, draft_group, active_toggle } = manage_state;
+
+    useEffect(() => {
+        if(!group){ return }
+        setState({ ...manage_state,draft_group: group })
+    },[group]);
+
+    const handleSave = async(dg:GroupProps) => {
+        if(!dg){ return }
+        if(loading){ return }
+        console.log(dg)
+        setState({ ...manage_state, loading: true });
+        const new_group = await GroupApi.updateGroup(dg);
+        if(!new_group){ 
+            setState({ ...manage_state, loading:false })
+            return alert('Unable to update this group') 
+        }
+        onUpdateGroup(new_group);
+        setState({ ...manage_state, loading:false })
+    }
+
+    const renderSections = (data:{ item:string, index:number }) => {
+        switch(data.item){
+            case 'header':
+                return (
+                    <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+                        <View transparent style={{ flex:1 }}>
+                            <Text theme='h1'>EDIT YOUR GROUP</Text>
+                            <Text theme='description' style={{ marginTop:3 }}>Use the form below to make updates to this group</Text>
+                        </View>
+                        <Button
+                            title='X'
+                            float
+                            style={{ padding:10 }}
+                            onPress={() => onClose()}
+                        />
+                    </View>
+                )
+            case 'information':
+                if(!draft_group){ return <></> }
+                if(active_toggle != 'information'){ return <></> }
+                const is_changed = JSON.stringify({ name: draft_group.name, description: draft_group.description }) != JSON.stringify({ name: group.name, description:group.description }) ? true : false
+                return (
+                    <View float style={{ margin:10 }}>
+                        <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                            <View transparent style={{ flex:1 }}>
+                                <Text theme='h1'>Edit Group Information</Text>
+                            </View>
+                            <Button
+                                title='UPDATE'
+                                type='success'
+                                disabled={!is_changed}
+                                loading={loading}
+                                style={{ opacity: is_changed && !loading ? 1 : 0.5, padding:10 }}
+                                onPress={() => handleSave(draft_group)}
+                            />
+                        </View>
+                        <View transparent nativeID='title' type='row' style={{ flexWrap:"wrap", padding:10 }}>
+                            <View transparent style={{ flexGrow:1, minWidth:150 }}>
+                                <Text theme='h1'>Group Name</Text>
+                                <Text theme='description' style={{ marginTop:3 }}>Give this group a unique name</Text>
+                            </View>
+                            <TextInput
+                                value={draft_group.name}
+                                style={{ minWidth:150, flexGrow:1, margin:5 }}
+                                onFocusPosition={onFocusPosition}
+                                onChangeText={(text) => setState({ ...manage_state, draft_group: { ...draft_group, name: text } })}
+                            />
+                        </View>
+                        <View transparent nativeID='description' type='row' style={{ flexWrap:"wrap", padding:10 }}>
+                            <View transparent style={{ flexGrow:1, minWidth:150 }}>
+                                <Text theme='h1'>Group Description</Text>
+                                <Text theme='description' style={{ marginTop:3 }}>Give this group a fun description</Text>
+                            </View>
+                            <TextInput
+                                value={draft_group.description}
+                                style={{ minWidth:300, flexGrow:1, margin:5 }}
+                                onFocusPosition={onFocusPosition}
+                                onChangeText={(text) => setState({ ...manage_state, draft_group: { ...draft_group, description: text } })}
+                            />
+                        </View>
+                    </View>
+                )
+            case 'invite':
+                if(!draft_group){ return <></> }
+                if(active_toggle != 'information'){ return <></> }
+                const code_changed = draft_group.invite_code != group.invite_code ? true : false
+                return (
+                    <View float style={{ margin:10 }}>
+                        <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                            <View transparent style={{ flex:1 }}>
+                                <Text theme='h1'>Group Players</Text>
+                            </View>
+                            <Button
+                                title='INVITE'
+                                type='success'
+                                loading={loading}
+                                style={{ padding:10 }}
+                                onPress={() => onInvitePlayer()}
+                            />
+                        </View>
+                        <View transparent type='body'>
+                            <View transparent type='row' style={{ padding:10 }}>
+                                <View transparent style={{flex:1 }}>
+                                    <Text theme='h1'>INVITE ONLY</Text>
+                                    <Text theme='description' style={{ marginTop:3 }}>Make this group invite only so players can only join if invited by you</Text>
+                                </View>
+                                <Switch
+                                    value={draft_group.invite_only}
+                                    onChange={(value) => handleSave({ ...draft_group, invite_only: value, invite_code: value ? `IC${group.group_id}`: '' }) }
+                                    switch_type='on_off'
+                                />
+                            </View>
+                            {draft_group.invite_only ?
+                            <View transparent nativeID='title' type='row' style={{ flexWrap:"wrap" }}>
+                                <View transparent style={{ flexGrow:1, minWidth:150, padding:10 }}>
+                                    <Text theme='h1'>INVITE CODE</Text>
+                                    <Text theme='description' style={{ marginTop:3 }}>You can set a custom code for users to find your group</Text>
+                                </View>
+                                <View transparent style={{ flexDirection:'row', alignItems:'center', minWidth:200, flexGrow:1, padding:10 }}>
+                                    <TextInput
+                                        value={draft_group.invite_code}
+                                        style={{ flexGrow:1, marginRight:5 }}
+                                        onFocusPosition={onFocusPosition}
+                                        onChangeText={(text) => setState({ ...manage_state, draft_group: { ...draft_group, invite_code: text } })}
+                                    />
+                                    <Button
+                                        title='SAVE'
+                                        type='success'
+                                        disabled={!code_changed}
+                                        loading={loading}
+                                        style={{ opacity: code_changed && !loading ? 1 : 0.5, padding:10 }}
+                                        onPress={() => handleSave(draft_group)}
+                                    />
+                                </View>
+                            </View>
+                            :<></>}
+                        </View>
+                    </View>
+                )
+            case 'toggle':
+                return (
+                    <View style={{ padding:10 }}>
+                        <Toggle
+                            options={[
+                                {key: 'information', label: 'Information'},
+                                { key: 'settings', label: 'settings'}
+                            ]}
+                            onSelectOption={(option) => setState({ ...manage_state, active_toggle: option })}
+                            selected_option={active_toggle}
+                        />
+                    </View>
+                )
+            case 'settings':
+                if(active_toggle != 'settings'){ return <></> }
+                return (
+                    <View float style={{ margin:10 }}>
+                        <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+                            <View transparent style={{ flex:1 }}>
+                                <Text theme='h1'>Edit Group Settings</Text>
+                            </View>
+                        </View>
+                        <View transparent nativeID='title' type='row' style={{ padding:10 }}>
+                            <View transparent style={{ flexGrow:1, minWidth:150 }}>
+                                <Text theme='h1'>Show Leaderboard</Text>
+                                <Text theme='description' style={{ marginTop:3 }}>Include a leaderboard for all players in this group</Text>
+                            </View>
+                            <Switch
+                                value={draft_group.leaderboard_ind}
+                                onChange={(value) => handleSave({ ...draft_group, leaderboard_ind: value }) }
+                                switch_type='on_off'
+                            />
+                        </View>
+                        <View transparent nativeID='title' type='row' style={{ padding:10 }}>
+                            <View transparent style={{ flexGrow:1, minWidth:150 }}>
+                                <Text theme='h1'>Order Alerts</Text>
+                                <Text theme='description' style={{ marginTop:3 }}>Log each order a player in this group makes.</Text>
+                            </View>
+                            <Switch
+                                value={draft_group.order_alerts}
+                                onChange={(value) => handleSave({ ...draft_group, order_alerts: value }) }
+                                switch_type='on_off'
+                            />
+                        </View>
+                        <View transparent nativeID='title' type='row' style={{ padding:10 }}>
+                            <View transparent style={{ flexGrow:1, minWidth:150 }}>
+                                <Text theme='h1'>Competition Alerts</Text>
+                                <Text theme='description' style={{ marginTop:3 }}>Log each competition a player in this group joins.</Text>
+                            </View>
+                            <Switch
+                                value={draft_group.competition_alerts}
+                                onChange={(value) => handleSave({ ...draft_group, competition_alerts: value }) }
+                                switch_type='on_off'
+                            />
+                        </View>
+                    </View>
+                )
+            default: return <></>
+        }
+    }
+
+    return (
+        <View float style={{ flex:1 }}>
+            <FlatList
+                data={sections}
+                key={'group_sections_manage'}
+                keyExtractor={item => item}
+                renderItem={renderSections}
+            />
+        </View>
+    )
+}
+
+export default ManageGroupForm