be-components 5.1.8 → 5.1.9

package/src/SocialComponents/Poster/index.tsx

@@ -0,0 +1,264 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Text, TextInput, View } from "../../Components/Themed"
+import FormattedTextInput from '../FormattedTextInput';
+import InputBar from '../InputBar';
+import type { OrderProps, PostProps, PublicPlayerProps, TextTagProps } from '../../types';
+import { SocialComponentApi, SocialComponentHelpers } from '../api';
+import ImageList from '../PostCard/components/ImageList';
+import { useColors } from '../../constants/useColors';
+import { Icons } from '../../Components';
+import { FlatList } from 'react-native';
+import SocialOrdersList from '../SocialOrdersList';
+
+type PosterProps = {
+    width:number,
+    post_id?:string,
+    insets?:{ top:number, left:number, right:number, bottom:number },
+    onCreatePost:(post:PostProps) => void
+}
+
+const sections = ['input_bar','title','post','orders','images']
+const Poster = ({ width, post_id, insets, onCreatePost }: PosterProps) => {
+    const Colors = useColors();
+    const [ submit_caller, setSubmitCaller ] = useState<string|undefined>(undefined);
+    const [ post_data, setPostData ] = useState<{
+        draft_post?:PostProps,
+        players:PublicPlayerProps[],
+        post?:PostProps,
+        orders:OrderProps[],
+        action_loading:boolean
+    }>({
+        action_loading: false,
+        players:[],
+        orders:[]
+    });
+
+    const { post, draft_post, action_loading, orders } = post_data;
+    const valid = SocialComponentHelpers.isPostValid(draft_post);
+
+    useEffect(() => {
+        SocialComponentApi.setEnvironment();
+        setUpPost(post_id);
+    },[post_id]);
+
+    const setUpPost = async(post_id?:string) => {
+        let existing_post:PostProps | undefined
+        let ords:OrderProps[] = []
+        let playrs:PublicPlayerProps[] = []
+        if(post_id){
+            existing_post = await SocialComponentApi.getPostById(post_id);
+            if(existing_post){
+                const set_up_data = await SocialComponentHelpers.getPostsData([existing_post]);
+                ords = set_up_data.orders
+                playrs = set_up_data.players
+            }
+            
+        } //Not set up to handle this yet!
+        setPostData({ 
+            ...post_data, 
+            orders: ords,
+            players: playrs,
+            draft_post: existing_post ?? SocialComponentHelpers.getEmptyPost(),
+            post: existing_post
+        })
+    }
+
+    const handlePublishPost = async(data:{ text:string, formatted_text:string }, tags:TextTagProps[]) => {
+        if(!draft_post || action_loading || !valid){ return }
+        setPostData({
+            ...post_data,
+            action_loading:true 
+        });
+        //Drop data on tags
+        tags = tags.map(t => { return { ...t, data: undefined } });
+        let saved_post:PostProps | undefined = undefined
+
+        //Lets check for urls
+        const url = SocialComponentHelpers.getUrlsFromString(data.text.toLowerCase());
+        console.log(url)
+        let memo_urls:string[] = []
+        if(url){ memo_urls.push(url) }
+
+        if(draft_post.memo_post_id){
+            saved_post = await SocialComponentApi.updatePost({ ...draft_post, memo_urls, tags: tags, body: data.text, formatted_text: data.formatted_text });
+        } else {
+            saved_post = await SocialComponentApi.createPost({ ...draft_post, memo_urls, tags: tags, body: data.text, formatted_text: data.formatted_text });
+        }
+        setPostData({
+            ...post_data,
+            action_loading:false
+        });
+        if(!saved_post){ return }
+        onCreatePost(saved_post);
+    }
+
+    const renderSections = (data:{ item:string, index:number }) => {
+        switch(data.item){
+            case 'input_bar':
+                return (
+                    <View style={{ borderBottomWidth:1, borderColor:Colors.borders.light }}>
+                        <InputBar
+                            actions={['image','action']}
+                            insets={insets}
+                            width={width}
+                            onTagOrder={(order) => {
+                                if(!draft_post){ return }
+                                let exists = draft_post.memo_orders.find(o => o == order.order_id);
+                                if(exists){
+                                    setPostData({
+                                        ...post_data,
+                                        orders: orders.filter(o => o.order_id != order.order_id),
+                                        draft_post: {
+                                            ...draft_post,
+                                            memo_orders: draft_post.memo_orders.filter(o => o != order.order_id)
+                                        }
+                                    })
+                                } else {
+                                    //Lets check if its already included!
+                                    setPostData({
+                                        ...post_data,
+                                        orders: orders.filter(o => o.order_id != order.order_id).concat(order),
+                                        draft_post: {
+                                            ...draft_post,
+                                            memo_orders: draft_post.memo_orders.filter(o => o != order.order_id).concat(order.order_id)
+                                        }
+                                    })
+                                }
+                            }}
+                            onImageUpload={(image) => {
+                                if(!draft_post){ return }
+                                setPostData({
+                                    ...post_data,
+                                    draft_post: { 
+                                        ...draft_post,
+                                        memo_images: draft_post.memo_images.concat(image)
+                                    }
+                                })
+                            }}
+                        />
+                    </View>
+                )
+            case 'title':
+                if(!draft_post){ return <></> }
+                return (
+                    <View nativeID='title'>
+                        <TextInput
+                            style={{ borderWidth:0, fontSize:14 }}
+                            placeholder='Title'
+                            value={draft_post.title}
+                            weight='bold'
+                            onChangeText={(text) => {
+                                if(!draft_post){ return }
+                                setPostData({ 
+                                    ...post_data,
+                                    draft_post: {
+                                        ...draft_post,
+                                        title: text
+                                    }
+        
+                                })
+                            }}
+                        />
+                    </View>
+                )
+            case 'post':
+                if(!draft_post){ return <></> }
+                return (
+                <View nativeID='post_body'>
+                    <FormattedTextInput
+                        hide_border
+                        width={width}
+                        disable_scroll
+                        tag_selector_location='bottom'
+                        submit_caller={submit_caller}
+                        init_data={{ text: post?.body ?? '', formatted_text: post?.formatted_text ?? '', tags: post?.tags ?? [] }}
+                        placeholder='Start typing here ...'
+                        onSubmit={(data, tags) => handlePublishPost(data, tags)}
+                        onChangeText={(data) => {
+                            if(!draft_post){ return }
+                            setPostData({ 
+                                ...post_data,
+                                draft_post: {
+                                    ...draft_post,
+                                    body: data.text,
+                                    formatted_text: data.formatted_text
+                                }
+
+                            })
+                        }}
+                    />
+                </View>
+                )
+            case 'orders':
+                if(!draft_post){ return <></> }
+                if(!draft_post.memo_orders){ return <></> }
+                return (
+                    <View style={{ padding:10 }}>
+                        <SocialOrdersList
+                            orders={orders.filter(o => draft_post.memo_orders.includes(o.order_id))}
+                            players={[]}
+                            onUntagOrder={(order) => {
+                                if(!draft_post){ return }
+                                setPostData({
+                                    ...post_data,
+                                    orders: orders.filter(o => o.order_id != order.order_id),
+                                    draft_post: {
+                                        ...draft_post,
+                                        memo_orders: draft_post.memo_orders.filter(o => o != order.order_id)
+                                    }
+                                })
+                            }}
+                            maxWidth={width}
+                            direction='horizontal'
+                        />
+                    </View>
+                )
+            case 'images':
+                if(!draft_post){ return <></> }
+                if(!draft_post.memo_images){ return <></> }
+                return (
+                    <View>
+                        <ImageList
+                            images={draft_post.memo_images}
+                            width={width-10}
+                            post_id=''
+                        />
+                    </View>
+                )
+
+            default: return <></>
+        }
+    }
+
+
+    if(!draft_post){ return <></> }
+
+    return (
+        <View style={{ flex:1 }}>
+            <View nativeID='actions' type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, paddingTop:(insets?.top ?? 0) + 10 }}>
+                <Button transparent style={{ flexDirection:'row', alignItems:'center' }}>
+                    <Icons.CloseIcon  size={10} color={Colors.text.h1} />
+                    <Text theme='description' style={{ marginLeft:10 }}>Close</Text>
+                </Button>
+                <View transparent style={{ flex:1 }} />
+                <Button
+                    title='Publish'
+                    type='success'
+                    disabled={!valid}
+                    loading={action_loading}
+                    style={{ padding:10, opacity: valid && !action_loading ? 1 : 0.5 }}
+                    onPress={() => setSubmitCaller(Math.random().toString())}
+                />
+            </View>
+            <FlatList
+                data={sections}
+                key={`poster_sections`}
+                renderItem={renderSections}
+                keyExtractor={item => item}
+            />
+            
+        </View>
+    )
+}
+
+export default Poster

package/src/SocialComponents/SocialOrderCard.tsx

@@ -18,14 +18,14 @@ type SocialOrderCardProps = {
     maxWidth?:number,
     team?:TeamProps,
     league?:LeagueProps,
+    onTagOrder?:(order:OrderProps) => void,
     onCopyOrder?:(order:OrderProps) => void,
     onFadeOrder?:(order:OrderProps) => void
 }
-const SocialOrderCard = ({ player, show_player, maxWidth, league, team, athlete, order, contest_title, contest_time, onCopyOrder, onFadeOrder }:SocialOrderCardProps) => {
+const SocialOrderCard = ({ player, show_player, maxWidth, league, team, athlete, order, contest_title, contest_time, onTagOrder, onCopyOrder, onFadeOrder }:SocialOrderCardProps) => {
     const Colors = useColors();
     const [ fade_loading, setFadeLoading ] = useState(false);
     const { result_label, color } = SocialOrderHelpers.getResultDetails(order)
-    
     const handleFadeOrder = async() => {
         if(!onFadeOrder){ return }
         if(fade_loading){ return }
@@ -49,9 +49,8 @@ const SocialOrderCard = ({ player, show_player, maxWidth, league, team, athlete,
         })
         setFadeLoading(false);
     }
-    
     return (
-        <View float style={{ minWidth:275, maxWidth }}>
+        <Button disabled={!onTagOrder} float style={{ minWidth:275, maxWidth, padding:0, flex:1 }} onPress={() => onTagOrder ? onTagOrder(order) : console.log('')}>
             {show_player && player ?
             <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
                 <Image
@@ -67,7 +66,6 @@ const SocialOrderCard = ({ player, show_player, maxWidth, league, team, athlete,
             </View>
             :<></>}
             <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
-                
                 <View transparent style={{ flex:1, marginRight:10 }}>
                     <Text theme='description'>{contest_title}</Text>
                     <Text style={{ marginTop:3 }} size={12} theme='light' weight='regular'>{contest_time}</Text>
@@ -147,7 +145,7 @@ const SocialOrderCard = ({ player, show_player, maxWidth, league, team, athlete,
                 :<></>}
             </View>
             :<></>}
-        </View>
+        </Button>
     )
 }
 

package/src/SocialComponents/SocialOrdersList.tsx

@@ -3,7 +3,7 @@ import { FlatList } from 'react-native';
 import type { AthleteProps, EventProps, LeagueProps, MatchProps, OrderProps, PublicPlayerProps, TeamProps, TournamentProps } from '../types';
 import SocialOrderCard from './SocialOrderCard';
 import { SocialComponentApi, SocialOrderHelpers } from './api';
-import { View } from '../Components/Themed';
+import { Button, View } from '../Components/Themed';
 
 type SocialOrdersListProps = {
     players:PublicPlayerProps[],
@@ -11,10 +11,11 @@ type SocialOrdersListProps = {
     orders:OrderProps[],
     maxWidth?:number,
     direction: 'vertical'|'horizontal',
+    onUntagOrder?:(order:OrderProps) => void,
     onCopyOrder?:(order:OrderProps) => void,
     onFadeOrder?:(order:OrderProps) => void
 }
-const SocialOrdersList = ({ maxWidth, players, show_player, orders, direction, onCopyOrder, onFadeOrder }:SocialOrdersListProps) => {
+const SocialOrdersList = ({ maxWidth, players, show_player, orders, direction, onUntagOrder, onCopyOrder, onFadeOrder }:SocialOrdersListProps) => {
     const [list_data, setListData] = useState<{
         loading:boolean,
         leagues:LeagueProps[],
@@ -33,13 +34,11 @@ const SocialOrdersList = ({ maxWidth, players, show_player, orders, direction, o
         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
@@ -61,7 +60,6 @@ const SocialOrdersList = ({ maxWidth, players, show_player, orders, direction, o
             athletes: a,
             teams: tm
         })
-
     }
 
 
@@ -69,7 +67,7 @@ const SocialOrdersList = ({ maxWidth, players, show_player, orders, direction, o
         let { title, time, league, team, athlete } = SocialOrderHelpers.getContestDetails(data.item, events, tournaments, matches, athletes, teams, leagues);
         let player = players.find(p => p.player_id == data.item.player_id)
         return (
-            <View style={{ margin:5 }}>
+            <View transparent style={{ margin:5 }}>
                 <SocialOrderCard
                     show_player={show_player}
                     player={player}
@@ -83,12 +81,20 @@ const SocialOrdersList = ({ maxWidth, players, show_player, orders, direction, o
                     onFadeOrder={onFadeOrder}
                     onCopyOrder={onCopyOrder}
                 />
+                {onUntagOrder ?
+                <Button
+                    float
+                    type='error'
+                    style={{ padding:0, justifyContent:'center', alignItems:'center', height:30, width:30, borderRadius:100, position:'absolute', top:5, left:5 }}
+                    title='X'
+                    onPress={() => onUntagOrder(data.item)}
+                />
+                :<></>}
             </View>
         )
     }
-
     return (
-        <View style={{ justifyContent:'center' }}>
+        <View style={{ flex:1 }}>
             <FlatList
                 data={orders}
                 renderItem={renderOrders}

package/src/SocialComponents/UrlPreviewCard.tsx

@@ -0,0 +1,75 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Text, View } from "../Components/Themed"
+import type { URLMetadataProps } from '../types';
+import { SocialComponentApi } from './api';
+import { ActivityIndicator, Linking } from 'react-native';
+import { useColors } from '../constants/useColors';
+import ImageRenderer from './ImageRenderer';
+
+type UrlPreviewCardProps = {
+    url:string,
+    width:number,
+    max_height?:number
+    color?:string
+}
+const UrlPreviewCard = ({ url, color, width, max_height }:UrlPreviewCardProps) => {
+    const Colors = useColors();
+    const [ data, setData ] = useState<{
+        loading:boolean,
+        url_metadata?: URLMetadataProps
+    }>({
+        loading: false
+    });
+    const { loading, url_metadata } = data;
+
+    useEffect(() => {
+        if(!url){ return }
+        getMetadata(url)
+    },[url])
+
+    const getMetadata = async(url:string) => {
+        setData({ ...data, loading:true })
+        const metadata = await SocialComponentApi.getUrlMetadata(url);
+        setData({
+            ...data,
+            loading: false,
+            url_metadata: metadata
+        })
+
+    }
+
+    return (
+        <Button float transparent style={{ padding:0, width, marginBottom:10 }} onPress={() => Linking.openURL(url)}>
+            {loading ?
+            <ActivityIndicator
+                style={{ padding:20, alignSelf:'center' }}
+                size={'large'}
+                color={color ?? Colors.text.h1}
+            />
+            :<></>}
+            {url_metadata?.ogTitle ?
+            <View transparent nativeID='CARD' style={{ borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+                {url_metadata.ogImage?.url ?
+                <ImageRenderer
+                    image={{ url: url_metadata.ogImage.url, width: parseFloat(url_metadata.ogImage.width), height: parseFloat(url_metadata.ogImage.height) }}
+                    width={width - 1}
+                    allow_aspect_change
+                    max_height={max_height}
+                    style={{ borderTopRightRadius:8, borderTopLeftRadius:8 }}
+                />
+                :<></>}
+                <View type='footer' style={{ padding:10, borderBottomRightRadius: 8, borderBottomLeftRadius:8 }}>
+                    <Text theme='h2' style={{ paddingBottom:2, borderBottomWidth:1, borderColor:Colors.borders.light }}>{url_metadata?.ogTitle}</Text>
+                    <Text theme='description' style={{ marginTop:4 }}>{url_metadata?.ogDescription}</Text>
+                </View>
+            </View>
+            :
+            <View type='header' nativeID='CARD' style={{ borderRadius:8, padding:10 }}>
+                <Text theme='action'>{url}</Text>
+            </View>
+            }
+        </Button>
+    )
+}
+
+export default UrlPreviewCard