be-components 6.6.0 → 6.6.2

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