be-components 2.1.4 → 2.1.6

package/src/SocialComponents/PlayerProfile/index.tsx

@@ -13,10 +13,20 @@ import SocialOrdersList from '../SocialOrdersList';
 type PlayerProfileProps = {
     viewing_player_id:string,
     player_id?:string,
-    height?:number
+    height?:number,
+    onStartChat?:(player_id:string) => void,
+    onHeadToHead?: (player_id:string) => void,
+    onFadeOrder: (order:OrderProps) => void,
+    onCopyOrder:(order:OrderProps) => void,
+    onShareProfile?:(player_id:string) => void,
+    onSharePost?:(post_id:string) => void,
+    onViewPostComments:(post_id:string) => void,
+    onSelectPlayer:(player_id:string) => void,
+    onRequestAuthenticate:() => void,
+    onBack?:() => void
 }
 
-const PlayerProfile = ({ viewing_player_id, player_id, height }:PlayerProfileProps) => {
+const PlayerProfile = ({ viewing_player_id, player_id, height, onStartChat, onHeadToHead, onCopyOrder, onFadeOrder, onViewPostComments, onSelectPlayer, onRequestAuthenticate, onBack }:PlayerProfileProps) => {
     const [ module_size, setModuleSize ] = useState({ height:755, width:330 });
     const [ show_following, setShowFollowing ] = useState<{
         visible:boolean,
@@ -65,7 +75,7 @@ const PlayerProfile = ({ viewing_player_id, player_id, height }:PlayerProfilePro
     }>({
         loading:false,
         player_links:[],
-        active_toggle:'Posts'
+        active_toggle:'Activity'
     });
     const { player, active_toggle, player_links, player_follower_stats } = profile_data;
 
@@ -155,7 +165,7 @@ const PlayerProfile = ({ viewing_player_id, player_id, height }:PlayerProfilePro
                     width={120}
                     border
                     alignment='vertical'
-                    onSelectPlayer={() => console.log(data.item)}
+                    onSelectPlayer={(p) => onSelectPlayer(p.player_id)}
                     onFollowingUpdate={(pf) => console.log(pf)}
                 />
             </View>
@@ -195,7 +205,7 @@ const PlayerProfile = ({ viewing_player_id, player_id, height }:PlayerProfilePro
     }
 
     return (
-        <View style={{ flex:1 }} onLayout={(ev) => {
+        <View style={{ flex:1, backgroundColor:Colors.shades.black_faded, maxWidth:500 }} onLayout={(ev) => {
             const { height, width } = ev.nativeEvent.layout
             setModuleSize({ width, height });
         }}>
@@ -205,10 +215,11 @@ const PlayerProfile = ({ viewing_player_id, player_id, height }:PlayerProfilePro
                     style={{ width: module_size.width, height: module_size.width, borderBottomRightRadius:50, borderBottomLeftRadius:50 }}
                     resizeMode='cover'
                 />
+                
             </View>
             <ScrollView style={{ flex:1 }}>
-                <View style={{ ...view_styles.section, marginTop:module_size.width - 200 }}>
-                    <View style={{ ...view_styles.section_header, borderBottomWidth:0 }}>
+                <View style={{ ...view_styles.section, marginTop:module_size.width - 150 }}>
+                    <View style={{ ...view_styles.section_header }}>
                         <View style={{ flex:1 }}>
                             <Text theme='header'>{player.first_name} {player.last_name}</Text>
                             <Text style={{ marginTop:4 }} theme='body_2'>@{player.username}</Text>
@@ -222,31 +233,46 @@ const PlayerProfile = ({ viewing_player_id, player_id, height }:PlayerProfilePro
                             onPress={() => console.log('FOLLOW')}
                         />
                     </View>
-
-                    <View style={{ ...view_styles.section_body, padding:0 }}>
-                        <View style={{ ...view_styles.body_row, padding:10, borderTopWidth:1, borderColor:Colors.shades.shade600 }}>
-                            <Text theme='header_2' style={{flex:1}}>Engage With @{player.username}</Text>
-                            <Icons.ChatIcon  size={24} color={Colors.brand.midnight} />
-                        </View>
-                        <View style={{ padding:10, backgroundColor:Colors.shades.shade100 }}>
-                            <Text theme='body'>{player.bio && player.bio != '' ? player.bio : `${player.username} has not set a bio.`}</Text>
-                        </View>
+                    <View style={{ padding:10, backgroundColor:Colors.shades.shade100 }}>
+                        <Text theme='body'>{player.bio && player.bio != '' ? player.bio : `${player.username} has not set a bio.`}</Text>
                     </View>
-                    {player_links.length > 0 ?
-                    <View style={{ ...view_styles.section_footer }}>
-                        <View style={{ flex:1 }}>
-                            <Text theme='header_2'>Checkout my socials</Text>
-                        </View>
-                        <View style={{ alignSelf:'flex-end' }}>
-                            <FlatList
-                                data={player_links}
-                                renderItem={renderLinks}
-                                keyExtractor={(item) => item.player_link_id.toString()}
-                                horizontal
-                            />
+                    <View style={{ ...view_styles.section_header, borderBottomWidth:0 }}>
+                        <Text theme='header_2' style={{flex:1}}>Engage With @{player.username}</Text>
+                    </View>
+                    <View style={{ padding:5, paddingLeft:20, paddingRight:20, paddingTop:0 }}>
+                        {onStartChat ?
+                        <TouchableOpacity style={{ ...view_styles.body_row, padding:10, borderBottomWidth:1, borderColor:Colors.shades.shade600 }} onPress={() => onStartChat(viewing_player_id)}>
+                            <Text style={{ flex:1 }} theme='body'>Start a Chat</Text>
+                            <View style={{ height:30, width:30, borderRadius:4, backgroundColor:Colors.brand.electric, justifyContent:'center', alignItems:'center' }}>
+                                <Icons.ChatIcon size={22} color={Colors.shades.white} />
+                            </View>
+                        </TouchableOpacity>
+                        :<></>}
+                        {onHeadToHead ?
+                        <TouchableOpacity style={{ ...view_styles.body_row, padding:10, borderBottomWidth:1, borderColor:Colors.shades.shade600 }} onPress={() => onHeadToHead(viewing_player_id)}>
+                            <Text style={{ flex:1 }} theme='body'>Challenge Head to Head</Text>
+                            <View style={{ height:30, width:30, borderRadius:4, backgroundColor:Colors.utility.error, justifyContent:'center', alignItems:'center' }}>
+                                <Icons.HeadToHeadIcon size={22} color={Colors.shades.white} />
+                            </View>
+                        </TouchableOpacity>
+                        :<></>}
+                        {player_links.length > 0 ?
+                        <View style={{ ...view_styles.body_row, padding:10, paddingRight:5 }}>
+                            <View style={{ flex:1 }}>
+                                <Text theme='body'>Checkout Socials</Text>
+                            </View>
+                            <View style={{ alignSelf:'flex-end' }}>
+                                <FlatList
+                                    data={player_links}
+                                    renderItem={renderLinks}
+                                    keyExtractor={(item) => item.player_link_id.toString()}
+                                    horizontal
+                                />
+                            </View>
                         </View>
+                        :<></>}
                     </View>
-                    :<></>}
+                    
                 </View>
                 <View style={{ ...view_styles.section }}>
                     <View style={{ ...view_styles.section_header }}>
@@ -339,17 +365,31 @@ const PlayerProfile = ({ viewing_player_id, player_id, height }:PlayerProfilePro
                         <PostsList
                             viewing_player={player}
                             player_id={player_id}
+                            onRequestAuthenticate={onRequestAuthenticate}
+                            onCopyOrder={onCopyOrder}
+                            onFadeOrder={onFadeOrder}
+                            onViewComments={onViewPostComments}
                         />
                         :active_toggle == 'Activity' ?
                         <SocialOrdersList
+                            players={[player]}
                             orders={orders}
                             direction='vertical'
+                            onCopyOrder={onCopyOrder}
+                            onFadeOrder={onFadeOrder}
                         />
                         :<></>}
                         
                     </View>
                 </View>
             </ScrollView>
+            {onBack ?
+            <TouchableOpacity 
+                style={{ position:'absolute', top:0, left:0, ...view_styles.section, backgroundColor:Colors.shades.shade100, height:50, width:50, borderRadius:100, justifyContent:'center', alignItems:'center' }}
+                onPress={() => onBack()}>
+                <Icons.ChevronIcon direction='left' color={Colors.brand.midnight} size={14} />
+            </TouchableOpacity> 
+            :<></>}
             {show_following.visible ?
             <View style={{ position:'absolute', top:0, left:0, right:0, bottom:0, backgroundColor:Colors.shades.black_faded }}>
                 <Spring

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

@@ -0,0 +1,46 @@
+import React from 'react';
+import { FlatList, View, Image } from 'react-native';
+
+type ImageListProps = {
+    post_id:string,
+    images: any[],
+    width:number
+}
+const ImageList = ({ post_id, width, images }:ImageListProps) => {
+    
+    const resizeImage = (image:any) => {
+        let image_width = image.width ?? width
+        let image_height = image.height ?? width
+        const ratio = image_height / image_width
+        let new_width = width
+        let new_height = width * ratio
+        return { width: new_width, height: new_height }
+    }
+
+    const renderImages = (data: { item:any, index:number }) => {
+        const { width, height } = resizeImage(data.item);
+        return (
+            <View>
+                <Image
+                    source={{ uri:data.item.url }}
+                    style={{ width, height }}
+                    resizeMode='cover'
+                />
+            </View>
+        )
+    }
+
+    return (
+        <View>
+            <FlatList
+                key={`${post_id}_post_images`}
+                data={images}
+                horizontal
+                renderItem={renderImages}
+                keyExtractor={(item) => item.url}
+            />
+        </View>
+    )
+}
+
+export default ImageList

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

@@ -12,7 +12,7 @@ type PostHeaderProps = {
 
 const PostHeader = ({ player, post }:PostHeaderProps) => {
     return (
-        <View style={{ ...view_styles.section_header, padding:5 }}>
+        <View style={{ ...view_styles.section_header, paddingLeft:10, padding:10 }}>
             <Image
                 source={{ uri: player.profile_pic && player.profile_pic != '' ? player.profile_pic : 'https://res.cloudinary.com/hoabts6mc/image/upload/v1722453927/default_man_n96ofq.webp' }}
                 style={{ height:32, width:32, borderRadius:100 }}

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

@@ -1,15 +1,17 @@
 import React, { useState } from 'react';
-import { FlatList, View, TouchableOpacity } from "react-native"
+import { FlatList, View, TouchableOpacity, ActivityIndicator } from "react-native"
 import type { PostReactionProps, PostReactionStatsProps } from '../../../types';
 import { Button, Text } from '../../../Components';
 import Colors from '../../../constants/colors';
 import { view_styles } from '../../../constants/styles';
 
 type PostReactionBarProps = {
+    post_id:string,
     post_reaction_stats: PostReactionStatsProps[],
     my_post_reactions: PostReactionProps[],
     featured?:boolean,
-    onReactionSelect: (reaction:string) => void
+    loading?:boolean,
+    onReactionSelect: (post_reaction:PostReactionProps) => void
 }
 
 const available_reactions = [
@@ -23,11 +25,22 @@ const available_reactions = [
     { reaction: 'eyes', label: '👀' },
 ]
 
-const PostReactionBar = ({ post_reaction_stats, my_post_reactions, onReactionSelect }:PostReactionBarProps) => {
+const PostReactionBar = ({ post_id, loading, post_reaction_stats, my_post_reactions, onReactionSelect }:PostReactionBarProps) => {
     const [ more_selected, setMoreSelected ] = useState(false);
+
     const handleReaction = async(reaction:string) => {
         if(!onReactionSelect){ return }
-        onReactionSelect(reaction)
+        let existing_reaction = my_post_reactions.find(pr => pr.reaction == reaction)
+        onReactionSelect({
+            post_reaction_id:existing_reaction?.post_reaction_id ?? '',
+            post_type:'memo',
+            activity_post_id:post_id,
+            reaction,
+            status: existing_reaction ? 'hidden' : 'visible',
+            player_id: '',
+            create_datetime: '',
+            last_update_datetime:''
+        })
         setMoreSelected(false)
     }
 
@@ -53,7 +66,7 @@ const PostReactionBar = ({ post_reaction_stats, my_post_reactions, onReactionSel
 
     let visible_reactions = available_reactions
     if(post_reaction_stats.length > 0 && !more_selected){
-        visible_reactions = visible_reactions.filter(r => post_reaction_stats.find(pr => pr.reaction === r.reaction))
+        visible_reactions = visible_reactions.filter(r => post_reaction_stats.find(pr => pr.reaction === r.reaction && pr.reaction_count > 0))
     }
     return (
         <View style={{ flexDirection:'row', alignItems:'center' }}>
@@ -68,6 +81,11 @@ const PostReactionBar = ({ post_reaction_stats, my_post_reactions, onReactionSel
                 onPress={() => setMoreSelected(true)}
             />
             :<></>}
+            {loading ?
+            <View style={{ position:'absolute', top:0, left:0, right:0, bottom:0, justifyContent:'center', backgroundColor:Colors.shades.black_faded, borderRadius:22 }}>
+                <ActivityIndicator size='small' color={Colors.brand.midnight} />
+            </View>
+            :<></>}
         </View>
     )
 }

package/src/SocialComponents/PostCard/index.tsx

@@ -1,23 +1,30 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { View, TouchableOpacity } from 'react-native';
 import DraftTextViewer from './components/DraftTextViewer';
-import type { OrderProps, PostCommentStatProps, PostProps, PostReactionStatsProps, PublicPlayerProps } from '../../types';
+import type { OrderProps, PostCommentStatProps, PostProps, PostReactionProps, PostReactionStatsProps, PublicPlayerProps } from '../../types';
 import PostHeader from './components/PostHeader';
 import { view_styles } from '../../constants/styles';
 import { useIsInViewport } from '../../Components/ViewportObserver';
 import { SocialProfileApi } from '../PlayerProfile/api';
+
 import PostReactionBar from './components/PostReactionBar';
 import Colors from '../../constants/colors';
 import { Icons, Text } from '../../Components';
 import SocialOrdersList from '../SocialOrdersList';
+import ImageList from './components/ImageList';
+import { SocialComponentApi } from '../api';
 
 type PostCardProps = {
     post: PostProps,
     player:PublicPlayerProps,
     orders:OrderProps[],
-    player_id?:string
+    player_id?:string,
+    onRequestAuthenticate:() => void,
+    onCopyOrder?:(order:OrderProps) => void,
+    onFadeOrder?:(order:OrderProps) => void,
+    onViewComments:(post_id:string) => void
 }
-const PostCard = ({ post, player, orders }:PostCardProps) => {
+const PostCard = ({ player_id, post, player, orders, onRequestAuthenticate, onCopyOrder, onFadeOrder, onViewComments }:PostCardProps) => {
     const [ post_data, setPostData ] = useState<{
         loading:boolean,
         reactions_loaded:boolean,
@@ -30,7 +37,7 @@ const PostCard = ({ post, player, orders }:PostCardProps) => {
         post_reaction_stats: []
     })
     const { reactions_loaded, post_reaction_stats, post_comment_stat } = post_data;
-    /*
+    
     const [ my_data, setMyData ] = useState<{
         my_data_loading:boolean,
         my_reactions:PostReactionProps[]
@@ -38,37 +45,88 @@ const PostCard = ({ post, player, orders }:PostCardProps) => {
         my_data_loading:false,
         my_reactions:[]
     })
-    */
+    const { my_reactions, my_data_loading } = my_data;
     const post_ref = useRef();
     const is_in_viewport = useIsInViewport(post_ref);
 
     useEffect(() => {
         if(!is_in_viewport || reactions_loaded){ return }
         getPostReactionData();
-    },[is_in_viewport])
+        if(player_id){ getMyData(player_id) }
+    },[is_in_viewport]);
+
+    const getMyData = async(player_id:string) => {
+        setMyData({ ...my_data, my_data_loading: true });
+        const mr = await SocialProfileApi.getReactionsByPostAndPlayer(player_id, post.memo_post_id, 'memo');
+        setMyData({
+            ...my_data,
+            my_data_loading: false,
+            my_reactions: mr
+        })
+    }
 
     const getPostReactionData = async() => {
         setPostData({ ...post_data, loading: true });
         const pr_stats = await SocialProfileApi.getReactionStatsByPostId(post.memo_post_id, 'memo');
-        //const pc_stat = await SocialProfileApi.getCommentStatsByPostId(post.memo_post_id, 'memo');
+        const pc_stat = await SocialProfileApi.getCommentStatsByPostId(post.memo_post_id, 'memo');
         setPostData({
             ...post_data,
             reactions_loaded:true,
             loading: false,
-            post_reaction_stats: pr_stats
+            post_reaction_stats: pr_stats,
+            post_comment_stat: pc_stat ? pc_stat: post_comment_stat
         })
     }
 
+    const handleReaction = async(reaction:PostReactionProps) => {
+        if(!player_id){ return onRequestAuthenticate() }
+        setMyData({ ...my_data, my_data_loading: true });
+        if(reaction.status == 'visible'){
+            let new_reaction = await SocialComponentApi.createPostReaction(reaction);
+            if(!new_reaction){ return setMyData({ ...my_data, my_data_loading: false }) }
+            setMyData({ 
+                ...my_data, 
+                my_data_loading:false,
+                my_reactions: my_reactions.concat(new_reaction)
+            }) 
+            let reaction_stats = post_reaction_stats.find(s => s.reaction == reaction.reaction)
+            if(!reaction_stats){ reaction_stats = { activity_post_id: post.memo_post_id, reaction:reaction.reaction, reaction_count:1 } }
+            else { reaction_stats = { ...reaction_stats, reaction_count: reaction_stats.reaction_count + 1 } }
+            //IUpdate reaction stats
+            setPostData({
+                ...post_data,
+                post_reaction_stats: post_reaction_stats.filter(ps => ps.reaction != reaction.reaction).concat(reaction_stats)
+            })
+        } else {
+            let updated_reaction = await SocialComponentApi.updatePostReaction(reaction);
+            if(!updated_reaction){ return setMyData({ ...my_data, my_data_loading: false }) }
+            
+            setMyData({
+                ...my_data,
+                my_data_loading: false,
+                my_reactions: my_reactions.filter(r => r.post_reaction_id != updated_reaction.post_reaction_id)
+            })
+
+            let reaction_stats = post_reaction_stats.find(s => s.reaction == reaction.reaction)
+            if(!reaction_stats){ reaction_stats = { activity_post_id: post.memo_post_id, reaction:reaction.reaction, reaction_count:0 } }
+            else { reaction_stats = { ...reaction_stats, reaction_count: reaction_stats.reaction_count - 1 } }
+            setPostData({
+                ...post_data,
+                post_reaction_stats: post_reaction_stats.filter(ps => ps.reaction != reaction.reaction).concat(reaction_stats)
+            })
+        }
+    }
+
     return (
-        <View ref={post_ref as any} style={{ ...view_styles.section }}>
+        <View ref={post_ref as any} style={{ ...view_styles.section, padding:0, borderWidth:1, borderColor:Colors.shades.shade600 }}>
             <PostHeader 
                 player={player}
                 post={post}
             />
-            <View>
+            <View style={{  padding:10 }}>
                 <Text theme='header_2'>{post.title}</Text>
             </View>
-            <View style={{ ...view_styles.section_body }}>
+            <View style={{ padding:10, paddingTop:0, paddingBottom:0 }}>
                 <DraftTextViewer 
                     post_id={post.memo_post_id}
                     formatted_body={post.formatted_body}
@@ -78,21 +136,33 @@ const PostCard = ({ post, player, orders }:PostCardProps) => {
             </View>
             {post.memo_orders && post.memo_orders.length > 0 ?
             <SocialOrdersList
+                players={[player]}
                 orders={orders}
                 direction='horizontal'
+                onCopyOrder={onCopyOrder}
+                onFadeOrder={onFadeOrder}
+            />
+            :<></>}
+            {post.memo_images && post.memo_images.length > 0 ?
+            <ImageList
+                post_id={post.memo_post_id}
+                images={post.memo_images}
+                width={300}
             />
             :<></>}
             <View style={{ ...view_styles.section_footer, padding:5, backgroundColor:Colors.shades.white }}>
                 <View style={{}}>
                     <PostReactionBar
+                        loading={my_data_loading}
+                        post_id={post.memo_post_id}
                         post_reaction_stats={post_reaction_stats}
-                        my_post_reactions={[]}
-                        onReactionSelect={(r) => console.log(r)}
+                        my_post_reactions={my_reactions}
+                        onReactionSelect={(r) => handleReaction(r)}
                     />
                 </View>
                 <TouchableOpacity
                     style={{ flex:1, flexDirection:'row', alignItems:'center', justifyContent:'flex-end' }}
-                    onPress={() => console.log('SHOW ME THE COMMENTS')}
+                    onPress={() => onViewComments(post.memo_post_id)}
                 >
                     <Text style={{ marginRight:4 }} theme='header_2'>{post_comment_stat.comment_count}</Text>
                     <Icons.ChatIcon size={18} color={Colors.brand.midnight}/>

package/src/SocialComponents/SocialOrderCard.tsx

@@ -1,24 +1,74 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { View, Image } from 'react-native';
-import type { AthleteProps, LeagueProps, OrderProps, TeamProps } from '../types';
+import type { AthleteProps, LeagueProps, OrderProps, PublicPlayerProps, TeamProps } from '../types';
 import { view_styles } from '../constants/styles';
 import { Button, Icons, Text } from '../Components';
-import { SocialOrderHelpers } from './api';
+import { SocialComponentApi, SocialOrderHelpers } from './api';
 import Colors from '../constants/colors';
+import moment from 'moment-mini';
 
 type SocialOrderCardProps = {
+    player?:PublicPlayerProps,
+    show_player?:boolean,
     contest_title:string,
     contest_time:string,
     order:OrderProps,
     athlete?:AthleteProps,
     team?:TeamProps,
-    league?:LeagueProps
+    league?:LeagueProps,
+    onCopyOrder?:(order:OrderProps) => void,
+    onFadeOrder?:(order:OrderProps) => void
 }
-const SocialOrderCard = ({ league, team, order, contest_title, contest_time }:SocialOrderCardProps) => {
-
+const SocialOrderCard = ({ player, show_player, league, team, order, contest_title, contest_time, onCopyOrder, onFadeOrder }:SocialOrderCardProps) => {
+    const [ fade_loading, setFadeLoading ] = useState(false);
+    const { result_label, color } = SocialOrderHelpers.getResultDetails(order)
+    
+    const handleFadeOrder = async() => {
+        if(!onFadeOrder){ return }
+        if(fade_loading){ return }
+        setFadeLoading(true);
+        let reversed_order = await SocialComponentApi.reverseOrder(order);
+        if(!reversed_order){ return alert('Unable to fade this order at this time') }
+        onFadeOrder({
+            ...reversed_order, 
+            buy_sell_ind:'buy',
+            influencer_id: order.player_id,
+            influence_type: 'fade', 
+            selling_position_id:undefined, 
+            open_amt:10,
+            player_id:'', 
+            order_type: 'limit',
+            collar_pct: 0,
+            h2h_id:undefined,
+            order_id: '', 
+            called_amt: 0, 
+            potential_winnings: SocialOrderHelpers.calcPotentialWinnings(reversed_order.odds, 10) 
+        })
+        setFadeLoading(false);
+    }
+    
     return (
-        <View style={{ ...view_styles.section }}>
+        <View style={{ ...view_styles.section, minWidth:175, borderWidth:1, borderColor:Colors.shades.shade600 }}>
+            {show_player && player ?
+            <View style={{ ...view_styles.section_header, backgroundColor:Colors.shades.shade100 }}>
+                <Image
+                    source={{ uri: player.profile_pic && player.profile_pic != '' ? player.profile_pic : 'https://res.cloudinary.com/hoabts6mc/image/upload/v1722453927/default_man_n96ofq.webp' }}
+                    style={{ height:35, width:35, borderRadius:100 }}
+                    resizeMode='cover'
+                />
+                <View style={{ flex:1, marginLeft:10, marginRight:10 }}>
+                    <Text theme='header'>{player.first_name} {player.last_name}</Text>
+                    <Text theme='body_2' style={{ marginTop:3 }}>@{player.username}</Text>
+                </View>
+                <Text size={14} color={color} weight='bold'>{result_label}</Text>
+            </View>
+            :<></>}
             <View style={{ ...view_styles.section_header }}>
+                
+                <View style={{ flex:1, marginRight:10 }}>
+                    <Text theme='body_2'>{contest_title}</Text>
+                    <Text style={{ marginTop:3 }} size={12} color={Colors.brand.slate} weight='regular'>{contest_time}</Text>
+                </View>
                 {league ?
                 <Image
                     source={{ uri: league.league_image }}
@@ -30,42 +80,63 @@ const SocialOrderCard = ({ league, team, order, contest_title, contest_time }:So
                     <Icons.ActivityIcon size={14} color={Colors.shades.white}/>
                 </View>
                 }
-                <View style={{ flex:1, marginLeft:10 }}>
-                    <Text theme='header_2'>{contest_title}</Text>
-                    <Text style={{ marginTop:3 }} theme='body_2'>{contest_time}</Text>
-                </View>
             </View>
-            <View style={{ ...view_styles.section_body }}>
+            <View style={{ ...view_styles.section_body, padding:10 }}>
                 <View style={{ ...view_styles.body_row }}>
                     {team ?
                     <Image
                         source={{ uri: team.image?.url }}
-                        style={{ height:30, width:30 }}
+                        style={{ height:35, width:35 }}
                         resizeMode='cover'
                     />
                     :<></>}
-                    <View style={{ flex:1, marginLeft:10 }}>
-                        <Text theme='header_2'>{order.title} {SocialOrderHelpers.getOddsLabel(order.odds)}</Text>
+                    <View style={{ flex:1, marginLeft:10, marginRight:10 }}>
+                        <Text theme='header_2'>{order.title}</Text>
+                        <Text style={{ marginTop:3 }} theme='body_2'>Created on {moment(order.create_datetime).format('MM/DD hh:mm a')}</Text>
+                    </View>
+                    <View>
+                        <Text theme='header'>{SocialOrderHelpers.getOddsLabel(order.odds)}</Text>
+                        {!show_player ?
+                        <Text style={{ marginTop:3 }} size={14} color={color} weight='bold'>{result_label}</Text>
+                        :<></>}
                     </View>
                 </View>
             </View>
-            
             {order.resolution_status == 'inprogress' ?
             <View style={{ ...view_styles.body_row, padding:0 }}>
+                {onCopyOrder ? 
                 <Button
                     style={{ flex:1, borderRadius:0, borderBottomLeftRadius:8 }}
                     title='Copy'
                     title_color={Colors.shades.white}
                     backgroundColor={Colors.brand.midnight}
-                    onPress={() => console.log('COPY THIS ORDER!')}
+                    onPress={() => onCopyOrder({ 
+                        ...order, 
+                        buy_sell_ind:'buy',
+                        influencer_id: order.player_id,
+                        influence_type: 'copy', 
+                        order_type:'limit',
+                        collar_pct:0,
+                        selling_position_id:undefined, 
+                        open_amt:10,
+                        player_id:'', 
+                        h2h_id:undefined,
+                        order_id: '', 
+                        called_amt: 0, 
+                        potential_winnings: SocialOrderHelpers.calcPotentialWinnings(order.odds, 10) 
+                    })}
                 />
+                :<></>}
+                {onFadeOrder ?
                 <Button
-                    style={{ flex:1, borderRadius:0, borderBottomRightRadius:8 }}
+                    style={{ flex:1, borderRadius:0, borderBottomRightRadius:8, opacity:fade_loading?0.5:1 }}
                     title='Fade'
+                    loading={fade_loading}
                     title_color={Colors.shades.white}
                     backgroundColor={Colors.brand.cyan}
-                    onPress={() => console.log('FADE THIS ORDER!')}
+                    onPress={() => handleFadeOrder()}
                 />
+                :<></>}
             </View>
             :<></>}
         </View>