be-components 5.1.8 → 5.2.0

package/src/SocialComponents/GroupChat/components/GroupMessageCard.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import { Text, View } from "../../../Components/Themed";
+import { useColors } from "../../../constants/useColors";
+import type { GroupMessageProps, MyPlayerProps, OrderProps, PublicPlayerProps, TextTagProps } from "../../../types";
+import { FormattedText } from '../../FormattedTextInput/FormattedText';
+import moment from 'moment-mini';
+import { Image } from 'react-native';
+import ImageRenderer from '../../ImageRenderer';
+import UrlPreviewCard from '../../UrlPreviewCard';
+import SocialOrdersList from '../../SocialOrdersList';
+
+
+type GroupMessageCardProps = {
+    group_message:GroupMessageProps,
+    me?:MyPlayerProps,
+    orders:OrderProps[],
+    player?:PublicPlayerProps,
+    mine?:boolean,
+    onCopyOrder?:(order:OrderProps) => void,
+    onFadeOrder?:(order:OrderProps) => void,
+    width: number,
+    onSelectImage:(image:{ url:string, height?:number, width?:number }) => void,
+    onSelectTag:(tag:TextTagProps) => void
+}
+
+const GroupMessageCard = ({group_message, orders, mine, player, width, onSelectImage, onSelectTag, onCopyOrder, onFadeOrder}:GroupMessageCardProps) => {
+    const Colors = useColors();
+    const image = group_message.message_images ? group_message.message_images[0] : undefined
+    const url = group_message.message_urls ? group_message.message_urls[0] : undefined
+
+    return (
+        <View>
+            <View style={{ flexDirection:'row', alignItems:'flex-end' }}>
+                {mine ?
+                <View style={{ flex:1 }} transparent />
+                :
+                <View float style={{ borderRadius:100, padding:2 }}>
+                    <Image
+                        source={{ uri:player?.profile_pic }}
+                        style={{ height:36, width:36, borderRadius:100 }}
+                        resizeMode='cover'
+                    />
+                </View>
+                }
+                <View float style={{ 
+                    width: mine ? width - 45 : width - 90, 
+                    padding:14,
+                    marginLeft:10,
+                    borderRadius:22,
+                    marginBottom:15,
+                    borderBottomLeftRadius: !mine? 0:22,
+                    borderBottomRightRadius: mine? 0:22, 
+                    backgroundColor:mine?Colors.absolutes.brand.midnight:Colors.absolutes.highlights.highlight200 
+                }}>
+                    {group_message.formatted_text ?
+                    <FormattedText
+                        text={group_message.formatted_text}
+                        tags={group_message.tags ?? []}
+                        text_color={Colors.text.white}
+                        onSelectTag={(tag) => onSelectTag(tag)}
+                    />
+                    : group_message.message ?
+                    <Text size={12} color={Colors.text.white}>{group_message.message}</Text>
+                    :<></>}
+                    {url ?
+                    <View transparent style={{ marginTop:10 }}>
+                        <UrlPreviewCard
+                            url={url}
+                            max_height={120}
+                            width={width - 120}
+                            color={Colors.text.white}
+                        />
+                    </View>
+                    :<></>}
+                    {image ?
+                    <ImageRenderer
+                        image={image}
+                        width={width - 120}
+                        onSelectImage={onSelectImage}
+                    />
+                    :<></>}
+                    {player && orders && orders.length > 0 ?
+                    <View float style={{ padding:4, marginTop:10 }}>
+                        <SocialOrdersList
+                            orders={orders}
+                            onCopyOrder={onCopyOrder}
+                            onFadeOrder={onFadeOrder}
+                            maxWidth={width - 120}
+                            players={[player]}
+                            direction='horizontal'
+
+                        />
+                    </View>
+                    :<></>}
+                </View>
+                {!mine ?
+                <View transparent />
+                :<></>}
+            </View>
+            <Text theme="light" textAlign={mine?'right':'left'}>{!mine && player ?`@${player?.username} - `: ''}Delivered {moment(group_message.create_datetime).format('hh:mm a')}</Text>
+        </View>
+    )
+}
+
+export default GroupMessageCard

package/src/SocialComponents/GroupChat/index.tsx

@@ -0,0 +1,403 @@
+import React from 'react';
+import moment from "moment-mini";
+import { useEffect, useRef, useState } from "react";
+import { ActivityIndicator, FlatList, Image } from "react-native"
+import { useColors } from "../../constants/useColors";
+import type { GroupMessageProps, GroupPlayerProps, GroupProps, MyPlayerProps, OrderProps, PublicPlayerProps, TextTagProps } from "../../types";
+import { SocialComponentApi, SocialComponentHelpers } from "../api";
+import { Button, Text, View } from "../../Components/Themed";
+import GroupMessageCard from './components/GroupMessageCard';
+import InputBar from '../InputBar';
+import FormattedTextInput from '../FormattedTextInput';
+import SocketManager from '../../Socket';
+import SocialOrdersList from '../SocialOrdersList';
+
+type GroupChatProps = {
+    group_id?:string,
+    my_id?:string,
+    player_id?:string,
+    access_token?:string,
+    onClose?:() => void,
+    width:number,
+    onCopyOrder?:(order:OrderProps) => void,
+    onFadeOrder?:(order:OrderProps) => void
+    insets?:{ top:number, bottom:number, left:number, right:number }
+    distinct_id:string,
+    onSelectTag: (tag:TextTagProps) => void,
+    onSelectImage:(image: { url:string, height?:number, width?:number }) => void,
+    onFocusPosition?:(position:{ height:number, width:number, x:number, y:number }) => void
+}
+const sections = ['orders','input_bar','input']
+const GroupChat = ({ my_id, player_id, width, group_id, access_token, insets, distinct_id, onCopyOrder, onFadeOrder, onClose, onFocusPosition, onSelectImage, onSelectTag }:GroupChatProps) => {
+    const Colors = useColors();
+    const [ chat_size, setChatSize ] = useState({ height:0, width:0 });
+    const [ show_input_bar, setShowInputBar ] = useState(false);
+    const [ needs_reload, setNeedsReload ] = useState(false);
+    const [ message_loading, setMessageLoading ] = useState(false);
+    const [ socket_message, setSocketMessage ] = useState<GroupMessageProps|undefined>(undefined);
+    const [ draft_orders, setDraftOrders ] = useState<OrderProps[]>([]);
+    const [ my_data, setMyData ] = useState<{
+        me?: MyPlayerProps
+    }>({});
+    const { me } = my_data;
+    const [ screen_data, setData ] = useState<{
+        loading:boolean,
+        group?:GroupProps,
+        group_players:GroupPlayerProps[]
+    }>({ 
+        loading:false,
+        group_players: []
+    })
+    const { loading, group } = screen_data;
+
+    const [ message_data, setMessageData ] = useState<{
+        messages_loading:boolean,
+        messages: GroupMessageProps[],
+        players:PublicPlayerProps[],
+
+        orders:OrderProps[]
+    }>({
+        messages_loading: false,
+        messages:[],
+        players:[],
+        orders:[]
+    });
+    const { messages, players, orders } = message_data
+    const chat_ref = useRef(null);
+
+    const unique_dates = [ ...new Set(messages.map(m => moment(m.create_datetime).format('MMM DD YYYY')))]
+
+    useEffect(() => {
+        SocialComponentApi.setEnvironment();
+        if(group_id){
+            getGroupFromServer(group_id);
+            return
+        }
+        if(player_id){
+            getChatFromServer(player_id);
+            return
+        }
+    },[group_id, player_id]);
+
+    useEffect(() => {
+        if(!my_id){ return }
+        getMyData();
+    },[my_id]);
+
+    const getMyData = async() => {
+        const player = await SocialComponentApi.getMyDetails();
+        setMyData({ me:player })
+    }
+
+    useEffect(() => {
+        if(!socket_message){ return } 
+        getNewData(socket_message)
+    },[socket_message]);
+
+    const getNewData = async(message:GroupMessageProps) => {
+        const new_resp = await SocialComponentHelpers.addDataToMessages([message]);
+        setMessageData({
+            ...message_data,
+            messages: messages.filter(m => m.group_message_id != message.group_message_id).concat(new_resp.group_messages),
+            players: players.filter(p => !new_resp.players.find(np => np.player_id == p.player_id)).concat(new_resp.players),
+            orders: orders.filter(p => !new_resp.orders.find(np => np.order_id == p.order_id)).concat(new_resp.orders),
+        });
+    }
+
+    const chat_player = group?.type == 'direct' ? players.find(p => p.player_id == player_id) : undefined
+
+    const getChatFromServer = async(id:string) => {
+        setData({ ...screen_data, loading:true });
+        if(!my_id){ return }
+        setMessageData({ ...message_data, messages_loading:true });
+        const group_response = await SocialComponentApi.getChat(id);
+        if(!group_response){ return setData({ ...screen_data, loading:false }) }
+        const gm_data = await SocialComponentHelpers.addDataToMessages(group_response.group_messages);
+
+        setData({
+            ...screen_data,
+            group: group_response.group,
+            group_players: group_response.group_players,
+            loading: false
+        });
+        setMessageData({
+            ...message_data,
+            messages_loading:false,
+            players: gm_data.players,
+            messages: gm_data.group_messages,
+            orders: gm_data.orders
+        });
+    }
+
+    const getGroupFromServer = async(id:string) => {
+        setData({ ...screen_data, loading:true });
+        setMessageData({ ...message_data, messages_loading:true });
+        const group_response = await SocialComponentApi.getGroupById(id);
+        if(!group_response){ return setData({ ...screen_data, loading:false }) }
+        const gm_data = await SocialComponentHelpers.addDataToMessages(group_response.group_messages);
+        setData({
+            ...screen_data,
+            group: group_response.group,
+            group_players: group_response.group_players,
+            loading: false
+        });
+        setMessageData({
+            ...message_data,
+            messages_loading:false,
+            players: gm_data.players,
+            messages: gm_data.group_messages,
+            orders: gm_data.orders
+        });
+    }
+
+    //const message_valid = message_text != '' ? true : false
+
+    const handleSendImage = async(image:any) => {
+        if(!group || message_loading){ return }
+        setMessageLoading(true);
+        const group_message = SocialComponentHelpers.getEmptyMessage();
+        const gm = await SocialComponentApi.sendChat({ 
+            ...group_message, 
+            formatted_text: '',
+            tags: [],
+            message_images: [image],
+            group_id: group.group_id,
+            message: ''
+        });
+        if(!gm){
+            setMessageLoading(false);
+            return
+        }
+        setMessageData({
+            ...message_data,
+            messages: messages.filter(m => m.group_message_id != gm.group_message_id).concat(gm)
+        })
+        setMessageLoading(false);
+
+    }
+
+    const handleSendMessage = async(data: { formatted_text: string, text:string }, tags:TextTagProps[]) => {
+        if(!group || message_loading){ return }
+        setMessageLoading(true);
+
+        //Find urls!
+        const url = SocialComponentHelpers.getUrlsFromString(data.text);
+        let message_urls:string[] = []
+        if(url){ message_urls.push(url) }
+        const group_message = SocialComponentHelpers.getEmptyMessage();
+        const gm = await SocialComponentApi.sendChat({ 
+            ...group_message, 
+            formatted_text: data.formatted_text,
+            tags: tags.map(t => { return { ...t, data:undefined } }), //Drop the data!
+            group_id: group.group_id,
+            message_urls: message_urls,
+            message_orders:draft_orders.map(o => o.order_id),
+            message: data.text 
+        });
+        if(!gm){
+            setMessageLoading(false);
+            return
+        }
+        setMessageData({
+            ...message_data,
+            messages: messages.filter(m => m.group_message_id != gm.group_message_id).concat(gm)
+        })
+        setMessageLoading(false);
+    }
+
+    const renderMessages = (data:{item:GroupMessageProps, index:number}) => {
+        const player = players.find(p => p.player_id == data.item.player_id)
+        const mine = player?.player_id == me?.player_id ? true: false
+        let post_orders = data.item.message_orders ? orders.filter(o => data.item.message_orders?.includes(o.order_id)) : []
+        return (
+            <View style={{ margin:5 }}>
+                <GroupMessageCard
+                    player={player}
+                    me={me}
+                    width={chat_size.width}
+                    mine={mine}
+                    onCopyOrder={onCopyOrder}
+                    onFadeOrder={onFadeOrder}
+                    orders={post_orders}
+                    onSelectImage={onSelectImage}
+                    group_message={data.item}
+                    onSelectTag={onSelectTag}
+                />
+
+            </View>
+        )
+    }
+
+    const renderDates = (data:{ item:string, index:number }) => {
+        const date_messages = messages.filter(m => moment(m.create_datetime).format('MMM DD YYYY') == data.item);
+
+        return (
+            <View>
+                <View style={{ padding:10 }}>
+                    <Text size={16} theme="light" textAlign="center">{data.item}</Text>
+                </View>
+                <FlatList
+                    key={'date_messages'}
+                    keyExtractor={(item) => item.group_message_id.toString()}
+                    data={date_messages.sort((a,b) => moment(a.create_datetime).unix() - moment(b.create_datetime).unix())}
+                    renderItem={renderMessages}
+                />
+            </View>
+        )
+    }
+
+
+    const renderSections = (data: { item:string, index:number }) => {
+        switch(data.item){
+            case 'orders':
+                if(draft_orders.length == 0){ return <></> }
+                return (
+                    <View >
+                        <SocialOrdersList
+                            players={players}
+                            orders={draft_orders}
+                            onUntagOrder={(order) => setDraftOrders(draft_orders.filter(o => o.order_id != order.order_id))}
+                            direction='horizontal'
+                        />
+                    </View>
+                )
+            case 'input_bar':
+                if(!show_input_bar){ return <></> }
+                return (
+                    <View type='header' style={{ padding:5 }}>
+                        <InputBar
+                            actions={['image','action']}
+                            width={width}
+                            insets={insets}
+                            onTagOrder={(order) => {
+                                setDraftOrders(draft_orders.filter(o => o.order_id != order.order_id).concat(order))
+                            }}
+                            onImageUpload={(image) => handleSendImage(image)}
+                        />
+                    </View>
+                )
+            case 'input':
+                return (
+                    <View type='footer' style={{ padding:5, paddingBottom:(insets?.bottom ?? 0) + 5 }}>
+                        <FormattedTextInput
+                            submit_placement='inline'
+                            icon_submit
+                            width={chat_size.width}
+                            onSelectInput={() => setShowInputBar(!show_input_bar)}
+                            onSubmit={(data, tags) => handleSendMessage(data, tags)}
+                            onFocusPosition={onFocusPosition}
+                        />
+                    </View>
+                )
+            default: return <></>
+        }
+    }
+
+    return (
+        <View style={{ flex:1 }} onLayout={(ev) => {
+            const { height, width } = ev.nativeEvent.layout;
+            setChatSize({ height, width });
+        }}>
+            {group?.type == 'direct' && chat_player ?
+            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, paddingTop:(insets?.top ?? 0) + 10 }}>
+                <View transparent>
+                    <Image
+                        source={{ uri: chat_player.profile_pic }}
+                        style={{ height:40, width:40, borderRadius:100 }}
+                        resizeMode="cover"
+                    />
+                </View>
+                <View transparent style={{ flex:1, marginLeft:10 }}>
+                    <Text theme="h1">@{chat_player.username}</Text>
+                    <Text style={{ marginTop:3 }} theme="description">Joined {moment(chat_player.create_datetime).fromNow()}</Text>
+                </View>
+                {onClose ?
+                <Button
+                    type="close"
+                    title="X"
+                    float
+                    style={{ padding:0, borderRadius:100, justifyContent:'center', alignItems:'center', height:30, width:30 }}
+                    onPress={() => onClose()}
+                />
+                :<></>}
+            </View>
+            :group ?
+            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, paddingTop:(insets?.top ?? 0) + 10 }}>
+                <View transparent>
+                    <Image
+                        source={{ uri: group.group_image?.url }}
+                        style={{ height:40, width:40, borderRadius:100 }}
+                        resizeMode="cover"
+                    />
+                </View>
+                <View transparent style={{ flex:1, marginLeft:10 }}>
+                    <Text theme="h1">{group.name}</Text>
+                    <Text style={{ marginTop:3 }} theme="description">{moment(group.last_update_datetime).format('YYYY MM DD')}</Text>
+                </View>
+                {onClose ?
+                <Button
+                    type="close"
+                    title="X"
+                    float
+                    style={{ padding:0, borderRadius:100, justifyContent:'center', alignItems:'center', height:30, width:30 }}
+                    onPress={() => onClose()}
+                />
+                :<></>}
+            </View>
+            :<></>}
+            <View style={{ flex:1 }}>
+                <FlatList
+                    ref={chat_ref}
+                    data={unique_dates}
+                    inverted
+                    style={{ flex:1 }}
+                    renderItem={renderDates}
+                    key={`chat_${group_id}dates`}
+                    keyExtractor={(item) => item}
+                />
+            </View>
+            <View>
+                <FlatList
+                    data={sections}
+                    key={'chat_sections'}
+                    scrollEnabled={false}
+                    keyExtractor={item => item}
+                    renderItem={renderSections}
+                />
+            </View>
+            {group ?
+            <SocketManager
+                distinct_id={distinct_id}
+                access_token={access_token}
+                group_id={group.group_id}
+                subscribed_events={['V1_UPDATE_GROUP_MESSAGE']}
+                onConnect={() => {
+                    if(!needs_reload){ return }
+                    if(group_id){ return getGroupFromServer(group_id) }
+                    if(player_id){ return getChatFromServer(player_id) }
+                    return
+                }}
+                onDisconnect={() => {
+                    setNeedsReload(true)
+                }}
+                onSocketEvent={(ev) => {
+                    if(!ev.data){ return }
+                    let gm:GroupMessageProps = ev.data;
+                    if(gm.group_id != group.group_id){ return }
+                    setSocketMessage(gm);
+                }}
+            />
+            :<></>}
+            {loading ?
+            <View type='blur' style={{ position:'absolute', top:0, left:0, right:0, bottom:0, alignItems:'center', padding:20 }}>
+                <ActivityIndicator
+                    size='large'
+                    color={Colors.text.h1}
+                />
+            </View>
+            :<></>}
+        </View>
+    )
+}
+
+export default GroupChat

package/src/SocialComponents/ImageRenderer.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Image } from "react-native"
+import { Button } from "../Components/Themed";
+
+type ImageRendererProps = {
+    image: { url:string, height?:number, width?:number },
+    style?:any,
+    width: number,
+    max_height?:number,
+    allow_aspect_change?:boolean,
+    onSelectImage?:(image:{ url:string, height?:number, width?:number, [key:string]:any }) => void
+}
+const ImageRenderer = ({ image, width, onSelectImage, max_height, style, allow_aspect_change }:ImageRendererProps) => {
+    const getImageRatio = () => {
+        let ratio = 1
+        if(image.width && image.height){
+            ratio = image.width / image.height
+        }
+        return ratio
+    }
+    const ratio = getImageRatio();
+
+    let image_width = width
+    let image_height = width * ratio
+
+    if(max_height && image_height > max_height){
+        image_height = max_height
+        if(!allow_aspect_change){ image_width = image_height / ratio }
+    }
+
+    return (
+        <Button disabled={!onSelectImage} transparent style={{ padding:0 }} onPress={() => onSelectImage ? onSelectImage(image) : console.log('')}>
+            <Image
+                source={{ uri: image.url }}
+                style={{ height: image_height, width: image_width, ...style }}
+                resizeMode="cover"
+            />
+        </Button>
+    )
+}
+
+export default ImageRenderer