be-components 2.1.2 → 2.1.4

package/src/SocialComponents/PostCard/index.tsx

@@ -0,0 +1,105 @@
+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 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';
+
+type PostCardProps = {
+    post: PostProps,
+    player:PublicPlayerProps,
+    orders:OrderProps[],
+    player_id?:string
+}
+const PostCard = ({ post, player, orders }: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 post_ref = useRef();
+    const is_in_viewport = useIsInViewport(post_ref);
+
+    useEffect(() => {
+        if(!is_in_viewport || reactions_loaded){ return }
+        getPostReactionData();
+    },[is_in_viewport])
+
+    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
+        })
+    }
+
+    return (
+        <View ref={post_ref as any} style={{ ...view_styles.section }}>
+            <PostHeader 
+                player={player}
+                post={post}
+            />
+            <View>
+                <Text theme='header_2'>{post.title}</Text>
+            </View>
+            <View style={{ ...view_styles.section_body }}>
+                <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
+                orders={orders}
+                direction='horizontal'
+            />
+            :<></>}
+            <View style={{ ...view_styles.section_footer, padding:5, backgroundColor:Colors.shades.white }}>
+                <View style={{}}>
+                    <PostReactionBar
+                        post_reaction_stats={post_reaction_stats}
+                        my_post_reactions={[]}
+                        onReactionSelect={(r) => console.log(r)}
+                    />
+                </View>
+                <TouchableOpacity
+                    style={{ flex:1, flexDirection:'row', alignItems:'center', justifyContent:'flex-end' }}
+                    onPress={() => console.log('SHOW ME THE COMMENTS')}
+                >
+                    <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,75 @@
+import React from 'react';
+import { View, Image } from 'react-native';
+import type { AthleteProps, LeagueProps, OrderProps, TeamProps } from '../types';
+import { view_styles } from '../constants/styles';
+import { Button, Icons, Text } from '../Components';
+import { SocialOrderHelpers } from './api';
+import Colors from '../constants/colors';
+
+type SocialOrderCardProps = {
+    contest_title:string,
+    contest_time:string,
+    order:OrderProps,
+    athlete?:AthleteProps,
+    team?:TeamProps,
+    league?:LeagueProps
+}
+const SocialOrderCard = ({ league, team, order, contest_title, contest_time }:SocialOrderCardProps) => {
+
+    return (
+        <View style={{ ...view_styles.section }}>
+            <View style={{ ...view_styles.section_header }}>
+                {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 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.body_row }}>
+                    {team ?
+                    <Image
+                        source={{ uri: team.image?.url }}
+                        style={{ height:30, width:30 }}
+                        resizeMode='cover'
+                    />
+                    :<></>}
+                    <View style={{ flex:1, marginLeft:10 }}>
+                        <Text theme='header_2'>{order.title} {SocialOrderHelpers.getOddsLabel(order.odds)}</Text>
+                    </View>
+                </View>
+            </View>
+            
+            {order.resolution_status == 'inprogress' ?
+            <View style={{ ...view_styles.body_row, padding:0 }}>
+                <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!')}
+                />
+                <Button
+                    style={{ flex:1, borderRadius:0, borderBottomRightRadius:8 }}
+                    title='Fade'
+                    title_color={Colors.shades.white}
+                    backgroundColor={Colors.brand.cyan}
+                    onPress={() => console.log('FADE THIS ORDER!')}
+                />
+            </View>
+            :<></>}
+        </View>
+    )
+}
+
+export default SocialOrderCard

package/src/SocialComponents/SocialOrdersList.tsx

@@ -0,0 +1,93 @@
+import React, { useEffect, useState } from 'react';
+import { View, FlatList } from 'react-native';
+import type { AthleteProps, EventProps, LeagueProps, MatchProps, OrderProps, TeamProps, TournamentProps } from '../types';
+import SocialOrderCard from './SocialOrderCard';
+import { SocialComponentApi, SocialOrderHelpers } from './api';
+
+type SocialOrdersListProps = {
+    orders:OrderProps[],
+    direction: 'vertical'|'horizontal'
+}
+const SocialOrdersList = ({ orders, direction }: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);
+        console.log(team_ids)
+        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);
+        return (
+            <View>
+                <SocialOrderCard
+                    league={league}
+                    team={team}
+                    athlete={athlete}
+                    contest_title={title}
+                    contest_time={time}
+                    order={data.item}
+                />
+            </View>
+        )
+    }
+
+    return (
+        <View>
+            <FlatList
+                data={orders}
+                renderItem={renderOrders}
+                horizontal={direction == 'horizontal' ? true : false}
+                keyExtractor={(item) => item.order_id.toString()}
+            />
+        </View>
+    )
+}
+
+export default SocialOrdersList

package/src/SocialComponents/api/index.ts

@@ -1,16 +1,27 @@
 import axios from "axios";
 import { APIOverrides } from "../../ApiOverrides";
-import type { PlayerFollowerProps } from "../../types";
+import type { AthleteProps, EventProps, LeagueProps, MatchProps, OrderProps, PlayerFollowerProps, TeamProps, TournamentProps } from "../../types";
+import Colors from "../../constants/colors";
+import moment from "moment-mini";
 
 let SOCIAL_SVC_API = '';
+let EVENT_SVC_API = '';
 
-export { SocialComponentApi }
+export { SocialComponentApi, SocialOrderHelpers }
 
 const SocialComponentApi = {
     setEnvironment: () => {
         const endpoints = APIOverrides.getEndpoints();
         SOCIAL_SVC_API = endpoints['SOCIAL_SVC_API'] as string;
-
+        EVENT_SVC_API = endpoints['EVENT_SVC_API'] as string;
+    },
+    getLeagues: async():Promise<LeagueProps[]> => {
+        try {
+            const resp = await axios.get(`${EVENT_SVC_API}/v1/leagues`);
+            return resp.data.leagues   
+        } catch (e) {
+            return []
+        }
     },
     getBulkPlayerfollowers: async(player_ids:string[]) => {
         const resp = await axios.post(`${SOCIAL_SVC_API}/v1/followers/bulk/get`, { player_ids })
@@ -19,5 +30,109 @@ const SocialComponentApi = {
     savePlayerFollower: async(player_follower:PlayerFollowerProps):Promise<PlayerFollowerProps> => {
         const resp = await axios.post(`${SOCIAL_SVC_API}/v1/followers/player/create`, { player_follower })
         return resp.data.player_follower
-    }
+    },
+    getEventsByEventIds: async(event_ids:string[]):Promise<EventProps[]> => {
+        if(event_ids.length == 0){ return [] }
+        try {
+            const resp = await axios.post(`${EVENT_SVC_API}/v1/events/bulk/get`, { attribute:'event_id', values: event_ids })
+            return resp.data.events
+        } catch (e) {
+            return []
+        }
+    },
+    getMatchesByMatchIds: async(match_ids:string[]):Promise<MatchProps[]> => {
+        if(match_ids.length == 0){ return [] }
+        try {
+            const resp = await axios.post(`${EVENT_SVC_API}/v1/matches/bulk/get`, { attribute: 'match_id', values: match_ids })
+            return resp.data.matches
+        } catch (e) {
+            return []
+        }
+    },
+    getAthletesByIds : async(athlete_ids:string[]):Promise<AthleteProps[]> => {
+        if(athlete_ids.length == 0){ return [] }
+        try {
+            const resp = await axios.post(`${EVENT_SVC_API}/v1/athletes/bulk/get`, { attribute: 'athlete_id', values: athlete_ids })
+            return resp.data.athletes
+        } catch (e) {
+            return []
+        }
+    },
+    getTournamentsByTournamentIds: async(tournament_ids:string[]):Promise<TournamentProps[]> => {
+        if(tournament_ids.length == 0){ return [] }
+        try {
+            const resp = await axios.post(`${EVENT_SVC_API}/v1/tournaments/bulk/get`, { attribute: 'event_id', values: tournament_ids })
+            return resp.data.tournaments
+        } catch (e) {
+            return []
+        }
+    },
+    getTeamsByIds: async(team_ids:string[]) => {
+        if(team_ids.length == 0){ return [] }
+        try {
+            const resp = await axios.post(`${EVENT_SVC_API}/v1/teams/bulk/get`, { attribute:'team_id', values: team_ids })
+            return resp.data.teams
+        } catch (e) {
+            return []
+        }
+    },
+}
+
+
+const SocialOrderHelpers = {
+    getIconColor: (order:OrderProps) => {
+        switch(order.status){
+            case 'approved':
+                return Colors.brand.electric
+            case 'closed':
+                return Colors.brand.midnight
+            case 'cancelled':
+                return Colors.highlights.highlight200
+            default:
+                return Colors.shades.black
+        }
+    },
+    getIdsFromOrders: (orders:OrderProps[]) => {
+        let event_ids:string[] = [], tournament_ids:string[] = [], match_ids:string[] = [], athlete_ids:string[] = [], team_ids:string[] = []
+        orders.map(o => {
+            if(o.event_type == 'team'){ event_ids.push(o.event_id) }
+            if(o.event_type == 'tournament'){ tournament_ids.push(o.event_id) }
+            if(o.event_type == 'match'){ match_ids.push(o.event_id) }
+            if(o.side_type == 'athlete'){ athlete_ids.push(o.side_id) }
+            if(o.side_type == 'team'){ team_ids.push(o.side_id) }
+        })
+        return { event_ids, tournament_ids, match_ids, athlete_ids, team_ids }
+    },
+    getContestDetails: (order:OrderProps, events:EventProps[], tournaments:TournamentProps[], matches:MatchProps[], athletes:AthleteProps[], teams:TeamProps[], leagues:LeagueProps[]):{ title:string, time:string, league?:LeagueProps, athlete?:AthleteProps, team?:TeamProps } => {
+        let athlete = order.side_type == 'athlete' ? athletes.find(a => a.athlete_id == order.side_id) : undefined
+        let team = order.side_type == 'team' ? teams.find(t => t.team_id == order.side_id) : undefined;
+        
+        switch(order.event_type){
+            case 'team': 
+                console.log('HERE WE GO')
+                let event = events.find(e => e.event_id == order.event_id);
+                console.log(event)
+                if(!event){ return { team, athlete, title: '', time: '' } }
+                let league = leagues.find(l => l.league_id == event.league_id);
+                return { team, athlete, league, title: event.event_title, time: event.status == 'scheduled' ? moment(event.scheduled_datetime).format('MM/DD @ hh:mm a') : event.time_detail ?? '' }
+            case 'match':
+                let match = matches.find(m => m.match_id == order.event_id);
+                if(!match){ return { team, athlete, title: '', time: '' } }
+                let tourney = tournaments.find(t => t.tournament_id == match.tournament_id);
+                let m_league = leagues.find(l => l.league_id == tourney?.league_id)
+                return { team, athlete, league: m_league, title: match.match_title, time: moment(match.scheduled_datetime).format('MM/DD @ hh:mm a') }
+            case 'tournament':
+                let tournament = tournaments.find(t => t.tournament_id == order.event_id);
+                if(!tournament){ return { title: '', time: '' } }
+                const t_league = leagues.find(l => l.league_id == tournament.league_id)
+                return { team, athlete, league: t_league, title: tournament.tournament_name, time: moment(tournament.scheduled_datetime).format('MM/DD @ hh:mm a') }
+            default : return { title: '', time: '' }
+        }
+    },
+    getOddsLabel: (odds:number, decimals?:number) => {
+        let new_odds = odds.toFixed()
+        if(decimals){ new_odds = odds.toFixed(decimals) }
+        if(odds < 0){ return `${new_odds}` }
+        return `+${new_odds}`
+    },
 }

package/src/SocialComponents/index.tsx

@@ -1,8 +1,9 @@
 import PlayerCard from "./PlayerCard";
 import PlayerList from "./PlayerList";
-
+import PlayerProfile from "./PlayerProfile";
 
 export {
     PlayerCard,
-    PlayerList
+    PlayerList,
+    PlayerProfile
 }

package/src/types.d.ts

@@ -1742,3 +1742,248 @@ export interface OrderProps {
     no_bet?:boolean,
     no_bet_reason?:string
 }
+
+
+
+//SOCIAL COMPONENTS
+
+export interface PlayerLinkProps {
+    player_link_id: string, 
+    player_id: string, 
+    link_type: 'twitter' | 'rss_podcast' | 'rss_article' | 'custom' | 'linked_in', 
+    link_full:string, 
+    link_display:string, 
+    link?:LinkProps,
+    create_datetime:any, 
+    last_update_datetime:any,
+    link_status:'active'|'pending'|'inactive', 
+    last_feed_pull_datetime?:any
+}
+
+export interface PlayerFollowerStatsProps {
+    player_id:string,
+    following_count: number,
+    follower_count:number,
+    team_member_count:number
+}
+
+
+
+export interface PlayerTagProps { 
+    player_tag_id:string, 
+    player_id:string, 
+    tag_id:string, 
+    tag: string, 
+    tag_type:'selected'|'earned'|'company', 
+    company_id?:string, 
+    status: string,
+    companyDetails?:PublicPlayerProps, 
+    create_datetime: any,
+    last_update_datetime:any
+}
+
+interface EntityMapProps { 
+    value: { 
+        type: string, 
+        mutability:string, 
+        data: any 
+    } 
+}
+export interface RawDraftJSProps { 
+    blocks:any[],
+    entityMap:EntityMapProps 
+}
+
+export interface PostProps {
+    memo_post_id:string, 
+    player_id:string, 
+    title:string, 
+    body:string, 
+    formatted_body?: RawDraftJSProps, 
+    status:'active'|'hidden', 
+    memo_events:any[], 
+    memo_urls:string[], 
+    post_type:string,
+    memo_podcast_episodes?:string[],
+    featured?:boolean,
+    memo_podcasts?:string[],
+    memo_article_feeds?:string[],
+    memo_teams:any[], 
+    memo_images:any[], 
+    memo_videos:any[], 
+    memo_players:any[], 
+    memo_topics:TagProps[], 
+    edited:boolean, 
+    external_social_id:string, 
+    memo_location:any, 
+    memo_positions:any[], 
+    memo_orders:any[], 
+    memo_hashtags:string[], 
+    create_datetime:any, 
+    last_update_datetime:any, 
+    url_metadata:URLMetadataProps[], 
+    url_preview:any, 
+    memo_competitions:any[], 
+    my_reactions:PostReactionProps[],
+    comment_count:number, 
+    reaction_details:PostReactionStatsProps[], 
+    comment_details:PostCommentProps[], 
+    playerDetails?:PublicPlayerProps, 
+    rss_link_id?:string,
+    shared_post_id?:string, 
+    memo_polls?:string[],
+    shared_post_type?:string, 
+    shared_post?:PostProps, 
+    memo_podcast?:PodcastProps, 
+    memo_articles?:string[]
+}
+
+
+export interface URLMetadataProps {
+    charset:string,
+    ogDescription:string,
+    ogImage: {
+        height:string,
+        type: string,
+        url: string,
+        width:string
+    },
+    ogLocale:string,
+    ogSiteName: string,
+    ogTitle:string,
+    ogType:string,
+    ogUrl:string,
+    requestUrl:string,
+    success:boolean,
+    twitterCard:string,
+    twitterDescription: string,
+    twitterImage?:{
+        alt?:string,
+        height?:string,
+        url:string,
+        width?:string
+    },
+    twitterTitle:string
+}
+
+
+export interface PostReactionProps {
+    post_reaction_id:string;
+    activity_post_id:string; 
+    player_id:string; 
+    reaction:string;
+    status:'visible'|'hidden';
+    post_type: 'memo' | 'activity' | 'comment';
+    create_datetime:any;
+    last_update_datetime:any;
+    playerDetails?:PublicPlayerProps;
+}
+
+export interface PostReactionStatsProps {
+    activity_post_id:string, 
+    reaction: string, 
+    reaction_count:number 
+}
+
+export interface PostCommentProps {
+    post_comment_id:string, 
+    activity_post_id:string, 
+    player_id:string, 
+    message:string, 
+    status:'active'|'hidden', 
+    edited:boolean, 
+    post_type: 'memo' | 'activity', 
+    related_comment_id:string, 
+    create_datetime:any, 
+    last_update_datetime:any, 
+    playerDetails?:PublicPlayerProps,
+    formatted_body: RawDraftJSProps, 
+    my_reactions:PostReactionProps[], 
+    reaction_details:PostReactionStatsProps[],
+    comment_orders?:string[],
+    comment_urls?:string[],
+    comment_images?:any[],
+    comment_videos?:any[],
+    url_metadata?:any[],
+}
+
+
+export interface PostCommentStatProps {
+    activity_post_id: string,
+    comment_count: number,
+    top_comment?: PostCommentProps
+}
+
+
+export interface PodcastProps {
+    podcast_id: string,
+    company_id?: string,
+    lead_email?:string,
+    lead_contact_name?:string,
+    secondary_contact?:string,
+    last_episode_pull?:any,
+    title: string,
+    description: string,
+    claim_status?:string,
+    global_rank?:number,
+    publisher_original?:string,
+    publisher_highlighted?:string,
+    website?:string,
+    listen_notes_score?:number,
+    listen_notes_id?:string,
+    image_override?:any
+    description_override?:string,
+    suggested_text?:string,
+    key_words?:string[];
+    player_ids?: string[];
+    image?: any,
+    rss_url?: string,
+    status: string,
+    create_datetime:any,
+    last_update_datetime:any
+}
+
+
+export interface PodcastEpisodesProps { 
+    podcast_episode_id:string,
+    podcast_id:string,
+    url:string, 
+    length:string | number, 
+    type: string, 
+    author?:string, 
+    description?:string, 
+    image?: {
+        url:string,
+        height?:number,
+        width?:number
+    }, 
+    image_override?:any,
+    description_override?:string,
+    explicit?:boolean, 
+    episode?:string, 
+    guid?:string, 
+    title:string, 
+    external_link?:string, 
+    publish_date:any,
+    status: 'visible' | 'hidden',
+    create_datetime:any,
+    last_update_datetime: any,
+}
+
+export interface ArticleProps { 
+    article_id:string,
+    company_id:string,
+    url:string, 
+    author?:string, 
+    contentSnippet?:string, 
+    image?: { 
+        url:string, 
+        width:string, 
+        height:string, 
+        type:string 
+    }, 
+    guid?:string, 
+    title:string, 
+    pubDate:any,
+    status: string
+}