be-components 1.3.0 → 1.3.2

package/src/CompetitionManager/components/CompetitionHeader.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import { View, Image } from 'react-native';
+import type { CompetitionProps } from '../../types';
+import { Button, Text } from '../../Components';
+import Colors from '../../constants/colors';
+import { view_styles } from '../../constants/styles';
+
+type CompetitionHeaderProps = {
+    width:number,
+    action_loading:boolean,
+    competition:CompetitionProps,
+    competition_valid: {
+        valid:boolean,
+        info:boolean,
+        contests:boolean,
+        contest_settings: boolean,
+        settings:boolean
+    },
+    onPause:() => void,
+    onResume: () => void,
+    onActivate: () => void
+}
+
+const CompetitionHeader = ({ width, action_loading, competition, competition_valid, onActivate, onPause, onResume }:CompetitionHeaderProps) => {
+    
+    const handleActivate = () => {
+        if(!competition_valid.valid){
+            return alert(`Please complete all the required sections before activating`)
+        }
+        onActivate()
+    }
+
+    const handleResume = () => {
+        if(!competition_valid.valid){
+            return alert(`Please complete all the required sections before activating`)
+        }
+        onResume()
+    }
+    
+    return (
+        <View style={{ backgroundColor:Colors.shades.white, flexGrow:1, minWidth:330, maxWidth:width }}>
+            <View nativeID="competition_header" style={{ flexDirection:'row', alignItems:'center', padding:20, borderBottomWidth:1, borderColor:Colors.shades.shade600 }}>
+                <View>
+                    <Image
+                        source={{ uri: competition.image?.url ?? 'https://res.cloudinary.com/hoabts6mc/image/upload/v1649737862/be_logo_jte2ux.webp' }}
+                        style={{ height:50, width:50, borderRadius:4 }}
+                        resizeMode="cover"
+                    />
+                </View>
+                <View style={{ flex:1, marginLeft:10 }}>
+                    <Text theme='header'>{competition.competition_name}</Text>
+                    <Text style={{ marginTop:4 }} theme='header_2>'>{competition.competition_description}</Text>
+                </View>
+                {competition.status == 'pending'?
+                <Button
+                    title={'ACTIVATE'}
+                    style={{ opacity:competition_valid.valid ? 1: 0.5 }}
+                    loading={action_loading}
+                    title_color={Colors.shades.white}
+                    backgroundColor={Colors.utility.success}
+                    onPress={() => handleActivate()}
+                />
+                :<></>}
+            </View>
+            {competition.status != 'paused' ?
+            <View style={{ ...view_styles.section_header, backgroundColor:Colors.shades.shade100 }}>
+                <View style={{ flex:1 }}>
+                    <Text theme='header'>COMPETITION IS ACTIVE</Text>
+                    <Text style={{ marginTop:3 }} theme='body'>In order to edit this competition, you must first pause it.</Text>
+                </View>
+                <Button
+                    title='PAUSE'
+                    style={{ opacity:!action_loading && competition_valid.valid ? 1: 0.5 }}
+                    loading={action_loading}
+                    title_color={Colors.shades.white}
+                    backgroundColor={Colors.utility.success}
+                    onPress={() => onPause()}
+                />
+            </View>
+            :<></>}
+            {competition.status == 'paused' ?
+            <View style={{ ...view_styles.section_header, backgroundColor:Colors.shades.shade100 }}>
+                <View style={{ flex:1 }}>
+                    <Text theme='header'>EDITING COMPETITION</Text>
+                    <Text style={{ marginTop:3 }} theme='body'>Feel free to make changes. When done, simply press resume.</Text>
+                </View>
+                <Button
+                    title='RESUME'
+                    style={{ opacity:!action_loading && competition_valid.valid ? 1: 0.5 }}
+                    loading={action_loading}
+                    title_color={Colors.shades.white}
+                    backgroundColor={Colors.brand.electric}
+                    onPress={() => handleResume()}
+                />
+            </View>
+            :<></>}
+        </View>
+    )
+}
+
+export default CompetitionHeader

package/src/CompetitionManager/components/CompetitionInfoForm.tsx

@@ -1,64 +1,104 @@
-import React, { useState } from 'react';
-import { View, TouchableOpacity } from "react-native"
+import React, { useEffect, useState } from 'react';
+import { View, TouchableOpacity, Image } from "react-native"
 import { view_styles } from "../../constants/styles"
 //import ImageUploader from '../../Components/ImageUploader';
 import type { CompetitionProps } from '../../types';
-import { Icons, Switch, Text, TextInput } from '../../Components';
+import { Button, Icons, Switch, Text, TextInput } from '../../Components';
 import Colors from '../../constants/colors';
+import ImageUploader from '../../Components/ImageUploader';
 //import DropDown from '../../Components/Dropdown';
 
 type CompetitionInfoFormProps = {
     competition:CompetitionProps,
+    is_valid?:boolean,
     width: number,
     onCompetitionUpdate:(competition:CompetitionProps) => void
 }
 
-const CompetitionInfoForm = ({ competition, width, onCompetitionUpdate }:CompetitionInfoFormProps) => {
+const CompetitionInfoForm = ({ is_valid, competition, width, onCompetitionUpdate }:CompetitionInfoFormProps) => {
     const [ expanded, setExpanded ] = useState(false);
+    const [ draft_competition, setDraftCompetition ] = useState<CompetitionProps | undefined>(undefined);
 
+    useEffect(() => {
+        setDraftCompetition(competition)
+    },[competition])
 
-
+    if(!draft_competition){ return <></> }
+    const is_changed = JSON.stringify(draft_competition) != JSON.stringify(competition) ? true : false;
     return (
         <View style={{ ...view_styles.section, flexGrow:1 }}>
-            <TouchableOpacity style={view_styles.section_header} onPress={() => setExpanded(!expanded)}>
-                <View style={{ flex:1 }}>
+            <TouchableOpacity style={{ ...view_styles.section_header, maxWidth:width}} onPress={() => setExpanded(!expanded)}>
+                {is_valid ?
+                <Icons.CheckCirlceIcon size={16} color={Colors.utility.success} />
+                :
+                <Icons.AlertIcon size={16} color={Colors.utility.warning} />
+                }
+                <View style={{ flex:1, marginLeft:10 }}>
                     <Text theme='header'>Competition Information</Text>
                     <Text style={{ marginTop:3 }} theme='body'>Manage the high level information of this competition</Text>
                 </View>
+                {is_changed ?
+                <Button
+                    title='SAVE'
+                    padding={10}
+                    title_color={Colors.shades.white}
+                    backgroundColor={Colors.utility.success}
+                    onPress={() => onCompetitionUpdate(draft_competition)}
+                />
+                :
                 <Icons.ChevronIcon direction={expanded ? 'up' : 'down'} color={Colors.brand.midnight} size={8} />
+                }
             </TouchableOpacity>
             {expanded ?
-            <View nativeID="competition_info" style={{ ...view_styles.section_body, minWidth:300, maxWidth:width }}>
+            <View nativeID="competition_info" style={{ ...view_styles.section_body, padding:10, minWidth:300, maxWidth:width, backgroundColor:Colors.shades.shade100 }}>
                 
-                <View nativeID="competition_name" style={{ ...view_styles.body_row, flexWrap:'wrap', maxWidth:width}}>
+                <View nativeID="competition_image" style={{ ...view_styles.body_row, flexWrap:'wrap', maxWidth:width, borderBottomWidth:1, borderColor:Colors.shades.shade600 }}>
+                    <View style={{ flex:1, margin:5, minWidth:200 }}>
+                        <Text theme='header_2'>Competition Image</Text>
+                        <Text style={{ marginTop:3 }} theme='body'>Give this competition an image so it is recognizable to those trying to join.</Text>
+                    </View>
+                    <ImageUploader
+                        public_id={`comp_image_${competition.competition_id}_${Math.random()}`}
+                        onFinishUpload={obj => onCompetitionUpdate({ ...draft_competition, image: { ...obj, url:obj.secure_url } })}
+                    >
+                        <Image
+                            source={{ uri: competition.image?.url }}
+                            style={{ height: 50, width:50, borderRadius:4 }}
+                            resizeMode='cover'
+                        />
+                        <Text size={12} color={Colors.brand.electric} textAlign='center'>CHANGE</Text>
+                    </ImageUploader>
+                </View>
+
+                <View nativeID="competition_name" style={{ ...view_styles.body_row, flexWrap:'wrap', maxWidth:width, borderBottomWidth:1, borderColor:Colors.shades.shade600 }}>
                     <View style={{ flex:1, margin:5, minWidth:200 }}>
                         <Text theme='header_2'>Competition Name</Text>
                         <Text style={{ marginTop:3 }} theme='body'>Give the competition a memorable name that aligns with the type and payout.</Text>
                     </View>
                     <TextInput
                         style={{ ...view_styles.input, flexGrow:1, margin:5 }}
-                        onChangeText={(text) => onCompetitionUpdate({ ...competition, competition_name:text })}
-                        value={competition.competition_name}
+                        onChangeText={(text) => setDraftCompetition({ ...draft_competition, competition_name:text })}
+                        value={draft_competition.competition_name}
                         placeholder="Competition Name"
                         placeholderTextColor={Colors.brand.slate}
                     />
                 </View>
 
-                <View nativeID="competition_description" style={{ ...view_styles.body_row, flexWrap:'wrap', maxWidth:width}}>
-                    <View style={{ flex:1, margin:5, minWidth:200 }}>
+                <View nativeID="competition_description" style={{ ...view_styles.body_row, flexWrap:'wrap', maxWidth:width, marginTop:10, borderBottomWidth:1, borderColor:Colors.shades.shade600 }}>
+                    <View style={{ flex:1, margin:5, minWidth:200  }}>
                         <Text theme='header_2'>Competition Description</Text>
                         <Text style={{ marginTop:3 }} theme='body'>Give the competition a memorable description that would entice users to participate.</Text>
                     </View>
                     <TextInput
                         style={{ ...view_styles.input, flexGrow:1, margin:5 }}
-                        onChangeText={(text) => onCompetitionUpdate({ ...competition, competition_description:text })}
-                        value={competition.competition_description}
+                        onChangeText={(text) => setDraftCompetition({ ...draft_competition, competition_description:text })}
+                        value={draft_competition.competition_description}
                         placeholder="Pick 5 games ATS from NFL Week 6 matchups"
                         placeholderTextColor={Colors.brand.slate}
                     />
                 </View>
 
-                <View nativeID="invite_only" style={{ ...view_styles.body_row, flexWrap:'wrap' }}>
+                <View nativeID="invite_only" style={{ ...view_styles.body_row, flexWrap:'wrap', marginTop:10, borderBottomWidth:1, borderColor:Colors.shades.shade600  }}>
                     <View style={{ flex:1, margin:5, marginRight:15 }}>
                         <Text theme='header_2'>Make Private</Text>
                         <Text style={{ marginTop:3 }} theme='body'>Only access this competition using an invite code.</Text>
@@ -66,37 +106,9 @@ const CompetitionInfoForm = ({ competition, width, onCompetitionUpdate }:Competi
                     <Switch
                         value={competition.invite_only}
                         switch_type="on_off"
-                        onChange={(value) => onCompetitionUpdate({ ...competition, invite_only: value })}
-                    />
-                </View>
-                {false ?
-                <View nativeID="competition_description" style={{ ...view_styles.body_row, flexWrap:'wrap', maxWidth:width}}>
-                    <View style={{ flex:1, margin:5, minWidth:200 }}>
-                        <Text theme='header_2'>League Name</Text>
-                        <Text style={{ marginTop:3 }} theme='body'>Set the name of the league</Text>
-                    </View>
-                    <TextInput
-                        style={{ ...view_styles.input, flexGrow:1 }}
-                        onChangeText={(text) => onCompetitionUpdate({ ...competition, league_name:text })}
-                        value={competition.league_name}
-                        placeholder="Add a league name"
-                        placeholderTextColor={Colors.brand.slate}
-                    />
-                </View>
-                :<></>}
-                {false ?
-                <View nativeID="invite_only" style={{ ...view_styles.body_row, flexWrap:'wrap' }}>
-                    <View style={{ flex:1, margin:5, minWidth:200 }}>
-                        <Text theme='header_2'>Additional Prize</Text>
-                        <Text style={{ marginTop:3 }} theme='body'>Is there an additional prize that will be delivered?</Text>
-                    </View>
-                    <Switch
-                        value={competition.prize_override ? true : false}
-                        switch_type="on_off"
-                        onChange={(value) => onCompetitionUpdate({ ...competition, prize_override: value ? 'Additional Prize!': undefined })}
+                        onChange={(value) => onCompetitionUpdate({ ...draft_competition, invite_only: value })}
                     />
                 </View>
-                :<></>}
             </View>
             :<></>}
         </View>

package/src/CompetitionManager/components/CompetitionMatchMarketCard.tsx

@@ -1,10 +1,9 @@
-//import { TouchableOpacity, View } from "react-native"
-//import { v4 } from 'uuid';
-import React  from "react"
+import { TouchableOpacity, View } from "react-native"
+import React, { useState }  from "react"
 import type { CompetitionMatchMarketProps, MarketProps } from "../../types";
-//import { ManageCompetitionHelpers } from "../api";
-//import { Text } from "../../Components";
-//import Colors from "../../constants/colors";
+import { Button, Text, TextInput } from "../../Components";
+import Colors from "../../constants/colors";
+import { ManageCompetitionHelpers } from "../api";
 
 
 type CompetitionMatchMarketCardProps = {
@@ -20,38 +19,24 @@ type CompetitionMatchMarketCardProps = {
     onGenerateMarkets: () => void
 }
 
-const CompetitionMatchMarketCard = ({ }:CompetitionMatchMarketCardProps) => {
-    
-    /*
-    const [ setDraftCompetitionMatchMarket ] = useState<CompetitionMatchMarketProps | undefined>(undefined)
+const CompetitionMatchMarketCard = ({ market, competition_match_markets, onUpdateMarkets }:CompetitionMatchMarketCardProps) => {
+    const [ draft_competition_match_market, setDraftCompetitionMatchMarket ] = useState<CompetitionMatchMarketProps | undefined>(undefined)
 
     const trade_side = competition_match_markets.find(cmm => cmm.side == market.trade_side);
-    let trade_side_pick_pct = 0, o_side_pick_pct = 0;
     const o_side = competition_match_markets.find(cmm => cmm.side != market.trade_side);
-    let total_count = 0
-    if(competition_summaries){
-        total_count = competition_summaries.reduce((a,b) => a + parseFloat(b.count), 0)
-        let trade_side_summary = competition_summaries.find(cs => cs.side == market.trade_side)
-        let o_side_summary = competition_summaries.find(cs => cs.side != market.trade_side)
-        if(trade_side_summary){
-            trade_side_pick_pct = trade_side_summary.count / total_count
-        }
-        if(o_side_summary){
-            o_side_pick_pct = o_side_summary.count / total_count
-        }
-    }
-        */
-    /*
+
+        
+
 
     const isCMMValid = (cmm:CompetitionMatchMarketProps) => {
-        if(isNaN(cmm.odds)){ return false }
-        if(isNaN(cmm.var_1)){ return false }
-        if(market.type != 'Spread' && cmm.var_1 < 0){ return false }
+        if(isNaN(cmm.odds as number)){ return false }
+        if(isNaN(cmm.var_1 as number)){ return false }
+        if(market.type != 'Spread' && parseFloat(cmm.var_1 as string) < 0){ return false }
         if(market.var_1_required && cmm.var_1 == 0){ return false }
         return true
     }
-*/
-    /*
+
+    
     const handleUpdateCMM = () => {
         if(!draft_competition_match_market){ return }
         //First check if the draft one is valie
@@ -62,22 +47,21 @@ const CompetitionMatchMarketCard = ({ }:CompetitionMatchMarketCardProps) => {
         //now we need to flip sides
         let other_cmm = competition_match_markets.find(ncm => ncm.side != cmm.side)
         if(other_cmm){
-            console.log('THERE WAS AN OTHER SIDE')
             other_cmm.var_1 = cmm.var_1
-            other_cmm.odds = cmm.odds * -1
+            other_cmm.odds = parseFloat(cmm.odds as string) * -1
             other_cmm.probability = ManageCompetitionHelpers.calcProbabilityFromOdds(other_cmm.odds)
         } else {
             return alert('NOT HANDLED.  PLEASE AUTO GENERATE FIRST')
         }
         if(market.type == 'Spread'){
-            other_cmm.var_1 = other_cmm.var_1 * -1
+            other_cmm.var_1 = parseFloat(other_cmm.var_1 as string) * -1
         }
-        onUpdateMarkets([{ ...cmm, probability: ManageCompetitionHelpers.calcProbabilityFromOdds(cmm.odds), status:'pending' }, { ...other_cmm, status:'pending'}])
+        onUpdateMarkets([{ ...cmm, probability: ManageCompetitionHelpers.calcProbabilityFromOdds(parseFloat(cmm.odds as string)), status:'pending' }, { ...other_cmm, status:'pending'}])
         return setDraftCompetitionMatchMarket(undefined)
     }
-        */
+        
 
-    /*
+    
 
     if(draft_competition_match_market){
         return (
@@ -86,13 +70,13 @@ const CompetitionMatchMarketCard = ({ }:CompetitionMatchMarketCardProps) => {
                 {market.var_1_required ?
                 <TextInput
                     style={{ padding:10, borderRadius:4, backgroundColor:Colors.shades.white, marginRight:20 }}
-                    value={draft_competition_match_market.var_1}
+                    value={draft_competition_match_market.var_1 as string}
                     onChangeText={(text) => setDraftCompetitionMatchMarket({ ...draft_competition_match_market, var_1: text })}
                 />
                 :<></>}
                 <TextInput
                     style={{ padding:10, borderRadius:4, backgroundColor:Colors.shades.white }}
-                    value={draft_competition_match_market.odds}
+                    value={draft_competition_match_market.odds as string}
                     onChangeText={(text) => setDraftCompetitionMatchMarket({ ...draft_competition_match_market, odds: text })}
                 />
                 <Button
@@ -104,52 +88,27 @@ const CompetitionMatchMarketCard = ({ }:CompetitionMatchMarketCardProps) => {
             </View>
         )
     }
-        */
-
-    /*
-    if(!trade_side || !o_side){
-        return (
-            <View style={{ flexDirection:'row' }}>
-                <TouchableOpacity style={{ justifyContent:'center', alignItems:'center', padding:5, borderRadius:4, backgroundColor:Colors.shades.shade100 }} onPress={() => {
-                    setDraftCompetitionMatchMarket({ ...ManageCompetitionHelpers.createEmptyCompetitionMatchMarket(market, side_id), event_id, event_type, competition_match_id, competition_match_market_id: v4(), pair_id:v4() })
-                }}>
-                    <Icons.UserIcon size={14} color={Colors.brand.midnight} />
-                    <Text style={{ marginTop:5 }} size={12} color={Colors.brand.midnight} weight='bold'>Enter Manually</Text>
-                </TouchableOpacity>
-                <TouchableOpacity style={{ justifyContent:'center', marginLeft:5, alignItems:'center', padding:5, borderRadius:4, backgroundColor:Colors.shades.shade100 }} onPress={() => onGenerateMarkets()}>
-                    <Icons.SettingsIcon size={14} color={Colors.brand.electric} />
-                    <Text style={{ marginTop:5 }} size={12} color={Colors.brand.electric} weight='bold'>Try Auto</Text>
-                </TouchableOpacity>
-            </View>
-        )
-    }
-
-    */
 
-    return <></>
-    /*
     if(!o_side || !trade_side){ return <></> }
 
     return (
         <View style={{ flexDirection:'row' }}>
             <View>
-                <Text style={{ marginBottom:2 }} size={12} color={Colors.brand.midnight} weight='semibold' textAlign="center">{(o_side_pick_pct*100).toFixed()} % Picked</Text>
-                <TouchableOpacity style={{ width:75, padding:5, backgroundColor:o_side.status == 'error' ? Colors.highlights.highlight300Faded :Colors.shades.shade600, borderRadius:4, marginRight:3 }} onPress={() => setDraftCompetitionMatchMarket(o_side)}>
-                    <Text textAlign="center" size={12} color={Colors.brand.midnight} weight='semibold'>{o_side.side.toUpperCase()}{market.var_1_required?` ${ManageCompetitionHelpers.getVar1Label(o_side.var_1, market)}`:''}</Text>
-                    <Text textAlign="center" size={12} color={Colors.brand.midnight} weight='semibold'>{ManageCompetitionHelpers.getOddsLabel(o_side.odds)}</Text>
+                <TouchableOpacity disabled style={{ width:75, padding:5, backgroundColor:o_side.status == 'error' ? Colors.highlights.highlight300Faded :Colors.shades.shade600, borderRadius:4, marginRight:3 }} onPress={() => setDraftCompetitionMatchMarket(o_side)}>
+                    <Text textAlign="center" size={12} color={Colors.brand.midnight} weight='semibold'>{o_side.side.toUpperCase()}{market.var_1_required?` ${ManageCompetitionHelpers.getVar1Label(o_side.var_1 as number, market)}`:''}</Text>
+                    <Text textAlign="center" size={12} color={Colors.brand.midnight} weight='semibold'>{ManageCompetitionHelpers.getOddsLabel(o_side.odds as number)}</Text>
                 </TouchableOpacity>
             </View>
             <View>
-                <Text style={{ marginBottom:2 }} size={12} color={Colors.brand.midnight} weight='semibold' textAlign="center">{(trade_side_pick_pct*100).toFixed()} % Picked</Text>
-                <TouchableOpacity style={{ width:75, padding:5, backgroundColor:trade_side.status == 'error' ? Colors.highlights.highlight300Faded :Colors.shades.shade600, borderRadius:4, marginLeft:3 }} onPress={() => setDraftCompetitionMatchMarket(trade_side)}>
-                    <Text textAlign="center" size={12} color={Colors.brand.midnight} weight='semibold'>{trade_side.side.toUpperCase()}{market.var_1_required?` ${ManageCompetitionHelpers.getVar1Label(trade_side.var_1, market)}`:''}</Text>
-                    <Text textAlign="center" size={12} color={Colors.brand.midnight} weight='semibold'>{ManageCompetitionHelpers.getOddsLabel(trade_side.odds)}</Text>
+                <TouchableOpacity disabled style={{ width:75, padding:5, backgroundColor:trade_side.status == 'error' ? Colors.highlights.highlight300Faded :Colors.shades.shade600, borderRadius:4, marginLeft:3 }} onPress={() => setDraftCompetitionMatchMarket(trade_side)}>
+                    <Text textAlign="center" size={12} color={Colors.brand.midnight} weight='semibold'>{trade_side.side.toUpperCase()}{market.var_1_required?` ${ManageCompetitionHelpers.getVar1Label(trade_side.var_1 as number, market)}`:''}</Text>
+                    <Text textAlign="center" size={12} color={Colors.brand.midnight} weight='semibold'>{ManageCompetitionHelpers.getOddsLabel(trade_side.odds as number)}</Text>
                 </TouchableOpacity>
             </View>
             
         </View>
     )
-        */
+        
 }
 
 export default CompetitionMatchMarketCard