be-components 5.7.6 → 5.7.8

package/src/FlashMarket/FlashHolder.tsx

@@ -0,0 +1,288 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Text, View } from "../Components/Themed"
+import { FlashMarketApi } from './api';
+import type { FlashMarketFeeProps, LocationProps, MyPlayerProps, PollCampaignProps, PollOptionProps, PollProps, PollSummaryProps } from '../types';
+import { ActivityIndicator, FlatList, Image } from 'react-native';
+import { useColors } from '../constants/useColors';
+import FlashMarket from '.';
+import { Icons } from '../Components';
+import SocketManager from '../Socket';
+import moment from 'moment-mini';
+
+type FlashHolderProps = {
+    league_id?:string,
+    player_id?:string,
+    distinct_id?:string,
+    player?:MyPlayerProps
+    contest_type?:string,
+    contest_id?:string,
+    side_type?:string,
+    location?:LocationProps,
+    side_id?:string,
+    poll_id?:string,
+    onRequestLocation:() => void,
+    onFocusPosition?: (position:{ x:number, y:number, width:number, height:number }) => void,
+    onRequestAuthenticate: () => void
+}
+const sections = [ 'selector','flash_market','options','footer' ]
+const FlashHolder = ({ distinct_id, league_id, player_id, player, location, contest_type, contest_id, side_type, side_id, poll_id, onRequestAuthenticate, onFocusPosition, onRequestLocation } : FlashHolderProps) => {
+    const Colors = useColors();
+    const [ needs_reload, setNeedsReload ] = useState(false);
+    const [ socket_campaigns, setSocketCampaigns ] = useState<PollCampaignProps[]>([]);
+    const [ socket_poll_options, setSocketPollOptions ] = useState<{
+        options:PollOptionProps[],
+        summaries:PollSummaryProps[]
+    }>({
+        options: [],
+        summaries: []
+    });
+    const [ socket_polls, setSocketPolls ] = useState<PollProps[]>([]);
+    const [ market_data, setMarketData ] = useState<{
+        loading:boolean,
+        poll?:PollProps,
+        poll_campaign?:PollCampaignProps,
+        flash_market_fees:FlashMarketFeeProps[],
+        poll_options:PollOptionProps[],
+        poll_summaries:PollSummaryProps[]
+    }>({
+        loading:false,
+        poll_options:[],
+        poll_summaries:[],
+        flash_market_fees:[]
+    }); 
+    const { loading, poll_options, poll_summaries, poll_campaign, flash_market_fees } = market_data;
+
+    const [ flash_data, setFlashData ] = useState<{
+        holder_loading:boolean,
+        flash_markets:PollProps[]
+    }>({
+        holder_loading:false,
+        flash_markets: []
+    });
+    const { holder_loading, flash_markets } = flash_data;
+    const [ active_flash_market, setActiveFlashMarket ] = useState<string | undefined>(undefined);
+    const flash_market = flash_markets.find(fm => fm.poll_id == active_flash_market);
+    useEffect(() => {
+        loadData();
+    },[league_id, contest_type, contest_id, side_type, side_id, poll_id]);
+
+
+    useEffect(() => {
+        if(socket_campaigns.length == 0){ return }
+        if(!poll_campaign){ return }
+        let socket_campaign = socket_campaigns.find(sc => sc.poll_campaign_id == poll_campaign.poll_campaign_id);
+        if(!socket_campaign){ return }
+        setMarketData({
+            ...market_data,
+            poll_campaign: socket_campaign
+        })
+    },[JSON.stringify(socket_campaigns)]);
+
+    useEffect(() => {
+        if(socket_polls.length == 0){ return }
+        addToListOfPolls(socket_polls)
+        if(!active_flash_market || !flash_market){ return }
+        let same_poll = socket_polls.find(p => p.poll_id == active_flash_market);
+        if(!same_poll){ return }
+        if(same_poll.status == 'active' && flash_market.status == 'pending'){ loadMarket(flash_market.poll_id); return }
+        //See if we have that poll!
+        setMarketData({ ...market_data, poll: same_poll });
+    }, [JSON.stringify(socket_polls)]);
+
+    const addToListOfPolls = (polls:PollProps[]) => {
+        let non_flash_polls = polls.filter(p => !p.flash_active);
+        let new_polls = flash_markets.filter(p => !non_flash_polls.find(np => np.poll_id == p.poll_id));
+        let flash_polls = polls.filter(p => p.flash_active);
+        new_polls = new_polls.filter(fm => !flash_polls.find(np => np.poll_id == fm.poll_id)).concat(flash_polls)
+        setFlashData({
+            ...flash_data,
+            flash_markets: new_polls
+        });
+    }
+
+    useEffect(() => {
+        if(!flash_market){ return }
+        const { options, summaries } = socket_poll_options;
+        let active_options = options.filter(o => o.poll_id == active_flash_market);
+        let active_summaries = summaries.filter(o => o.poll_id == active_flash_market);
+        let new_options = poll_options.filter(po => !active_options.find(so => so.poll_option_id == po.poll_option_id)).concat(active_options)
+        let new_summaries = poll_summaries.filter(po => !active_summaries.find(so => so.poll_option_id == po.poll_option_id)).concat(active_summaries)
+        //See if we have that poll!
+        setMarketData({ 
+            ...market_data, 
+            poll_options: new_options,
+            poll_summaries: new_summaries
+        });
+    }, [JSON.stringify(socket_poll_options)])
+    
+    const handleSelectPoll = async(poll:PollProps) => {
+        loadMarket(poll.poll_id);
+        setActiveFlashMarket(poll.poll_id);
+    }
+    
+
+    const loadData = async() => {
+        FlashMarketApi.setEnvironment();
+        setFlashData({ ...flash_data, holder_loading:true });
+        const plls = await FlashMarketApi.getActiveFlashMarkets();
+        setFlashData({
+            ...flash_data,
+            holder_loading:false,
+            flash_markets:plls
+        });
+        if(!active_flash_market){
+            let expiring_poll = plls.sort((a,b) => moment(a.end_datetime).unix() - moment(b.end_datetime).unix())[0]
+            if(expiring_poll){ handleSelectPoll(expiring_poll) }
+        }
+
+    }
+
+    const loadMarket = async(id:string) => {
+        setMarketData({ ...market_data, loading: true })
+        const pr = await FlashMarketApi.getPollById(id);
+        if(!pr){ return }
+        const pc = await FlashMarketApi.getPollCampaignById(pr.poll.poll_campaign_id);
+        setMarketData({
+            ...market_data,
+            poll: pr.poll,
+            poll_campaign:pc?.poll_campaign,
+            poll_options:pr.poll_options,
+            flash_market_fees: pc?.flash_market_fees ?? [],
+            poll_summaries: pr.poll_summaries,
+            loading:false
+        });
+    }
+
+    const renderFlashes = (data:{ item:PollProps, index:number }) => {
+        const selected = active_flash_market == data.item.poll_id ? true : false
+        return (
+            <Button
+                float
+                style={{ padding:4, borderRadius:0, borderTopRightRadius:8, borderTopLeftRadius:8, borderWidth:1, borderBottomWidth:0, borderColor:selected ? Colors.text.success : Colors.borders.light }}
+                onPress={() => handleSelectPoll(data.item)}
+            >
+                {data.item.poll_image ?
+                <Image
+                    source={{ uri: data.item.poll_image?.url }}
+                    style={{ height:45, width:45 }}
+                    resizeMode='cover'
+                />
+                :
+                <View transparent style={{ padding:10 }}>
+                    <Icons.FlameIcon
+                        size={30}
+                        color={Colors.text.h1}
+                    />
+                </View>
+                }
+            </Button>
+        )
+    }
+
+    const renderSections = (data:{item:string, index:number}) => {
+        switch(data.item){
+            case 'selector':
+                return (
+                    <View style={{ flexDirection:'row' }}>
+                        <View style={{ flex:1 }}>
+                            <FlatList
+                                key={'poll_selector'}
+                                keyExtractor={(item) => item.poll_id.toString()}
+                                data={flash_markets.sort((a,b) => moment(a.end_datetime).unix() - moment(b.end_datetime).unix())}
+                                horizontal
+                                renderItem={renderFlashes}
+                            />
+                        </View>
+                        <View
+                            style={{ justifyContent:'flex-end', alignItems:'center', padding:5, borderRadius:0, borderTopRightRadius:8, borderTopLeftRadius:8, borderWidth:1, borderBottomWidth:0, borderColor: Colors.borders.light }}
+                        >
+                            <Icons.FlameIcon size={24} color={Colors.text.warning} />
+                            <Text style={{ marginTop:5 }} theme='warning' textAlign='center'>FLASH</Text>
+                            {holder_loading ?
+                            <View type='blur' style={{ position:'absolute', top:0, left:0, right:0, bottom:0, justifyContent:'center', alignItems:'center' }}>
+                                <ActivityIndicator
+                                    size='small'
+                                    color={Colors.text.h1}
+                                />
+                            </View>
+                            :<></>}
+                        </View>
+                    </View>
+                )
+            case 'flash_market':
+                if(!active_flash_market){ return <></> }
+                return (
+                    <View transparent>
+                        <FlashMarket
+                            player_id={player_id}
+                            player={player}
+                            location={location}
+                            poll={flash_market}
+                            poll_options={poll_options}
+                            poll_summaries={poll_summaries}
+                            poll_campaign={poll_campaign}
+                            flash_market_fees={flash_market_fees}
+                            loading={loading}
+                            hide_image
+                            card_style={{ borderWidth:1, borderColor:Colors.text.success, borderBottomRightRadius:8, borderBottomLeftRadius:8 }}
+                            init_expanded
+                            footer_style={{ borderBottomRightRadius:8, borderBottomLeftRadius:8 }}
+                            header_style={{ borderTopRightRadius:0, borderTopLeftRadius:0 }}
+                            onReload={() => loadMarket(active_flash_market)}
+                            onRequestAuthenticate={onRequestAuthenticate}
+                            onRequestLocation={onRequestLocation}
+                            onFocusPosition={onFocusPosition}
+                        />
+                    </View>
+                )
+            default: return <></>
+        }
+    }
+    return (
+        <View style={{ margin:10 }}>
+            {flash_markets.length > 0 ?
+            <FlatList
+                key={'flash_sections'}
+                keyExtractor={item => item}
+                renderItem={renderSections}
+                data={sections}
+            />
+            :<></>}
+            <SocketManager
+                distinct_id={`flash_${distinct_id}`}
+                onConnect={() => {
+                    if(needs_reload){
+                        setNeedsReload(false);
+                        loadData();
+                        if(!active_flash_market){ return }
+                        return loadMarket(active_flash_market) 
+                    }
+                    return
+                }}
+                onDisconnect={() => setNeedsReload(true)}
+                onSocketEvent={(ev) => {
+                    switch(ev.type){
+                        case 'UPDATE_POLL_CAMPAIGNS':
+                            setSocketCampaigns(ev.poll_campaigns)
+                            break;
+                        case 'UPDATE_POLLS':
+                            if(ev.polls.length == 0){ return }
+                            if(!ev.polls[0]){ return }
+                            setSocketPolls(ev.polls)
+                            break
+                        case 'UPDATE_POLL_OPTIONS':
+                            setSocketPollOptions({
+                                options: ev.poll_options,
+                                summaries: ev.poll_summaries
+                            })
+                            break
+                        default: break;
+                    }
+                }}
+                subscribed_events={['UPDATE_POLL_CAMPAIGNS', 'UPDATE_POLLS','UPDATE_POLL_OPTIONS']}
+            />
+        </View>
+    )
+}
+
+export default FlashHolder

package/src/FlashMarket/api/index.ts

@@ -27,6 +27,15 @@ const FlashMarketApi = {
             return undefined
         }       
     },
+    getActiveFlashMarkets: async():Promise<PollProps[]> => {
+        try {
+            const resp = await axios.get(`${AUTH_SVC_API}/v2/pm/flash/active`);
+            return resp.data.polls
+        } catch (e) {
+            console.log(e);
+            return []
+        }
+    },
     getPollCampaignById : async(poll_campaign_id:string):Promise<{ poll_campaign:PollCampaignProps, flash_market_fees:FlashMarketFeeProps[] } | undefined> => {
         try {
             const resp = await axios.get(`${AUTH_SVC_API}/v1/polls/campaigns/campaign/${poll_campaign_id}`)

package/src/FlashMarket/components/MarketTimer.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { View } from "../../Components/Themed";
+import ProgressTimer from './ProgressTimer';
+import type { PollProps } from '../../types';
+import moment from 'moment-mini';
+
+type MarketTimerProps = {
+    poll:PollProps,
+    onTimesUp:() => void
+}
+
+const MarketTimer = ({ poll, onTimesUp }:MarketTimerProps) => {
+    
+    let start = moment().subtract(1, 'hour');
+    if(poll.start_datetime){ start = moment(poll.start_datetime) }
+    let stop = moment(poll.end_datetime);
+
+    let diff = stop.diff(start, 'seconds'); //Diff is going to be the Max value
+    let current_value = stop.diff(moment(), 'seconds');
+
+    //return (<></>)
+
+    if(diff <= 0){ return <></> }
+
+    return (
+        <View>
+            <ProgressTimer
+                max_value={diff}
+                current_value={current_value}
+                increment_type={'seconds'}
+                time_id={poll.poll_id}
+                max_label={moment(poll.end_datetime).format('ddd hh:mm a')}
+                onTimesUp={onTimesUp}
+            />
+        </View>
+    )
+}
+
+export default MarketTimer

package/src/FlashMarket/components/ProgressBar.tsx

@@ -0,0 +1,61 @@
+import React, { useState } from 'react';
+import { View } from 'react-native';
+import { useColors } from '../../constants/useColors';
+import { Text } from '../../Components/Themed';
+
+type ProgressBarProps = { 
+    hide_labels?:boolean, 
+    height?:number, 
+    max_value:number, 
+    current_value:number, 
+    background_color:string, 
+    fill_color:string, 
+    max_label?:string, 
+    val_color?:string,
+    val_label?:string,
+    round_decimal?:number,
+    hide_max_val?:boolean,
+    val_format?: {
+        loc: 'front'|'back',
+        label: string
+    }
+}
+
+const ProgressBar = ({ max_value, val_format, round_decimal, hide_max_val, val_color, current_value, height, hide_labels, background_color, fill_color, max_label, val_label }:ProgressBarProps) => {
+    const Colors = useColors();
+    const [ progressSize, setProgressSize ] = useState({ x:0, y:0, width:0, height:0 })
+
+    const getProgressWidth = (current_value:number) => {
+        let progress = current_value / max_value
+        if(progress > 1){ progress = 1 }
+        return progressSize.width * progress
+    }
+
+    const rounded = round_decimal ?? 2
+
+    return (
+        <View style={{ padding:10 }}>
+            <View style={{ flexDirection:'row' }}>
+                <View style={{ flex:1, padding:height??8, backgroundColor:background_color??Colors.views.header, borderRadius:4 }} onLayout={(ev) => {
+                const { x, y, width, height } = ev.nativeEvent.layout
+                setProgressSize({ x, y, width, height })
+            }}>
+                    <View style={{ borderRadius:4, position:'absolute', backgroundColor:fill_color??Colors.text.h1, right:getProgressWidth(current_value??0), top:0, width:4, height:progressSize.height }} />
+                </View>
+            </View>
+            {!hide_labels ?
+            <View style={{ flexDirection:'row', justifyContent:'space-between', alignItems:'center', marginTop:10}}>
+                <Text size={12} color={val_color ?? Colors.text.h1}>{val_label?`${val_label}: `:''}{val_format?.loc=='front'?val_format.label:''}{current_value?.toFixed(rounded)}{val_format?.loc=='back'?val_format.label:''}</Text>
+                {hide_max_val && max_label ?
+                <Text size={12} color={Colors.text.h1}>{max_label}</Text>
+                :
+                <Text size={12} color={Colors.text.h1}>{max_label?`${max_label}: `:''}{val_format?.loc=='front'?val_format.label:''}{max_value?.toFixed(rounded)}{val_format?.loc=='back'?val_format.label:''}</Text>
+                }
+            </View>
+            :<></>}
+        </View>
+        
+    )
+}
+
+export default ProgressBar

package/src/FlashMarket/components/ProgressTimer.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { useEffect, useState } from "react";
+import { useColors } from "../../constants/useColors";
+import ProgressBar from './ProgressBar';
+
+type ProgressTimerProps = {
+    max_value: number,
+    time_id:string,
+    current_value:number
+    increment_type?:'seconds'|'minutes'
+    max_label?:string,
+    update_multiplier?: number
+    onTimesUp:() => void
+}
+
+const ProgressTimer = ({increment_type, current_value, max_value, time_id, max_label, onTimesUp}:ProgressTimerProps) => {
+    const Colors = useColors();
+    const [ started, setStarted ] = useState(false);
+     const [ seconds_remaining, setSecondsRemaining ] = useState<{
+        time_id?:string,
+        seconds:number
+     }>({
+        seconds:0
+     });
+     const increment_time = increment_type == 'minutes' ? 60000 : 1000
+    useEffect(() => {
+        if(!time_id){ return }
+        setSecondsRemaining({
+            time_id,
+            seconds: current_value
+        });
+        setStarted(true);
+    },[time_id])
+
+    useEffect(() => {
+        if(!started){ return }
+        if(seconds_remaining.seconds > 0){
+            if(time_id != seconds_remaining.time_id){ return }
+            setTimeout(() => {
+                setSecondsRemaining({
+                    time_id,
+                    seconds: seconds_remaining.seconds - 1
+                })
+            }, increment_time);
+        } else {
+            if(time_id != seconds_remaining.time_id){ return }
+            onTimesUp();
+            setStarted(false);
+        }
+    },[seconds_remaining])
+
+
+    if(seconds_remaining.seconds == 0){ return <></> }
+
+    return (
+        <ProgressBar
+            max_value={max_value}
+            val_label={`${increment_type} remaining`.toUpperCase()}
+            current_value={seconds_remaining.seconds}
+            background_color={Colors.views.header}
+            max_label={max_label}
+            round_decimal={0}
+            hide_max_val
+            fill_color={Colors.text.action}
+        />
+    )
+}
+
+export default ProgressTimer