be-components 2.1.3 → 2.1.5

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

@@ -0,0 +1,93 @@
+import React, { useState } from 'react';
+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,
+    loading?:boolean,
+    onReactionSelect: (post_reaction:PostReactionProps) => void
+}
+
+const available_reactions = [
+    { reaction: 'like', label: '❤️' },
+    { reaction: 'celebrate', label: '🎉' },
+    { reaction: 'fire', label: '🔥' },
+    { reaction: 'clap', label: '👏' },
+    { reaction: 'trophy', label: '🏆' },
+    { reaction: 'strong', label: '💪' },
+    { reaction: 'money', label: '💰' },
+    { reaction: 'eyes', label: '👀' },
+]
+
+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 }
+        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)
+    }
+
+    const renderAvailableReactions = (data: {item:any, index:number}) => {
+        const reacted = post_reaction_stats.length > 0 && !more_selected
+        const reaction_stat = post_reaction_stats.find(p => p.reaction === data.item.reaction)
+        const my_reaction = my_post_reactions.find(pr => pr.reaction === data.item.reaction)
+        const selected = my_reaction?.status === 'visible' ? true : false
+        return (
+            <TouchableOpacity 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.highlights.highlight200:Colors.shades.white }
+                :
+                {}} onPress={() => handleReaction(data.item.reaction)}>
+                
+                <Text style={{fontSize:12, padding:6}}>{data.item.label}</Text>
+                {reaction_stat && !more_selected && post_reaction_stats.length < 5 ?
+                <Text size={12} color={selected ? Colors.shades.white : Colors.brand.midnight} weight='regular' style={{ padding:3 }}>{reaction_stat.reaction_count}</Text>
+                :<></>}
+            </TouchableOpacity>
+        )
+    }
+
+    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 && pr.reaction_count > 0))
+    }
+    return (
+        <View style={{ flexDirection:'row', alignItems:'center' }}>
+            <FlatList key='reactions' data={visible_reactions} renderItem={renderAvailableReactions} keyExtractor={(item) => item.reaction} horizontal/>
+            {post_reaction_stats.length > 0 && !more_selected ?
+            <Button
+                title='MORE'
+                title_color={Colors.brand.electric}
+                title_size={10}
+                style={{ marginLeft:4 }}
+                padding={0}
+                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>
+    )
+}
+
+export default PostReactionBar

package/src/SocialComponents/PostCard/index.tsx

@@ -0,0 +1,176 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { View, TouchableOpacity } from 'react-native';
+import DraftTextViewer from './components/DraftTextViewer';
+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,
+    onRequestAuthenticate:() => void,
+    onCopyOrder?:(order:OrderProps) => void,
+    onFadeOrder?:(order:OrderProps) => void,
+    onViewComments:(post_id:string) => void
+}
+const PostCard = ({ player_id, post, player, orders, onRequestAuthenticate, onCopyOrder, onFadeOrder, onViewComments }:PostCardProps) => {
+    const [ post_data, setPostData ] = useState<{
+        loading:boolean,
+        reactions_loaded:boolean,
+        post_comment_stat:PostCommentStatProps,
+        post_reaction_stats:PostReactionStatsProps[],
+    }>({
+        loading:false,
+        reactions_loaded: false,
+        post_comment_stat: { activity_post_id:post.memo_post_id, comment_count: 0 },
+        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[]
+    }>({
+        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();
+        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');
+        setPostData({
+            ...post_data,
+            reactions_loaded:true,
+            loading: false,
+            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, padding:0, borderWidth:1, borderColor:Colors.shades.shade600 }}>
+            <PostHeader 
+                player={player}
+                post={post}
+            />
+            <View style={{  padding:10 }}>
+                <Text theme='header_2'>{post.title}</Text>
+            </View>
+            <View style={{ padding:10, paddingTop:0, paddingBottom:0 }}>
+                <DraftTextViewer 
+                    post_id={post.memo_post_id}
+                    formatted_body={post.formatted_body}
+                    view_type='memo'
+                    text_fallback={post.body}
+                />
+            </View>
+            {post.memo_orders && post.memo_orders.length > 0 ?
+            <SocialOrdersList
+                players={[player]}
+                show_player={true}
+                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={my_reactions}
+                        onReactionSelect={(r) => handleReaction(r)}
+                    />
+                </View>
+                <TouchableOpacity
+                    style={{ flex:1, flexDirection:'row', alignItems:'center', justifyContent:'flex-end' }}
+                    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}/>
+                </TouchableOpacity>
+            </View>
+        </View>
+    )
+}
+
+export default PostCard

package/src/SocialComponents/SocialOrderCard.tsx

@@ -0,0 +1,146 @@
+import React, { useState } from 'react';
+import { View, Image } from 'react-native';
+import type { AthleteProps, LeagueProps, OrderProps, PublicPlayerProps, TeamProps } from '../types';
+import { view_styles } from '../constants/styles';
+import { Button, Icons, Text } from '../Components';
+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,
+    onCopyOrder?:(order:OrderProps) => void,
+    onFadeOrder?:(order:OrderProps) => void
+}
+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, 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 }}
+                    style={{ height:30, width:30, borderRadius:4 }}
+                    resizeMode='cover'
+                />
+                :
+                <View style={{ height:30, width:30, borderRadius:4, justifyContent:'center', alignItems:'center', backgroundColor:SocialOrderHelpers.getIconColor(order) }}>
+                    <Icons.ActivityIcon size={14} color={Colors.shades.white}/>
+                </View>
+                }
+            </View>
+            <View style={{ ...view_styles.section_body, padding:10 }}>
+                <View style={{ ...view_styles.body_row }}>
+                    {team ?
+                    <Image
+                        source={{ uri: team.image?.url }}
+                        style={{ height:35, width:35 }}
+                        resizeMode='cover'
+                    />
+                    :<></>}
+                    <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={() => 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, opacity:fade_loading?0.5:1 }}
+                    title='Fade'
+                    loading={fade_loading}
+                    title_color={Colors.shades.white}
+                    backgroundColor={Colors.brand.cyan}
+                    onPress={() => handleFadeOrder()}
+                />
+                :<></>}
+            </View>
+            :<></>}
+        </View>
+    )
+}
+
+export default SocialOrderCard

package/src/SocialComponents/SocialOrdersList.tsx

@@ -0,0 +1,101 @@
+import React, { useEffect, useState } from 'react';
+import { View, FlatList } from 'react-native';
+import type { AthleteProps, EventProps, LeagueProps, MatchProps, OrderProps, PublicPlayerProps, TeamProps, TournamentProps } from '../types';
+import SocialOrderCard from './SocialOrderCard';
+import { SocialComponentApi, SocialOrderHelpers } from './api';
+
+type SocialOrdersListProps = {
+    players:PublicPlayerProps[],
+    show_player?:boolean,
+    orders:OrderProps[],
+    direction: 'vertical'|'horizontal',
+    onCopyOrder?:(order:OrderProps) => void,
+    onFadeOrder?:(order:OrderProps) => void
+}
+const SocialOrdersList = ({ players, show_player, orders, direction, onCopyOrder, onFadeOrder }:SocialOrdersListProps) => {
+    const [list_data, setListData] = useState<{
+        loading:boolean,
+        leagues:LeagueProps[],
+        events:EventProps[],
+        tournaments:TournamentProps[],
+        matches:MatchProps[],
+        athletes:AthleteProps[],
+        teams:TeamProps[]
+    }>({
+        loading:false,
+        leagues:[],
+        events:[],
+        tournaments:[],
+        matches:[],
+        athletes:[],
+        teams:[]
+    });
+    const { leagues, events, tournaments, matches, athletes, teams } = list_data;
+
+
+
+    useEffect(() => {
+        SocialComponentApi.setEnvironment()
+        getDataFromServer();
+    },[orders.length])
+
+
+    const getDataFromServer = async() => {
+        setListData({ ...list_data, loading:true });
+        //Get event_ids
+        const { event_ids, tournament_ids, match_ids, athlete_ids, team_ids } = SocialOrderHelpers.getIdsFromOrders(orders);
+        let l = await SocialComponentApi.getLeagues();
+        let e = await SocialComponentApi.getEventsByEventIds(event_ids);
+        let t = await SocialComponentApi.getTournamentsByTournamentIds(tournament_ids);
+        let m = await SocialComponentApi.getMatchesByMatchIds(match_ids);
+        let a = await SocialComponentApi.getAthletesByIds(athlete_ids);
+        let tm = await SocialComponentApi.getTeamsByIds(team_ids);
+        //Now lets grab the data!
+        setListData({
+            ...list_data,
+            loading:false,
+            leagues: l,
+            events: e,
+            tournaments: t,
+            matches: m,
+            athletes: a,
+            teams: tm
+        })
+
+    }
+
+
+    const renderOrders = (data:{item:OrderProps, index:number}) => {
+        let { title, time, league, team, athlete } = SocialOrderHelpers.getContestDetails(data.item, events, tournaments, matches, athletes, teams, leagues);
+        let player = players.find(p => p.player_id == data.item.player_id)
+        return (
+            <View>
+                <SocialOrderCard
+                    show_player={show_player}
+                    player={player}
+                    league={league}
+                    team={team}
+                    athlete={athlete}
+                    contest_title={title}
+                    contest_time={time}
+                    order={data.item}
+                    onFadeOrder={onFadeOrder}
+                    onCopyOrder={onCopyOrder}
+                />
+            </View>
+        )
+    }
+
+    return (
+        <View>
+            <FlatList
+                data={orders}
+                renderItem={renderOrders}
+                horizontal={direction == 'horizontal' ? true : false}
+                keyExtractor={(item) => item.order_id.toString()}
+            />
+        </View>
+    )
+}
+
+export default SocialOrdersList