be-components 1.2.2 → 1.2.4

package/lib/module/Competition/components/CompetitionPlay.js

@@ -1,20 +1,10 @@
 import React from 'react';
-import { ActivityIndicator, FlatList, Image, ImageBackground, ScrollView, TouchableOpacity, View } from "react-native";
+import { FlatList, TouchableOpacity, View } from "react-native";
 import Colors from '../../constants/colors';
 import { useEffect, useState } from "react";
 import TeamEventCard from './TeamEventCard';
-import NavOutPrompt from './NavOutPrompt';
 import AthleteMarketCard from './AthleteMarketCard';
 import MatchMarketCard from './MatchMarketCard';
-import CompetitionInfoCard from './CompetitionInfoCard';
-import CompetitionLeaderboard from './CompetitionLeaderboard';
-import LeaderPicks from './LeaderPicks';
-import WagerPickForm from './WagerPickForm';
-import EnterCompetitionPrompt from './EnterCompetitionPrompt';
-import SeasonInfoModal from './SeasonInfoModal';
-import CompetitionTypeCard from './CompetitionTypeCard';
-import { CompetitionApi, CompetitionHelpers, CompetitionMatchApi, CompetitionPlayerApi, PlayerPicksApi } from "../api";
-import { AuthenticateApi } from "../../Authenticator/api";
 import moment from "moment-mini";
 import { view_styles } from "../../constants/styles";
 import LinearGradient from "react-native-linear-gradient";
@@ -22,114 +12,37 @@ import { Icons, Text } from "../../Components";
 import LinearDiagnal from "../../Components/LinearDiagnal";
 import SpringView from "../../Components/Spring";
 const CompetitionPlay = ({
+  authenticated_competition_player,
+  pick_loading,
+  competition,
+  competition_type,
+  onPick,
+  competition_matches,
+  competition_match_markets,
+  leagues,
+  athletes,
+  events,
+  tournaments,
+  matches,
+  markets,
   player_id,
-  company,
-  source,
-  back_allowed,
-  onGoBack,
-  competition_id,
-  width,
-  height,
-  hide_player,
-  onChangeCompetition,
-  onRequestAuthentication
+  player_picks
 }) => {
-  const [loading, setLoading] = useState(false);
-  const [code_details] = useState({});
-  const [my_data, setMyData] = useState({
-    player_picks: []
-  });
-  const [competition_data, setCompetitionData] = useState({
-    loading: false,
-    tournaments: [],
-    events: [],
-    athletes: [],
-    teams: [],
-    matches: [],
-    leagues: [],
-    markets: [],
-    competition_types: [],
-    competition_result_types: [],
-    competition_payout_types: [],
-    competition_matches: [],
-    competition_players: [],
-    competition_match_markets: []
-  });
-  const [profile_visible, setProfileVisible] = useState(false);
-  const [show_rules, setShowRules] = useState(false);
-  const [nav_out_prompt, setNavOutPrompt] = useState({
-    visible: false
-  });
-  const [show_season, setShowSeason] = useState(false);
-  const [show_enter_prompt, setShowEnterPrompt] = useState(false);
-  const [complete_loaded, setCompleteLoaded] = useState(false);
-  const [show_completed, setShowCompleted] = useState(false);
+  //const [ complete_loaded, setCompleteLoaded ] = useState(false);
+  const [contest_view, setContestView] = useState('upcoming');
+  //const [ show_completed, setShowCompleted ] = useState(false);
   const [expanded_markets, setExpandedMarkets] = useState([]);
-  const [draft_player_pick, setDraftPlayerPick] = useState({});
-  const [viewing_leader, setViewingLeader] = useState(undefined);
-  const [show_full_leaderboard, setShowFullLeaderboard] = useState(false);
-  const [pick_loading, setPickLoading] = useState(undefined);
-  const {
-    competition,
-    leagues,
-    markets,
-    events,
-    athletes,
-    tournaments,
-    matches,
-    competition_players,
-    competition_result_type,
-    competition_payout_types,
-    competition_season,
-    competition_types,
-    competition_result_types,
-    competition_type,
-    competition_matches,
-    competition_match_markets
-  } = competition_data;
-  const {
-    player,
-    player_balance,
-    player_picks
-  } = my_data;
-  const events_array = Object.values(events);
-  const authenticated_competition_player = competition_players.find(cp => cp.player_id == player?.player_id);
-  const can_leave = competition?.entered && moment().isBefore(moment(competition.scheduled_datetime)) && player_picks.length == 0 && !loading;
+  const [expanded, setExpanded] = useState(true);
   const ip_unique_team_events = [...new Set(competition_matches.filter(cm => cm.event_type == 'team' && cm.status == 'inprogress').map(cm => cm.event_id))];
-  const ip_team_event_ids = events_array.filter(e => ip_unique_team_events.includes(e.event_id)).sort((a, b) => moment(a.scheduled_datetime).unix() - moment(b.scheduled_datetime).unix()).map(e => e.event_id);
+  let team_event_ids = events.filter(e => ip_unique_team_events.includes(e.event_id)).sort((a, b) => moment(a.scheduled_datetime).unix() - moment(b.scheduled_datetime).unix()).map(e => e.event_id);
   const closed_unique_team_events = [...new Set(competition_matches.filter(cm => cm.event_type == 'team' && cm.status == 'closed').map(cm => cm.event_id))];
-  const closed_team_event_ids = events_array.filter(e => closed_unique_team_events.includes(e.event_id)).sort((a, b) => moment(a.scheduled_datetime).unix() - moment(b.scheduled_datetime).unix()).map(e => e.event_id);
+  if (contest_view == 'closed') {
+    team_event_ids = events.filter(e => closed_unique_team_events.includes(e.event_id)).sort((a, b) => moment(a.scheduled_datetime).unix() - moment(b.scheduled_datetime).unix()).map(e => e.event_id);
+  }
   const unique_tournaments = [...new Set(Object.values(matches).map(m => m.tournament_id))];
+  const picks_completed = player_picks.length == competition.max_pick_count ? true : false;
   useEffect(() => {
-    if (!competition_id) {
-      return;
-    }
-    getCompetitionFromServer(competition_id);
-  }, [competition_id, player_id]);
-  useEffect(() => {
-    if (!competition_id) {
-      return;
-    }
     if (!player_id) {
-      setMyData({
-        player_picks: []
-      });
-    } else {
-      getPlayerData(competition_id, player_id, 0);
-    }
-  }, [player_id]);
-  const getPlayerData = async (competition_id, player_id, offset) => {
-    const pps = await PlayerPicksApi.getPlayerPicksByCompetition(competition_id, player_id, offset);
-    const player_balance = await CompetitionApi.getMyBalance();
-    const me = await CompetitionApi.getMyDetails();
-    setMyData({
-      player: me,
-      player_balance,
-      player_picks: pps
-    });
-  };
-  useEffect(() => {
-    if (!player) {
       return;
     }
     if (!competition_type || !competition) {
@@ -138,270 +51,10 @@ const CompetitionPlay = ({
     if (competition_type.type == 'pick') {
       //Need to determine if we need to show complete label!
       if (player_picks.length == competition.max_pick_count) {
-        handleEndCompetition();
+        //alert('Competition is complete!')
       }
     }
   }, [player_picks.length]);
-  const handleEndCompetition = async () => {
-    if (!competition) {
-      return;
-    }
-    if (competition?.status == 'closed') {
-      return;
-    }
-    if (source == 'bettoredge') {
-      return setNavOutPrompt({
-        visible: true,
-        title: 'Your picks are set!',
-        image_url: competition.image?.url ?? company?.company_image?.url,
-        body: 'Way to go!  All your pick are locked.  Feel free to edit your picks up until the start time of each contest',
-        hide_accept: true,
-        cancel_title: 'CLOSE'
-      });
-    }
-    let company_short_name = 'be';
-    if (company) {
-      company_short_name = company.short_name;
-    }
-    let url = `https://share.mybe.app/c/${company_short_name}?type=c&id=${competition.competition_id}&utm_source=widget`;
-    try {
-      const player_token = await AuthenticateApi.getShortToken();
-      url += `&token=${player_token.token}`;
-    } catch (e) {
-      console.log(e);
-    }
-    setNavOutPrompt({
-      visible: true,
-      url,
-      title: 'Your picks are set!',
-      image_url: competition.image?.url ?? company?.company_image?.url,
-      body: 'Want even more ways to win?  Checkout BettorEdge where you can play more competitions like this, track results and even bet real money on the games!',
-      accept_title: 'Take Me There!',
-      cancel_title: 'No Thanks'
-    });
-  };
-  const handleProfile = async status => {
-    if (!player || !competition) {
-      return;
-    }
-    if (source == 'bettoredge') {
-      return;
-    }
-    let company_short_name = 'be';
-    if (company) {
-      company_short_name = company.short_name;
-    }
-    let url = `https://share.mybe.app/c/${company_short_name}?type=c&id=${competition.competition_id}&utm_source=widget`;
-    try {
-      const player_token = await AuthenticateApi.getShortToken();
-      url += `&token=${player_token.token}`;
-    } catch (e) {
-      console.log(e);
-    }
-    if (status != 'verified') {
-      setNavOutPrompt({
-        title: 'Verify me on BettorEdge!',
-        url,
-        image_url: player.profile_pic,
-        body: 'In order to use real-money, you must verify that you are of legal age with our partner BettorEdge',
-        accept_title: 'Verify at BettorEdge',
-        visible: true
-      });
-    } else {
-      setNavOutPrompt({
-        title: 'Manage my profile at BettorEdge',
-        url,
-        image_url: player.profile_pic,
-        body: 'See your competition performance and history at BettorEdge.',
-        accept_title: 'Manage Profile',
-        visible: true
-      });
-    }
-  };
-
-  //This will snag all the data we need to launch the competition
-  const getCompetitionFromServer = async competition_id => {
-    setCompetitionData({
-      ...competition_data,
-      loading: true
-    });
-    const {
-      competition_types,
-      competition_result_types,
-      competition_payout_types
-    } = await CompetitionApi.getCompetitionOptions();
-    const ls = await CompetitionApi.getLeagues();
-    const cms_response = await CompetitionApi.getCompetitionMatchesByCompetitionId(competition_id);
-
-    //Lets get the additional data needed!
-    let athletes = [];
-    let teams = [];
-    let events = [];
-    let tournaments = [];
-    let matches = [];
-    const markets = await CompetitionApi.getMarkets();
-    let athlete_ids = cms_response.competition_matches.filter(cm => cm.side_type_override == 'athlete' && cm.side_id_override).map(cm => cm.side_id_override ?? '');
-    let team_ids = cms_response.competition_matches.filter(cm => cm.side_type_override == 'team' && cm.side_id_override).map(cm => cm.side_id_override ?? '');
-    const event_ids = cms_response.competition_matches.filter(cm => cm.event_type == 'team').map(cm => cm.event_id);
-    event_ids.map(eid => {
-      let side_id_cm = cms_response.competition_matches.find(cm => cm.event_type == 'team' && cm.event_id == eid && cm.side_id_override);
-      if (side_id_cm) {
-        expanded_markets.push(eid);
-      }
-    });
-    setExpandedMarkets(expanded_markets);
-    const match_ids = cms_response.competition_matches.filter(cm => cm.event_type == 'match').map(cm => cm.event_id);
-    if (event_ids.length > 0) {
-      events = await CompetitionMatchApi.getEventsByEventIds(event_ids);
-    }
-    if (match_ids.length > 0) {
-      matches = await CompetitionMatchApi.getMatchesByMatchIds(match_ids);
-    }
-    if (matches.length > 0) {
-      let tournament_ids = matches.map(m => m.tournament_id);
-      tournaments = await CompetitionMatchApi.getTournamentsByTournamentIds(tournament_ids);
-      let new_athlete_ids = [];
-      let new_team_ids = [];
-      matches.filter(m => m.participant_type == 'athlete').map(m => m.participants.map(p => new_athlete_ids.push(p)));
-      matches.filter(m => m.participant_type == 'team').map(m => m.participants.map(p => new_team_ids.push(p)));
-      athlete_ids = athlete_ids.concat(new_athlete_ids);
-      team_ids = team_ids.concat(new_team_ids);
-    }
-    if (athlete_ids.length > 0) {
-      athletes = await CompetitionMatchApi.getAthletesByIds(athlete_ids);
-    }
-    if (team_ids.length > 0) {
-      teams = await CompetitionMatchApi.getTeamsByIds(team_ids);
-    }
-    const cps = await CompetitionPlayerApi.getCompetitionPlayersByCompetition(competition_id, 0, 'active');
-    const c = await CompetitionApi.getCompetitionById(competition_id);
-    setCompetitionData({
-      loading: false,
-      competition: c,
-      competition_matches: cms_response.competition_matches,
-      competition_match_markets: cms_response.competition_match_markets,
-      events,
-      athletes,
-      teams,
-      tournaments,
-      leagues: ls,
-      competition_types: competition_types,
-      competition_result_types: competition_result_types,
-      matches,
-      competition_payout_types,
-      competition_players: cps,
-      competition_type: competition_types.find(ct => ct.competition_type_id == c.competition_type_id),
-      competition_result_type: competition_result_types.find(crt => crt.competition_result_type_id == c.competition_result_type_id),
-      markets
-    });
-    setLoading(false);
-  };
-  const handleEnterPrompt = () => {
-    if (!player_id) {
-      return onRequestAuthentication();
-    }
-    return setShowEnterPrompt(true);
-  };
-  const handleEnterCompetition = async promo_balance => {
-    if (loading) {
-      return;
-    }
-    setShowEnterPrompt(false);
-    setLoading(true);
-    const response = await CompetitionPlayerApi.joinCompetition({
-      ...CompetitionHelpers.getCompetitionPlayer(competition_id),
-      promo_balance
-    });
-    setCompetitionData({
-      ...competition_data,
-      competition: response.competition,
-      competition_players: competition_players.filter(cp => cp.competition_player_id != response.competition_player.competition_player_id).concat(response.competition_player)
-    });
-    setLoading(false);
-  };
-  const handleLeaveCompetition = async () => {
-    if (!authenticated_competition_player) {
-      return;
-    }
-    setLoading(true);
-    const response = await CompetitionPlayerApi.leaveCompetition(authenticated_competition_player);
-    setCompetitionData({
-      ...competition_data,
-      competition: response.competition,
-      competition_players: competition_players.filter(cp => cp.competition_player_id != response.competition_player.competition_player_id).concat(response.competition_player)
-    });
-    setLoading(false);
-  };
-  const handleShowComplete = async () => {
-    setShowCompleted(!show_completed);
-    if (!complete_loaded) {
-      await CompetitionMatchApi.getCompetitionMatchesByCompetitionId(competition_id, 'closed');
-      setCompleteLoaded(true);
-    }
-  };
-  const handlePick = async (pp, event_title, event_start) => {
-    if (!competition) {
-      return;
-    }
-    if (!player_id) {
-      return onRequestAuthentication();
-    }
-    if (!authenticated_competition_player) {
-      return setShowEnterPrompt(true);
-    }
-    if (!competition_type) {
-      return alert('Unable to process pick');
-    }
-    setPickLoading(pp.competition_match_id);
-    //If the pick needs to be removed
-    if (pp.player_pick_id && pp.player_pick_id != '') {
-      const rem_pp = await PlayerPicksApi.removePlayerPick(pp.player_pick_id);
-      setMyData({
-        ...my_data,
-        player_picks: player_picks.filter(ps => ps.player_pick_id != rem_pp.player_pick.player_pick_id)
-      });
-      setPickLoading(undefined);
-      return;
-    }
-
-    //If this is a new pick
-    //First check to see if they already have one on the market / event combo
-    let existing_pick = player_picks.find(p => p.competition_match_id == pp.competition_match_id && p.market_id == pp.market_id);
-    if (existing_pick) {
-      setPickLoading(undefined);
-      return alert('Can only pick one side of each market.  Remove the other side before selecting this one.');
-    }
-    if (competition_type.type == 'pick') {
-      if (player_picks.length >= competition.max_pick_count) {
-        setPickLoading(undefined);
-        return alert('Already reached maximum picks');
-      }
-      const new_pp = await PlayerPicksApi.createPlayerPick(pp);
-      setMyData({
-        ...my_data,
-        player_picks: player_picks.filter(ps => ps.player_pick_id != new_pp.player_pick.player_pick_id).concat(new_pp.player_pick)
-      });
-      setPickLoading(undefined);
-    }
-    if (competition_type.type == 'wager') {
-      setPickLoading(undefined);
-      setDraftPlayerPick({
-        draft_pick: pp,
-        event_start,
-        event_title
-      });
-    }
-  };
-  const handleWagerSubmit = async pp => {
-    setPickLoading(pp.competition_match_id);
-    const new_pp = await PlayerPicksApi.createPlayerPick(pp);
-    setMyData({
-      ...my_data,
-      player_picks: player_picks.filter(ps => ps.player_pick_id != new_pp.player_pick.player_pick_id).concat(new_pp.player_pick)
-    });
-    setDraftPlayerPick({});
-    setPickLoading(undefined);
-  };
   const renderAthleteEvents = data => {
     const event = events.find(e => e.event_id == data.item.event_id);
     if (!event || !competition || !competition_type) {
@@ -438,7 +91,7 @@ const CompetitionPlay = ({
       competition_match: data.item,
       mode: "play",
       orientation: "vertical",
-      onPick: (pp, event_title, event_start) => handlePick(pp, event_title, event_start),
+      onPick: (pp, event_title, event_start) => onPick(pp, event_title, event_start),
       competition_match_markets: match_markets,
       player_picks: event_picks,
       loading: isLoading
@@ -466,7 +119,7 @@ const CompetitionPlay = ({
       player_picks: event_picks,
       mode: "play",
       loading: isLoading,
-      onPick: (pp, event_title, event_start) => handlePick(pp, event_title, event_start),
+      onPick: (pp, event_title, event_start) => onPick(pp, event_title, event_start),
       competition_match: data.item,
       competition_match_markets: match_markets
     }));
@@ -530,7 +183,7 @@ const CompetitionPlay = ({
       competition_match_markets: match_markets,
       player_picks: event_picks,
       loading: isLoading,
-      onPick: (pp, event_title, event_start) => handlePick(pp, event_title, event_start),
+      onPick: (pp, event_title, event_start) => onPick(pp, event_title, event_start),
       mode: "play"
     }));
   };
@@ -705,186 +358,129 @@ const CompetitionPlay = ({
       size: 8
     }))) : /*#__PURE__*/React.createElement(React.Fragment, null));
   };
-  if (loading || !competition || !competition_type || !competition_result_type) {
-    return /*#__PURE__*/React.createElement(View, {
-      style: {
-        flex: 1,
-        backgroundColor: Colors.shades.white
-      }
-    }, company ? /*#__PURE__*/React.createElement(View, {
-      style: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        padding: 15,
-        backgroundColor: company?.brand_primary ?? Colors.shades.shade100
-      }
-    }, back_allowed ? /*#__PURE__*/React.createElement(TouchableOpacity, {
-      style: {
-        paddingRight: 20
-      },
-      onPress: () => onGoBack ? onGoBack() : console.log('')
-    }, /*#__PURE__*/React.createElement(Icons.ChevronIcon, {
-      direction: "left",
-      size: 14,
-      color: company?.brand_secondary ?? Colors.brand.midnight
-    })) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(Text, {
-      style: {
-        flex: 1
-      },
-      size: 14,
-      color: company?.brand_secondary ?? Colors.brand.midnight,
-      weight: "bold",
-      textAlign: "center"
-    }, "Brought to you by ", company ? company.company_name : 'BettorEdge')) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(ActivityIndicator, {
-      style: {
-        padding: 20
-      },
-      size: "large",
-      color: Colors.brand.midnight
-    }));
-  }
   return /*#__PURE__*/React.createElement(View, {
     style: {
-      flex: 1,
-      backgroundColor: Colors.shades.shade100
+      ...view_styles.section,
+      minWidth: 350
     }
-  }, /*#__PURE__*/React.createElement(ScrollView, {
-    style: {
-      flex: 1
-    }
-  }, company ? /*#__PURE__*/React.createElement(View, {
+  }, /*#__PURE__*/React.createElement(TouchableOpacity, {
+    style: view_styles.section_header,
+    onPress: () => setExpanded(!expanded)
+  }, /*#__PURE__*/React.createElement(Icons.SelectorIcon, {
+    size: 18,
+    color: Colors.brand.midnight
+  }), /*#__PURE__*/React.createElement(View, {
     style: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      padding: 15,
-      backgroundColor: company?.brand_primary ?? Colors.shades.shade100
+      flex: 1,
+      marginLeft: 10
     }
-  }, back_allowed ? /*#__PURE__*/React.createElement(TouchableOpacity, {
-    style: {
-      paddingRight: 20
-    },
-    onPress: () => onGoBack ? onGoBack() : console.log('')
-  }, /*#__PURE__*/React.createElement(Icons.ChevronIcon, {
-    direction: "left",
-    size: 14,
-    color: company?.brand_secondary ?? Colors.brand.midnight
-  })) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(Text, {
+  }, /*#__PURE__*/React.createElement(Text, {
+    theme: "header"
+  }, "MANAGE MY ", competition_type.type == 'pick' ? 'PICKS' : 'WAGERS'), /*#__PURE__*/React.createElement(Text, {
     style: {
-      flex: 1
+      marginTop: 4
     },
-    size: 14,
-    color: company?.brand_secondary ?? Colors.brand.midnight,
-    weight: "bold",
-    textAlign: "center"
-  }, "Brought to you by ", company ? company.company_name : 'BettorEdge')) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(View, {
-    nativeID: "cometition_header",
+    theme: "body_2"
+  }, "Make ", competition_type.type == 'pick' ? 'Picks' : 'Wagers', " from the available contests.")), /*#__PURE__*/React.createElement(View, {
     style: {
-      minWidth: 300,
-      backgroundColor: Colors.brand.midnight
+      marginLeft: 8,
+      marginRight: 8,
+      borderRadius: 100,
+      height: 24,
+      width: 24,
+      backgroundColor: picks_completed ? Colors.utility.success : Colors.highlights.highlight200,
+      justifyContent: 'center',
+      alignItems: 'center'
     }
-  }, /*#__PURE__*/React.createElement(CompetitionInfoCard, {
-    player: player,
-    competition: competition,
-    competition_type: competition_type,
-    onEnter: () => handleEnterPrompt(),
-    can_leave: can_leave,
-    onViewRules: () => setShowRules(true),
-    onViewPrize: () => {
-      setNavOutPrompt({
-        visible: true,
-        cancel_title: 'CLOSE',
-        title: 'Competition Additional Prize!',
-        body: competition.prize_override,
-        image_url: competition.prize_image?.url,
-        hide_accept: true
-      });
-    },
-    onLeave: () => handleLeaveCompetition(),
-    onViewEvents: () => console.log('VIEW!')
-  })), competition_season ? /*#__PURE__*/React.createElement(TouchableOpacity, {
-    style: {
-      backgroundColor: Colors.incentive.gold,
-      padding: 10
-    },
-    onPress: () => setShowSeason(true)
   }, /*#__PURE__*/React.createElement(Text, {
-    size: 18,
+    size: 12,
     color: Colors.shades.white,
-    weight: "bold"
-  }, "Competition Season"), /*#__PURE__*/React.createElement(View, {
-    nativeID: "competition_leaderboard",
+    weight: "bold",
+    textAlign: "center"
+  }, player_picks.filter(pp => pp.status != 'deleted').length)), /*#__PURE__*/React.createElement(Icons.ChevronIcon, {
+    direction: expanded ? 'up' : 'down',
+    color: Colors.brand.midnight,
+    size: 8
+  })), expanded ? /*#__PURE__*/React.createElement(View, {
     style: {
-      marginTop: 5,
-      flexDirection: 'row',
-      alignItems: 'center'
+      ...view_styles.section_body,
+      padding: 0
     }
   }, /*#__PURE__*/React.createElement(View, {
     style: {
-      padding: 5
+      flexDirection: 'row',
+      backgroundColor: Colors.shades.white,
+      margin: 5,
+      marginTop: 15,
+      borderRadius: 22,
+      borderWidth: 4,
+      borderColor: Colors.shades.shade100
     }
-  }, /*#__PURE__*/React.createElement(Image, {
-    source: {
-      uri: competition_season.image?.url
-    },
+  }, /*#__PURE__*/React.createElement(TouchableOpacity, {
     style: {
-      height: 50,
-      width: 75,
-      borderRadius: 8
+      flex: 1,
+      flexDirection: 'row',
+      alignItems: 'center',
+      borderRadius: 22,
+      padding: 10,
+      backgroundColor: contest_view == 'upcoming' ? Colors.brand.midnight : Colors.shades.white
     },
-    resizeMode: "cover"
-  })), /*#__PURE__*/React.createElement(View, {
+    onPress: () => setContestView('upcoming')
+  }, /*#__PURE__*/React.createElement(Text, {
     style: {
       flex: 1
+    },
+    size: 12,
+    color: contest_view == 'upcoming' ? Colors.shades.white : Colors.brand.midnight,
+    weight: contest_view == 'upcoming' ? 'bold' : 'semibold'
+  }, "UPCOMING CONTESTS"), /*#__PURE__*/React.createElement(View, {
+    style: {
+      borderRadius: 100,
+      justifyContent: 'center',
+      alignItems: 'center',
+      height: 25,
+      width: 25,
+      backgroundColor: contest_view == 'upcoming' ? Colors.shades.white : Colors.brand.midnight
     }
   }, /*#__PURE__*/React.createElement(Text, {
-    size: 14,
-    color: Colors.shades.white,
-    weight: "semibold"
-  }, competition_season.season_name), /*#__PURE__*/React.createElement(Text, {
+    weight: "bold",
+    size: 12,
+    color: contest_view == 'upcoming' ? Colors.brand.midnight : Colors.shades.white
+  }, ip_unique_team_events.length))), /*#__PURE__*/React.createElement(TouchableOpacity, {
     style: {
-      marginTop: 3
+      flex: 1,
+      flexDirection: 'row',
+      alignItems: 'center',
+      borderRadius: 22,
+      padding: 10,
+      backgroundColor: contest_view == 'closed' ? Colors.brand.midnight : Colors.shades.white
     },
-    size: 14,
-    color: Colors.shades.white,
-    weight: "regular"
-  }, competition_season.season_description)), /*#__PURE__*/React.createElement(View, {
+    onPress: () => setContestView('closed')
+  }, /*#__PURE__*/React.createElement(Text, {
     style: {
-      padding: 5
-    }
-  }, /*#__PURE__*/React.createElement(Icons.ChevronIcon, {
-    direction: "right",
-    color: Colors.shades.white,
-    size: 16
-  })))) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(View, {
-    nativeID: "competition_leaderboard",
+      flex: 1
+    },
+    size: 12,
+    color: contest_view == 'closed' ? Colors.shades.white : Colors.brand.midnight,
+    weight: contest_view == 'closed' ? 'bold' : 'semibold'
+  }, "CLOSED CONTESTS"), /*#__PURE__*/React.createElement(View, {
     style: {
-      minWidth: 300,
-      padding: 10
+      borderRadius: 100,
+      justifyContent: 'center',
+      alignItems: 'center',
+      height: 25,
+      width: 25,
+      backgroundColor: contest_view == 'closed' ? Colors.shades.white : Colors.brand.midnight
     }
   }, /*#__PURE__*/React.createElement(Text, {
-    size: 18,
-    color: Colors.brand.midnight,
-    weight: "bold"
-  }, "Competition Leaderboard"), /*#__PURE__*/React.createElement(View, {
-    style: {
-      marginTop: 10
-    }
-  }, /*#__PURE__*/React.createElement(CompetitionLeaderboard, {
-    competition: competition,
-    competition_type: competition_type,
-    height: height,
-    onLeaderSelect: player => setViewingLeader(player),
-    view_mode: "short",
-    onSeeFull: () => setShowFullLeaderboard(true),
-    viewer_id: player?.player_id
-  }))), /*#__PURE__*/React.createElement(View, {
-    nativeID: "competition_picks",
+    weight: "bold",
+    size: 12,
+    color: contest_view == 'closed' ? Colors.brand.midnight : Colors.shades.white
+  }, closed_unique_team_events.length)))), /*#__PURE__*/React.createElement(View, {
+    nativeID: "picks",
     style: {
-      backgroundColor: Colors.shades.white,
-      marginTop: 5
+      marginTop: 15
     }
-  }, competition?.status != 'closed' ? /*#__PURE__*/React.createElement(View, {
-    nativeID: "upcoming_picks"
   }, /*#__PURE__*/React.createElement(View, {
     style: {
       flexDirection: 'row',
@@ -892,16 +488,12 @@ const CompetitionPlay = ({
       justifyContent: 'space-between',
       marginBottom: 15
     }
-  }, /*#__PURE__*/React.createElement(ImageBackground, {
+  }, /*#__PURE__*/React.createElement(View, {
     style: {
       flex: 1,
       flexDirection: 'row',
       alignItems: 'center',
-      width: width
-    },
-    resizeMode: "cover",
-    source: {
-      uri: 'https://res.cloudinary.com/hoabts6mc/image/upload/v1691609143/diagnal_header_l4kw7u.png'
+      backgroundColor: Colors.shades.shade100
     }
   }, /*#__PURE__*/React.createElement(View, {
     style: {
@@ -911,25 +503,10 @@ const CompetitionPlay = ({
       padding: 10
     }
   }, /*#__PURE__*/React.createElement(Text, {
-    size: 18,
-    color: Colors.shades.white,
+    size: 16,
+    color: Colors.brand.midnight,
     weight: "bold"
-  }, "Upcoming Events"), /*#__PURE__*/React.createElement(View, {
-    style: {
-      marginLeft: 8,
-      borderRadius: 100,
-      height: 24,
-      width: 24,
-      backgroundColor: Colors.highlights.highlight200,
-      justifyContent: 'center',
-      alignItems: 'center'
-    }
-  }, /*#__PURE__*/React.createElement(Text, {
-    size: 12,
-    color: Colors.shades.white,
-    weight: "bold",
-    textAlign: "center"
-  }, player_picks.filter(pp => pp.status == 'inprogress').length))), authenticated_competition_player ? /*#__PURE__*/React.createElement(SpringView, {
+  }, contest_view.toUpperCase(), " CONTESTS")), authenticated_competition_player ? /*#__PURE__*/React.createElement(SpringView, {
     slide: "horizontal",
     from: 200,
     to: 0,
@@ -960,301 +537,13 @@ const CompetitionPlay = ({
     weight: "semibold",
     textAlign: "right"
   }, competition.max_pick_count - player_picks.length, " Picks Remaining")) : /*#__PURE__*/React.createElement(React.Fragment, null))), /*#__PURE__*/React.createElement(FlatList, {
-    data: ip_team_event_ids,
+    data: team_event_ids,
     renderItem: renderTeamEvents,
     keyExtractor: item => item
   }), /*#__PURE__*/React.createElement(FlatList, {
     data: unique_tournaments,
     renderItem: renderTournaments,
     keyExtractor: item => item
-  })) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(View, {
-    nativeID: "closed_picks"
-  }, /*#__PURE__*/React.createElement(TouchableOpacity, {
-    style: {
-      padding: 10,
-      marginBottom: 15,
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      backgroundColor: Colors.brand.midnight,
-      marginTop: 15
-    },
-    onPress: () => handleShowComplete()
-  }, /*#__PURE__*/React.createElement(View, {
-    style: {
-      flexDirection: 'row',
-      alignItems: 'center'
-    }
-  }, /*#__PURE__*/React.createElement(Text, {
-    size: 18,
-    color: Colors.shades.white,
-    weight: "bold"
-  }, "Completed"), /*#__PURE__*/React.createElement(View, {
-    style: {
-      marginLeft: 8,
-      borderRadius: 100,
-      height: 24,
-      width: 24,
-      backgroundColor: Colors.highlights.highlight200,
-      justifyContent: 'center',
-      alignItems: 'center'
-    }
-  }, /*#__PURE__*/React.createElement(Text, {
-    size: 12,
-    color: Colors.shades.white,
-    weight: "bold",
-    textAlign: "center"
-  }, player_picks.filter(p => p.status === 'closed').length))), /*#__PURE__*/React.createElement(Icons.ChevronIcon, {
-    color: Colors.shades.white,
-    direction: show_completed ? 'up' : 'down',
-    size: 14
-  })), show_completed ? /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(FlatList, {
-    data: closed_team_event_ids,
-    renderItem: renderTeamEvents,
-    keyExtractor: item => item
-  })) : /*#__PURE__*/React.createElement(React.Fragment, null)))), player && !hide_player ? /*#__PURE__*/React.createElement(View, {
-    style: {
-      flexDirection: 'row',
-      padding: 10,
-      backgroundColor: Colors.shades.shade100,
-      borderBottomLeftRadius: 22,
-      borderBottomRightRadius: 22
-    }
-  }, /*#__PURE__*/React.createElement(TouchableOpacity, {
-    style: {
-      flex: 1,
-      flexDirection: 'row',
-      alignItems: 'center'
-    },
-    onPress: () => setProfileVisible(!profile_visible)
-  }, /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Image, {
-    source: {
-      uri: player.profile_pic && player.profile_pic != '' ? player.profile_pic : 'https://res.cloudinary.com/hoabts6mc/image/upload/v1689262384/default-avatar_bbkn2t.png'
-    },
-    style: {
-      height: 40,
-      width: 40,
-      borderRadius: 100
-    },
-    resizeMode: "cover"
-  })), /*#__PURE__*/React.createElement(View, {
-    style: {
-      flex: 1,
-      flexDirection: 'row',
-      marginLeft: 10
-    }
-  }, /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Text, {
-    size: 12,
-    color: Colors.brand.midnight,
-    weight: "regular"
-  }, "Playing as"), /*#__PURE__*/React.createElement(Text, {
-    style: {
-      marginTop: 3
-    },
-    size: 12,
-    color: Colors.brand.midnight,
-    weight: "bold"
-  }, player.username)))), player_balance ? /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Text, {
-    size: 12,
-    color: Colors.brand.midnight,
-    textAlign: "right"
-  }, competition.market_type == 'FOR_MONEY' ? 'USD' : 'Edge Coins'), /*#__PURE__*/React.createElement(Text, {
-    style: {
-      marginTop: 3
-    },
-    size: 14,
-    color: Colors.brand.midnight,
-    weight: "bold",
-    textAlign: "right"
-  }, competition.market_type == 'FOR_MONEY' ? `$${player_balance.balance.toFixed(2)}` : `E${player_balance.free_market_balance.toFixed(2)}`)) : /*#__PURE__*/React.createElement(React.Fragment, null)) : /*#__PURE__*/React.createElement(React.Fragment, null), show_full_leaderboard ? /*#__PURE__*/React.createElement(View, {
-    style: {
-      flex: 1,
-      position: 'absolute',
-      top: 0,
-      right: 0,
-      left: 0,
-      bottom: 0,
-      backgroundColor: Colors.shades.black_faded
-    }
-  }, /*#__PURE__*/React.createElement(SpringView, {
-    slide: "vertical",
-    to: 0,
-    from: 1000
-  }, /*#__PURE__*/React.createElement(CompetitionLeaderboard, {
-    competition: competition,
-    competition_type: competition_type,
-    height: height,
-    onSeeFull: () => setShowFullLeaderboard(false),
-    view_mode: "full",
-    onLeaderSelect: player => setViewingLeader(player),
-    viewer_id: player?.player_id
-  }))) : /*#__PURE__*/React.createElement(React.Fragment, null), viewing_leader ? /*#__PURE__*/React.createElement(View, {
-    style: {
-      flex: 1,
-      position: 'absolute',
-      top: 0,
-      right: 0,
-      left: 0,
-      bottom: 0,
-      backgroundColor: Colors.shades.black_faded
-    }
-  }, /*#__PURE__*/React.createElement(SpringView, {
-    slide: "vertical",
-    to: 0,
-    style: {
-      flex: 1
-    },
-    from: 1000
-  }, /*#__PURE__*/React.createElement(LeaderPicks, {
-    height: height,
-    markets: markets,
-    competition_type: competition_type,
-    competition_matches: competition_matches,
-    competition_match_markets: competition_match_markets,
-    events: events,
-    matches: matches,
-    tournaments: tournaments,
-    athletes: athletes,
-    teams: [],
-    competition: competition,
-    leader: viewing_leader,
-    onClose: () => setViewingLeader(undefined)
-  }))) : /*#__PURE__*/React.createElement(React.Fragment, null), draft_player_pick?.draft_pick ? /*#__PURE__*/React.createElement(View, {
-    style: {
-      position: 'absolute',
-      top: 0,
-      right: 0,
-      left: 0,
-      bottom: 0,
-      backgroundColor: Colors.shades.black_faded,
-      justifyContent: 'flex-end',
-      alignItems: 'center'
-    }
-  }, /*#__PURE__*/React.createElement(SpringView, {
-    slide: "vertical",
-    to: 0,
-    from: 200
-  }, /*#__PURE__*/React.createElement(WagerPickForm, {
-    event_start: draft_player_pick.event_start ?? '',
-    event_title: draft_player_pick.event_title ?? '',
-    width: width,
-    balance: authenticated_competition_player?.wager_based_balance ?? 0,
-    loading: pick_loading,
-    player_pick: draft_player_pick.draft_pick,
-    onCancel: () => setDraftPlayerPick({}),
-    onSubmit: pp => handleWagerSubmit(pp)
-  }))) : /*#__PURE__*/React.createElement(React.Fragment, null), show_season && competition_season && competition.competition_season_id ? /*#__PURE__*/React.createElement(View, {
-    style: {
-      position: 'absolute',
-      top: 0,
-      right: 0,
-      left: 0,
-      bottom: 0,
-      backgroundColor: Colors.shades.black_faded,
-      justifyContent: 'flex-end',
-      alignItems: 'center'
-    }
-  }, /*#__PURE__*/React.createElement(SpringView, {
-    slide: "vertical",
-    to: 0,
-    from: 1000
-  }, /*#__PURE__*/React.createElement(SeasonInfoModal, {
-    competition_season: competition_season,
-    competition_types: competition_types,
-    competition_result_types: competition_result_types,
-    width: width,
-    height: height,
-    onSelectCompetition: competition => {
-      setShowSeason(false);
-      if (onChangeCompetition) {
-        return onChangeCompetition(competition.competition_id);
-      }
-    },
-    onClose: () => setShowSeason(false)
-  }))) : /*#__PURE__*/React.createElement(React.Fragment, null), show_enter_prompt ? /*#__PURE__*/React.createElement(View, {
-    style: {
-      position: 'absolute',
-      top: 0,
-      right: 0,
-      left: 0,
-      bottom: 0,
-      backgroundColor: Colors.shades.black_faded,
-      justifyContent: 'flex-end',
-      alignItems: 'center'
-    }
-  }, /*#__PURE__*/React.createElement(SpringView, {
-    slide: "vertical",
-    to: 0,
-    from: 200
-  }, /*#__PURE__*/React.createElement(EnterCompetitionPrompt, {
-    player: player,
-    width: width,
-    competition: competition,
-    competition_type: competition_type,
-    competition_result_type: competition_result_type,
-    onVerify: () => handleProfile('unverified'),
-    onCancel: () => setShowEnterPrompt(false),
-    onEnter: promo_balance => handleEnterCompetition(promo_balance)
-  }))) : /*#__PURE__*/React.createElement(React.Fragment, null), show_rules ? /*#__PURE__*/React.createElement(View, {
-    style: {
-      position: 'absolute',
-      top: 0,
-      right: 0,
-      left: 0,
-      bottom: 0,
-      padding: 10,
-      backgroundColor: Colors.shades.black_faded,
-      justifyContent: 'center',
-      alignItems: 'center'
-    }
-  }, /*#__PURE__*/React.createElement(SpringView, {
-    slide: "vertical",
-    to: 0,
-    from: 1000
-  }, /*#__PURE__*/React.createElement(CompetitionTypeCard, {
-    visible: show_rules ? true : false,
-    init_view: "type",
-    onClose: () => setShowRules(false),
-    competition: competition,
-    competition_type: competition_type,
-    competition_result_type: competition_result_type,
-    competition_payout_types: competition_payout_types
-  }))) : /*#__PURE__*/React.createElement(React.Fragment, null), nav_out_prompt.visible ? /*#__PURE__*/React.createElement(View, {
-    style: {
-      flex: 1,
-      position: 'absolute',
-      top: 0,
-      right: 0,
-      left: 0,
-      bottom: 0,
-      backgroundColor: Colors.shades.black_faded,
-      justifyContent: 'center',
-      alignItems: 'center'
-    }
-  }, /*#__PURE__*/React.createElement(SpringView, {
-    slide: "vertical",
-    to: 0,
-    from: 1000
-  }, /*#__PURE__*/React.createElement(NavOutPrompt, {
-    accept_title: nav_out_prompt.accept_title,
-    body: nav_out_prompt.body ?? '',
-    cancel_title: nav_out_prompt.cancel_title,
-    code_details: code_details,
-    title: nav_out_prompt.title ?? '',
-    max_width: width * 0.8,
-    hide_accept: nav_out_prompt.hide_accept,
-    image_url: nav_out_prompt.image_url,
-    onCancel: () => setNavOutPrompt({
-      visible: false
-    }),
-    onAccept: () => {
-      if (nav_out_prompt.url) {
-        window.open(nav_out_prompt.url, '_blank');
-      }
-      setNavOutPrompt({
-        visible: false
-      });
-    }
   }))) : /*#__PURE__*/React.createElement(React.Fragment, null));
 };
 export default CompetitionPlay;