be-components 5.1.9 → 5.2.0

package/src/SocialComponents/FormattedTextInput/components/TagSelector.tsx

@@ -2,26 +2,31 @@ import React, { useEffect, useState } from 'react';
 import { Button, Text, View } from "../../../Components/Themed";
 import type { PublicPlayerProps, TextTagProps } from '../../../types';
 import { SocialComponentApi } from '../../api';
-import { Image } from 'react-native';
+import { FlatList, Image } from 'react-native';
+import SearchBox from '../../../Components/SearchBox';
+import Pagination from '../../../Components/Pagination';
 
 type TagSelectorProps = {
     type: 'player',
     width:number,
     visible:boolean,
+    onFocusPosition?:(position:{ height:number, width:number, x:number, y:number }) => void
     working_tag:TextTagProps,
     onCancel: () => void,
     onSelectTag:(tag:TextTagProps) => void
 }
 const MIN_TAG_WIDTH = 140
-const TagSelector = ({ width, type, visible, working_tag, onSelectTag, onCancel } : TagSelectorProps) => {
+const TagSelector = ({ width, type, visible, working_tag, onFocusPosition, onSelectTag, onCancel } : TagSelectorProps) => {
+    const [ player_search, setPlayerSearch ] = useState('');
     const [ player_tag, setPlayerTag ] = useState<{
         loading:boolean,
         players:PublicPlayerProps[],
+        player_local_offset:number,
         offset:number
     }>({
-        loading: false, players:[], offset:0
+        loading: false, players:[], offset:0, player_local_offset:0
     });
-
+    let visible_players = player_tag.players.slice(0, 8);
     const getTagWidth = (padding:number) => {
         //How many can fit in the screen
         let num_possible = Math.floor(width / MIN_TAG_WIDTH);
@@ -29,7 +34,7 @@ const TagSelector = ({ width, type, visible, working_tag, onSelectTag, onCancel
         let width_per_tag = (width / num_possible) - (padding * 2 * num_possible)
         return width_per_tag
     }
-    const tag_width = getTagWidth(3)
+    const tag_width = getTagWidth(4)
 
     useEffect(() => {
         if(!visible){ return }
@@ -66,16 +71,27 @@ const TagSelector = ({ width, type, visible, working_tag, onSelectTag, onCancel
         })
     }
 
+    const searchPlayersByValue = async(page:number) => {
+        if(!player_search){ return }
+        const plys = await SocialComponentApi.searchPlayersByValue(player_search, page);
+        setPlayerTag({
+            ...player_tag,
+            loading: false,
+            players: plys,
+            offset: page
+        })
+    }
+
     const renderPlayers = (data:{ item:PublicPlayerProps, index:number }) => {
         return (
             <Button key={data.item.player_id.toString()} float style={{ flexDirection:'row', alignItems:'center', margin:2, padding:3, width:tag_width, borderRadius:100 }} onPress={() => handleSelectPlayer(data.item)}>
                 <Image
                     source={{ uri: data.item.profile_pic }}
-                    style={{ height:25, width:25, borderRadius:100 }}
+                    style={{ height:30, width:30, borderRadius:100 }}
                     resizeMode='cover'
                 />
                 <View transparent style={{flex:1, marginLeft:5 }}>
-                    <Text style={{ maxWidth:tag_width - 30 }} theme='description' size={10} textAlign='center'>@{data.item.username}</Text>
+                    <Text style={{ maxWidth:tag_width - 35 }} theme='description' size={10} textAlign='center'>@{data.item.username}</Text>
                 </View>
             </Button>
         )
@@ -84,10 +100,10 @@ const TagSelector = ({ width, type, visible, working_tag, onSelectTag, onCancel
     if(!visible){ return <></> }
 
     return (
-        <View>
+        <View transparent>
             {type == 'player' ?
-            <View float>
-                <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+            <View float style={{ flex:1 }}>
+                <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
                     <View transparent style={{ flex:1 }}>
                         <Text theme='h2'>Tag A Player!</Text>
                     </View>
@@ -99,11 +115,29 @@ const TagSelector = ({ width, type, visible, working_tag, onSelectTag, onCancel
                         onPress={() => onCancel()}
                     />
                 </View>
-                <View style={{ padding:5, flexDirection:'row', alignItems:'center', justifyContent:'center', flexWrap:'wrap' }}>
-                    {player_tag.players.map((item, index) => {
-                        return renderPlayers({ item, index })
-                    })}
+                <View>
+                    <SearchBox
+                        button_style={{ padding:10 }}
+                        placeholder='Search Players ...'
+                        onSearch={() => searchPlayersByValue(0)}
+                        onFocusPosition={onFocusPosition}
+                        onChange={(text) => setPlayerSearch(text)}
+                    />
+                </View>
+                <View transparent style={{ padding:5 }}>
+                    <FlatList
+                        key={'player_tags'}
+                        numColumns={2}
+                        data={visible_players}
+                        keyExtractor={(item) => item.player_id.toString()}
+                        renderItem={renderPlayers}
+                    />
                 </View>
+                <Pagination
+                    offset={player_tag.offset}
+                    onNext={() => player_search ? searchPlayersByValue(player_tag.offset + 1) : searchPlayers(working_tag, player_tag.offset + 1)}
+                    onPrevious={() => player_search ? searchPlayersByValue(player_tag.offset - 1) : searchPlayers(working_tag, player_tag.offset - 1)}
+                />
             </View>
             :<></>}
         </View>

package/src/SocialComponents/FormattedTextInput/index.tsx

@@ -149,18 +149,19 @@ const FormattedTextInput = ({ width, disable_scroll, submit_title, hide_border,
 
     return (
         <View transparent>
-            <View transparent>
-                {tag_selector.visible && tag_selector.working_tag && tag_selector_location != 'bottom' ?
+            {tag_selector.visible && tag_selector.working_tag && tag_selector_location != 'bottom' ?
+            <View transparent style={{ padding:10 }}>
                 <TagSelector
                     working_tag={tag_selector.working_tag}
                     type={tag_selector.type}
-                    width={width}
+                    width={width - 20}
+                    onFocusPosition={onFocusPosition}
                     visible={tag_selector.visible}
                     onCancel={() => setTagSelector({ visible: false, type: 'player' })}
                     onSelectTag={(tag) => handleUpdateTag(tag)}
                 />
-                :<></>}
             </View>
+            :<></>}
             <View transparent style={{ flexDirection:'row', alignItems:'flex-end' }}>
                 {onSelectInput ?
                 <Button float style={{ padding:10, width:45, marginRight:5, borderRadius:8, justifyContent:'center', alignItems:'center' }} onPress={() => onSelectInput()}>
@@ -204,16 +205,17 @@ const FormattedTextInput = ({ width, disable_scroll, submit_title, hide_border,
                 :<></>}
             </View>
                 {tag_selector.visible && tag_selector.working_tag && tag_selector_location == 'bottom' ?
-                <View transparent style={{ height:100 }}>
+                <View transparent style={{ padding:10 }}>
                 <TagSelector
                     working_tag={tag_selector.working_tag}
                     type={tag_selector.type}
-                    width={width}
+                    width={width - 20}
+                    onFocusPosition={onFocusPosition}
                     visible={tag_selector.visible}
                     onCancel={() => setTagSelector({ visible: false, type: 'player' })}
                     onSelectTag={(tag) => handleUpdateTag(tag)}
                 />
-                </View>
+            </View>
                 :<></>}
             {submit_placement == 'bottom' ?
             <Button

package/src/SocialComponents/GroupChat/components/GroupMessageCard.tsx

@@ -1,28 +1,33 @@
 import React from 'react';
 import { Text, View } from "../../../Components/Themed";
 import { useColors } from "../../../constants/useColors";
-import type { GroupMessageProps, MyPlayerProps, PublicPlayerProps, TextTagProps } from "../../../types";
+import type { GroupMessageProps, MyPlayerProps, OrderProps, PublicPlayerProps, TextTagProps } from "../../../types";
 import { FormattedText } from '../../FormattedTextInput/FormattedText';
 import moment from 'moment-mini';
 import { Image } from 'react-native';
 import ImageRenderer from '../../ImageRenderer';
 import UrlPreviewCard from '../../UrlPreviewCard';
+import SocialOrdersList from '../../SocialOrdersList';
 
 
 type GroupMessageCardProps = {
     group_message:GroupMessageProps,
     me?:MyPlayerProps,
+    orders:OrderProps[],
     player?:PublicPlayerProps,
     mine?:boolean,
+    onCopyOrder?:(order:OrderProps) => void,
+    onFadeOrder?:(order:OrderProps) => void,
     width: number,
     onSelectImage:(image:{ url:string, height?:number, width?:number }) => void,
     onSelectTag:(tag:TextTagProps) => void
 }
 
-const GroupMessageCard = ({group_message, mine, player, width, onSelectImage, onSelectTag}:GroupMessageCardProps) => {
+const GroupMessageCard = ({group_message, orders, mine, player, width, onSelectImage, onSelectTag, onCopyOrder, onFadeOrder}:GroupMessageCardProps) => {
     const Colors = useColors();
     const image = group_message.message_images ? group_message.message_images[0] : undefined
     const url = group_message.message_urls ? group_message.message_urls[0] : undefined
+
     return (
         <View>
             <View style={{ flexDirection:'row', alignItems:'flex-end' }}>
@@ -38,7 +43,7 @@ const GroupMessageCard = ({group_message, mine, player, width, onSelectImage, on
                 </View>
                 }
                 <View float style={{ 
-                    width: width - 90, 
+                    width: mine ? width - 45 : width - 90, 
                     padding:14,
                     marginLeft:10,
                     borderRadius:22,
@@ -47,20 +52,6 @@ const GroupMessageCard = ({group_message, mine, player, width, onSelectImage, on
                     borderBottomRightRadius: mine? 0:22, 
                     backgroundColor:mine?Colors.absolutes.brand.midnight:Colors.absolutes.highlights.highlight200 
                 }}>
-                    {url ?
-                    <UrlPreviewCard
-                        url={url}
-                        width={width - 120}
-                        color={Colors.text.white}
-                    />
-                    :<></>}
-                    {image ?
-                    <ImageRenderer
-                        image={image}
-                        width={width - 120}
-                        onSelectImage={onSelectImage}
-                    />
-                    :<></>}
                     {group_message.formatted_text ?
                     <FormattedText
                         text={group_message.formatted_text}
@@ -71,6 +62,36 @@ const GroupMessageCard = ({group_message, mine, player, width, onSelectImage, on
                     : group_message.message ?
                     <Text size={12} color={Colors.text.white}>{group_message.message}</Text>
                     :<></>}
+                    {url ?
+                    <View transparent style={{ marginTop:10 }}>
+                        <UrlPreviewCard
+                            url={url}
+                            max_height={120}
+                            width={width - 120}
+                            color={Colors.text.white}
+                        />
+                    </View>
+                    :<></>}
+                    {image ?
+                    <ImageRenderer
+                        image={image}
+                        width={width - 120}
+                        onSelectImage={onSelectImage}
+                    />
+                    :<></>}
+                    {player && orders && orders.length > 0 ?
+                    <View float style={{ padding:4, marginTop:10 }}>
+                        <SocialOrdersList
+                            orders={orders}
+                            onCopyOrder={onCopyOrder}
+                            onFadeOrder={onFadeOrder}
+                            maxWidth={width - 120}
+                            players={[player]}
+                            direction='horizontal'
+
+                        />
+                    </View>
+                    :<></>}
                 </View>
                 {!mine ?
                 <View transparent />

package/src/SocialComponents/GroupChat/index.tsx

@@ -1,62 +1,71 @@
 import React from 'react';
 import moment from "moment-mini";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { ActivityIndicator, FlatList, Image } from "react-native"
 import { useColors } from "../../constants/useColors";
-import type { GroupMessageProps, GroupPlayerProps, GroupProps, MyPlayerProps, PublicPlayerProps, TextTagProps } from "../../types";
+import type { GroupMessageProps, GroupPlayerProps, GroupProps, MyPlayerProps, OrderProps, PublicPlayerProps, TextTagProps } from "../../types";
 import { SocialComponentApi, SocialComponentHelpers } from "../api";
-import { Text, View } from "../../Components/Themed";
+import { Button, Text, View } from "../../Components/Themed";
 import GroupMessageCard from './components/GroupMessageCard';
 import InputBar from '../InputBar';
 import FormattedTextInput from '../FormattedTextInput';
 import SocketManager from '../../Socket';
+import SocialOrdersList from '../SocialOrdersList';
 
 type GroupChatProps = {
     group_id?:string,
     my_id?:string,
     player_id?:string,
     access_token?:string,
+    onClose?:() => void,
     width:number,
+    onCopyOrder?:(order:OrderProps) => void,
+    onFadeOrder?:(order:OrderProps) => void
+    insets?:{ top:number, bottom:number, left:number, right:number }
     distinct_id:string,
     onSelectTag: (tag:TextTagProps) => void,
     onSelectImage:(image: { url:string, height?:number, width?:number }) => void,
     onFocusPosition?:(position:{ height:number, width:number, x:number, y:number }) => void
 }
-
-const GroupChat = ({ my_id, player_id, width, group_id, access_token, distinct_id, onFocusPosition, onSelectImage, onSelectTag }:GroupChatProps) => {
+const sections = ['orders','input_bar','input']
+const GroupChat = ({ my_id, player_id, width, group_id, access_token, insets, distinct_id, onCopyOrder, onFadeOrder, onClose, onFocusPosition, onSelectImage, onSelectTag }:GroupChatProps) => {
     const Colors = useColors();
     const [ chat_size, setChatSize ] = useState({ height:0, width:0 });
     const [ show_input_bar, setShowInputBar ] = useState(false);
     const [ needs_reload, setNeedsReload ] = useState(false);
     const [ message_loading, setMessageLoading ] = useState(false);
     const [ socket_message, setSocketMessage ] = useState<GroupMessageProps|undefined>(undefined);
+    const [ draft_orders, setDraftOrders ] = useState<OrderProps[]>([]);
     const [ my_data, setMyData ] = useState<{
         me?: MyPlayerProps
     }>({});
     const { me } = my_data;
     const [ screen_data, setData ] = useState<{
         loading:boolean,
-        players:PublicPlayerProps[],
         group?:GroupProps,
         group_players:GroupPlayerProps[]
-    }>({
+    }>({ 
         loading:false,
-        players:[],
         group_players: []
     })
-    const { loading, players, group } = screen_data;
+    const { loading, group } = screen_data;
 
     const [ message_data, setMessageData ] = useState<{
         messages_loading:boolean,
-        messages: GroupMessageProps[]
+        messages: GroupMessageProps[],
+        players:PublicPlayerProps[],
+
+        orders:OrderProps[]
     }>({
         messages_loading: false,
-        messages:[]
+        messages:[],
+        players:[],
+        orders:[]
     });
-    const { messages } = message_data
+    const { messages, players, orders } = message_data
     const chat_ref = useRef(null);
 
-    const unique_dates = useMemo(() => [ ...new Set(messages.map(m => moment(m.create_datetime).format('MMM DD YYYY')))],[messages.length, socket_message]);
+    const unique_dates = [ ...new Set(messages.map(m => moment(m.create_datetime).format('MMM DD YYYY')))]
 
     useEffect(() => {
         SocialComponentApi.setEnvironment();
@@ -81,12 +90,19 @@ const GroupChat = ({ my_id, player_id, width, group_id, access_token, distinct_i
     }
 
     useEffect(() => {
-        if(!socket_message){ return }
+        if(!socket_message){ return } 
+        getNewData(socket_message)
+    },[socket_message]);
+
+    const getNewData = async(message:GroupMessageProps) => {
+        const new_resp = await SocialComponentHelpers.addDataToMessages([message]);
         setMessageData({
             ...message_data,
-            messages: messages.filter(m => m.group_message_id != socket_message.group_message_id).concat(socket_message)
-        })
-    },[socket_message]);
+            messages: messages.filter(m => m.group_message_id != message.group_message_id).concat(new_resp.group_messages),
+            players: players.filter(p => !new_resp.players.find(np => np.player_id == p.player_id)).concat(new_resp.players),
+            orders: orders.filter(p => !new_resp.orders.find(np => np.order_id == p.order_id)).concat(new_resp.orders),
+        });
+    }
 
     const chat_player = group?.type == 'direct' ? players.find(p => p.player_id == player_id) : undefined
 
@@ -96,16 +112,10 @@ const GroupChat = ({ my_id, player_id, width, group_id, access_token, distinct_i
         setMessageData({ ...message_data, messages_loading:true });
         const group_response = await SocialComponentApi.getChat(id);
         if(!group_response){ return setData({ ...screen_data, loading:false }) }
-        let player_ids:string[] = []
-        if(player_id){ player_ids.push(player_id) }
-        if(my_id){ player_ids.push(my_id) }
-        const players = await SocialComponentApi.getPlayersByIds(player_ids);
-
-        let group_messages_with_tags = await SocialComponentHelpers.addTagsToMessages(group_response.group_messages);
+        const gm_data = await SocialComponentHelpers.addDataToMessages(group_response.group_messages);
 
         setData({
             ...screen_data,
-            players: players,
             group: group_response.group,
             group_players: group_response.group_players,
             loading: false
@@ -113,7 +123,9 @@ const GroupChat = ({ my_id, player_id, width, group_id, access_token, distinct_i
         setMessageData({
             ...message_data,
             messages_loading:false,
-            messages: group_messages_with_tags
+            players: gm_data.players,
+            messages: gm_data.group_messages,
+            orders: gm_data.orders
         });
     }
 
@@ -122,13 +134,9 @@ const GroupChat = ({ my_id, player_id, width, group_id, access_token, distinct_i
         setMessageData({ ...message_data, messages_loading:true });
         const group_response = await SocialComponentApi.getGroupById(id);
         if(!group_response){ return setData({ ...screen_data, loading:false }) }
-        const players = await SocialComponentApi.getPlayersByIds(group_response.group_messages.map(p => p.player_id));
-
-        let group_messages_with_tags = await SocialComponentHelpers.addTagsToMessages(group_response.group_messages);
-
+        const gm_data = await SocialComponentHelpers.addDataToMessages(group_response.group_messages);
         setData({
             ...screen_data,
-            players: players,
             group: group_response.group,
             group_players: group_response.group_players,
             loading: false
@@ -136,7 +144,9 @@ const GroupChat = ({ my_id, player_id, width, group_id, access_token, distinct_i
         setMessageData({
             ...message_data,
             messages_loading:false,
-            messages: group_messages_with_tags
+            players: gm_data.players,
+            messages: gm_data.group_messages,
+            orders: gm_data.orders
         });
     }
 
@@ -181,6 +191,7 @@ const GroupChat = ({ my_id, player_id, width, group_id, access_token, distinct_i
             tags: tags.map(t => { return { ...t, data:undefined } }), //Drop the data!
             group_id: group.group_id,
             message_urls: message_urls,
+            message_orders:draft_orders.map(o => o.order_id),
             message: data.text 
         });
         if(!gm){
@@ -197,6 +208,7 @@ const GroupChat = ({ my_id, player_id, width, group_id, access_token, distinct_i
     const renderMessages = (data:{item:GroupMessageProps, index:number}) => {
         const player = players.find(p => p.player_id == data.item.player_id)
         const mine = player?.player_id == me?.player_id ? true: false
+        let post_orders = data.item.message_orders ? orders.filter(o => data.item.message_orders?.includes(o.order_id)) : []
         return (
             <View style={{ margin:5 }}>
                 <GroupMessageCard
@@ -204,10 +216,14 @@ const GroupChat = ({ my_id, player_id, width, group_id, access_token, distinct_i
                     me={me}
                     width={chat_size.width}
                     mine={mine}
+                    onCopyOrder={onCopyOrder}
+                    onFadeOrder={onFadeOrder}
+                    orders={post_orders}
                     onSelectImage={onSelectImage}
                     group_message={data.item}
                     onSelectTag={onSelectTag}
                 />
+
             </View>
         )
     }
@@ -230,13 +246,60 @@ const GroupChat = ({ my_id, player_id, width, group_id, access_token, distinct_i
         )
     }
 
+
+    const renderSections = (data: { item:string, index:number }) => {
+        switch(data.item){
+            case 'orders':
+                if(draft_orders.length == 0){ return <></> }
+                return (
+                    <View >
+                        <SocialOrdersList
+                            players={players}
+                            orders={draft_orders}
+                            onUntagOrder={(order) => setDraftOrders(draft_orders.filter(o => o.order_id != order.order_id))}
+                            direction='horizontal'
+                        />
+                    </View>
+                )
+            case 'input_bar':
+                if(!show_input_bar){ return <></> }
+                return (
+                    <View type='header' style={{ padding:5 }}>
+                        <InputBar
+                            actions={['image','action']}
+                            width={width}
+                            insets={insets}
+                            onTagOrder={(order) => {
+                                setDraftOrders(draft_orders.filter(o => o.order_id != order.order_id).concat(order))
+                            }}
+                            onImageUpload={(image) => handleSendImage(image)}
+                        />
+                    </View>
+                )
+            case 'input':
+                return (
+                    <View type='footer' style={{ padding:5, paddingBottom:(insets?.bottom ?? 0) + 5 }}>
+                        <FormattedTextInput
+                            submit_placement='inline'
+                            icon_submit
+                            width={chat_size.width}
+                            onSelectInput={() => setShowInputBar(!show_input_bar)}
+                            onSubmit={(data, tags) => handleSendMessage(data, tags)}
+                            onFocusPosition={onFocusPosition}
+                        />
+                    </View>
+                )
+            default: return <></>
+        }
+    }
+
     return (
         <View style={{ flex:1 }} onLayout={(ev) => {
             const { height, width } = ev.nativeEvent.layout;
             setChatSize({ height, width });
         }}>
             {group?.type == 'direct' && chat_player ?
-            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, paddingTop:(insets?.top ?? 0) + 10 }}>
                 <View transparent>
                     <Image
                         source={{ uri: chat_player.profile_pic }}
@@ -248,9 +311,18 @@ const GroupChat = ({ my_id, player_id, width, group_id, access_token, distinct_i
                     <Text theme="h1">@{chat_player.username}</Text>
                     <Text style={{ marginTop:3 }} theme="description">Joined {moment(chat_player.create_datetime).fromNow()}</Text>
                 </View>
+                {onClose ?
+                <Button
+                    type="close"
+                    title="X"
+                    float
+                    style={{ padding:0, borderRadius:100, justifyContent:'center', alignItems:'center', height:30, width:30 }}
+                    onPress={() => onClose()}
+                />
+                :<></>}
             </View>
             :group ?
-            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, paddingTop:(insets?.top ?? 0) + 10 }}>
                 <View transparent>
                     <Image
                         source={{ uri: group.group_image?.url }}
@@ -262,6 +334,15 @@ const GroupChat = ({ my_id, player_id, width, group_id, access_token, distinct_i
                     <Text theme="h1">{group.name}</Text>
                     <Text style={{ marginTop:3 }} theme="description">{moment(group.last_update_datetime).format('YYYY MM DD')}</Text>
                 </View>
+                {onClose ?
+                <Button
+                    type="close"
+                    title="X"
+                    float
+                    style={{ padding:0, borderRadius:100, justifyContent:'center', alignItems:'center', height:30, width:30 }}
+                    onPress={() => onClose()}
+                />
+                :<></>}
             </View>
             :<></>}
             <View style={{ flex:1 }}>
@@ -274,25 +355,14 @@ const GroupChat = ({ my_id, player_id, width, group_id, access_token, distinct_i
                     key={`chat_${group_id}dates`}
                     keyExtractor={(item) => item}
                 />
-                
-            </View>
-            {show_input_bar ?
-            <View type='header' style={{ padding:5 }}>
-                <InputBar
-                    actions={['image']}
-                    width={200}
-                    onImageUpload={(image) => handleSendImage(image)}
-                />
             </View>
-            :<></>}
-            <View type='footer' style={{ padding:5 }}>
-                <FormattedTextInput
-                    submit_placement='inline'
-                    icon_submit
-                    width={width}
-                    onSelectInput={() => setShowInputBar(!show_input_bar)}
-                    onSubmit={(data, tags) => handleSendMessage(data, tags)}
-                    onFocusPosition={onFocusPosition}
+            <View>
+                <FlatList
+                    data={sections}
+                    key={'chat_sections'}
+                    scrollEnabled={false}
+                    keyExtractor={item => item}
+                    renderItem={renderSections}
                 />
             </View>
             {group ?

package/src/SocialComponents/InputBar/components/ActionSelector.tsx

@@ -78,6 +78,7 @@ const ActionSelector = ({ visible, insets, onClose, onTagOrder }:ActionSelectPro
             <View transparent style={{ margin:5, borderWidth:tagged?2:0, borderColor:Colors.text.success}}>
                 <SocialOrderCard
                     order={data.item}
+                    
                     league={league}
                     onTagOrder={(order) => {
                         if(tagged){

package/src/SocialComponents/SocialOrderCard.tsx

@@ -16,13 +16,14 @@ type SocialOrderCardProps = {
     order:OrderProps,
     athlete?:AthleteProps,
     maxWidth?:number,
+    hide_contest?:boolean,
     team?:TeamProps,
     league?:LeagueProps,
     onTagOrder?:(order:OrderProps) => void,
     onCopyOrder?:(order:OrderProps) => void,
     onFadeOrder?:(order:OrderProps) => void
 }
-const SocialOrderCard = ({ player, show_player, maxWidth, league, team, athlete, order, contest_title, contest_time, onTagOrder, onCopyOrder, onFadeOrder }:SocialOrderCardProps) => {
+const SocialOrderCard = ({ player, show_player, hide_contest, maxWidth, league, team, athlete, order, contest_title, contest_time, onTagOrder, onCopyOrder, onFadeOrder }:SocialOrderCardProps) => {
     const Colors = useColors();
     const [ fade_loading, setFadeLoading ] = useState(false);
     const { result_label, color } = SocialOrderHelpers.getResultDetails(order)
@@ -65,9 +66,10 @@ const SocialOrderCard = ({ player, show_player, maxWidth, league, team, athlete,
                 <Text size={14} color={color} weight='bold'>{result_label}</Text>
             </View>
             :<></>}
+            {!hide_contest ?
             <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
                 <View transparent style={{ flex:1, marginRight:10 }}>
-                    <Text theme='description'>{contest_title}</Text>
+                    <Text theme='description' style={{ flex:1 }}>{contest_title}</Text>
                     <Text style={{ marginTop:3 }} size={12} theme='light' weight='regular'>{contest_time}</Text>
                 </View>
                 {league ?
@@ -82,7 +84,8 @@ const SocialOrderCard = ({ player, show_player, maxWidth, league, team, athlete,
                 </View>
                 }
             </View>
-            <View type='body' style={{ padding:10 }}>
+            :<></>}
+            <View type='body' transparent style={{ padding:10 }}>
                 <View transparent type='row' style={{ padding:5 }}>
                     {team ?
                     <Image