be-components 4.2.1 → 4.2.2

package/src/MarketMaker/index.tsx

@@ -1,9 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import { View } from 'react-native';
 import { MarketMakerApi, MarketMaketHelpers } from './api';
 import type { AthleteProps, BestAvailableResponseProps, EventProps, ExternalPriceProps, FundingRequestProps, FundOrderProps, FundOwnershipProps, FundProps, LeagueProps, MarketProps, MatchProps, OrderProps, PublicPlayerProps, TournamentProps, TradeProps } from '../types';
-//import { view_styles } from '../constants/styles';
-import Colors from '../constants/colors';
 import ContestSelector from './components/ContestSelector';
 import Dashboard from './components/Dashboard';
 import MarketSelector from './components/MarketSelector';
@@ -15,6 +12,8 @@ import FundingRequestList from './components/FundingRequestList';
 import FundOwnershipList from './components/FundOwnershipList';
 import SocketManager from '../Socket';
 import OrderForm from './components/OrderForm';
+import { Text, View } from '../Components/Themed';
+import { FlatList, Modal } from 'react-native';
 
 type MarketMakerProps = {
     player_id:string,
@@ -22,6 +21,9 @@ type MarketMakerProps = {
     distinct_id:string
 }
 
+const contest_sections = ['header', 'toggle', 'funds', 'fund_owners', 'fund_requests', 'contests', 'markets']
+const dashboard_sections = ['dashboard']
+
 const MarketMaker = ({ player_id, access_token, distinct_id }:MarketMakerProps) => {
     const [ ba_socket_data, setBASocketData ] = useState<BestAvailableResponseProps | undefined>(undefined);
     const [ socket_fund, setSocketFund ] = useState<{ fund:FundProps, orders:OrderProps[] } | undefined>(undefined);
@@ -44,7 +46,7 @@ const MarketMaker = ({ player_id, access_token, distinct_id }:MarketMakerProps)
         tournaments:[],
         matches:[]
     });
-    const { loaded, leagues, events, markets, funds } = module_data;
+    const { leagues, events, markets, funds } = module_data;
 
     const [ editing_fund, setEditingFund ] = useState<FundProps | undefined>(undefined);
     const [ draft_order, setDraftOrder ] = useState<{
@@ -119,11 +121,6 @@ const MarketMaker = ({ player_id, access_token, distinct_id }:MarketMakerProps)
         getLocation()
     },[player_id]);
 
-    useEffect(() => {
-        if(!fund?.fund_id || !loaded){ return }
-        getDashData(fund.fund_id);
-    },[fund]);
-
     useEffect(() => {
         if(!ba_socket_data){ return }
         //Reconcile and update ba_socket data!
@@ -163,6 +160,7 @@ const MarketMaker = ({ player_id, access_token, distinct_id }:MarketMakerProps)
     }
 
     const getDashData = async(fund_id:string) => {
+        setDashData({ ...dash_data, loading:true })
         //Now load Dash data
         console.log('1')
         const ba = await MarketMakerApi.getBestAvailableOrders();
@@ -194,6 +192,7 @@ const MarketMaker = ({ player_id, access_token, distinct_id }:MarketMakerProps)
             ...dash_data,
             loaded:true,
             loading:false,
+            fund: fund_response.fund,
             funding_requests:fr_requests,
             players:plays,
             fund_ownerships: fund_response.fund_ownerships,
@@ -207,6 +206,10 @@ const MarketMaker = ({ player_id, access_token, distinct_id }:MarketMakerProps)
     }
 
 
+    const handleSelectFund = async(fund:FundProps) => {
+        await getDashData(fund.fund_id);
+    }
+
     const getDataForMyAction = async(orders:OrderProps[], markets:MarketProps[]) => {
         const ev_ids = orders.filter(o => o.event_type == 'team').map(o => o.event_id);
         const mks = markets.filter(m => orders.map(o => o.market_id.toString()).includes(m.market_id.toString()))
@@ -243,39 +246,81 @@ const MarketMaker = ({ player_id, access_token, distinct_id }:MarketMakerProps)
         })
     }
 
+    const renderSections = (data:{ item:string, index:number }) => {
+        switch(data.item){
+            case 'header':
+                return (
+                    <View>
+                        <Text>Fund Manager!</Text>
+                    </View>
+                )
+            case 'funds':
+                return (
+                    <View style={{ margin:5 }}>
+                        <FundSelector
+                            funds={funds}
+                            selected_fund_id={dash_data.fund?.fund_id}
+                            onEditFund={(f) => {
+                                setEditingFund(f)
+                            }}
+                            onCreateFund={(f) => {
+                                setDashData({
+                                    ...dash_data,
+                                    fund:f
+                                })
+                                setEditingFund(f);
+                            }}
+                            onSelectFund={(f) => handleSelectFund(f)}
+                        />
+                    </View>
+                   
+                )
+            case 'contests':
+                return (
+                    <View style={{ margin:5 }}>
+                        <ContestSelector 
+                            maxHeight={300}
+                            leagues={leagues.filter(l => l.status == 'active')}
+                            events={events}
+                            onSelectEvent={(e) => handleSelectEvent(e)}
+                            onDeselectEvent={(e) => handleDeselectEvent(e)}
+                            onSelectMatch={(m) => console.log(m)}
+                            onSelectTournament={(t) => console.log(t)}
+                            tournaments={[]}
+                            matches={[]}
+                            selected_events={selected_events.map(e => e.event_id)}
+                            selected_matches={[]}
+                            selected_tournaments={[]}
+                        />
+                    </View>
+                )
+            case 'markets':
+                return (
+                    <View style={{ margin:5 }}>
+                        <MarketSelector
+                            markets={selectable_markets.sort((a,b) => parseInt(a.market_id) - parseInt(b.market_id))}
+                            onSelectMarket={(m) => setDashData({ ...dash_data, selected_markets: dash_data.selected_markets.concat(m) })}
+                            onDeselectMarket={(m) => setDashData({ ...dash_data, selected_markets: dash_data.selected_markets.filter(se => se.market_id != m.market_id) })}
+                            selected_markets={selected_markets.map(m => m.market_id)}
+                        />
+                    </View>
+                    
+                )
+            case 'fund_owners':
+                if(!fund){ return <></> }
+                return (
+                    <View style={{ margin:5 }}>
+                        <FundOwnershipList
+                            fund_ownerships={fund_ownerships}
+                            players={players}
+                        />
+                    </View>
 
-    return (
-        <View style={{ flex:1, backgroundColor:Colors.shades.white }}>
-            <View style={{ flexDirection:'row' }}>
-                <View>
-                    <FundSelector
-                        funds={funds}
-                        maxHeight={300}
-                        selected_fund_id={dash_data.fund?.fund_id}
-                        onEditFund={(f) => {
-                            setEditingFund(f)
-                        }}
-                        onCreateFund={(f) => {
-                            setDashData({
-                                ...dash_data,
-                                fund:f
-                            })
-                            setEditingFund(f);
-                        }}
-                        onSelectFund={(f) => {
-                            setDashData({
-                                ...dash_data,
-                                fund:f
-                            })
-                        }}
-                    />
-                    {fund ?
-                    <FundOwnershipList
-                        fund_ownerships={fund_ownerships}
-                        players={players}
-                    />
-                    :<></>}
-                    {fund?
+                )
+            case 'fund_requests':
+                if(!fund){ return <></> }
+                return (
+                    <View style={{ margin:5 }}>
                     <FundingRequestList
                         funding_requests={funding_requests}
                         players={players}
@@ -298,30 +343,11 @@ const MarketMaker = ({ player_id, access_token, distinct_id }:MarketMakerProps)
                             })
                         }} 
                     />
-                    :<></>}
-                    <ContestSelector 
-                        maxHeight={300}
-                        leagues={leagues.filter(l => l.status == 'active')}
-                        events={events}
-                        onSelectEvent={(e) => handleSelectEvent(e)}
-                        onDeselectEvent={(e) => handleDeselectEvent(e)}
-                        onSelectMatch={(m) => console.log(m)}
-                        onSelectTournament={(t) => console.log(t)}
-                        tournaments={[]}
-                        matches={[]}
-                        selected_events={selected_events.map(e => e.event_id)}
-                        selected_matches={[]}
-                        selected_tournaments={[]}
-                    />
-                    <MarketSelector
-                        maxHeight={300}
-                        markets={selectable_markets.sort((a,b) => parseInt(a.market_id) - parseInt(b.market_id))}
-                        onSelectMarket={(m) => setDashData({ ...dash_data, selected_markets: dash_data.selected_markets.concat(m) })}
-                        onDeselectMarket={(m) => setDashData({ ...dash_data, selected_markets: dash_data.selected_markets.filter(se => se.market_id != m.market_id) })}
-                        selected_markets={selected_markets.map(m => m.market_id)}
-                    />
-                </View>
-                <View style={{ flexGrow:1, flexShrink:1}}>
+                    </View>
+                )
+            case 'dashboard':
+                return (
+                    <View style={{ margin:5 }}>
                     <Dashboard
                         loaded={dash_data.loaded}
                         leagues={leagues}
@@ -392,30 +418,62 @@ const MarketMaker = ({ player_id, access_token, distinct_id }:MarketMakerProps)
                             })
                         }}
                     />
-                    {fund && draft_order.order && draft_order.visible ?
-                    <View style={{ position:'absolute', bottom:0, left:0, right:0, top:0, backgroundColor:Colors.shades.black_faded, justifyContent:'center', alignItems:'center' }}>
-                        <OrderForm
-                            fund={fund}
-                            order={draft_order.order}
-                            available={draft_order.available}
-                            onClose={() => setDraftOrder({ visible:false })}
-                            onSubmit={async(order) => {
-                                if(!fund){ return alert('Unable to process') }
-                                if(!location.region || !location.coordinates){ return alert('Location could not be verified to process orders') }
-                                const new_orders = await MarketMakerApi.addOrdersToFund(fund.fund_id, [{ ...order, location: location.coordinates, region: location.region }]);
+                    </View>
+                )
+            default: return <></>
+        }
+    }
+
+    return (
+        <View style={{ flex:1 }}>
+            <View style={{ flexDirection:'row' }}>
+                <View style={{ flex:1 }}>
+                    <FlatList
+                        data={contest_sections}
+                        key={'contest_sections'}
+                        keyExtractor={item => item}
+                        renderItem={renderSections}
+                    />
+                </View>
+                <View style={{ flex:3 }}>
+                    <FlatList
+                        data={dashboard_sections}
+                        key={'dashboard_sections'}
+                        keyExtractor={item => item}
+                        renderItem={renderSections}
+                    />
+                </View>
+            </View>
+            <Modal
+                visible={editing_fund ? true : false}
+                transparent
+                style={{ flex:1 }}
+            >
+                <View type='blur' style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
+                    <View style={{ width:500 }}>
+                        <ManageFundForm
+                            fund={editing_fund}
+                            onClose={() => setEditingFund(undefined)}
+                            onFundUpdate={(f) => {
+                                setEditingFund(undefined);
                                 setDashData({
                                     ...dash_data,
-                                    fund_orders: fund_orders.concat(new_orders.fund_orders),
-                                    orders:orders.concat(new_orders.orders)
+                                    fund: f
                                 })
-                                setDraftOrder({ visible:false });
                             }}
-
                         />
                     </View>
-                    :<></>}
-                    {fund && set_market_form_visible && set_market_market ?
-                    <View style={{ position:'absolute', bottom:0, left:0, right:0, top:0, backgroundColor:Colors.shades.black_faded, justifyContent:'center', alignItems:'center' }}>
+                </View>
+            </Modal>
+            
+            <Modal
+                visible={fund && set_market_form_visible && set_market_market ? true : false}
+                style={{ flex:1 }}
+                transparent
+            >
+                <View type='blur' style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
+                    <View style={{ width:500 }}>
+                        {fund && set_market_market ?
                         <SetMarketForm
                             fund={fund}
                             form_key={set_market_form_key}
@@ -436,25 +494,39 @@ const MarketMaker = ({ player_id, access_token, distinct_id }:MarketMakerProps)
                             }}
                             onClose={() => setMarketFormData({ set_market_form_visible: false, set_market_orders:[], set_market_form_key:'', set_market_prices:[] })}
                         />
+                        :<></>}
                     </View>
-                    :<></>}
-                    {editing_fund ?
-                    <View style={{ position:'absolute', bottom:0, left:0, right:0, top:0, backgroundColor:Colors.shades.black_faded, justifyContent:'center', alignItems:'center' }}>
-                        <ManageFundForm
-                            fund={editing_fund}
-                            onClose={() => setEditingFund(undefined)}
-                            onFundUpdate={(f) => {
-                                setEditingFund(undefined);
+                </View>
+            </Modal>
+            <Modal
+                visible={draft_order.order ? true : false}
+                style={{ flex:1 }}
+                transparent
+            >
+                <View type='blur' style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
+                    <View style={{ width:500 }}>
+                        {fund ?
+                        <OrderForm
+                            fund={fund}
+                            order={draft_order.order}
+                            available={draft_order.available}
+                            onClose={() => setDraftOrder({ visible:false })}
+                            onSubmit={async(order) => {
+                                if(!fund){ return alert('Unable to process') }
+                                if(!location.region || !location.coordinates){ return alert('Location could not be verified to process orders') }
+                                const new_orders = await MarketMakerApi.addOrdersToFund(fund.fund_id, [{ ...order, location: location.coordinates, region: location.region }]);
                                 setDashData({
                                     ...dash_data,
-                                    fund: f
+                                    fund_orders: fund_orders.concat(new_orders.fund_orders),
+                                    orders:orders.concat(new_orders.orders)
                                 })
+                                setDraftOrder({ visible:false });
                             }}
                         />
+                        :<></>}
                     </View>
-                    :<></>}
                 </View>
-            </View>
+            </Modal>
             <SocketManager
                 subscribed_events={['V1_LOAD_BEST_AVAILABLE', 'V1_UPDATE_FUND']}
                 access_token={access_token}

package/src/Squares/index.tsx

@@ -23,6 +23,7 @@ import { useColors } from "../constants/useColors";
 type SquaresModuleProps = {
     player_id?:string,
     distinct_id:string,
+    view_mode:'desktop'|'mobile',
     sq_comp_id:string,
     insets?: { top:number, bottom:number },
     onRequestAuthenticate: (auth_strategy_id?:string) => void,
@@ -33,7 +34,7 @@ type SquaresModuleProps = {
 
 const squares_sections = ['header', 'toggle', 'event', 'board', 'board_stats', 'my_stats', 'results', 'my_squares', 'winners','hidden_prizes','details', 'owners']
 
-const SquaresModule = ({ sq_comp_id, insets, player_id, distinct_id, onRequestAuthenticate, onShareCompetition, onPlayerSelect }:SquaresModuleProps) => {
+const SquaresModule = ({ sq_comp_id, view_mode, insets, player_id, distinct_id, onRequestAuthenticate, onShareCompetition, onPlayerSelect }:SquaresModuleProps) => {
     const C = useColors();
     const [ active_tab, setActiveTab ] = useState('board');
     const [ needs_reload, setNeedsReload ] = useState(false);
@@ -354,7 +355,7 @@ const SquaresModule = ({ sq_comp_id, insets, player_id, distinct_id, onRequestAu
                 )
             case 'toggle':
                 return (
-                    <View style={{ padding:8 }}>
+                    <View style={{ padding:8, width:view_mode == 'desktop'?800: undefined, alignSelf:view_mode == 'desktop'?'center':undefined }}>
                         <Toggle
                             options={toggle_options}
                             active_toggle_color={C.text.action}
@@ -377,13 +378,14 @@ const SquaresModule = ({ sq_comp_id, insets, player_id, distinct_id, onRequestAu
             case 'board_stats':
                 if(!squares_competition){ return <></> }
                 return (
-                    <BoardStats
-                        hidden={active_tab == 'stats' ? false : true}
-                        disable_collapse
-                        squares_competition={squares_competition}
-                        squares={squares}
-                        player_squares={player_squares}
-                    />
+                        <BoardStats
+                            hidden={active_tab == 'stats' ? false : true}
+                            disable_collapse
+                            squares_competition={squares_competition}
+                            squares={squares}
+                            player_squares={player_squares}
+                        />
+
                 )
             case 'my_stats':
                 if(!squares_competition){ return <></> }
@@ -421,6 +423,8 @@ const SquaresModule = ({ sq_comp_id, insets, player_id, distinct_id, onRequestAu
                 )
             case 'hidden_prizes':
                 return (
+                    <View style={{ padding:10 }}>
+
                     <PrizeCard 
                         square_prizes={square_prizes}
                         squares={squares}
@@ -429,6 +433,7 @@ const SquaresModule = ({ sq_comp_id, insets, player_id, distinct_id, onRequestAu
                         players={players}
                         event={event}
                     />
+                    </View>
                 )
             case 'details':
                 if(!squares_competition){ return <></> }
@@ -440,6 +445,7 @@ const SquaresModule = ({ sq_comp_id, insets, player_id, distinct_id, onRequestAu
                         squares_payout_type={squares_payout_type}
                         squares_type={squares_type}
                     />
+                    
                 )
             case 'owners':
                 return (
@@ -453,7 +459,7 @@ const SquaresModule = ({ sq_comp_id, insets, player_id, distinct_id, onRequestAu
             case 'board':
                 if(!squares_competition){ return <></> }
                 return (
-                    <View style={{ paddingBottom:20 }}>
+                    <View style={{ alignItems:view_mode == 'desktop' ? 'center': undefined }}>
                         <SquaresBoard 
                             player_id={player_id}
                             hidden={active_tab == 'board' ? false : true}
@@ -476,6 +482,8 @@ const SquaresModule = ({ sq_comp_id, insets, player_id, distinct_id, onRequestAu
             case 'my_squares':
                 if(my_squares.length == 0){ return <></> }
                 return (
+                    <View style={{ padding:10 }}>
+
                     <MySquaresCard
                         player_squares={my_squares}
                         hidden={active_tab == 'my_squares' ? false : true}
@@ -488,6 +496,7 @@ const SquaresModule = ({ sq_comp_id, insets, player_id, distinct_id, onRequestAu
                         comp_status={comp_status}
                         onSquareOffer={handleSquareOffer}
                     />
+                    </View>
                 )
             default: return <></>
         }
@@ -507,13 +516,12 @@ const SquaresModule = ({ sq_comp_id, insets, player_id, distinct_id, onRequestAu
             const { width, height } = ev.nativeEvent.layout
             setModuleSize({ width, height })
         }}>
-            <FlatList
-                key='squares_section'
-                data={squares_sections}
-                renderItem={renderSections}
-                keyExtractor={(item) => item}
-            />
-            
+                <FlatList
+                    key='squares_section'
+                    data={squares_sections}
+                    renderItem={renderSections}
+                    keyExtractor={(item) => item}
+                />            
             {square_offers.length > 0 ?
             <SquareOffersCard
                 player_squares={player_squares}
@@ -552,9 +560,10 @@ const SquaresModule = ({ sq_comp_id, insets, player_id, distinct_id, onRequestAu
             <Modal
                 transparent
                 visible={bid_form_expanded}
-                animationType='slide'
+                animationType={view_mode=='desktop' ? 'fade' : 'slide'}
             >
-            <View type='blur' style={{ flex:1, justifyContent:'flex-end', paddingBottom:insets?.bottom }}>
+            <View type='blur' style={view_mode=='desktop'?{ flex:1, justifyContent:'center', alignItems:'center' }:{ flex:1, justifyContent:'flex-end', paddingBottom:insets?.bottom }}>
+                <View style={view_mode=='desktop'?{ width:500 }:undefined}>
                 <BidForm
                     player_id={player_id}
                     player_balance={player_balance}
@@ -576,6 +585,7 @@ const SquaresModule = ({ sq_comp_id, insets, player_id, distinct_id, onRequestAu
                     onSubmitBid={(promo_balance) => handleSubmitBid(promo_balance)}
                 />
                 </View>
+                </View>
             </Modal>
             <Modal
                 transparent