be-components 5.1.8 → 5.1.9

package/src/SocialComponents/InputBar/components/ActionSelector.tsx

@@ -0,0 +1,164 @@
+import React, { useEffect, useState } from 'react';
+import { ActivityIndicator, FlatList, Modal } from "react-native"
+import { Button, Text, View } from '../../../Components/Themed';
+import { SocialComponentApi, SocialOrderHelpers } from '../../api';
+import type { AthleteProps, EventProps, LeagueProps, MatchProps, OrderProps, TeamProps, TournamentProps } from '../../../types';
+import { useColors } from '../../../constants/useColors';
+import SocialOrderCard from '../../SocialOrderCard';
+
+type ActionSelectProps = {
+    visible:boolean,
+    onClose:() => void,
+    onTagOrder:(order:OrderProps) => void,
+    insets?:{ top:number, left:number, right:number, bottom:number }
+}
+
+const sections = ['toggle','orders']
+const ActionSelector = ({ visible, insets, onClose, onTagOrder }:ActionSelectProps) => {
+    const Colors = useColors();
+    const [ tagged_action, setTaggedAction ] = useState<{
+        tagged_orders:string[]
+    }>({
+        tagged_orders:[]
+    });
+    const { tagged_orders } = tagged_action;
+    const [ action_state, setActionState ] = useState<{
+        loading:boolean,
+        orders:OrderProps[],
+        events:EventProps[],
+        tournaments:TournamentProps[],
+        matches:MatchProps[],
+        leagues:LeagueProps[],
+        teams:TeamProps[],
+        athletes:AthleteProps[]
+    }>({
+        loading:false,
+        orders:[],
+        events: [],
+        tournaments:[],
+        leagues:[],
+        teams:[],
+        matches:[],
+        athletes:[]
+    });
+    const { loading, orders, events, athletes, leagues, tournaments, matches, teams } = action_state;
+
+    useEffect(() => {
+        if(!visible){ return setTaggedAction({ ...tagged_action, tagged_orders: [] })}
+        getMyAction()
+    },[visible]);
+
+    const getMyAction = async() => {
+        setActionState({ ...action_state, loading:true });
+        const ords = await SocialComponentApi.getMyAction()
+        const { event_ids, tournament_ids, match_ids, athlete_ids, team_ids } = SocialOrderHelpers.getIdsFromOrders(ords);
+        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);
+        setActionState({
+            ...action_state,
+            loading:false,
+            leagues: l,
+            teams:tm,
+            orders:ords,
+            matches: m,
+            tournaments: t,
+            events: e,
+            athletes: a
+        });
+    }
+
+    const renderOrders = (data: { item:OrderProps, index:number }) => {
+        const { time, title, league } = SocialOrderHelpers.getContestDetails(data.item, events, tournaments, matches, athletes, teams, leagues);
+        const tagged = tagged_orders.includes(data.item.order_id) ? true : false
+        return (
+            <View transparent style={{ margin:5, borderWidth:tagged?2:0, borderColor:Colors.text.success}}>
+                <SocialOrderCard
+                    order={data.item}
+                    league={league}
+                    onTagOrder={(order) => {
+                        if(tagged){
+                            setTaggedAction({
+                                ...tagged_action,
+                                tagged_orders: tagged_orders.filter(o => o != order.order_id)
+                            });
+                        } else {
+                            setTaggedAction({
+                                ...tagged_action,
+                                tagged_orders: tagged_orders.filter(o => o != order.order_id).concat(order.order_id)
+                            });
+                        }
+                        
+                        onTagOrder(order)
+                    }}
+                    contest_time={time}
+                    contest_title={title}
+                />
+            </View>
+            
+        )
+    }
+
+    const renderSections = (data:{ item:string, index:number }) => {
+        switch(data.item){
+            case 'toggle':
+                return <></>
+            case 'orders':
+                return (
+                    <View transparent style={{ padding:10 }}>
+                        <FlatList
+                            key={`action_orders`}
+                            keyExtractor={(item) => item.order_id.toString()}
+                            renderItem={renderOrders}
+                            data={orders}
+                        />
+                    </View>
+                    
+                )
+            default: return <></>
+        }
+    }
+
+    return (
+        <Modal
+            visible={visible}
+            style={{ flex:1 }}
+            animationType='slide'
+            transparent
+        >
+            <View type='blur' style={{ flex:1, paddingTop:insets?.top, paddingBottom:insets?.bottom }}>
+                <View float style={{ flex:1, margin:20 }}>
+                    <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+                        <View transparent style={{ flex:1 }}>
+                            <Text theme='h1'>Your Current Action</Text>
+                            <Text style={{ marginTop:3 }} theme='description'>Select the order or other action you would like to tag!</Text>
+                        </View>
+                        <Button
+                            style={{ height:30, width:30, borderRadius:100, justifyContent:'center', alignItems:'center', padding:0 }}
+                            title='X'
+                            float
+                            type='close'
+                            onPress={() => onClose()}
+                        />
+                    </View>
+                    {loading ?
+                    <ActivityIndicator style={{ padding:20, alignSelf:'center' }} size='large' color={Colors.text.h1}/>
+                    :<></>}
+                    <View transparent style={{ flex:1 }}>
+                        <FlatList
+                            data={sections}
+                            key={'action_selector_sections'}
+                            keyExtractor={item => item}
+                            renderItem={renderSections}
+                        />
+                    </View>
+                </View>
+            </View>
+        </Modal>
+    )
+}
+
+export default ActionSelector

package/src/SocialComponents/InputBar/index.tsx

@@ -1,35 +1,63 @@
-import React from 'react';
-import { View } from "../../Components/Themed"
+import React, { useState } from 'react';
+import { Button, View } from "../../Components/Themed"
 import { FlatList } from 'react-native';
 import { Icons } from '../../Components';
 import { useColors } from '../../constants/useColors';
 import ImageUploader from '../../Components/ImageUploader';
+import ActionSelector from './components/ActionSelector';
+import type { OrderProps } from '../../types';
 
 type InputBarProps = {
     actions: string[],
-    onImageUpload: (image: { url:string, [key:string]:any }) => void
+    width:number,
+    insets?:{ top:number, left:number, right:number, bottom:number },
+    onImageUpload: (image: { url:string, [key:string]:any }) => void,
+    onTagOrder?:(order:OrderProps) => void
 }
 
-const InputBar = ({ actions, onImageUpload } : InputBarProps) => {
+const InputBar = ({ actions, insets, onImageUpload, onTagOrder } : InputBarProps) => {
+    //const [ gif_select, setGifSelect ] = useState(false);
+
+    const [ input_state, setInputState ] = useState<{
+        action_selector_visible: boolean
+    }>({
+        action_selector_visible: false
+    });
+    const { action_selector_visible } = input_state
+
     const Colors = useColors();
 
     const renderActions = (data:{ item:string, index:number }) => {
         switch(data.item){
             case 'image':
                 return (
-                    <View float>
+                    <View style={{ margin:4, justifyContent:'center', alignItems:'center' }}>
                         <ImageUploader
                             public_id={(Math.random()*100000).toFixed()}
                             onFinishUpload={(obj) => onImageUpload({ ...obj, url: obj.secure_url })}
                         >
-                            <Icons.ImageIcon size={20} color={Colors.text.h1} />
+                            <Icons.ImageIcon size={16} color={Colors.text.action} />
                         </ImageUploader>
                     </View>
                 )
+            case 'action':
+                return (
+                    <Button style={{ justifyContent:'center', alignItems:'center', margin:4, padding:10 }} onPress={() => setInputState({ ...input_state, action_selector_visible:true })}>
+                        <Icons.ActivityIcon size={18} color={Colors.text.action} />
+                    </Button>
+                )
+            case 'gif':
+                return (
+                    <Button style={{ justifyContent:'center', alignItems:'center', margin:4, padding:10 }} onPress={() => console.log('')}>
+                        <Icons.GIFIcon size={18} color={Colors.text.action} />
+                    </Button>
+                )
             default: return <></>
         }
     }
 
+
+
     return (
         <View transparent style={{ flexDirection:'row', alignItems:'center', padding:2 }}>
             <FlatList
@@ -39,6 +67,12 @@ const InputBar = ({ actions, onImageUpload } : InputBarProps) => {
                 keyExtractor={(item) => item}
                 renderItem={renderActions}
             />
+            <ActionSelector
+                visible={action_selector_visible}
+                insets={insets}
+                onTagOrder={(order) => onTagOrder ? onTagOrder(order) : console.log('')}
+                onClose={() => setInputState({ ...input_state, action_selector_visible: false })}
+            />
         </View>
     )
 }

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

@@ -0,0 +1,2 @@
+
+

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

@@ -1,43 +1,50 @@
 import React from 'react';
 import { FlatList, View, Image } from 'react-native';
+import { Button } from '../../../Components/Themed';
+import { SocialComponentHelpers } from '../../api';
 
 type ImageListProps = {
     post_id:string,
     images: any[],
-    width:number
+    width:number,
 }
-const ImageList = ({ post_id, width, images }:ImageListProps) => {
+const ImageList = ({ width, images }:ImageListProps) => {
+    
+    const new_images = SocialComponentHelpers.organizeImages(images, width-2, 250, 2, 150)
     
-    const resizeImage = (image:any) => {
-        let image_width = image.width ?? width
-        let image_height = image.height ?? width
-        const ratio = image_height / image_width
-        let new_width = width
-        let new_height = width * ratio
-        return { width: new_width, height: new_height }
-    }
 
-    const renderImages = (data: { item:any, index:number }) => {
-        const { width, height } = resizeImage(data.item);
+    const renderImages = (data:{ item:any, index:number }) => {
         return (
-            <View>
+            <Button float style={{ padding:0, paddingLeft:data.item.paddingLeft, paddingRight:data.item.paddingRight }}>
                 <Image
-                    source={{ uri:data.item.url }}
-                    style={{ width, height }}
+                    source={{ uri: data.item.url }}
+                    style={{ height: data.item.scaledHeight, width: data.item.scaledWidth, borderRadius:8 }}
                     resizeMode='cover'
                 />
+            </Button>
+        )
+    }
+
+    const renderImageRows = (data: { item:any, index:number }) => {
+        return (
+            <View style={{ alignItems:'center', marginBottom:2 }}>
+                <FlatList
+                    data={data.item}
+                    renderItem={renderImages}
+                    scrollEnabled={false}
+                    horizontal
+                />
             </View>
+            
         )
     }
 
     return (
-        <View>
+        <View style={{ flexDirection:'row', justifyContent:'center', flexWrap:'wrap' }}>
             <FlatList
-                key={`${post_id}_post_images`}
-                data={images}
-                horizontal
-                renderItem={renderImages}
-                keyExtractor={(item) => item.url}
+                data={new_images}
+                keyExtractor={(item, index) => `${item.length}_${index}`}
+                renderItem={renderImageRows}
             />
         </View>
     )

package/src/SocialComponents/PostCard/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import type { ArticleProps, OrderProps, PostCommentStatProps, PostProps, PostReactionProps, PostReactionStatsProps, PublicPlayerProps } from '../../types';
+import type { ArticleProps, OrderProps, PostCommentStatProps, PostProps, PostReactionProps, PostReactionStatsProps, PublicPlayerProps, TextTagProps } from '../../types';
 import PostHeader from './components/PostHeader';
 import { useIsInViewport } from '../../Components/ViewportObserver';
 import { SocialProfileApi } from '../PlayerProfile/api';
@@ -11,6 +11,10 @@ import ImageList from './components/ImageList';
 import { SocialComponentApi } from '../api';
 import { Button, Text, View } from '../../Components/Themed';
 import { useColors } from '../../constants/useColors';
+import { FormattedText } from '../FormattedTextInput/FormattedText';
+import ArticleCard from '../ArticleCard';
+import UrlPreviewCard from '../UrlPreviewCard';
+import { FlatList } from 'react-native';
 
 
 type PostCardProps = {
@@ -19,13 +23,18 @@ type PostCardProps = {
     articles:ArticleProps[],
     orders:OrderProps[],
     player_id?:string,
+    width:number,
+    onSelectTag:(tag:TextTagProps) => void,
     onSelectPlayer:(p:PublicPlayerProps) => void,
     onRequestAuthenticate:() => void,
     onCopyOrder?:(order:OrderProps) => void,
     onFadeOrder?:(order:OrderProps) => void,
     onViewComments?:(post_id:string) => void
 }
-const PostCard = ({ player_id, post, player, orders, onRequestAuthenticate, onCopyOrder, onFadeOrder, onViewComments, onSelectPlayer }:PostCardProps) => {
+
+const sections = ['header', 'title', 'body', 'orders','images','articles', 'urls', 'footer']
+
+const PostCard = ({ player_id, width, articles, post, player, orders, onRequestAuthenticate, onCopyOrder, onFadeOrder, onViewComments, onSelectPlayer, onSelectTag }:PostCardProps) => {
     const Colors = useColors();
     const [ post_data, setPostData ] = useState<{
         loading:boolean,
@@ -120,64 +129,121 @@ const PostCard = ({ player_id, post, player, orders, onRequestAuthenticate, onCo
         }
     }
 
+    const renderSections = (data:{ item:string, index:number }) => {
+        switch(data.item){
+            case 'header':
+                if(!player){ return <></> }
+                return (
+                    <PostHeader 
+                        player={player}
+                        post={post}
+                        onSelectPlayer={onSelectPlayer}
+                    />
+                )
+            case 'title':
+                return (
+                    <View transparent style={{ padding:10 }}>
+                        <Text theme='h2'>{post.title}</Text>
+                    </View>
+                )
+            case 'body':
+                return (
+                    <View transparent style={{ padding:20, paddingTop:0, paddingBottom:0 }}>
+                        {post.formatted_text ?
+                        <FormattedText
+                            text={post.formatted_text}
+                            tags={post.tags ?? []}
+                            onSelectTag={(tag) => onSelectTag(tag)}
+                        />
+                        :
+                        <Text theme='description'>{post.body}</Text>
+                        }
+                    </View>
+                )
+            case 'orders':
+                if(!player || !post.memo_orders){ return <></> }
+                return (
+                    <View style={{ padding:10 }}>
+                        <SocialOrdersList
+                            players={[player]}
+                            orders={orders}
+                            maxWidth={300}
+                            direction='horizontal'
+                            onCopyOrder={onCopyOrder}
+                            onFadeOrder={onFadeOrder}
+                        />
+                    </View>
+                )
+            case 'artciles':
+                if(!post.memo_articles || !articles[0]){ return <></> }
+                return (
+                    <View transparent>
+                        <ArticleCard
+                            article={articles[0]}
+                            width={width}
+                            onSelectArticle={() => console.log('hey')}
+                        />
+                    </View>
+                )
+            case 'urls':
+                if(!post.memo_urls || !post.memo_urls[0]){ return <></> }
+                return (
+                <View transparent style={{ margin:5 }}>
+                    <UrlPreviewCard
+                        url={post.memo_urls[0]}
+                        width={width - 10}
+                        max_height={175}
+
+                    />
+                </View>
+                )
+            case 'images':
+                if(!post.memo_images || post.memo_images.length == 0){ return <></> }
+                return (
+                    <View transparent style={{ padding:10 }}>
+                        <ImageList
+                            post_id={post.memo_post_id}
+                            images={post.memo_images}
+                            width={width - 20} //Take out the padding
+                        />
+                    </View>
+                )
+            case 'footer':
+                return (
+                    <View type='footer' style={{ flexDirection:'row', alignItems:'center', padding:5, borderBottomRightRadius:8, borderBottomLeftRadius:8 }}>
+                        <View float transparent style={{ padding:5 }}>
+                            <PostReactionBar
+                                loading={my_data_loading}
+                                post_id={post.memo_post_id}
+                                post_reaction_stats={post_reaction_stats ?? []}
+                                my_post_reactions={my_reactions ?? []}
+                                onReactionSelect={(r) => handleReaction(r)}
+                            />
+                        </View>
+                        {onViewComments ?
+                        <Button
+                            style={{ flex:1, flexDirection:'row', alignItems:'center', justifyContent:'flex-end' }}
+                            onPress={() => onViewComments(post.memo_post_id)}
+                        >
+                            <Text style={{ marginRight:4 }} theme='h2'>{post_comment_stat.comment_count}</Text>
+                            <Icons.ChatIcon size={18} color={Colors.text.h1}/>
+                        </Button>
+                        :<></>}
+                    </View>
+                )
+            default: return <></>
+        }
+    }
+
 
     return (
         <View float ref={post_ref as any}>
-            {player ?
-            <PostHeader 
-                player={player}
-                post={post}
-                onSelectPlayer={onSelectPlayer}
-            />
-            :<></>}
-            <View transparent style={{ padding:10 }}>
-                <Text theme='h2'>{post.title}</Text>
-            </View>
-            <View transparent style={{ padding:10, paddingTop:0, paddingBottom:0 }}>
-                <Text theme='description'>{post.body}</Text>
-            </View>
-            {post.memo_articles && post.memo_articles.length > 0 ?
-            <View transparent>
-                
-            </View>
-            :<></>}
-            {player && post.memo_orders && post.memo_orders.length > 0 ?
-            <SocialOrdersList
-                players={[player]}
-                orders={orders}
-                maxWidth={300}
-                direction='horizontal'
-                onCopyOrder={onCopyOrder}
-                onFadeOrder={onFadeOrder}
+            <FlatList
+                data={sections}
+                renderItem={renderSections}
+                key={`post_sections`}
+                keyExtractor={item => item}
             />
-            :<></>}
-            {post.memo_images && post.memo_images.length > 0 ?
-            <ImageList
-                post_id={post.memo_post_id}
-                images={post.memo_images}
-                width={300}
-            />
-            :<></>}
-            <View type='footer' style={{ flexDirection:'row', alignItems:'center', padding:5 }}>
-                <View float transparent style={{ padding:5 }}>
-                    <PostReactionBar
-                        loading={my_data_loading}
-                        post_id={post.memo_post_id}
-                        post_reaction_stats={post_reaction_stats ?? []}
-                        my_post_reactions={my_reactions ?? []}
-                        onReactionSelect={(r) => handleReaction(r)}
-                    />
-                </View>
-                {onViewComments ?
-                <Button
-                    style={{ flex:1, flexDirection:'row', alignItems:'center', justifyContent:'flex-end' }}
-                    onPress={() => onViewComments(post.memo_post_id)}
-                >
-                    <Text style={{ marginRight:4 }} theme='h2'>{post_comment_stat.comment_count}</Text>
-                    <Icons.ChatIcon size={18} color={Colors.text.h1}/>
-                </Button>
-                :<></>}
-            </View>
         </View>
     )
 }