be-components 3.3.6 → 3.3.8

package/lib/module/Competition/index.js

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import { CompetitionApi, CompetitionHelpers, CompetitionMatchApi, CompetitionPlayerApi, PlayerPicksApi } from './api';
-import { View, ScrollView, Image, TouchableOpacity, ActivityIndicator, Modal } from 'react-native';
+import { Image, ActivityIndicator, Modal, FlatList } from 'react-native';
 import { view_styles } from '../constants/styles';
-import { Button, ConfirmationModal, Icons, Text } from '../Components';
+import { ConfirmationModal, Icons } from '../Components';
 import Colors from '../constants/colors';
 import CompetitionInfoCard from './components/CompetitionInfoCard';
 import CompetitionLeaderboard from './components/CompetitionLeaderboard';
@@ -12,6 +12,9 @@ import EnterCompetitionPrompt from './components/EnterCompetitionPrompt';
 import moment from 'moment-mini';
 import LeaderPicks from './components/LeaderPicks';
 import SeasonCard from './components/SeasonCard';
+import { Button, Text, View } from '../Components/Themed';
+import { useColors } from '../constants/useColors';
+const competition_sections = ['header', 'join', 'details', 'leaderboard', 'play'];
 const CompetitionModule = ({
   competition_id,
   player_id,
@@ -22,6 +25,7 @@ const CompetitionModule = ({
   onClose,
   onViewCompetitionSeason
 }) => {
+  const C = useColors();
   const [viewing_leader, setViewingLeader] = useState();
   const [show_full_leaderboard, setShowFullLeaderboard] = useState(false);
   const [module_size, setModuleSize] = useState({
@@ -315,6 +319,171 @@ const CompetitionModule = ({
       });
     }
   };
+  const renderSections = data => {
+    if (!competition) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null);
+    }
+    switch (data.item) {
+      case 'header':
+        return /*#__PURE__*/React.createElement(View, {
+          type: "header",
+          nativeID: "competition_header",
+          style: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            padding: 20,
+            borderBottomWidth: 1,
+            borderColor: C.borders.light
+          }
+        }, /*#__PURE__*/React.createElement(View, {
+          transparent: true
+        }, /*#__PURE__*/React.createElement(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"
+        })), /*#__PURE__*/React.createElement(View, {
+          transparent: true,
+          style: {
+            flex: 1,
+            marginLeft: 10,
+            marginRight: 10
+          }
+        }, /*#__PURE__*/React.createElement(Text, {
+          theme: "h1"
+        }, competition.competition_name), /*#__PURE__*/React.createElement(Text, {
+          style: {
+            marginTop: 4
+          },
+          theme: "h2"
+        }, competition.competition_description)), /*#__PURE__*/React.createElement(Button, {
+          float: true,
+          onPress: () => onShareCompetition(competition)
+        }, /*#__PURE__*/React.createElement(Icons.ShareIcon, {
+          color: C.text.h1,
+          size: 14
+        })));
+      case 'join':
+        return /*#__PURE__*/React.createElement(View, {
+          transparent: true
+        }, competition_season ? /*#__PURE__*/React.createElement(SeasonCard, {
+          competition_season: competition_season,
+          authenticated_competition_player: authenticated_competition_player,
+          onViewSeason: cs => onViewCompetitionSeason(cs)
+        }) : /*#__PURE__*/React.createElement(View, {
+          transparent: true,
+          type: "header",
+          style: {
+            flexDirection: 'row',
+            padding: 10
+          }
+        }, /*#__PURE__*/React.createElement(View, {
+          transparent: true,
+          style: {
+            flex: 1
+          }
+        }, /*#__PURE__*/React.createElement(Text, {
+          size: 12,
+          theme: "description"
+        }, competition.status == 'closed' ? 'COMPLETED' : in_progress ? 'IN PROGRESS' : 'JOIN UNTIL'), in_progress ? /*#__PURE__*/React.createElement(Text, {
+          style: {
+            marginTop: 5
+          },
+          theme: "h2"
+        }, moment(competition.scheduled_datetime).format('MMM DD hh:mm a')) : /*#__PURE__*/React.createElement(Text, {
+          style: {
+            marginTop: 5
+          },
+          theme: "h2"
+        }, moment(competition.scheduled_datetime).format('MMM DD hh:mm a'))), !authenticated_competition_player ? /*#__PURE__*/React.createElement(Button, {
+          style: {
+            opacity: can_join ? 1 : 0.5
+          },
+          disabled: !can_join,
+          loading: loading,
+          title: `JOIN`,
+          type: "success",
+          onPress: () => {
+            if (competition.competition_season_id) {
+              return alert('Please select the season to join!');
+            }
+            setShowEnterPrompt(true);
+          }
+        }) : competition.status != 'closed' ? /*#__PURE__*/React.createElement(Button, {
+          style: {
+            opacity: can_leave ? 1 : 0.5
+          },
+          title: "LEAVE",
+          loading: loading,
+          type: "error",
+          onPress: () => {
+            if (competition.competition_season_id) {
+              return alert('You can only leave via the season');
+            }
+            if (!can_leave) {
+              return alert('Please remove all picks and try again');
+            }
+            handleLeaveCompetition();
+          }
+        }) : /*#__PURE__*/React.createElement(React.Fragment, null)));
+      case 'details':
+        if (!competition || !competition_type || !competition_result_type) {
+          return /*#__PURE__*/React.createElement(React.Fragment, null);
+        }
+        return /*#__PURE__*/React.createElement(CompetitionInfoCard, {
+          competition: competition,
+          competition_type: competition_type,
+          competition_result_type: competition_result_type,
+          competition_payouts: competition_payout_types.filter(cpt => cpt.competition_result_type_id == competition_result_type?.competition_result_type_id)
+        });
+      case 'leaderboard':
+        if (!competition_type) {
+          return /*#__PURE__*/React.createElement(React.Fragment, null);
+        }
+        return /*#__PURE__*/React.createElement(CompetitionLeaderboard, {
+          competition: competition,
+          width: module_size.width,
+          competition_type: competition_type,
+          height: module_size.height,
+          onLeaderSelect: player => setViewingLeader(player),
+          view_mode: "short",
+          onSeeFull: () => setShowFullLeaderboard(true),
+          viewer_id: player_id
+        });
+      case 'play':
+        if (!competition || !competition_type) {
+          return /*#__PURE__*/React.createElement(React.Fragment, null);
+        }
+        return /*#__PURE__*/React.createElement(CompetitionPlay, {
+          competition: competition,
+          competition_type: competition_type,
+          competition_matches: competition_matches,
+          competition_match_markets: competition_match_markets,
+          leagues: leagues,
+          events: events,
+          pick_loading: pick_loading,
+          athletes: athletes,
+          markets: markets,
+          tournaments: tournaments,
+          matches: matches,
+          player_picks: player_picks,
+          player_id: player_id,
+          competition_players: competition_players,
+          authenticated_competition_player: authenticated_competition_player,
+          height: module_size.height,
+          width: module_size.width,
+          onPick: handlePick,
+          onRequestAuthentication: () => onRequestAuthentication(competition.auth_strategy_id)
+        });
+      default:
+        return /*#__PURE__*/React.createElement(React.Fragment, null);
+    }
+  };
   if (!competition || !competition_type || !competition_result_type) {
     return /*#__PURE__*/React.createElement(View, {
       style: {
@@ -331,11 +500,7 @@ const CompetitionModule = ({
   }
   return /*#__PURE__*/React.createElement(View, {
     style: {
-      flex: 1
-    }
-  }, /*#__PURE__*/React.createElement(ScrollView, {
-    style: {
-      flex: 1
+      flexGrow: 1
     },
     onLayout: ev => {
       const {
@@ -347,158 +512,17 @@ const CompetitionModule = ({
         height
       });
     }
-  }, /*#__PURE__*/React.createElement(View, {
-    style: {
-      backgroundColor: Colors.shades.white
-    }
-  }, /*#__PURE__*/React.createElement(View, {
-    nativeID: "competition_header",
-    style: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      padding: 20,
-      borderBottomWidth: 1,
-      borderColor: Colors.shades.shade600
-    }
-  }, /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(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"
-  })), /*#__PURE__*/React.createElement(View, {
-    style: {
-      flex: 1,
-      marginLeft: 10
-    }
-  }, /*#__PURE__*/React.createElement(Text, {
-    theme: "header"
-  }, competition.competition_name), /*#__PURE__*/React.createElement(Text, {
-    style: {
-      marginTop: 4
-    },
-    theme: "header_2>"
-  }, competition.competition_description)), /*#__PURE__*/React.createElement(TouchableOpacity, {
-    style: {
-      paddingLeft: 10
-    },
-    onPress: () => onShareCompetition(competition)
-  }, /*#__PURE__*/React.createElement(Icons.ShareIcon, {
-    color: Colors.brand.midnight,
-    size: 14
-  }))), competition_season ? /*#__PURE__*/React.createElement(SeasonCard, {
-    competition_season: competition_season,
-    authenticated_competition_player: authenticated_competition_player,
-    onViewSeason: cs => onViewCompetitionSeason(cs)
-  }) : /*#__PURE__*/React.createElement(View, {
-    style: {
-      flexDirection: 'row',
-      padding: 10,
-      backgroundColor: Colors.shades.shade100
-    }
-  }, /*#__PURE__*/React.createElement(View, {
-    style: {
-      flex: 1
-    }
-  }, /*#__PURE__*/React.createElement(Text, {
-    size: 12,
-    color: Colors.brand.midnight,
-    weight: "regular"
-  }, competition.status == 'closed' ? 'COMPLETED' : in_progress ? 'IN PROGRESS' : 'JOIN UNTIL'), in_progress ? /*#__PURE__*/React.createElement(Text, {
-    style: {
-      marginTop: 5
-    },
-    size: 12,
-    color: Colors.brand.midnight,
-    weight: "bold"
-  }, moment(competition.scheduled_datetime).format('MMM DD hh:mm a')) : /*#__PURE__*/React.createElement(Text, {
-    style: {
-      marginTop: 5
-    },
-    size: 12,
-    color: Colors.brand.midnight,
-    weight: "bold"
-  }, moment(competition.scheduled_datetime).format('MMM DD hh:mm a'))), !authenticated_competition_player ? /*#__PURE__*/React.createElement(Button, {
-    style: {
-      opacity: can_join ? 1 : 0.5
-    },
-    disabled: !can_join,
-    loading: loading,
-    title: `JOIN`,
-    title_color: Colors.shades.white,
-    backgroundColor: Colors.utility.success,
-    onPress: () => {
-      if (competition.competition_season_id) {
-        return alert('Please select the season to join!');
-      }
-      setShowEnterPrompt(true);
-    }
-  }) : competition.status != 'closed' ? /*#__PURE__*/React.createElement(Button, {
-    style: {
-      flex: 1,
-      opacity: can_leave ? 1 : 0.5
-    },
-    title: "LEAVE",
-    loading: loading,
-    title_color: Colors.shades.white,
-    backgroundColor: Colors.utility.error,
-    onPress: () => {
-      if (competition.competition_season_id) {
-        return alert('You can only leave via the season');
-      }
-      if (!can_leave) {
-        return alert('Please remove all picks and try again');
-      }
-      handleLeaveCompetition();
-    }
-  }) : /*#__PURE__*/React.createElement(React.Fragment, null))), /*#__PURE__*/React.createElement(CompetitionInfoCard, {
-    competition: competition,
-    competition_type: competition_type,
-    competition_result_type: competition_result_type,
-    competition_payouts: competition_payout_types.filter(cpt => cpt.competition_result_type_id == competition_result_type?.competition_result_type_id)
-  }), /*#__PURE__*/React.createElement(CompetitionLeaderboard, {
-    competition: competition,
-    width: module_size.width,
-    competition_type: competition_type,
-    height: module_size.height,
-    onLeaderSelect: player => setViewingLeader(player),
-    view_mode: "short",
-    onSeeFull: () => setShowFullLeaderboard(true),
-    viewer_id: player_id
-  }), /*#__PURE__*/React.createElement(CompetitionPlay, {
-    competition: competition,
-    competition_type: competition_type,
-    competition_matches: competition_matches,
-    competition_match_markets: competition_match_markets,
-    leagues: leagues,
-    events: events,
-    pick_loading: pick_loading,
-    athletes: athletes,
-    markets: markets,
-    tournaments: tournaments,
-    matches: matches,
-    player_picks: player_picks,
-    player_id: player_id,
-    competition_players: competition_players,
-    authenticated_competition_player: authenticated_competition_player,
-    height: module_size.height,
-    width: module_size.width,
-    onPick: handlePick,
-    onRequestAuthentication: () => onRequestAuthentication(competition.auth_strategy_id)
-  }), /*#__PURE__*/React.createElement(View, {
+  }, /*#__PURE__*/React.createElement(FlatList, {
+    key: `competition_sections`,
+    data: competition_sections,
+    keyExtractor: item => item,
+    renderItem: renderSections
+  }), player?.player_id == competition.admin_id ? /*#__PURE__*/React.createElement(View, {
+    float: true,
+    type: "row",
     style: {
-      ...view_styles.section
-    }
-  })), player?.player_id == competition.admin_id ? /*#__PURE__*/React.createElement(View, {
-    style: {
-      ...view_styles.body_row,
       padding: 0,
-      paddingRight: 10,
-      backgroundColor: Colors.shades.shade100
+      paddingRight: 10
     }
   }, /*#__PURE__*/React.createElement(Image, {
     source: {
@@ -516,17 +540,17 @@ const CompetitionModule = ({
       padding: 5
     }
   }, /*#__PURE__*/React.createElement(Text, {
-    theme: "header_2"
+    theme: "h2"
   }, "ADMIN ACTIONS"), /*#__PURE__*/React.createElement(Text, {
     style: {
       marginTop: 3
     },
-    theme: "body_2"
+    theme: "description"
   }, "Press manage to make changes to this competition")), /*#__PURE__*/React.createElement(Button, {
+    float: true,
     title: "MANAGE",
-    title_color: Colors.shades.white,
-    backgroundColor: Colors.brand.electric,
-    onPress: () => onManageCompetition(competition_id)
+    onPress: () => onManageCompetition(competition_id),
+    type: "info"
   })) : /*#__PURE__*/React.createElement(React.Fragment, null), show_full_leaderboard ? /*#__PURE__*/React.createElement(View, {
     style: {
       position: 'absolute',
@@ -545,7 +569,7 @@ const CompetitionModule = ({
     onClose: () => setShowFullLeaderboard(false),
     onSeeFull: () => setShowFullLeaderboard(!show_full_leaderboard),
     viewer_id: player_id
-  }), "xxw            ") : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(View, {
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(View, {
     style: {
       position: 'absolute'
     }
@@ -560,16 +584,16 @@ const CompetitionModule = ({
       ...nav_out,
       visible: false
     })
-  })), draft_player_pick?.draft_pick ? /*#__PURE__*/React.createElement(View, {
+  })), draft_player_pick?.draft_pick ? /*#__PURE__*/React.createElement(Modal, {
+    transparent: true,
+    visible: draft_player_pick.draft_pick ? true : false,
+    onRequestClose: () => setShowEnterPrompt(false),
+    animationType: "slide"
+  }, /*#__PURE__*/React.createElement(View, {
+    type: "blur",
     style: {
-      position: 'absolute',
-      top: 0,
-      right: 0,
-      left: 0,
-      bottom: 0,
-      backgroundColor: Colors.shades.black_faded,
-      justifyContent: 'flex-end',
-      alignItems: 'center'
+      flex: 1,
+      justifyContent: 'flex-end'
     }
   }, /*#__PURE__*/React.createElement(WagerPickForm, {
     event_start: draft_player_pick.event_start ?? '',
@@ -580,16 +604,16 @@ const CompetitionModule = ({
     player_pick: draft_player_pick.draft_pick,
     onCancel: () => setDraftPlayerPick({}),
     onSubmit: pp => handleWagerSubmit(pp)
-  })) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(Modal, {
+  }))) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(Modal, {
     transparent: true,
     visible: show_enter_prompt,
     onRequestClose: () => setShowEnterPrompt(false),
     animationType: "slide"
   }, /*#__PURE__*/React.createElement(View, {
+    type: "blur",
     style: {
       flex: 1,
-      justifyContent: 'flex-end',
-      backgroundColor: Colors.shades.black_faded
+      justifyContent: 'flex-end'
     }
   }, /*#__PURE__*/React.createElement(EnterCompetitionPrompt, {
     competition: competition,
@@ -601,16 +625,16 @@ const CompetitionModule = ({
     onCancel: () => setShowEnterPrompt(false),
     onEnter: promo_balance => handleEnterCompetition(promo_balance),
     onVerify: () => console.log('Handle verify')
-  }))), viewing_leader ? /*#__PURE__*/React.createElement(View, {
+  }))), /*#__PURE__*/React.createElement(Modal, {
+    transparent: true,
+    visible: viewing_leader ? true : false,
+    onRequestClose: () => setShowEnterPrompt(false),
+    animationType: "slide"
+  }, /*#__PURE__*/React.createElement(View, {
+    type: "blur",
     style: {
-      position: 'absolute',
-      top: 0,
-      right: 0,
-      left: 0,
-      bottom: 0,
-      backgroundColor: Colors.shades.black_faded,
-      justifyContent: 'flex-end',
-      alignItems: 'center'
+      flex: 1,
+      justifyContent: 'flex-end'
     }
   }, /*#__PURE__*/React.createElement(LeaderPicks, {
     competition: competition,
@@ -627,7 +651,7 @@ const CompetitionModule = ({
     height: module_size.height,
     width: module_size.width,
     onClose: () => setViewingLeader(undefined)
-  })) : /*#__PURE__*/React.createElement(React.Fragment, null), competition.status == 'inactive' ? /*#__PURE__*/React.createElement(View, {
+  }))), competition.status == 'inactive' ? /*#__PURE__*/React.createElement(View, {
     style: {
       position: 'absolute',
       top: 0,
@@ -652,7 +676,7 @@ const CompetitionModule = ({
       backgroundColor: Colors.shades.shade100
     }
   }, /*#__PURE__*/React.createElement(Text, {
-    theme: "header"
+    theme: "h1"
   }, "Competition Has Been Deleted")), /*#__PURE__*/React.createElement(View, {
     style: {
       ...view_styles.section_body,
@@ -669,7 +693,7 @@ const CompetitionModule = ({
     },
     resizeMode: "cover"
   }), /*#__PURE__*/React.createElement(Text, {
-    theme: "header_2"
+    theme: "h1"
   }, competition.competition_name)), /*#__PURE__*/React.createElement(View, {
     style: {
       ...view_styles.section_footer
@@ -679,9 +703,7 @@ const CompetitionModule = ({
     style: {
       flex: 1
     },
-    title_color: Colors.shades.white,
-    backgroundColor: Colors.utility.error,
-    padding: 15,
+    type: "close",
     onPress: () => onClose()
   })))) : /*#__PURE__*/React.createElement(React.Fragment, null), competition.status == 'paused' ? /*#__PURE__*/React.createElement(View, {
     style: {
@@ -708,7 +730,7 @@ const CompetitionModule = ({
       backgroundColor: Colors.shades.shade100
     }
   }, /*#__PURE__*/React.createElement(Text, {
-    theme: "header"
+    theme: "h1"
   }, "Competition Is Paused")), /*#__PURE__*/React.createElement(View, {
     style: {
       ...view_styles.section_body,
@@ -725,7 +747,7 @@ const CompetitionModule = ({
     },
     resizeMode: "cover"
   }), /*#__PURE__*/React.createElement(Text, {
-    theme: "header_2"
+    theme: "h2"
   }, competition.competition_name)), /*#__PURE__*/React.createElement(View, {
     style: {
       ...view_styles.section_footer
@@ -735,9 +757,7 @@ const CompetitionModule = ({
     style: {
       flex: 1
     },
-    title_color: Colors.shades.white,
-    backgroundColor: Colors.utility.error,
-    padding: 15,
+    type: "close",
     onPress: () => onClose()
   })))) : /*#__PURE__*/React.createElement(React.Fragment, null));
 };