be-components 2.1.2 → 2.1.4

package/src/SocialComponents/PlayerProfile/index.tsx

@@ -0,0 +1,380 @@
+import React, { useEffect, useState } from 'react';
+import { View, ActivityIndicator, Image, ScrollView, FlatList, TouchableOpacity, Linking } from 'react-native';
+import type { OrderProps, PlayerFollowerProps, PlayerFollowerStatsProps, PlayerLinkProps, PublicPlayerProps } from '../../types';
+import { SocialProfileApi } from './api';
+import Colors from '../../constants/colors';
+import { view_styles } from '../../constants/styles';
+import { Button, Icons, Spring, Text } from '../../Components';
+import PlayerCard from '../PlayerCard';
+import PlayerFollowersList from './components/PlayerFollowersList';
+import PostsList from './components/PostsList';
+import SocialOrdersList from '../SocialOrdersList';
+
+type PlayerProfileProps = {
+    viewing_player_id:string,
+    player_id?:string,
+    height?:number
+}
+
+const PlayerProfile = ({ viewing_player_id, player_id, height }:PlayerProfileProps) => {
+    const [ module_size, setModuleSize ] = useState({ height:755, width:330 });
+    const [ show_following, setShowFollowing ] = useState<{
+        visible:boolean,
+        status: 'following'|'followers'
+    }>({
+        visible: false,
+        status: 'following'
+    })
+    const [ my_data, setMyData ] = useState<{
+        me_loading:boolean,
+        player_follower?:PlayerFollowerProps
+    }>({
+        me_loading:false
+    });
+    const { player_follower } = my_data;
+    
+    const [ activity_data, setActivityData ] = useState<{
+        activity_loading:boolean,
+        orders:OrderProps[],
+        activity_offset:number
+    }>({
+        activity_loading: false,
+        orders:[],
+        activity_offset: 0
+    });
+    const { orders } = activity_data;
+
+    const [ follow_data, setFollowData ] = useState<{
+        follow_loading:boolean,
+        player_followers:PlayerFollowerProps[],
+        players_following:PlayerFollowerProps[]
+    }>({
+        follow_loading: false,
+        player_followers: [],
+        players_following: []
+    });
+    const { follow_loading, player_followers, players_following } = follow_data;
+    const top_3_followers = player_followers.slice(0, 4);
+    const top_3_following = players_following.slice(0,4);
+    const [ profile_data, setData ] = useState<{
+        loading:boolean,
+        player?:PublicPlayerProps,
+        player_links:PlayerLinkProps[],
+        active_toggle:string,
+        player_follower_stats?:PlayerFollowerStatsProps
+    }>({
+        loading:false,
+        player_links:[],
+        active_toggle:'Posts'
+    });
+    const { player, active_toggle, player_links, player_follower_stats } = profile_data;
+
+    useEffect(() => {
+        SocialProfileApi.setEnvironment()
+        getDataFromServer()
+        getFollowDataFromServer();
+    },[]);
+
+    useEffect(() => {
+        if(!player_id){ return }
+        getMyDataFromServer(player_id)
+    },[player_id])
+
+    useEffect(() => {
+        switch(active_toggle){
+            case 'Activity':
+                getOrderData(0);
+                return
+            default: return
+        }
+    },[active_toggle])
+
+    const getOrderData = async(offset:number) => {
+        setActivityData({ ...activity_data, activity_loading: true });
+        const os = await SocialProfileApi.getOrdersByPlayerId(viewing_player_id, offset)
+        setActivityData({
+            ...activity_data,
+            activity_loading: false,
+            orders: os,
+            activity_offset: offset
+        })
+    }
+
+    const getDataFromServer = async() => {
+        setData({ ...profile_data, loading:true });
+        const p = await SocialProfileApi.getPlayerById(viewing_player_id)
+        const pl = await SocialProfileApi.getPlayerLinksByPlayerId(viewing_player_id);
+        const pfs = await SocialProfileApi.getFollowerStats(viewing_player_id);
+        setData({
+            ...profile_data,
+            loading:false,
+            player:p,
+            player_links:pl,
+            player_follower_stats: pfs
+        })
+    }
+
+    const getFollowDataFromServer = async() => {
+        setFollowData({ ...follow_data, follow_loading: true });
+        const followers = await SocialProfileApi.getPlayerFollowersByPlayerId(viewing_player_id, 'followers', 0);
+        const following = await SocialProfileApi.getPlayerFollowersByPlayerId(viewing_player_id, 'following', 0);
+
+        setFollowData({
+            ...follow_data,
+            follow_loading: false,
+            player_followers: followers,
+            players_following: following
+        })
+    }
+
+    const getMyDataFromServer = async(player_id:string) => {
+        setMyData({ ...my_data, me_loading:true });
+        const pf = await SocialProfileApi.getFollowerStatus(player_id, viewing_player_id);
+        setMyData({
+            ...my_data,
+            me_loading: false,
+            player_follower: pf
+        })
+    }
+
+    const renderToggles = (data:{ item:string, index:number }) => {
+        const active = data.item == active_toggle ? true : false
+        return (
+            <TouchableOpacity style={{ width: (module_size.width - 65) / 2, padding:15, borderRadius:22, backgroundColor:active?Colors.brand.midnight:'transparent' }}
+            onPress={() => setData({ ...profile_data, active_toggle: data.item })}>
+                <Text textAlign='center' weight='bold' size={14} color={active ?Colors.shades.white:Colors.brand.midnight}>{data.item}</Text>
+            </TouchableOpacity>
+        )
+    }
+    const renderFollowers = (data: { item:PlayerFollowerProps, index:number }) => {
+        if(!data.item.playerDetails){ return <></> }
+        return (
+            <View style={{ padding:4 }}>
+                <PlayerCard
+                    player={data.item.playerDetails}
+                    width={120}
+                    border
+                    alignment='vertical'
+                    onSelectPlayer={() => console.log(data.item)}
+                    onFollowingUpdate={(pf) => console.log(pf)}
+                />
+            </View>
+        )
+    }
+
+
+    const renderLinks = (data: { item:PlayerLinkProps, index:number }) => {
+        return (
+            <TouchableOpacity style={{ marginLeft:5, marginRight:5 }} onPress={() => Linking.openURL(data.item.link_full)}>
+                {data.item.link_type == 'twitter' ?
+                <Icons.TwitterIcon 
+                    size={30}
+                />
+                :data.item.link_type == 'custom' ?
+                <Icons.LinkIcon
+                    color={Colors.brand.midnight}
+                    size={30}
+                />
+                :data.item.link_type == 'linked_in' ?
+                <Icons.LinkedInIcon
+                    size={30}
+                />
+                :<></>}
+            </TouchableOpacity>
+        )
+    }
+        
+    if(!player){
+        return (
+            <ActivityIndicator
+                size='large'
+                style={{ padding:20, alignSelf:'center' }}
+                color={Colors.brand.midnight}
+            />
+        )
+    }
+
+    return (
+        <View style={{ flex:1 }} onLayout={(ev) => {
+            const { height, width } = ev.nativeEvent.layout
+            setModuleSize({ width, height });
+        }}>
+            <View style={{ position:'absolute', top:0, left:0, right:0 }} nativeID='profile_image'>
+                <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={{ 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={{ flex:1 }}>
+                            <Text theme='header'>{player.first_name} {player.last_name}</Text>
+                            <Text style={{ marginTop:4 }} theme='body_2'>@{player.username}</Text>
+                        </View>
+                        <Button
+                            title={player_follower?.status == 'following' ? 'UNFOLLOW' : 'FOLLOW'}
+                            backgroundColor={player_follower?.status == 'following' ? Colors.shades.white : Colors.brand.electric}
+                            title_color={player_follower?.status == 'following' ? Colors.brand.electric : Colors.shades.white}
+                            borderWidth={player_follower?.status == 'following' ? 1 : 0}
+                            borderColor={player_follower?.status == 'following' ? Colors.brand.electric: 'transparent'}
+                            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>
+                    {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>
+                    </View>
+                    :<></>}
+                </View>
+                <View style={{ ...view_styles.section }}>
+                    <View style={{ ...view_styles.section_header }}>
+                        <View style={{ flex:1 }}>
+                            <Text theme='header'>Followers</Text>
+                            <Text style={{ marginTop:3 }} theme='body_2'>Who is follwoing @{player.username}</Text>
+                        </View>
+                        <View style={{ padding:10 }}>
+                            <Text theme='header_2'>{player_follower_stats?.follower_count ?? 0}</Text>
+                        </View>
+                        <Button
+                            title='View All'
+                            backgroundColor={Colors.brand.midnight}
+                            title_color={Colors.shades.white}
+                            onPress={() => setShowFollowing({ visible:true, status: 'followers' })}
+                        />
+                    </View>
+                    <View style={view_styles.section_body}>
+                        <View style={{ ...view_styles.body_row }}>
+                            {follow_loading ?
+                            <ActivityIndicator size={'large'} color={Colors.brand.midnight} />
+                            :<></>}
+                            <View style={{ flex:1 }}>
+                                <FlatList
+                                    key='top_followers'
+                                    horizontal
+                                    showsHorizontalScrollIndicator={false}
+                                    data={top_3_followers}
+                                    renderItem={renderFollowers}
+                                    keyExtractor={(item) => item.player_follower_id.toString()}
+                                />
+                            </View>
+                        </View>
+                    </View>
+                </View>
+                <View style={{ ...view_styles.section }}>
+                    <View style={{ ...view_styles.section_header }}>
+                        <View style={{ flex:1 }}>
+                            <Text theme='header'>Following</Text>
+                            <Text style={{ marginTop:3 }} theme='body_2'>Who is @{player.username} following</Text>
+                        </View>
+                        <View style={{ padding:10 }}>
+                            <Text theme='header_2'>{player_follower_stats?.following_count ?? 0}</Text>
+                        </View>
+                        <Button
+                            title='View All'
+                            backgroundColor={Colors.brand.midnight}
+                            title_color={Colors.shades.white}
+                            onPress={() => setShowFollowing({ visible:true, status: 'following' })}
+                        />
+                    </View>
+                    <View style={view_styles.section_body}>
+                        <View style={{ ...view_styles.body_row }}>
+                            {follow_loading ?
+                            <ActivityIndicator size={'large'} color={Colors.brand.midnight} />
+                            :<></>}
+                            <View style={{ flex:1 }}>
+                                <FlatList
+                                    key='top_following'
+                                    showsHorizontalScrollIndicator={false}
+                                    horizontal
+                                    data={top_3_following}
+                                    renderItem={renderFollowers}
+                                    keyExtractor={(item) => item.player_follower_id.toString()}
+                                />
+                            </View>
+                        </View>
+                    </View>
+                </View>
+                <View style={{ ...view_styles.section }}>
+                    <View style={{ ...view_styles.section_header }}>
+                        <View style={{ flex:1 }}>
+                            <Text theme='header'>Activity</Text>
+                            <Text style={{ marginTop:3 }} theme='body_2'>Use the toggles below to see recent activity from @{player.username}</Text>
+                        </View>
+                    </View>
+                    <View style={{ ...view_styles.section_body, padding:0 }}>
+                        <View style={{ ...view_styles.body_row, margin:10, marginLeft:20, marginRight:20, borderRadius:22, padding:1, backgroundColor:Colors.shades.shade100 }}>
+                            <FlatList
+                                key={'toggles'}
+                                horizontal
+                                showsHorizontalScrollIndicator={false}
+                                data={['Posts','Activity']}
+                                renderItem={renderToggles}
+                                keyExtractor={(item) => item}
+
+                            />
+                        </View>
+                        {active_toggle == 'Posts' ?
+                        <PostsList
+                            viewing_player={player}
+                            player_id={player_id}
+                        />
+                        :active_toggle == 'Activity' ?
+                        <SocialOrdersList
+                            orders={orders}
+                            direction='vertical'
+                        />
+                        :<></>}
+                        
+                    </View>
+                </View>
+            </ScrollView>
+            {show_following.visible ?
+            <View style={{ position:'absolute', top:0, left:0, right:0, bottom:0, backgroundColor:Colors.shades.black_faded }}>
+                <Spring
+                    to={0}
+                    from={500}
+                    slide='vertical'
+                >
+                    <PlayerFollowersList
+                        height={height}
+                        viewing_player={player}
+                        player_id={player_id}
+                        status={show_following.status}
+                        total={show_following.status == 'followers' ? player_follower_stats?.follower_count : player_follower_stats?.following_count}
+                        onClose={() => setShowFollowing({ ...show_following, visible:false })}
+                    />
+                </Spring>
+            </View>
+            :<></>}
+        </View>
+    )
+}
+
+export default PlayerProfile
+
+
+/*
+<Text theme='body'>Joined in {moment(player.create_datetime).format('MMM YYYY')}</Text>
+*/

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { TouchableOpacity } from 'react-native';
+import { Text } from '../../../Components';
+import Colors from '../../../constants/colors';
+
+export const rti_playerEntity = (props:any) => {
+    const entity = props.contentState.getEntity(props.entityKey).getData();
+    console.log(entity)
+    return (
+        <TouchableOpacity onPress={() => console.log('Go to profile')}>
+            <Text size={14} color={Colors.brand.electric} weight='semibold'>{props.children}</Text>
+        </TouchableOpacity>
+    )
+}
+
+
+export const rti_tagEntity = (props:any) => {
+    const entity = props.contentState.getEntity(props.entityKey).getData();
+    console.log(entity)
+    return (
+        <TouchableOpacity onPress={() => console.log('olah!')}>
+            <Text size={14} color={Colors.brand.electric} weight='semibold'>{props.children}</Text>
+        </TouchableOpacity>
+    )
+}

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

@@ -0,0 +1,61 @@
+import React, { useEffect, useState } from 'react';
+import { View } from 'react-native';
+import { Editor, EditorState, convertFromRaw, CompositeDecorator } from 'draft-js';
+import 'draft-js/dist/Draft.css';
+import type { RawDraftJSProps } from '../../../types';
+import { rti_playerEntity, rti_tagEntity } from './DraftTextEntities';
+import { rti_findPlayerEntities, rti_findTagEntities, createDraftJSFromText } from './EntityHelpers';
+
+type DraftTextViewerProps = {
+    post_id:string,
+    text_fallback: string,
+    formatted_body?: RawDraftJSProps,
+    view_type: 'memo'|'comment'|'message'
+}
+
+function DraftTextViewer({ post_id, formatted_body, text_fallback }:DraftTextViewerProps) {
+    const [ failed, setFailed ] = useState(false)
+    const [editorState, setEditorState] = useState(
+    () => EditorState.createEmpty(),
+  );
+
+  const decorator = new CompositeDecorator([
+    {
+        strategy: rti_findPlayerEntities,
+        component: rti_playerEntity,
+        props: { test: 'hey!' }
+    },
+    {
+        strategy: rti_findTagEntities,
+        component: rti_tagEntity,
+        props: { test: 'hey!' }
+    }
+]);
+
+
+  useEffect(() => {
+      if(formatted_body){
+          let readContent = convertFromRaw(formatted_body as any)
+          setEditorState(EditorState.createWithContent(readContent, decorator))
+          setFailed(false)
+      } else { 
+            if(!text_fallback){ setFailed(true) }
+            else { setEditorState(EditorState.createWithContent(createDraftJSFromText(text_fallback))); setFailed(false) }
+       }
+  },[post_id, formatted_body, text_fallback])
+
+
+  if(failed){ return (<></>) }
+  return (
+      <View>
+            <Editor
+                readOnly 
+                editorState={editorState} 
+                onChange={setEditorState} /> 
+      </View>
+    
+  )
+}
+
+export default DraftTextViewer
+

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

@@ -0,0 +1,44 @@
+import { ContentState } from "draft-js";
+import isUrl from "is-url";
+
+export const rti_findPlayerEntities = (contentBlock:any, callback:any, contentState:any) => {
+    contentBlock.findEntityRanges(
+      (character:any) => {
+        const entityKey = character.getEntity();
+        return (
+          entityKey !== null &&
+          contentState.getEntity(entityKey).getType() === 'PLAYER'
+        );
+      },
+      callback
+    );
+  }
+
+
+  export const rti_findTagEntities = (contentBlock:any, callback:any, contentState:any) => {
+    contentBlock.findEntityRanges(
+      (character:any) => {
+        const entityKey = character.getEntity();
+        return (
+          entityKey !== null &&
+          contentState.getEntity(entityKey).getType() === 'TAG'
+        );
+      },
+      callback
+    );
+  }
+
+
+
+type ValidatedURLType = { url:string, error:boolean, message?:string }
+export const validateUrl = (url:string):ValidatedURLType => {
+  if(isUrl(url)){ return { url, error:false } }
+  let newURL = `https://${url}`
+  if(!isUrl(newURL)){ return { url, error:true, message: 'URL is not valid' } }
+  return { url:newURL, error:false }
+}
+
+export const createDraftJSFromText = (text:string) => {
+  if(text === '' || text === ' '){ return ContentState.createFromText('') }
+  return ContentState.createFromText(text)
+}

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Image, View } from 'react-native';
+import { view_styles } from '../../../constants/styles';
+import type { PostProps, PublicPlayerProps } from '../../../types';
+import { Text } from '../../../Components';
+import moment from 'moment-mini';
+
+type PostHeaderProps = {
+    player: PublicPlayerProps,
+    post:PostProps
+}
+
+const PostHeader = ({ player, post }:PostHeaderProps) => {
+    return (
+        <View style={{ ...view_styles.section_header, padding:5 }}>
+            <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 }}
+                resizeMode='cover'
+            />
+            <View style={{ flex:1, marginLeft:10 }}>
+                <Text theme='header_2'>{player.first_name} {player.last_name}</Text>
+                <Text style={{ marginTop:3 }} theme='body_2'>@{player.username} • {moment(post.create_datetime).fromNow()}</Text>
+            </View>
+        </View>
+    )
+}
+
+export default PostHeader

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

@@ -0,0 +1,75 @@
+import React, { useState } from 'react';
+import { FlatList, View, TouchableOpacity } 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_reaction_stats: PostReactionStatsProps[],
+    my_post_reactions: PostReactionProps[],
+    featured?:boolean,
+    onReactionSelect: (reaction:string) => 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_reaction_stats, my_post_reactions, onReactionSelect }:PostReactionBarProps) => {
+    const [ more_selected, setMoreSelected ] = useState(false);
+    const handleReaction = async(reaction:string) => {
+        if(!onReactionSelect){ return }
+        onReactionSelect(reaction)
+        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))
+    }
+    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)}
+            />
+            :<></>}
+        </View>
+    )
+}
+
+export default PostReactionBar