be-components 6.9.3 → 6.9.5

package/lib/typescript/src/Wallet/index.d.ts

@@ -1,7 +1,10 @@
 import React from 'react';
+import { type ViewStyle } from 'react-native';
 import type { BEEventProps, FocusPositionProps, ItemOrderProps, PlayerBalanceProps } from '../types';
 type MyWalletProps = {
     account_id?: string;
+    header_style?: ViewStyle;
+    footer_style?: ViewStyle;
     new_balance?: PlayerBalanceProps;
     height?: number;
     view_mode?: 'desktop' | 'mobile';
@@ -16,6 +19,6 @@ type MyWalletProps = {
     onEvent: (event: BEEventProps) => void;
     onTransact: (item_order: ItemOrderProps, account_id?: string) => void;
 };
-declare const MyWallet: ({ height, new_balance, account_id, view_mode, insets, onFocusPosition, onTransact, onClose, onEvent }: MyWalletProps) => React.JSX.Element;
+declare const MyWallet: ({ height, new_balance, account_id, view_mode, insets, header_style, footer_style, onFocusPosition, onTransact, onClose, onEvent }: MyWalletProps) => React.JSX.Element;
 export default MyWallet;
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/Wallet/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Wallet/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,OAAO,KAAK,EAAgB,YAAY,EAAoB,kBAAkB,EAAE,cAAc,EAAgD,kBAAkB,EAAiJ,MAAM,UAAU,CAAC;AAuBlU,KAAK,aAAa,GAAG;IACjB,UAAU,CAAC,EAAC,MAAM,CAAC;IACnB,WAAW,CAAC,EAAC,kBAAkB,CAAC;IAChC,MAAM,CAAC,EAAC,MAAM,CAAC;IACf,SAAS,CAAC,EAAC,SAAS,GAAC,QAAQ,CAAC;IAC9B,MAAM,CAAC,EAAC;QAAE,GAAG,EAAC,MAAM,CAAC;QAAC,MAAM,EAAC,MAAM,CAAC;QAAC,IAAI,EAAC,MAAM,CAAC;QAAC,KAAK,EAAC,MAAM,CAAA;KAAE,CAAC;IACjE,eAAe,CAAC,EAAC,CAAC,GAAG,EAAC,kBAAkB,KAAK,IAAI,CAAC;IAClD,OAAO,EAAC,MAAM,IAAI,CAAC;IACnB,OAAO,EAAC,CAAC,KAAK,EAAC,YAAY,KAAK,IAAI,CAAA;IACpC,UAAU,EAAE,CAAC,UAAU,EAAC,cAAc,EAAE,UAAU,CAAC,EAAC,MAAM,KAAK,IAAI,CAAA;CACtE,CAAA;AAED,QAAA,MAAM,QAAQ,GAAI,uGAAsG,aAAa,sBA2iBpI,CAAA;AAED,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Wallet/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAG3E,OAAO,KAAK,EAAgB,YAAY,EAAoB,kBAAkB,EAAE,cAAc,EAAgD,kBAAkB,EAAiJ,MAAM,UAAU,CAAC;AAuBlU,KAAK,aAAa,GAAG;IACjB,UAAU,CAAC,EAAC,MAAM,CAAC;IACnB,YAAY,CAAC,EAAC,SAAS,CAAC;IACxB,YAAY,CAAC,EAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAC,kBAAkB,CAAC;IAChC,MAAM,CAAC,EAAC,MAAM,CAAC;IACf,SAAS,CAAC,EAAC,SAAS,GAAC,QAAQ,CAAC;IAC9B,MAAM,CAAC,EAAC;QAAE,GAAG,EAAC,MAAM,CAAC;QAAC,MAAM,EAAC,MAAM,CAAC;QAAC,IAAI,EAAC,MAAM,CAAC;QAAC,KAAK,EAAC,MAAM,CAAA;KAAE,CAAC;IACjE,eAAe,CAAC,EAAC,CAAC,GAAG,EAAC,kBAAkB,KAAK,IAAI,CAAC;IAClD,OAAO,EAAC,MAAM,IAAI,CAAC;IACnB,OAAO,EAAC,CAAC,KAAK,EAAC,YAAY,KAAK,IAAI,CAAA;IACpC,UAAU,EAAE,CAAC,UAAU,EAAC,cAAc,EAAE,UAAU,CAAC,EAAC,MAAM,KAAK,IAAI,CAAA;CACtE,CAAA;AAED,QAAA,MAAM,QAAQ,GAAI,mIAAkI,aAAa,sBA2iBhK,CAAA;AAED,eAAe,QAAQ,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "be-components",
-  "version": "6.9.3",
+  "version": "6.9.5",
   "description": "Components for BettorEdge Apps",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/CompetitionManager/components/CompetitionContestsForm.tsx

@@ -65,9 +65,8 @@ const CompetitionContestsForm = ({
     const [ active_contest_type ] = useState('team');
     const [ expanded_contests, setExpandedContests ] = useState<string[]>([]);
 
-    const unique_team_events = [ ...new Set(competition_matches.filter(cm => cm.status == 'inprogress' && cm.event_type == 'team').map(cm => cm.event_id)) ]
+    const unique_team_events = [ ...new Set(competition_matches.filter(cm => ['inprogress', 'pending'].includes(cm.status) && cm.event_type == 'team').map(cm => cm.event_id)) ]
     const append_to_events = competition.linked_event_ids && competition.linked_event_ids.length == unique_team_events.length ? true : false 
-
     const renderPrimaryMarkets = (data: { item:{ market:MarketProps, included:boolean }, index:number }) => {
         return (
             <View float style={{ padding:10, width:100, borderRadius:8,  margin:5 }}>

package/src/Components/AutoPageFlatList.tsx

@@ -9,7 +9,7 @@ import Pagination from './Pagination';
 interface AutoPageFlatListProps<T> {
   data: T[];
   reset_key:string,
-  renderItem: ({ item }: { item: T }) => JSX.Element;
+  renderItem: ({ item, index }: { item: T, index:number }) => JSX.Element;
   horizontal?: boolean;
   time_on_page?: number; // seconds
   itemHeight?: number;   // required for vertical paging

package/src/FlashMarket/FlashHolder.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Button, Text, View } from "../Components/Themed"
 import { FlashMarketApi } from './api';
 import type { FlashMarketFeeProps, LocationProps, MyPlayerProps, PollCampaignProps, PollOptionProps, PollProps, PollSummaryProps } from '../types';
@@ -29,6 +29,7 @@ type FlashHolderProps = {
     no_highlight?:boolean,
     location?:LocationProps,
     side_id?:string,
+    default_poll_id?:string,
     poll_id?:string,
     onSelectCompactPoll?:(poll_id:string) => void,
     onRequestLocation:() => void,
@@ -36,7 +37,7 @@ type FlashHolderProps = {
     onRequestAuthenticate: () => void
 }
 const sections = [ 'selector','explainer','flash_market','options','footer' ]
-const FlashHolder = ({ float, company_id, compact, style, hide_timer, distinct_id, hide_footer, no_highlight, hide_tabs, parent_style, league_id, init_expanded, player_id, player, location, contest_type, contest_id, side_type, side_id, poll_id, onSelectCompactPoll, onRequestAuthenticate, onFocusPosition, onRequestLocation } : FlashHolderProps) => {
+const FlashHolder = ({ float, company_id, compact, style, default_poll_id, hide_timer, distinct_id, hide_footer, no_highlight, hide_tabs, parent_style, league_id, init_expanded, player_id, player, location, contest_type, contest_id, side_type, side_id, poll_id, onSelectCompactPoll, onRequestAuthenticate, onFocusPosition, onRequestLocation } : FlashHolderProps) => {
     const Colors = useColors();
     const [ needs_reload, setNeedsReload ] = useState(false);
     const [ socket_campaigns, setSocketCampaigns ] = useState<PollCampaignProps[]>([]);
@@ -62,7 +63,7 @@ const FlashHolder = ({ float, company_id, compact, style, hide_timer, distinct_i
         flash_market_fees:[]
     }); 
     const { loading, poll_options, poll_summaries, poll_campaign, flash_market_fees } = market_data;
-
+    const flashRef = useRef<any>(null);
     const [ flash_data, setFlashData ] = useState<{
         holder_loading:boolean,
         loaded:boolean,
@@ -75,6 +76,7 @@ const FlashHolder = ({ float, company_id, compact, style, hide_timer, distinct_i
     const { holder_loading, flash_markets, loaded } = flash_data;
     const [ active_flash_market, setActiveFlashMarket ] = useState<string | undefined>(undefined);
     const flash_market = flash_markets.find(fm => fm.poll_id == active_flash_market);
+    const sorted_flashes = flash_markets.sort((a,b) => moment(a.end_datetime).unix() - moment(b.end_datetime).unix() || parseInt(a.poll_id) - parseInt(b.poll_id))
 
     useEffect(() => {
         loadData();
@@ -85,6 +87,8 @@ const FlashHolder = ({ float, company_id, compact, style, hide_timer, distinct_i
         if(compact){ return } //We dont do any polls if compacted
         let expiring_poll = flash_markets.sort((a,b) => moment(a.end_datetime).unix() - moment(b.end_datetime).unix() || parseInt(a.poll_id) - parseInt(b.poll_id))[0]
         if(poll_id){ return }
+        let default_poll = flash_markets.find(fm => fm.poll_id == default_poll_id);
+        if(default_poll){ handleSelectPoll(default_poll.poll_id); return }//Return out if we have this!
         if(expiring_poll){ handleSelectPoll(expiring_poll.poll_id) }
     },[loaded])
 
@@ -143,6 +147,14 @@ const FlashHolder = ({ float, company_id, compact, style, hide_timer, distinct_i
         if(selected && !options?.reload){ return setActiveFlashMarket(undefined) }
         loadMarket(poll_id);
         setActiveFlashMarket(poll_id);
+
+        let active_flash_index = sorted_flashes.findIndex(d => d.poll_id === poll_id);
+        if(flashRef && active_flash_index > 0){
+            setTimeout(() => {
+                flashRef.current?.scrollToIndex({ animated: true, index: active_flash_index - 1 });
+            }, 250);      
+        }
+
     }
     
 
@@ -157,7 +169,8 @@ const FlashHolder = ({ float, company_id, compact, style, hide_timer, distinct_i
 
         let found_polls:PollProps[] = []
         if(company_id){
-            found_polls = await FlashMarketApi.getActiveMarkets(company_id);
+            let resp = await FlashMarketApi.getActiveMarkets(company_id);
+            found_polls = resp.polls
         } else if(league_id || contest_type || contest_id || side_type || side_id){
             found_polls = await FlashMarketApi.getActiveLinkedFlashMarkets(league_id, contest_type, contest_id, side_type, side_id);
         } else {
@@ -233,8 +246,9 @@ const FlashHolder = ({ float, company_id, compact, style, hide_timer, distinct_i
                         <View transparent style={{ flex:1 }}>
                             <FlatList
                                 key={'poll_selector'}
+                                ref={flashRef}
                                 keyExtractor={(item) => item.poll_id.toString()}
-                                data={flash_markets.sort((a,b) => moment(a.end_datetime).unix() - moment(b.end_datetime).unix() || parseInt(a.poll_id) - parseInt(b.poll_id))}
+                                data={sorted_flashes}
                                 horizontal
                                 renderItem={renderFlashes}
                             />

package/src/FlashMarket/api/index.ts

@@ -38,12 +38,12 @@ const FlashMarketApi = {
             return []
         }
     },
-    getActiveMarkets: async(company_id?:string):Promise<PollProps[]> => {
+    getActiveMarkets: async(company_id?:string):Promise<{polls:PollProps[], poll_campaigns:PollCampaignProps[]}> => {
         try {
             const resp = await axios.get(`${AUTH_SVC_API}/v2/pm/active?company_id=${company_id}`);
-            return resp.data.polls
+            return resp.data
         } catch (e) {
-            return []
+            return { polls: [], poll_campaigns: [] }
         }
     },
     getActiveLinkedFlashMarkets: async(league_id?:string, contest_type?:string, contest_id?:string, side_type?:string, side_id?:string):Promise<PollProps[]> => {

package/src/FlashMarket/index.tsx

@@ -4,7 +4,7 @@ import type { FlashMarketFeeProps, LocationProps, MyPlayerProps, PollCampaignPro
 import { FlashAdminApi, FlashMarketApi, FlashMarketHelpers } from './api';
 import { Checkbox, Icons } from '../Components';
 import { useColors } from '../constants/useColors';
-import { ActivityIndicator, Alert, FlatList, Image } from 'react-native';
+import { ActivityIndicator, Alert, FlatList, Image, type ViewStyle } from 'react-native';
 import FlashMarketHelp from './components/FlashMarketHelp';
 import moment from 'moment-mini';
 import MarketTimer from './components/MarketTimer';
@@ -22,9 +22,9 @@ type FlashMarketProps = {
     init_expanded?:boolean,
     hide_timer?:boolean,
     onReload:() => void,
-    header_style?:any,
+    header_style?:ViewStyle,
     hide_footer?:boolean,
-    footer_style?:any,
+    footer_style?:ViewStyle,
     player_id?:string
     player?:MyPlayerProps,
     onRequestLocation:() => void,

package/src/SocialComponents/ActivityDetail/components/PostCommentCard.tsx

@@ -0,0 +1,101 @@
+import React, { useState } from 'react';
+import { Text, View } from "../../../Components/Themed";
+import { useColors } from "../../../constants/useColors";
+import type { MyPlayerProps, OrderProps, PostCommentProps, 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 PostCommentCardProps = {
+    post_comment:PostCommentProps,
+    me?:MyPlayerProps,
+    orders:OrderProps[],
+    player?:PublicPlayerProps,
+    mine?:boolean,
+    onCopyOrder?:(order:OrderProps) => void,
+    onFadeOrder?:(order:OrderProps) => void,
+    onSelectImage:(image:{ url:string, height?:number, width?:number }) => void,
+    onSelectTag:(tag:TextTagProps) => void
+}
+const MAX_IMAGE_WIDTH = 400
+const PostCommentCard = ({post_comment, orders, player, onSelectImage, onSelectTag, onCopyOrder, onFadeOrder}:PostCommentCardProps) => {
+    const [ comment_size, setCommentSize ] = useState({ width:0 })
+    const Colors = useColors();
+    const image = post_comment.comment_images ? post_comment.comment_images[0] : undefined
+    const url = post_comment.comment_urls ? post_comment.comment_urls[0] : undefined
+    const image_width = comment_size.width > 400 ? MAX_IMAGE_WIDTH : comment_size.width
+    return (
+        <View transparent style={{ flexDirection:'row', alignItems:'flex-start', padding:10, borderBottomWidth:1, borderColor:Colors.borders.light }}>
+            <View float style={{ borderRadius:100, padding:2 }}>
+                <Image
+                    source={{ uri:player?.profile_pic }}
+                    style={{ height:36, width:36, borderRadius:100 }}
+                    resizeMode='cover'
+                />
+            </View>
+            <View style={{ flex:1, marginLeft:10 }} onLayout={(ev) => {
+                const { width } = ev.nativeEvent.layout
+                setCommentSize({ width })
+            }}>
+                <View type='row'>
+                    <Text theme='h2' style={{ flex:1, marginRight:10 }}>@{player?.username ?? 'Anonymous'}</Text>
+                    <Text theme='light' style={{ marginTop:3 }}>Delivered {moment(post_comment.create_datetime).format('hh:mm a')}</Text>
+                </View>
+                <View type='body' style={{ marginTop:5 }}>
+                    <View transparent nativeID='comment'>
+                        {post_comment.formatted_text ?
+                        <FormattedText
+                            text={post_comment.formatted_text}
+                            tags={post_comment.tags ?? []}
+                            text_color={Colors.text.h1}
+                            onSelectTag={(tag) => onSelectTag(tag)}
+                        />
+                        : post_comment.message ?
+                        <Text size={12} theme='h2'>{post_comment.message}</Text>
+                        :<></>}
+                    </View>
+                {image ?
+                <View transparent style={{ justifyContent:'center', alignItems:'center', marginTop:10 }}>
+                    <ImageRenderer
+                        image={image}
+                        width={image_width}
+                        max_height={300}
+                        onSelectImage={onSelectImage}
+                    />
+                </View>
+                :<></>}
+                {url ?
+                <View transparent style={{ justifyContent:'center', alignItems:'center', marginTop:10 }}>
+                 <UrlPreviewCard
+                    url={url}
+                    max_height={120}
+                    width={comment_size.width}
+                    color={Colors.text.white}
+                />
+                </View>
+                :<></>}
+                {player && orders && orders.length > 0 ?
+                <View float style={{ padding:4, marginTop:10 }}>
+                    <SocialOrdersList
+                        orders={orders}
+                        onCopyOrder={onCopyOrder}
+                        onFadeOrder={onFadeOrder}
+                        maxWidth={comment_size.width}
+                        players={[player]}
+                        direction='horizontal'
+                        
+
+                    />
+                </View>
+                :<></>}
+            </View>
+            </View>
+            
+        </View>
+    )
+}
+
+export default PostCommentCard

package/src/SocialComponents/ActivityDetail/index.tsx

@@ -0,0 +1,283 @@
+import React, { useEffect, useState } from 'react'
+import { Text, View } from "../../Components/Themed"
+import type { ArticleProps, FocusPositionProps, MyPlayerProps, OrderProps, PostCommentProps, PostProps, PublicPlayerProps, TextTagProps } from "../../types"
+import { SocialComponentApi, SocialComponentHelpers } from '../api'
+import { ActivityIndicator, FlatList } from 'react-native'
+import PostCard from '../PostCard'
+import FormattedTextInput from '../FormattedTextInput'
+import InputBar from '../InputBar'
+import moment from 'moment-mini'
+import PostCommentCard from './components/PostCommentCard'
+import SocialOrdersList from '../SocialOrdersList'
+import SocketManager from '../../Socket'
+import { useColors } from '../../constants/useColors'
+
+type ActivityDetailProps = {
+    post_id:string,
+    me?:MyPlayerProps,
+    onSelectTag:(t:TextTagProps) => void,
+    onCopyOrder?:(o:OrderProps) => void,
+    onFadeOrder?:(o:OrderProps) => void,
+    onSelectPlayer:(p:PublicPlayerProps) => void,
+    onSelectArticle:(a:ArticleProps) => void,
+    onSelectImage:(i:any) => void,
+
+    onFocusPosition?:(pos:FocusPositionProps) => void
+}
+const sections = ['post','comments']
+const ActivityDetail = ({ post_id, me, onFocusPosition, onSelectArticle, onSelectImage, onSelectTag, onCopyOrder, onFadeOrder, onSelectPlayer }:ActivityDetailProps) => {
+    const Colors = useColors();
+    const [size, setSize] = useState({ width:0, height:0 });
+    const [ show_input_bar, setShowInputBar ] = useState(false);
+    const [ needs_reload, setNeedsReload ] = useState(false);
+    const [ socket_comment, setSocketComment ] = useState<PostCommentProps|undefined>(undefined);
+    const [ post_refresh_key, setPostRefreshKey ] = useState(moment().toString())
+    const [ comment_loading, setCommentLoading ] = useState(false);
+    const [ draft_orders, setDraftOrders ] = useState<OrderProps[]>([]);
+    const [ state, setState ] = useState<{
+        loading: boolean,
+        post?:PostProps,
+        orders:OrderProps[],
+        articles:ArticleProps[],
+        players:PublicPlayerProps[],
+        post_comments:PostCommentProps[],
+    }>({
+        loading:false,
+        post_comments:[],
+        articles:[],
+        orders:[],
+        players:[]
+    });
+    const { loading, post, post_comments, players, orders, articles } = state;
+    const sorted_comments = post_comments.sort((a,b) =>{
+        return moment(b.create_datetime).unix() - moment(a.create_datetime).unix()
+    })
+    useEffect(() => {
+        SocialComponentApi.setEnvironment();
+        getData(post_id)
+    },[post_id, me?.player_id]);
+
+    useEffect(() => {
+        if(!socket_comment){ return }
+        setState({
+            ...state,
+            post_comments: post_comments.filter(pc => pc.post_comment_id != socket_comment.post_comment_id).concat(socket_comment)
+        })
+    },[socket_comment?.post_comment_id])
+
+    const getData = async(id:string) => {
+        setState({ ...state, loading:true });
+        const server_post = await SocialComponentApi.getPostById(id, 'memo');
+        if(!server_post){ return alert('Unable to get activity at this time.  Please try again') }
+        const comments = await SocialComponentApi.getPostComments(id, 0);
+        let order_ids = server_post.memo_orders ?? []
+        let comment_orders:string[] = []
+        comments.filter(c => c.comment_orders).map(c => c.comment_orders?.map(o => comment_orders.push(o)))
+        let ser_orders = await SocialComponentApi.getBulkOrders(order_ids.concat(comment_orders));
+        let article_ids = server_post.memo_articles ?? []
+        let ser_articles = await SocialComponentApi.getBulkArticles(article_ids);
+        let player_ids = [ ...new Set(comments.map(c => c.player_id).concat(server_post.player_id)) ]
+        let ser_players = await SocialComponentApi.getPlayersByIds(player_ids);
+        setState({
+            ...state,
+            post: server_post,
+            post_comments: comments,
+            players: ser_players,
+            orders:ser_orders,
+            articles: ser_articles,
+            loading:false
+        });
+    }
+
+
+    const handleSendImage = async(image:any) => {
+            if(!post || comment_loading){ return }
+            setCommentLoading(true);
+            const new_comment = SocialComponentHelpers.getEmptyComment();
+            const pc = await SocialComponentApi.createComment({ 
+                ...new_comment, 
+                formatted_text: '',
+                activity_post_id: post_id,
+                tags: [],
+                comment_images: [image],
+                message: ''
+            });
+            if(!pc){
+                setCommentLoading(false);
+                return
+            }
+            setState({
+                ...state,
+                post_comments: post_comments.filter(m => m.post_comment_id != pc.post_comment_id).concat(pc)
+            })
+            setCommentLoading(false);
+        }
+
+    const handleSendComment = async(data: { formatted_text: string, text:string }, tags:TextTagProps[]) => {
+        if(!post || comment_loading){ return }
+        setCommentLoading(true);
+
+        //Find urls!
+        const url = SocialComponentHelpers.getUrlsFromString(data.text);
+        let message_urls:string[] = []
+        if(url){ message_urls.push(url) }
+        const new_comment = SocialComponentHelpers.getEmptyComment();
+        const pc = await SocialComponentApi.createComment({ 
+            ...new_comment, 
+            activity_post_id: post_id,
+            formatted_text: data.formatted_text,
+            tags: tags.map(t => { return { ...t, data:undefined } }), //Drop the data!
+            comment_urls: message_urls,
+            comment_orders:draft_orders.map(o => o.order_id),
+            message: data.text 
+        });
+        if(!pc){
+            setCommentLoading(false);
+            return
+        }
+        setDraftOrders([]);
+        setState({
+            ...state,
+            post_comments: post_comments.filter(m => m.post_comment_id != pc.post_comment_id).concat(pc)
+        })
+        setCommentLoading(false);
+    }
+
+    const renderComments = (data:{ item:PostCommentProps, index:number }) => {
+        const player = players.find(p => p.player_id == data.item.player_id);
+        const comment_orders = data.item.comment_orders ? orders.filter(o => data.item.comment_orders?.includes(o.order_id)): []
+        return (
+            <PostCommentCard
+                post_comment={data.item}
+                player={player}
+                orders={comment_orders}
+                onSelectImage={onSelectImage}
+                onSelectTag={onSelectTag}
+                onCopyOrder={onCopyOrder}
+                onFadeOrder={onFadeOrder}
+            />
+        )
+    }
+
+    const renderSections = (data:{ item:string, index:number }) => {
+        switch(data.item){
+            case 'post':
+                if(!post){ return <></> }
+                const player = players.find(p => p.player_id == post.player_id)
+                return (
+                    <PostCard
+                        post={post}
+                        refresh_key={post_refresh_key}
+                        width={size.width}
+                        //onViewComments={() => console.log('')}
+                        player={player}
+                        player_id={me?.player_id}
+                        articles={articles}
+                        orders={orders}
+                        onRequestAuthenticate={() => console.log('hey')}
+                        onSelectArticle={onSelectArticle}
+                        onSelectImage={onSelectImage}
+                        onSelectPlayer={onSelectPlayer}
+                        onSelectTag={onSelectTag}
+                    />
+                )
+            case 'comments':
+                return (
+                    <FlatList
+                        data={sorted_comments}
+                        renderItem={renderComments}
+                        key={'activity_comments_list'}
+                        keyExtractor={item => item.post_comment_id.toString()}
+                    />
+                )
+            default: return <></>
+        }
+    }
+
+    return (
+        <View style={{ flex:1 }} onLayout={(ev) => {
+            const { width, height } = ev.nativeEvent.layout
+            setSize({ width, height })
+        }}>
+            <View style={{ flex:1 }}>
+                {loading ?
+                <ActivityIndicator
+                    style={{ padding:10, alignSelf:'center' }}
+                    size={'large'}
+                    color={Colors.text.h1}
+                />
+                :<></>}
+                <FlatList
+                    data={sections}
+                    key={'activity_detail_list'}
+                    keyExtractor={item => item}
+                    renderItem={renderSections}
+                />
+            </View>
+            {show_input_bar?
+            <View type='header' style={{ padding:5 }}>
+                <InputBar
+                    actions={['image','action']}
+                    width={size.width}
+                    //insets={insets}
+                    onTagOrder={(order) => {
+                        setDraftOrders(draft_orders.filter(o => o.order_id != order.order_id).concat(order))
+                    }}
+                    onImageUpload={(image) => handleSendImage(image)}
+                />
+            </View>
+            :<></>}
+            {draft_orders.length > 0 ?
+            <View>
+                <Text theme='h2'>Tagged Orders</Text>
+                <SocialOrdersList
+                    players={players}
+                    orders={draft_orders}
+                    onUntagOrder={(order) => setDraftOrders(draft_orders.filter(o => o.order_id != order.order_id))}
+                    direction='horizontal'
+                />
+            </View>
+            :<></>}
+            <View type='footer' style={{ padding:5 }}>
+                <FormattedTextInput
+                    submit_placement='inline'
+                    icon_submit
+                    width={size.width}
+                    onSelectInput={() => setShowInputBar(!show_input_bar)}
+                    onSubmit={(data, tags) => handleSendComment(data, tags)}
+                    onFocusPosition={onFocusPosition}
+                />
+            </View>
+            <SocketManager
+                onConnect={() => {
+                    if(needs_reload){
+                        setPostRefreshKey(moment().toString());
+                        getData(post_id);
+                    }
+                }}
+                onDisconnect={() => setNeedsReload(true)}
+                subscribed_events={['V1_UPDATE_POST_COMMENT_STAT', 'V1_UPDATE_POST_REACTION_STATS','UPDATE_POST_COMMENT']}
+                onSocketEvent={(ev) => {
+                    switch(ev.type){
+                        case 'V1_UPDATE_POST_COMMENT_STAT':
+                            console.log('updated')
+                            setPostRefreshKey(moment().toString())
+                            break
+                        case 'V1_UPDATE_POST_REACTION_STATS':
+                            setPostRefreshKey(moment().toString())
+                            break
+                        case 'UPDATE_POST_COMMENT':
+                            const new_comment = ev.data as PostCommentProps
+                            if(new_comment.activity_post_id != post_id){ return }
+                            setSocketComment(new_comment)
+                            break
+                        default: return
+                    }
+                }}
+            
+            />
+        </View>
+    )
+}
+
+export default ActivityDetail

package/src/SocialComponents/FormattedTextInput/index.tsx

@@ -135,6 +135,7 @@ const FormattedTextInput = ({ width, disable_scroll, submit_title, hide_border,
 
     const handleChange = (ev:any) => {
         let text:string = JSON.stringify(ev.text)
+        if(text.length < 3 && input_state.height > 50){ setInputState({ ...input_state, height: 50 }) }
         setData({
             ...data,
             text: ev.text,
@@ -160,11 +161,11 @@ const FormattedTextInput = ({ width, disable_scroll, submit_title, hide_border,
             :<></>}
             <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()}>
-                    <Icons.MoreIcon size={24} color={Colors.text.h1} />
+                <Button float style={{ padding:15, width:45, marginRight:5, borderRadius:8, justifyContent:'center', alignItems:'center' }} onPress={() => onSelectInput()}>
+                    <Icons.MoreIcon size={18} color={Colors.text.h1} />
                 </Button>
                 :<></>}
-                <View type={hide_border?undefined:'input'} style={{ flex:1, flexDirection:'row' }}>
+                <View type={hide_border?undefined:'input'} style={{ flex:1, flexDirection:'row', marginLeft:4, marginRight:4 }}>
                     <TextInput
                         value={text}
                         editable={!action_loading}

package/src/SocialComponents/PostCard/components/PostReactionBar.tsx

@@ -51,7 +51,7 @@ const PostReactionBar = ({ post_id, loading, post_reaction_stats, my_post_reacti
         const my_reaction = my_post_reactions?.find(pr => pr.reaction === data.item.reaction)
         const selected = my_reaction?.status === 'visible' ? true : false
         return (
-            <Button style={ 
+            <Button transparent style={ 
                 reacted ? 
                 {  ...view_styles.float, marginBottom:5, marginLeft:data.index===0?0:-5, paddingRight:10, paddingLeft:5, flexDirection:'row', alignItems:'center', padding:2, borderRadius:100, backgroundColor:selected?Colors.text.success:Colors.text.white }
                 :