be-components 2.1.3 → 2.1.5

package/src/SocialComponents/PlayerCard.tsx

@@ -15,31 +15,32 @@ type PlayerCardProps = {
     player_following?:PlayerFollowerProps,
     show_follow?:boolean,
     style?:any,
+    border?:boolean,
     float?:boolean,
     onSelectPlayer:(p:PublicPlayerProps) => void,
     onFollowingUpdate:(pf:PlayerFollowerProps) => void
 }
 
-const PlayerCard = ({ player, width, follow_loading, alignment, style, float, show_follow, player_follower, player_following, onSelectPlayer, onFollowingUpdate }:PlayerCardProps) => {
+const PlayerCard = ({ player, width, border, follow_loading, alignment, style, float, show_follow, player_follower, player_following, onSelectPlayer, onFollowingUpdate }:PlayerCardProps) => {
 
     let player_style = alignment == 'vertical' ? local_styles.player_vertical : local_styles.player_horizontal;
     let container_style = { ...local_styles.container }
     if(float){ container_style = { ...container_style, ...view_styles.float } }
     return (
-        <View style={{ ...container_style, ...style, width }}>
+        <View style={{ ...container_style, ...style, width, borderWidth: border?1:0, borderColor:Colors.shades.shade600 }}>
             <TouchableOpacity style={player_style} onPress={() => onSelectPlayer(player)}>
                 {alignment == 'vertical' ? 
                 <View>
                     <Image
-                        source={{ uri: player.profile_pic }}
+                        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:width * 0.5, width:width, borderTopRightRadius:8, borderTopLeftRadius:8 }}
                         resizeMode='cover'
                     />
                 </View>
                 :
-                <View style={{  }}>
+                <View>
                     <Image
-                        source={{ uri: player.profile_pic }}
+                        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:55, width:55, borderTopLeftRadius:8, borderBottomLeftRadius:8}}
                         resizeMode='cover'
                     />

package/src/SocialComponents/PlayerList.tsx

@@ -31,7 +31,8 @@ const PlayerList = ({ players, style, options, onPlayerSelect }:PlayerListProps)
     const getListData = async() => {
         if(follow_status){
             setFollowStatusLoading(true);
-            const player_followers = await SocialComponentApi.getBulkPlayerfollowers(players.map(p => p.player_id))
+            const player_followers = await SocialComponentApi.getBulkPlayerfollowers(players.map(p => p.player_id));
+            console.log(player_followers)
             setPlayerFollowers(player_followers)
             setFollowStatusLoading(false);
         }

package/src/SocialComponents/PlayerProfile/api/index.ts

@@ -0,0 +1,138 @@
+import axios from "axios";
+import { APIOverrides } from "../../../ApiOverrides";
+import type { OrderProps, PlayerFollowerProps, PlayerFollowerStatsProps, PlayerLinkProps, PostCommentStatProps, PostProps, PostReactionProps, PublicPlayerProps } from "../../../types";
+
+let SOCIAL_SVC_API = '';
+let AUTH_SVC_API = '';
+let MK_SVC_API = '';
+
+export { SocialProfileApi }
+
+const SocialProfileApi = {
+    setEnvironment: () => {
+        const endpoints = APIOverrides.getEndpoints();
+        SOCIAL_SVC_API = endpoints['SOCIAL_SVC_API'] as string;
+        AUTH_SVC_API = endpoints['AUTH_SVC_API'] as string;
+        MK_SVC_API = endpoints['MK_SVC_API'] as string;
+    },
+    getPlayerById: async(player_id:string):Promise<PublicPlayerProps | undefined> => {
+        try {
+            const resp = await axios.get(`${AUTH_SVC_API}/v1/players/player/${player_id}`);
+            return resp.data.player
+        } catch (e) {
+            console.log(e);
+            return undefined
+        }
+    },
+    getPlayerLinksByPlayerId: async(player_id:string):Promise<PlayerLinkProps[]> => {
+        try {
+            const resp = await axios.get(`${SOCIAL_SVC_API}/v1/links/player/${player_id}`);
+            return resp.data.player_links
+        } catch (e) {
+            console.log(e);
+            return []
+        }
+    },
+    getFollowerStats:async(player_id:string):Promise<PlayerFollowerStatsProps | undefined> => {
+        try {
+            const resp = await axios.get(`${SOCIAL_SVC_API}/v1/followers/stats/player/${player_id}`)
+            const { player_follower_stats } = resp.data;
+            return player_follower_stats
+        } catch (e) {
+            console.log(e)
+            return undefined
+        }
+    },
+    getFollowerStatus: async(player_id:string, following_id:string):Promise<PlayerFollowerProps | undefined> => {
+        try {
+            const resp = await axios.get(`${SOCIAL_SVC_API}/v1/followers/status?player_id=${player_id}&following_id=${following_id}`);
+            console.log(resp.data)
+            return resp.data.player_follower
+        } catch (e) {
+            console.log(e)
+            return undefined
+        }
+    },
+    getPostsByPlayerId: async(player_id:string, offset:number):Promise<PostProps[]> => {
+        try {
+            const resp = await axios.get(`${SOCIAL_SVC_API}/v1/posts/player/${player_id}?offset=${offset}`)
+            return resp.data.posts
+        } catch (e) {
+            console.log(e);
+            return []
+        }
+    },
+    getPlayerFollowersByPlayerId: async(player_id:string, status:'following'|'followers', offset:number):Promise<PlayerFollowerProps[]> => {
+        try {
+            const resp = await axios.get(`${SOCIAL_SVC_API}/v1/followers/player/${player_id}?status=${status}&offset=${offset}`)
+            console.log(resp.data);
+            return resp.data.player_followers
+        } catch (e) {
+            console.log(e);
+            return []
+        }
+    },
+    getCommentStatsByPostId: async(post_id:string, post_type:'memo'):Promise<PostCommentStatProps | undefined> => {
+        try {
+            const resp = await axios.get(`${SOCIAL_SVC_API}/v1/posts/comments/stats/post/${post_id}?post_type=${post_type}`)
+            console.log(resp.data)
+            return resp.data.post_comment_stat
+        } catch (e) {
+            return undefined
+        }
+    },
+    getReactionStatsByPostId: async(post_id:string, post_type:'memo') => {
+        try {
+            const resp = await axios.get(`${SOCIAL_SVC_API}/v1/posts/reactions/stats/post/${post_id}?post_type=${post_type}`)
+            return resp.data.post_reaction_stats
+        } catch (e) {
+            console.log(e)
+            return []
+        }
+    },
+    getReactionsByPostAndPlayer: async(player_id:string, post_id:string, post_type:'memo'):Promise<PostReactionProps[]> => {
+        try {
+            const resp = await axios.get(`${SOCIAL_SVC_API}/v1/posts/reactions/post/${post_id}?player_id=${player_id}&post_type=${post_type}`)
+            return resp.data.post_reactions
+        } catch (e) {
+            console.log(e);
+            return []
+        }
+    },
+    createPostReaction: async(post_reaction:PostReactionProps):Promise<PostReactionProps|undefined> => {
+        try {
+            const resp = await axios.post(`${SOCIAL_SVC_API}/v1/posts/reaction/create`, { post_reaction });
+            return resp.data.post_reaction
+        } catch (e) {
+            console.log(e);
+            return undefined
+        }
+    },
+    updatePostReaction : async(post_reaction:PostReactionProps):Promise<PostReactionProps|undefined> => {
+        try {
+            const resp = await axios.post(`${SOCIAL_SVC_API}/v1/posts/reaction/update`, { post_reaction })
+            return resp.data.post_reaction
+        } catch (e) {
+            console.log(e)
+            return undefined
+        }
+    },
+    getBulkOrders: async(order_ids:string[]):Promise<OrderProps[]> => {
+        try {
+            const resp = await axios.post(`${MK_SVC_API}/v1/orders/bulk/get`, { order_ids })
+            return resp.data.orders
+        } catch (e) {
+            console.log(e);
+            return []
+        }
+    },
+    getOrdersByPlayerId: async(player_id:string, offset:number):Promise<OrderProps[]> => {
+        try {
+            const resp = await axios.get(`${MK_SVC_API}/v1/orders/player/${player_id}?offset=${offset}`)
+            return resp.data.orders
+        } catch (e) {
+            console.log(e);
+            return []
+        }
+    }
+}

package/src/SocialComponents/PlayerProfile/components/PlayerFollowersList.tsx

@@ -0,0 +1,111 @@
+import React, { useEffect, useState } from 'react';
+import { View, ActivityIndicator, ScrollView, Image } from 'react-native';
+import type { PlayerFollowerProps, PublicPlayerProps } from '../../../types';
+import { SocialProfileApi } from '../api';
+import Colors from '../../../constants/colors';
+import { view_styles } from '../../../constants/styles';
+import { Button, Text } from '../../../Components';
+import PlayerList from '../../PlayerList';
+
+type PlayerFollowersListProps = {
+    status: 'following'|'followers',
+    viewing_player:PublicPlayerProps,
+    total?:number,
+    player_id?:string,
+    height?:number,
+    onClose:() => void
+}
+
+const PlayerFollowersList = ({ status, total, height, viewing_player, player_id, onClose }:PlayerFollowersListProps) => {
+    const [ list_data, setData ] = useState<{
+        loading:boolean,
+        player_followers:PlayerFollowerProps[],
+        offset:number
+    }>({
+        loading:false,
+        player_followers:[],
+        offset:0
+    });
+    const { loading, player_followers, offset } = list_data;
+
+    useEffect(() => {
+        getDataFromServer(0);
+    },[]);
+
+    const getDataFromServer = async(offset:number) => {
+        if(loading){ return } //No mashy mashy
+        setData({ ...list_data, loading:true });
+        let pfs = await SocialProfileApi.getPlayerFollowersByPlayerId(viewing_player.player_id, status, offset);
+        setData({
+            ...list_data,
+            loading:false,
+            player_followers:pfs,
+            offset
+        })
+    }
+
+
+    return (
+        <View style={{ height, ...view_styles.section }}>
+            <View style={{ ...view_styles.section_header }}>
+                <Image
+                    source={{ uri: viewing_player.profile_pic && viewing_player.profile_pic != '' ? viewing_player.profile_pic : 'https://res.cloudinary.com/hoabts6mc/image/upload/v1722453927/default_man_n96ofq.webp' }}
+                    style={{ width: 32, height: 32, borderRadius:100 }}
+                    resizeMode='cover'
+                />
+                <View style={{flex:1, marginLeft:10 }}>
+                    <Text theme='header'>{status}</Text>
+                    <Text style={{ marginTop:3 }} theme='body'>{status == 'followers' ? `@${viewing_player.username} Followers`: `Players @${viewing_player.username} is following`}</Text>
+                </View>
+                {total ?
+                <Text theme='header'>{total}</Text>
+                :<></>}
+            </View>
+            <ScrollView style={{ ...view_styles.section_body }}>
+                {loading ? 
+                <ActivityIndicator
+                    size={'large'}
+                    color={Colors.brand.midnight}
+                    style={{ padding:10, alignSelf:'center' }}
+                />
+                :<></>}
+                <PlayerList
+                    players={player_followers.map(pf => pf.playerDetails as PublicPlayerProps)}
+                    onPlayerSelect={(p) => console.log(p)}
+                    options={{
+                        direction: 'horizontal',
+                        follow_status: player_id?true:false
+                    }}
+                />
+            </ScrollView>
+            <View style={{ ...view_styles.section_footer }}>
+                {offset > 0 ?
+                <Button
+                    title='PREV'
+                    title_color={Colors.brand.electric}
+                    backgroundColor='transparent'
+                    onPress={() => getDataFromServer(offset - 1)}
+                />
+                :<View/>}
+                <View style={{ flex:1 }} />
+                <Button
+                    title='NEXT'
+                    title_color={Colors.brand.electric}
+                    backgroundColor='transparent'
+                    onPress={() => getDataFromServer(offset + 1)}
+                />
+            </View>
+            <View style={{ ...view_styles.section_footer }}>
+                <Button
+                    style={{ flex:1 }}
+                    title='CLOSE'
+                    title_color={Colors.shades.white}
+                    backgroundColor={Colors.utility.error}
+                    onPress={() => onClose()}
+                />
+            </View>
+        </View>
+    )
+}
+
+export default PlayerFollowersList

package/src/SocialComponents/PlayerProfile/components/PostsList.tsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import { View, FlatList, ActivityIndicator } from 'react-native';
+import { useEffect, useState } from "react"
+import type {  OrderProps, PostProps, PublicPlayerProps } from "../../../types"
+import { SocialProfileApi } from '../api';
+import PostCard from '../../PostCard';
+import Colors from '../../../constants/colors';
+
+type PostsListProps = {
+    viewing_player:PublicPlayerProps,
+    player_id?:string,
+    onRequestAuthenticate:() => void,
+    onCopyOrder?:(order:OrderProps) => void,
+    onFadeOrder?:(order:OrderProps) => void,
+    onViewComments:(post_id:string) => void
+}
+
+const PostsList = ({ viewing_player, player_id, onRequestAuthenticate, onCopyOrder, onFadeOrder, onViewComments}:PostsListProps) => {
+    const [ post_data, setPostData ] = useState<{
+        posts_loading:boolean,
+        posts:PostProps[],
+        orders:OrderProps[],
+        posts_offset:number
+    }>({
+        posts_loading: false,
+        posts:[],
+        orders:[],
+        posts_offset:0
+    });
+    const { posts_loading, posts, orders } = post_data;
+    
+    useEffect(() => {
+        getPostData(0);
+    },[]);
+
+    const getPostData = async(offset:number) => {
+        setPostData({ ...post_data, posts_loading:true });
+        let os:OrderProps[] = []
+        const ps = await SocialProfileApi.getPostsByPlayerId(viewing_player.player_id, offset);
+
+        //Now we need to get the data within the posts!
+        let order_ids:string[] = []
+        ps.map(p => {
+            if(p.memo_orders && p.memo_orders.length > 0){ order_ids = order_ids.concat(p.memo_orders) }
+        })
+        if(order_ids.length > 0){ os = await SocialProfileApi.getBulkOrders(order_ids) }
+
+        //Now we need to get all the event data from the 
+
+        setPostData({
+            ...post_data,
+            posts_loading:false,
+            posts: ps,
+            orders:os,
+            posts_offset: offset
+        })
+    }
+
+
+    const renderPosts = (data: { item:PostProps, index:number }) => {
+        const post_orders = data.item.memo_orders ?  orders.filter(o => data.item.memo_orders.includes(o.order_id)) : []
+        return (
+            <View>
+                <PostCard 
+                    player={viewing_player}
+                    orders={post_orders}
+                    post={data.item}
+                    player_id={player_id}
+                    onCopyOrder={onCopyOrder}
+                    onFadeOrder={onFadeOrder}
+                    onViewComments={onViewComments}
+                    onRequestAuthenticate={onRequestAuthenticate}
+                />
+            </View>
+        )
+    }
+
+
+    return (
+        <View>
+            <View>
+                {posts_loading ?
+                <ActivityIndicator size='large' color={Colors.brand.midnight} style={{ padding:10, alignSelf:'center' }} />
+                :<></>}
+                <FlatList
+                    key={'player_posts'}
+                    data={posts}
+                    renderItem={renderPosts}
+                    keyExtractor={(item) => item.memo_post_id?.toString()}
+                />
+            </View>
+        </View>
+    )
+}
+
+export default React.memo(PostsList, (left,right) => {
+    if(left.viewing_player?.player_id != right.viewing_player?.player_id){ return false }
+    if(left.player_id != right.player_id){ return false }
+    return true
+})