be-components 2.1.2 → 2.1.4

package/src/Components/Icons.tsx

@@ -38,6 +38,53 @@ const PodiumIcon = ({ color, size, secondary_color }:IconProps) => {
     )
 }
 
+
+const TwitterIcon = ({ size }:IconProps) => {
+    const icon_size = size ?? 20
+    return (
+        <svg width={`${icon_size}px`} height={`${icon_size}px`} viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
+            <title>twitter-svgrepo-com</title>
+            <g id="ss" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                <g id="twitter-svgrepo-com">
+                    <circle id="Oval" fill="#1DA1F2" fill-rule="nonzero" cx="12" cy="12" r="12"></circle>
+                    <path d="M19.2,7.38516 C18.67062,7.62036 18.10086,7.77876 17.50332,7.85028 C18.11334,7.48452 18.58182,6.9057 18.80208,6.216 C18.2319,6.55482 17.59884,6.8001 16.92642,6.93306 C16.38738,6.35904 15.61896,6 14.7699,6 C13.1385,6 11.81568,7.32282 11.81568,8.95422 C11.81568,9.18552 11.84208,9.41112 11.89248,9.6276 C9.43698,9.50472 7.2603,8.3283 5.80314,6.5409 C5.54874,6.97722 5.4033,7.48452 5.4033,8.02596 C5.4033,9.0507 5.9241,9.95496 6.71748,10.48482 C6.23268,10.46946 5.7777,10.3365 5.37882,10.11522 L5.37882,10.15218 C5.37882,11.58396 6.3978,12.7776 7.74846,13.04976 C7.50078,13.11696 7.23966,13.15344 6.97044,13.15344 C6.77988,13.15344 6.5946,13.13472 6.41412,13.10016 C6.78996,14.2737 7.88142,15.12804 9.17394,15.15204 C8.16312,15.94398 6.88932,16.41672 5.50506,16.41672 C5.26602,16.41672 5.03088,16.4028 4.8,16.37496 C6.10746,17.21304 7.66014,17.70258 9.3285,17.70258 C14.76222,17.70258 17.73372,13.20096 17.73372,9.29736 C17.73372,9.1692 17.73132,9.04158 17.72508,8.91534 C18.30294,8.49774 18.804,7.97748 19.2,7.38516 Z" id="Path" fill="#FFFFFF"></path>
+                </g>
+            </g>
+        </svg>
+    )
+}
+
+const LinkedInIcon = ({ size }:IconProps) => {
+    const icon_size = size ?? 20
+
+    return (
+        <svg width={`${icon_size}px`} height={`${icon_size}px`} viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
+            <title>linkedin-svgrepo-com</title>
+            <g id="ss" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                <g id="linkedin-svgrepo-com">
+                    <circle id="Oval" fill="#0077B5" fill-rule="nonzero" cx="12" cy="12" r="12"></circle>
+                    <path d="M8.86482,6.17034 C8.86482,6.9174 8.29602,7.52196 7.40652,7.52196 C6.55164,7.52196 5.98278,6.9174 6.00042,6.17034 C5.98278,5.38698 6.55158,4.8 7.42356,4.8 C8.29602,4.8 8.84778,5.38698 8.86482,6.17034 Z M6.07194,17.29146 L6.07194,8.58972 L8.77626,8.58972 L8.77626,17.29086 L6.07194,17.29086 L6.07194,17.29146 Z" id="Shape" fill="#FFFFFF"></path>
+                    <path d="M10.94358,11.36676 C10.94358,10.28142 10.90782,9.3561 10.87206,8.59092 L13.22106,8.59092 L13.34592,9.783 L13.39932,9.783 C13.75524,9.23124 14.64474,8.39562 16.08606,8.39562 C17.86512,8.39562 19.1997,9.57012 19.1997,12.1314 L19.1997,17.2926 L16.49532,17.2926 L16.49532,12.47028 C16.49532,11.34864 16.10424,10.58394 15.12558,10.58394 C14.37798,10.58394 13.93344,11.09994 13.75578,11.59782 C13.68426,11.77608 13.64904,12.02472 13.64904,12.27444 L13.64904,17.2926 L10.94466,17.2926 L10.94466,11.36676 L10.94358,11.36676 Z" id="Path" fill="#FFFFFF"></path>
+                </g>
+            </g>
+        </svg>
+    )
+}
+
+const LinkIcon = ({ size, color }:IconProps) => {
+    const icon_size = size ?? 20
+    return (
+        <svg width={`${icon_size}px`} height={`${icon_size}px`} viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
+            <title>link-circle-svgrepo-com</title>
+            <g id="ss" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                <g id="link-circle-svgrepo-com" fill={color ?? Colors.brand.midnight}>
+                    <path d="M1.757364,22.2426 C3.514716,24 6.34314,24 12,24 C17.6568,24 20.48532,24 22.2426,22.2426 C24,20.48532 24,17.6568 24,12 C24,6.34314 24,3.514716 22.2426,1.757364 C20.48532,0 17.6568,0 12,0 C6.34314,0 3.514716,0 1.757364,1.757364 C0,3.514716 0,6.34314 0,12 C0,17.6568 0,20.48532 1.757364,22.2426 Z M9,8.1 C6.846084,8.1 5.1,9.84612 5.1,12 C5.1,14.15388 6.846084,15.9 9,15.9 C11.15388,15.9 12.9,14.15388 12.9,12 C12.9,11.50296 13.30296,11.1 13.8,11.1 C14.29704,11.1 14.7,11.50296 14.7,12 C14.7,15.14808 12.14808,17.7 9,17.7 C5.85198,17.7 3.3,15.14808 3.3,12 C3.3,8.85198 5.85198,6.3 9,6.3 C9.497052,6.3 9.9,6.702948 9.9,7.2 C9.9,7.697052 9.497052,8.1 9,8.1 Z M18.9,12 C18.9,14.15388 17.15388,15.9 15,15.9 C14.50296,15.9 14.1,16.30296 14.1,16.8 C14.1,17.29704 14.50296,17.7 15,17.7 C18.14808,17.7 20.7,15.14808 20.7,12 C20.7,8.85198 18.14808,6.3 15,6.3 C11.85192,6.3 9.3,8.85198 9.3,12 C9.3,12.49704 9.70296,12.9 10.2,12.9 C10.69704,12.9 11.1,12.49704 11.1,12 C11.1,9.84612 12.84612,8.1 15,8.1 C17.15388,8.1 18.9,9.84612 18.9,12 Z" id="Shape"></path>
+                </g>
+            </g>
+        </svg>
+    )
+}
+
 const FlameIcon = ({ size, color }:IconProps) => {
     const ratio = 0.857
     const height = size??30
@@ -339,6 +386,22 @@ const EdgeCoinIcon = ({ color, size }:IconProps) => {
     )
 }
 
+const ActivityIcon = ({ color, size }:IconProps) => {
+    const ratio = 0.7857
+    let width = size ?? 14
+    let height = width * ratio
+    return (
+        <svg width={`${width}px`} height={`${height}px`} viewBox="0 0 28 22" version="1.1" xmlns="http://www.w3.org/2000/svg">
+            <title>activity-svgrepo-com</title>
+            <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+                <g id="activity-svgrepo-com" transform="translate(2.000000, 2.000000)" stroke={color ?? Colors.brand.midnight} stroke-width="3">
+                    <path d="M0,9.80125802 L4.71504,9.80125802 C4.97052,9.80125802 5.19735429,9.63771516 5.27814857,9.39531516 L5.27814857,9.39531516 L8.35714286,0.158400878 L8.35714286,0.158400878 C8.42787429,-0.0537934081 8.7288,-0.0518048366 8.80525714,0.158400878 L8.80525714,0.158400878 L15.2142857,17.7833152 L15.2314286,17.830458 C15.3005143,18.0205723 15.5677714,18.0246866 15.6428571,17.8369723 L15.6428571,17.8369723 L18.6584571,10.298058 L18.6584571,10.298058 C18.7784571,9.99805802 19.0690286,9.80125802 19.3923429,9.80125802 L24,9.80125802" id="Path"></path>
+                </g>
+            </g>
+        </svg>
+    )
+}
+
  const ChangeIcon = ({ color, size }:IconProps) => {
     let icon_size = size ?? 14
 
@@ -1222,6 +1285,14 @@ const MarketClosedIcon = ({color, size}:IconProps) => {
     )
 }
 
+const ChatIcon = ({ color, size }:IconProps) => {
+    return (
+        <svg width={`${size ?? 18}`} height={`${size ?? 18}`} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M17 3.33782C15.5291 2.48697 13.8214 2 12 2C6.47715 2 2 6.47715 2 12C2 13.5997 2.37562 15.1116 3.04346 16.4525C3.22094 16.8088 3.28001 17.2161 3.17712 17.6006L2.58151 19.8267C2.32295 20.793 3.20701 21.677 4.17335 21.4185L6.39939 20.8229C6.78393 20.72 7.19121 20.7791 7.54753 20.9565C8.88837 21.6244 10.4003 22 12 22C17.5228 22 22 17.5228 22 12C22 10.1786 21.513 8.47087 20.6622 7" stroke={color ?? Colors.brand.midnight} stroke-width="1.5" stroke-linecap="round"/>
+        </svg>
+    )
+}
+
 const QuestionIcon = ({ color, size }:IconProps) => {
     return (
         <svg width={`${size ?? 18}`} height={`${size ?? 18}`} viewBox="0 0 26 26" version="1.1" xmlns="http://www.w3.org/2000/svg">
@@ -1304,6 +1375,9 @@ export default {
     TrophyIcon,
     ListIcon,
     UserIcon,
+    TwitterIcon,
+    LinkedInIcon,
+    LinkIcon,
     PhoneIcon,
     EmailIcon,
     NotificationIcon,
@@ -1332,6 +1406,7 @@ export default {
     SettingsIcon,
     PayPalIcon,
     ChevronIcon,
+    ActivityIcon,
     ShareSocialIcon,
     EdgeCoinIcon,
     PacerCarIcon,
@@ -1343,6 +1418,7 @@ export default {
     USDIcon,
     EyeOffIcon,
     DiscoverCardIcon,
+    ChatIcon,
     AmexCardIcon,
     TransactionIcon,
     FlameIcon,

package/src/MarketComponents/components/TeamEventMarket/api/index.ts

@@ -66,7 +66,7 @@ const TeamEventMarketHelpers = {
     },
     getEventStatus: (event:EventProps):'active'|'closed'|'inactive' => {
         let status:'active'|'closed'|'inactive' = 'active'
-        if(['postponed','cancelled','canceled','complete','completed','closed','suspended'].includes(event.status)){ status = 'closed' }
+        if(['unnecessary','postponed','cancelled','canceled','complete','completed','closed','suspended'].includes(event.status)){ status = 'closed' }
         if(status == 'active' && !event.is_active){ status = 'inactive' }
         return status
     }

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,92 @@
+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
+}
+
+const PostsList = ({ viewing_player, player_id }: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}
+                />
+            </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
+})